uni-app开发注意事项

闲疯盛世 發表於 2020-9-24 10:25:00

<h2 id="关于vue">关于vue</h2>
1、注意 如果使用老版的非自定义组件模式，即manifest中<code>"usingComponents":false</code>，部分模版语法不支持，但此模式已于2019年11月起下线。
2、<code>data</code> 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。
3、class 支持的语法:
<pre><code class="language-html"><view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>
<view class="static" :class="">333</view>
<view class="static" v-bind:class="">444</view>
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>
</code></pre>
style 支持的语法:
<pre><code class="language-html"><view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>
</code></pre>
4、非H5端不支持 Vue官方文档：Class 与 Style 绑定中的 <code>classObject</code> 和 <code>styleObject</code> 语法。
5、注意：以:style=""这样的方式设置px像素值，其值为实际像素，不会被编译器转换为相对单位。
此外还可以用 <code>computed</code> 方法生成 <code>class</code> 或者 <code>style</code> 字符串，插入到页面中
6、用在组件上非H5端暂不支持，在自定义组件上使用 <code>Class</code> 与 <code>Style</code> 绑定
7、如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <code><input></code> 中的输入内容，<code><switch></code> 的选中状态），需要使用 <code>:key</code> 来指定列表中项目的唯一的标识符。
<code>:key</code> 的值以两种形式提供
<ul>
<li>使用 <code>v-for</code> 循环 <code>array</code> 中 <code>item</code> 的某个 <code>property</code>，该 <code>property</code> 的值需要是列表中唯一的字符串或数字，且不能动态改变。</li>
<li>使用 <code>v-for</code> 循环中 <code>item</code> 本身，这时需要 <code>item</code> 本身是一个唯一的字符串或者数字</li>
</ul>
当数据改变触发渲染层重新渲染的时候，会校正带有 <code>key</code> 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 :key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
8、在H5平台使用 v-for 循环整数时和其他平台存在差异，如 <code>v-for="(item, index) in 10"</code> 中，在H5平台 item 从 1 开始，其他平台 item 从 0 开始，可使用第二个参数 index 来保持一致。
9、在非H5平台循环对象时不支持第三个参数，如 <code>v-for="(value, name, index) in object"</code> 中，index 参数是不支持的。
10、为兼容各端，事件需使用 <code>v-on</code> 或 <code>@</code> 的方式绑定，请勿使用小程序端的<code>bind</code> 和 <code>catch</code> 进行事件绑定。
11、事件修饰符
<ul>
<li><code>.stop</code>：各平台均支持，使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为</li>
<li><code>.prevent</code> 仅在 H5 平台支持</li>
<li><code>.self</code>：仅在 H5 平台支持</li>
<li><code>.once</code>：仅在 H5 平台支持</li>
<li><code>.capture</code>：仅在 H5 平台支持</li>
<li><code>.passive</code>：仅在 H5 平台支持</li>
</ul>
12、若需要禁止蒙版下的页面滚动，可使用 <code>@touchmove.stop.prevent="moveHandle"</code>，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。
13、H5 的select 标签用 picker 组件进行代替
14、表单元素 radio 用 radio-group 组件进行代替
15、App端（vue页面V3编译模式）和H5端支持v-html，其他端不支持v-html。
16、uni-app只支持vue单文件组件（.vue 组件）。其他的诸如：动态组件，自定义 <code>render</code>，和<code><script type="text/x-template"></code> 字符串模版等，在非H5端不支持。
17、详细的非H5端不支持列表：
<ul>
<li><code>Slot</code>（<code>scoped</code> 暂时还没做支持）</li>
<li>动态组件</li>
<li>异步组件</li>
<li><code>inline-template</code></li>
<li><code>X-Templates</code></li>
<li><code>keep-alive</code></li>
<li><code>transition</code> （可使用 animation 或 CSS 动画替代）</li>
<li>老的非自定义组件编译模式不支持在组件引用时，在组件上定义 <code>click</code> 等原生事件、<code>v-show</code>（可用 <code>v-if</code> 代替）和 <code>class</code> <code>style</code> 等样式属性(例：<code><card class="class-name"> </card></code> 样式是不会生效的)。建议更新为自定义组件模式</li>
<li>老的非自定义组件编译模式组件里使用 <code>slot</code> 嵌套的其他组件时不支持 <code>v-for</code>。建议更新为自定义组件模式</li>
</ul>
18、<code>uni-app</code> 内置了小程序的所有组件，比如： <code>picker</code>,<code>map</code> 等，需要注意的是原生组件上的事件绑定，需要以 <code>vue</code> 的事件绑定语法来绑定，如 <code>bindchange="eventName"</code> 事件，需要写成 <code>@change="eventName"</code>
19、<code>Vue.component</code> 的第一个参数必须是静态的字符串。
20、nvue页面暂不支持全局组件
21、在百度小程序中使用时，不要在 data 内使用 hidden ，可能会导致渲染错误
22、由于 <code>onError</code> 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 <code>app</code> 的根组件上添加名为 <code>onError</code> 的回调函数即可
23、当重复设置某些属性为相同的值时，不会同步到view层。例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。，可以通过监听scroll事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值
<h2 id="跨端开发注意事项">跨端开发注意事项</h2>
1、非H5端不支持*选择器；
2、body的元素选择器请改为page，同样，div和ul和li等改为view、span和font改为text、a改为navigator、img改为image...
3、非H5端默认并未启用 scoped，如需要隔离组件样式可以在 style 标签增加 scoped 属性，H5端为了隔离页面间的样式默认启用了 scoped
4、vue页面在App端，默认是被系统的webview渲染的（不是手机自带浏览器，是rom的webview），在较老的手机上，比如Android4.4、5.0或iOS8，很多css是不支持的，所以不要使用太新的css，会导致界面异常。
5、原生组件层级问题 H5没有原生组件概念问题，非H5端有原生组件并引发了原生组件层级高于前端组件的概念，要遮挡video、map等原生组件，请使用cover-view组件。
6、使用了非H5端不支持的API 小程序和App的js运行在jscore下而不是浏览器里，没有浏览器专用的js对象，比如document、xmlhttp、cookie、window、location、navigator、localstorage、websql、indexdb、webgl等对象。
7、不要在引用组件的地方在组件属性上直接写 style="xx"，要在组件内部写样式
8、<code>url(//alicdn.net)</code>等路径，改为<code>url(https://alicdn.net)</code>，因为在App端//是file协议
9、v-html在h5和app-vue(v3编译模式)均支持，但小程序不支持
10、在 uni-app 2.4.7 以前，H5端不支持微信小程序自定义组件，即wxcomponets下的组件，此时可能产生兼容问题。从 2.4.7 起，H5也支持微信自定义组件，不再存在这这方面兼容问题。
11、在微信小程序端，<code>uni-app</code> 将数据绑定功能委托给<code>Vue</code>，开发者需按<code>Vue 2.0</code>的写法实现数据绑定，不支持微信小程序的数据绑定写法，
12、非H5端，不能使用浏览器自带对象，比如document、window、localstorage、cookie等，更不能使用jquery等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。
13、App端若要使用操作window、document的库，需要通过renderjs来实现。
14、uni-app的tag同小程序的tag，和HTML的tag不一样，比如div要改成view，span要改成text、a要改成navigator。
15、虽然大部分css样式在微信小程序和app中都可以支持，但推荐使用flex布局模型，这种布局更灵活高效且支持更多平台(比如nvue、快应用只支持flex布局)
16、单位方面，uni-app默认为rpx。这是一种可跨端的通用单位
17、每个要显示的页面，都要放到pages目录下，新建一个页面所在的目录，然后放同名目录的vue文件，比如project/pages/lista/lista.vue，并且在pages.json里配置。这与小程序的策略相同。
18、自定义组件，放到component目录
19、静态资源如图片，固定放到static目录下。这是webpack、mpvue的规则
20、H5 校验了更严格的 <code>vue</code> 语法，有些写法不规范会报警，比如： <code>data</code> 后面写对象会报警，必须写 <code>function</code>；不能修改 <code>props</code> 的值；组件最外层 <code>template</code> 节点下不允许包含多个节点等。
21、APP 和小程序的导航栏和 <code>tabbar</code> 均是原生控件，元素区域坐标是不包含原生导航栏和 <code>tabbar</code> 的；而 H5 里导航栏和 <code>tabbar</code> 是 div 模拟实现的，所以元素坐标会包含导航栏和tabbar的高度。为了优雅的解决多端高度定位问题，<code>uni-app</code> 新增了2个css变量：<code>--window-top</code> 和 <code>--window-bottom</code>，这代表了页面的内容区域距离顶部和底部的距离。举个实例，如果你想在原生<code>tabbar</code> 上方悬浮一个菜单，之前写 <code>bottom:0</code>。这样的写法编译到 h5 后，这个菜单会和 <code>tabbar</code> 重叠，位于屏幕底部。而改为使用 <code>bottom:var(--window-bottom)</code>，则不管在 app 下还是在h5下，这个菜单都是悬浮在 <code>tabbar</code> 上浮的。这就避免了写条件编译代码。当然仍然也可以使用 H5 的条件编译处理界面的不同。
22、CSS 內使用 <code>vh</code> 单位的时候注意 <code>100vh</code> 包含导航栏，使用时需要减去导航栏和 <code>tabBar</code> 高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。
23、组件内（页面除外）不支持 <code>onLoad</code>、<code>onShow</code> 等页面生命周期。
24、为避免和内置组件冲突，自定义组件请加上前缀（但不能是 u 和 uni）。比如可使用的自定义组件名称：<code>my-view</code>、<code>m-input</code>、<code>we-icon</code>，例如不可使用的自定义组件名称：<code>u-view</code>、<code>uni-input</code>，如果已有项目使用了可能造成冲突的名称，请修改名称，另外微信小程序下自定义组件名称不能以 wx 开头。
25、小程序工具提示vendor.js过大，已经跳过es6向es5转换。这个转换问题本身不用理会，因为vendor.js已经是es5的了。
关于体积控制，参考如下：
<ul>
<li>使用运行时代码压缩
<ul>
<li><code>HBuilderX</code>创建的项目勾选<code>运行-->运行到小程序模拟器-->运行时是否压缩代码</code></li>
<li><code>cli</code>创建的项目可以在<code>pacakge.json</code>中添加参数<code>--minimize</code>，示例：<code>"dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"</code></li>
</ul>
</li>
<li>使用分包优化，关于分包优化的说明</li>
</ul>

</div>
<div id="MySignature" role="contentinfo">
<hr/>
文章都是本人学习时的笔记整理，希望看完后能对您有所帮助，欢迎大家提意见，多多交流。
 
也有些文章是转载的，如果存在转载文章且没有标注转载地址的，请与我联系，马上处理。
 
自由转载-非商用-非衍生-保持署名。 
来源：https://www.cnblogs.com/rope/p/13722814.html

頁: [1]

琼殿技术论坛's Archiver

uni-app开发注意事项