*** uniapp页面在App端的渲染引擎默认是系统webview（不是手机自带浏览器，是rom的webview [rom:手机存储器，相当于手机内存，但不是手机内存] ）,非H5端的js是运行在一个独立的js core(ios)或v8(android)下，并不是运行在浏览器里。uni-app 基于Vue 2.0实现 ***
1、uniapp使用HTML5+注意事项
a、条件编译调用HTML5+
小程序及 H5 等平台是没有 HTML5+ 扩展规范的，因此在 uni-app 调用 HTML5+ 的扩展规范时，需要注意使用条件编译。否则运行到h5、小程序等平台会出现 plus is not defined错误。
// #ifdef APP-PLUS
var appid = plus.runtime.appid;
console.log('应用的 appid 为：' + appid);
// #endif
b、uniapp不需要 plusready
在html中使用plus的api，需要等待plus ready。 而uni-app不需要等，可以直接使用。而且如果你调用plus ready，反而不会触发。
// uniapp不需要plusready方法
document.addEventListener('plusready',function () {
// 在这里调用5+ API
},false);
2、条件编译(跨端兼容)
为什么要使用条件编译：如果通过大量写 if else，会造成代码执行性能低下和管理混乱，编译到不同的工程后二次修改，会让后续升级变的很麻烦。
写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾
#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称
1、平台名称有：APP-PLUS(APP端)、APP-PLUS-NVUE或APP-NVUE(App nvue)、H5(H5端)、
MP-WEIXIN(微信小程序)、MP-ALIPAY(支付宝小程序)、MP-BAIDU(百度小程序)、
MP-TOUTIAO(字节跳动小程序)、MP-QQ(QQ小程序)、MP-360(360小程序)、MP(以上所有带MP开头的都包括)
2、条件编译APP-PLUS包含APP-NVUE和APP-VUE，APP-PLUS-NVUE和APP-NVUE没什么区别，为了简写后面出了APP-NVUE ；
3、**注意**：
条件编译是利用注释实现的，在不同语法里注释写法不一样，
js 使用 // 条件语句
css 使用 /* 条件语句 */
vue/nvue 模板里使用 <!-- 条件语句 -->
4、pages.json 使用 // 条件语句
不同平台下的特有功能，以及小程序平台的分包，都可以通过 pages.json 的条件编译来更好地实现。这样，就不会在其它平台产生多余的资源，进而减小包体积。
5、static目录也可以条件编译
在不同平台，引用的静态资源可能也存在差异，通过 static 的的条件编译可以解决此问题，static 目录下新建不同平台的专有目录（目录名称同 %PLATFORM% 值域,但字母均为小写），专有目录下的静态资源只有在特定平台才会编译进去。
如以下目录结构，a.png 只有在微信小程序平台才会编译进去，b.png 在所有平台都会被编译。
┌─static
│ ├─mp-weixin \\ 只会在微信小程序平台才会编译此文件
│ │ └─a.png
│ └─b.png
├─main.js
├─App.vue
├─manifest.json
└─pages.json
6、整体目录条件编译
如果想把各平台的页面文件更彻底的分开，也可以在uni-app项目根目录创建platforms目录，然后在下面进一步创建app-plus、mp-weixin等子目录，存放不同平台的文件。
**注意** `platforms`目录下只支持放置页面文件（即页面vue文件），如果需要对其他资源条件编译建议使用static目录条件编译
网友评论