uniapp 开发注意事项

1：v-show  改成 v-if 

2：<view v-if="typeof this.detailInfo.content == 'object'"></view> typeOf 这种写法在小程序不支持

3：如果是for 循环嵌套for 循环的话，:key=""  key的取值不能一样，否则会报错

1.static 目录下的 js 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。

2.css、less/scss 等资源同样不要放在 static 目录下，建议这些公用的资源放在 common 目录下。

3.template内引入静态资源，如image、video等标签的src属性时，可以使用相对路径或者绝对路径。

4.js文件不支持使用/开头的方式引入。

5.css文件或style标签内引入css文件时（scss、less文件同理），只能使用相对路径。

6.编译期判断环境可用条件编译，运行期判断可用uni.getSystemInfoSync().platform判断环境。

7.在字体或高度中使用了 rpx ，那么需注意这样的写法意味着随着屏幕变宽，字体会变大、高度会变大。如果你需要固定高度，则应该使用 px 。

8.App端，在 pages.json 里的 titleNView 或页面里写的 plus api 中涉及的单位，只支持 px，不支持 rpx。

9.小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以base64方式方可使用。

10.背景图片微信小程序不支持相对路径（真机不支持，开发工具支持）。

11.字体图标网络路径必须加协议头 https。

12.非 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块，安装的模块及其依赖的模块使用的 API 必须是 uni-app 已有的 API。

13.小程序组件需要放在项目特殊文件夹 wxcomponents（或 mycomponents、swancomponents）。

14.当需要在 vue 组件中使用小程序组件时，注意在 pages.json 的 globalStyle 中配置 usingComponents，而不是页面级配置。

15.以:style=""这样的方式设置px像素值，其值为实际像素，不会被编译器转换。

16.若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。

17.App端和H5端支持v-html，其他端不支持v-html。

18.uni-app不需要 plus ready 在html中使用plus的api。

19.在普通的 H5+ 项目中，需要使用 document.addEventListener 监听原生扩展的事件。uni-app 中，没有 document。可以使用 plus.globalEvent.addEventListener 来实现。

20.App端若要使用操作window、document的库，需要通过renderjs来实现。

21.tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花。

22.tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。

23.分包加载配置，subPackages 为小程序的分包加载机制。在App里始终为整包。subPackages 里的pages的路径是 root 下的相对路径，不是全路径。

24.splash（启动封面）是App必然存在的、不可取消的。splash只能是标准png，不要用jpg改名为png。

25.所有组件与属性名都是小写，单词之间以连字符-连接。

26.APP-vue和小程序中，请勿在 scroll-view 中使用 map、video 等原生组件。小程序中 scroll-view 中也不要使用 canvas、textarea 原生组件。

27.scroll-view 不适合放长列表，有性能问题。长列表滚动和下拉刷新，应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。

28.除了文本节点以外的其他节点都无法长按选中。

 29.如需调节checkbox,radio大小，可通过css的scale方法调节，如缩小到70%style="transform:scale(0.7)"。

30.页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题。

31.自定义组件里面使用 <image>时，若 src 使用相对路径可能出现路径查找失败的情况，故建议使用绝对路径。

32.App平台：使用 <video/> 组件，打包 App 时必须勾选 manifest.json->App 模块权限配置->VideoPlayer 模块。

33.App平台：如果使用的视频路径为本地路径，需要配置资源为释放模式：在 manifest.json 文件内 app-plus 节点下新增 runmode 配置，设置值为liberate。

34.webview在App 平台同时支持网络网页和本地网页，但本地网页及相关资源（js、css等文件）必须放在 uni-app 项目根目录->hybrid->html 文件夹下；小程序仅支持加载网络网页，不支持本地html。

35.H5端onBackPress只能监听页面导航栏的返回按钮的点击事件，不能监听浏览器返回以及手机的返回。

36.发出请求的method的值必须大写，有效值在不同平台差异说明不同。

37.localhost、127.0.0.1等服务器地址，只能在电脑端运行，手机端连接时不能访问。请使用标准IP并保证手机能连接电脑网络。

38.App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。

39.如果想打开web url，在App平台可以使用 plus.runtime.openURL或web-view组件；H5平台使用 window.open；小程序平台使用web-view组件（url需在小程序的联网白名单中）。

40.navigateTo, redirectTo 只能打开非 tabBar 页面,switchTab 只能打开 tabBar 页面.

41.H5端页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()导航到浏览器的其他历史记录.

42.App端如需选择非媒体文件，可在插件市场搜索文件选择，其中Android端可以使用Native.js，无需原生插件，而iOS端需要原生插件。

43.关于一些权限的使用，类似相机，语音，都要先判断一下设备的访问权限是否开启。

44.屏幕高度=状态栏高度+原生导航栏高度+可使用窗口高度+原生tabbar高度。

45.分享到 QQ 必须含有 href 链接，分享文字到 QQ 时，title 必选，不能直接分享到QQ空间，可以分享到QQ，然后在QQ的界面里选择QQ空间。

46.从APP分享到微信时，无法判断用户是否点击取消分享，因为微信官方禁掉了分享成功的返回值。

47.支付的传参要注意orderInfo在不同的环境下传参类型不一致。

48.关于文本超出展示...，需要在超出展示盒子的内部在内嵌一层子元素，否则app端会有问题。

页面生命周期

1.完全支持vue的生命周期

2.同时，增加了信息的生命周期，有了解过微信小程序，会更容易学习。

一.条件编译

有些功能h5没有，小程序有（例如：扫码）

官方文档链接地址：https://uniapp.dcloud.io/platform，

效果很不错，仔细看官网就可以，不难理解。

1.开发小程序中，微信，小程序，和支付宝的区别还是有的，可以在页面中进行区分

二.省市区选择器

uni-app上省市区选择器 mode = region

5+App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序
x	x	√	x	√	√

我们使用省市区选择器的位置还是比较多的

1.兼容支付宝小程序写法（使用支付宝小程序的三级联动）https://docs.alipay.com/mini/api/multi-level-select

2.兼容app+h5，使用uni-app的三级联动，或者pick

1.运行到微信开发者工具需要在Hbuilder中设置运行设置，选择微信开发者工具根目录，还需要在微信开发者工具中开启服务器配置才行

2.设置小程序配置把上传代码时样式自动补全和上传代码自动压缩勾上，打包时需要在微信开发者工具中右侧上方的详情里勾选增强编译

3.uni.setNavigationBarTitle({
                            title: title
                        })动态设置页面标题

4.<button open-type="contact">联系客服</button>直接可以跳转小程序客服，button ::after{ border:none; }去掉小程序button自带边框

5.更改搜索框软键盘确定文字为搜索，点击触发事件，但是需要完整代码，好像不能this.其他方法名()

<input confirm-type="search" @confirm="confirm" type="text" placeholder="请输入关键词" v-model="searchCont"/>

methods:{/* 键盘上完成的事件 */

confirm() {

//搜索的代码},

},

关于vue

1、注意 如果使用老版的非自定义组件模式，即manifest中"usingComponents":false，部分模版语法不支持，但此模式已于2019年11月起下线。

2、data 必须声明为返回一个初始数据对象的函数；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

3、class 支持的语法:

<view :class="{ active: isActive }">111</view>
<view class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }">222</view>
<view class="static" :class="[activeClass, errorClass]">333</view>
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">444</view>
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">555</view>

style 支持的语法:

<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">666</view>
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">777</view>

4、非H5端不支持 Vue官方文档：Class 与 Style 绑定 中的 classObject 和 styleObject 语法。

5、注意：以:style=""这样的方式设置px像素值，其值为实际像素，不会被编译器转换为相对单位。

此外还可以用 computed 方法生成 class 或者 style 字符串，插入到页面中

6、用在组件上非H5端暂不支持，在自定义组件上使用 Class 与 Style 绑定

7、如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input> 中的输入内容，<switch> 的选中状态），需要使用 :key 来指定列表中项目的唯一的标识符。

:key 的值以两种形式提供

• 使用 v-for 循环 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
• 使用 v-for 循环中 item 本身，这时需要 item 本身是一个唯一的字符串或者数字

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

如不提供 :key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

8、在H5平台 使用 v-for 循环整数时和其他平台存在差异，如 v-for="(item, index) in 10" 中，在H5平台 item 从 1 开始，其他平台 item 从 0 开始，可使用第二个参数 index 来保持一致。

9、在非H5平台 循环对象时不支持第三个参数，如 v-for="(value, name, index) in object" 中，index 参数是不支持的。

10、为兼容各端，事件需使用 v-on 或 @ 的方式绑定，请勿使用小程序端的bind 和 catch 进行事件绑定。

11、事件修饰符

• .stop：各平台均支持， 使用时会阻止事件冒泡，在非 H5 端同时也会阻止事件的默认行为
• .prevent 仅在 H5 平台支持
• .self：仅在 H5 平台支持
• .once：仅在 H5 平台支持
• .capture：仅在 H5 平台支持
• .passive：仅在 H5 平台支持

12、若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。

13、H5 的select 标签用 picker 组件进行代替

14、表单元素 radio 用 radio-group 组件进行代替

15、App端（vue页面V3编译模式）和H5端支持v-html，其他端不支持v-html。

16、uni-app只支持vue单文件组件（.vue 组件）。其他的诸如：动态组件，自定义 render，和<script type="text/x-template"> 字符串模版等，在非H5端不支持。

17、详细的非H5端不支持列表：

• Slot（scoped 暂时还没做支持）
• 动态组件
• 异步组件
• inline-template
• X-Templates
• keep-alive
• transition （可使用 animation 或 CSS 动画替代）
• 老的非自定义组件编译模式不支持在组件引用时，在组件上定义 click 等原生事件、v-show（可用 v-if 代替）和 class style 等样式属性(例：<card class="class-name"> </card> 样式是不会生效的)。建议更新为自定义组件模式
• 老的非自定义组件编译模式组件里使用 slot 嵌套的其他组件时不支持 v-for。建议更新为自定义组件模式

18、uni-app 内置了小程序的所有组件，比如： picker,map 等，需要注意的是原生组件上的事件绑定，需要以 vue 的事件绑定语法来绑定，如 bindchange="eventName" 事件，需要写成 @change="eventName"

19、Vue.component 的第一个参数必须是静态的字符串。

20、nvue页面暂不支持全局组件

21、在百度小程序中使用时，不要在 data 内使用 hidden ，可能会导致渲染错误

22、由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可

23、当重复设置某些属性为相同的值时，不会同步到view层。 例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。，可以通过监听scroll事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值

跨端开发注意事项

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、url(//alicdn.net)等路径，改为url(https://alicdn.net)，因为在App端//是file协议

9、v-html在h5和app-vue(v3编译模式)均支持，但小程序不支持

10、在 uni-app 2.4.7 以前，H5端不支持微信小程序自定义组件，即wxcomponets下的组件，此时可能产生兼容问题。从 2.4.7 起，H5也支持微信自定义组件，不再存在这这方面兼容问题。

11、在微信小程序端，uni-app 将数据绑定功能委托给Vue，开发者需按Vue 2.0的写法实现数据绑定，不支持微信小程序的数据绑定写法，

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 校验了更严格的 vue 语法，有些写法不规范会报警，比如： data 后面写对象会报警，必须写 function；不能修改 props 的值；组件最外层 template 节点下不允许包含多个节点等。

21、APP 和小程序的导航栏和 tabbar 均是原生控件，元素区域坐标是不包含原生导航栏和 tabbar 的；而 H5 里导航栏和 tabbar 是 div 模拟实现的，所以元素坐标会包含导航栏和tabbar的高度。为了优雅的解决多端高度定位问题，uni-app 新增了2个css变量：--window-top 和 --window-bottom，这代表了页面的内容区域距离顶部和底部的距离。举个实例，如果你想在原生tabbar 上方悬浮一个菜单，之前写 bottom:0。这样的写法编译到 h5 后，这个菜单会和 tabbar 重叠，位于屏幕底部。而改为使用 bottom:var(--window-bottom)，则不管在 app 下还是在h5下，这个菜单都是悬浮在 tabbar 上浮的。这就避免了写条件编译代码。当然仍然也可以使用 H5 的条件编译处理界面的不同。

22、CSS 內使用 vh 单位的时候注意 100vh 包含导航栏，使用时需要减去导航栏和 tabBar 高度，部分浏览器还包含浏览器操作栏高度，使用时请注意。

23、组件内（页面除外）不支持 onLoad、onShow 等页面生命周期。

24、为避免和内置组件冲突，自定义组件请加上前缀（但不能是 u 和 uni）。比如可使用的自定义组件名称：my-view、m-input、we-icon，例如不可使用的自定义组件名称：u-view、uni-input，如果已有项目使用了可能造成冲突的名称，请修改名称，另外微信小程序下自定义组件名称不能以 wx 开头。

25、小程序工具提示vendor.js过大，已经跳过es6向es5转换。这个转换问题本身不用理会，因为vendor.js已经是es5的了。

关于体积控制，参考如下：

• 使用运行时代码压缩
  • HBuilderX创建的项目勾选运行-->运行到小程序模拟器-->运行时是否压缩代码
  • cli创建的项目可以在pacakge.json中添加参数--minimize，示例："dev:mp-weixin": "cross-env NODE_ENV=development UNI_PLATFORM=mp-weixin vue-cli-service uni-build --watch --minimize"
• 使用分包优化，关于分包优化的说明

 

参考：https://www.cnblogs.com/xinyouhunran/p/12597013.html

参考：https://www.cnblogs.com/rope/p/13722814.html

注意事项：

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 不能在 App.vue 里面进行页面跳转。
• 如果需要把globalData的数据绑定到页面上，可在页面的onShow页面生命周期里进行变量重赋值。
• globalData是简单的全局变量，如果使用状态管理，请使用vuex（main.js中定义）
• package.json 代码记得去掉注释！

• 关于SEO的补充说明

  H5平台是SPA单页应用，普通的SEO信息即加meta字段只能在，自定义的模板html里配置首页。

  但SEO的时代在变，现在更有效的方式，是用uni-app同时发布一版百度小程序，这个搜索权重更高。DCloud的ask社区的H5版也是uni-app做的，同时发布了百度小程序，权重更高，每天来自百度的搜索量非常多。是一个可现身说法的好案例。

• 由于小程序端不支持更新属性值为 undefined，框架内部将替换 undefined 为 null，此时可能出现预期之外的情况（相关反馈），需要自行判断一下。

• 非H5端不支持 Vue官方文档：Class 与 Style 绑定 中的 classObject 和 styleObject 语法。

• 注意：以:style=""这样的方式设置px像素值，其值为实际像素，不会被编译器转换。

• App端（vue页面V3编译模式）和H5端支持v-html，其他端不支持v-html。

• 若需要禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent="moveHandle"，moveHandle 可以用来处理 touchmove 的事件，也可以是一个空函数。

  <view class="mask" @touchmove.stop.prevent="moveHandle"></view>

常见问题

1. 如何获取上个页面传递的数据

在 onLoad 里得到，onLoad 的参数是其他页面打开当前页面所传递的数据。

2. 如何设置全局的数据和全局的方法

uni-app 内置了 vuex ，在app里的使用，可参考hello-uniapp store/index.js。

//store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {...},
    mutations: {...},
    actions: {...}
})

export default store

//main.js
...
import store from './store'
Vue.prototype.$store = store
const app = new Vue({
    store,...
})
...

//test.vue 使用时：
import {mapState,mapMutations} from 'vuex'

 

3. 如何捕获 app 的 onError

由于 onError 并不是完整意义的生命周期，所以只提供一个捕获错误的方法，在 app 的根组件上添加名为 onError 的回调函数即可。如下：

export default {
   // 只有 app 才会有 onLaunch 的生命周期
   onLaunch () {
       // ...
   },

   // 捕获 app error
   onError (err) {
       console.log(err)
   }
}

 

4. 组件属性设置不生效解决办法

当重复设置某些属性为相同的值时，不会同步到view层。 例如：每次将scroll-view组件的scroll-top属性值设置为0，只有第一次能顺利返回顶部。 这和props的单向数据流特性有关，组件内部scroll-top的实际值改动后，其绑定的属性并不会一同变化。

解决办法有两种（以scroll-view组件为例）：

• 监听scroll事件，记录组件内部变化的值，在设置新值之前先设置为记录的当前值

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">

export default {
    data() {
        return {
            scrollTop: 0,
            old: {
                scrollTop: 0
            }
        }
    },
    methods: {
        scroll: function(e) {
            this.old.scrollTop = e.detail.scrollTop
        },
        goTop: function(e) {
            this.scrollTop = this.old.scrollTop
            this.$nextTick(function() {
                this.scrollTop = 0
            });
        }
    }
}

• 监听scroll事件，获取组件内部变化的值，实时更新其绑定值

<scroll-view :scroll-top="scrollTop" scroll-y="true" @scroll="scroll">

export default {
    data() {
        return {
            scrollTop: 0,
        }
    },
    methods: {
        scroll: function(e) {
            // 如果使用此方法，请自行增加防抖处理
            this.scrollTop = e.detail.scrollTop
        },
        goTop: function(e) {
            this.scrollTop = 0
        }
    }
}

第二种解决方式在某些组件可能造成抖动，推荐第一种解决方式。

 

• @tap表示绑定点击事件。因为是在移动端，还是不要写@click了。click事件在移动端会有300ms的延迟