uni-app开发注意事项

Sir928

一、HBuilderX – uni-app发布

1、uni-app发布为H5

1、在 manifest.json 的可视化界面进行编辑；

2、在HBuilderX工具栏，点击发行，选择网站-H5手机版，如下图，点击即可生成 H5 的相关资源文件，保存于 unpackage 目录。

2、uni-app发布为小程序

1、申请微信小程序AppID

2、在HBuilderX中顶部菜单依次点击 “发行” => “小程序-微信”，输入小程序名称和appid点击发行即可在

unpackage/dist/build/mp-weixin 生成微信小程序项目代码。

3、在微信小程序开发者工具中，导入生成的微信小程序项目，测试项目代码运行正常后，点击“上传”按钮，之后按照 “提交审核” => “发布” 小程序标准流程，逐步操作即可。

二、vue-cli -uni-app发布

1、运行、发布uni-app

npm run dev:%PLATFORM% npm run build:%PLATFORM%

1、%PLATFORM% 可取值如下：h5、mp-weixin

三、平台规则

1、H5端的浏览器有跨域限制；

2、微信小程序会强制要求https链接，并且所有要联网的服务器域名都要配到微信的白名单中；

3、iOS对隐私控制和虚拟支付控制非常严格；

4、App要使用三方sdk，比如定位、地图、支付、推送…还要遵循他们的规则和限制；

四、开发规范

1、页面文件规范：https://vue-loader.vuejs.org/zh/spec.html#%E7%AE%80%E4%BB%8B

2、组件规范：https://uniapp.dcloud.io/component/README

view/scroll-view/swiper/icon/text/rich-text/progress/button/form/input/checkbox/radio

/picker/picker-view/slider/switch/label/nacigator/audio/camera/image/video/live-player/live-pusher

/map/canvas/web-view

3、微信小程序规范：wx –> uni

4、vue的是数据绑定和事件处理，补充了App及页面的生面周期

5、flex布局 uni-ui

五、tips

1、任意平台，static 目录下的文件均会被打包进去，非 static 目录下的文件（vue、js、css 等）被引用到才会被包含进去。

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

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

六、js文件引入

1、js文件不支持使用 / 开头的方式引入

七、生命周期

1、应用生命周期：onLaunch、onShow、onHide、onError、onUniNViewMessage、onUnhandleRejection

onPageNotFound、onThemeChange，仅可在App.vue中监听。

2、页面生命周期：onLoad、onShow、onReady、onHide、onUnload、onResize、onPullDownRefresh

、onReachBottom、onShareAppMessage、onPageScroll……

八、路由：路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。

九、判断平台

1、在编译期判断，条件编译：https://uniapp.dcloud.io/platform

2、在运行时判断，uni.getSystemInfoSync().platform

十、尺寸单位

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

2、rpx 是和宽度相关的单位，屏幕越宽，该值实际像素越大。

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

4、rpx不支持动态横竖屏切换计算，使用rpx建议锁定屏幕方向

十一、选择器

1、在uni-app中不能使用*选择器；

2、微信小程序自定义组件中仅支持class选择器；

3、定义在App.vue中的样式为全局样式。

十二、背景图片

1、小程序不支持在css中使用本地文件，包括本地的背景图片和文字；

2、本地背景图片的引用路径推荐使用以 ~@ 开头的绝对路径。

3、微信小程序不支持相对路径。

十二、字体图标

1、小程序不支持在css中使用本地文件；

2、网络路径必须加协议头https；

十四、安装依赖

1、uni-app插件市场。

2、 H5 端不支持使用含有 dom、window 等操作的 vue 组件和 js 模块

npm install packageName –save

import package from ‘packageName’ const package = require(‘packageName’)

3、node_modules 目录必须在项目根目录下。

4、module所指定的模块名不可与data、methods、computed属性重名。

十五、使用vue.js在uni-app中注意事项

1、data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；

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

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

4、非H5端（非自定义组件编译模式）暂不支持在自定义组件上使用 Class 与 Style 绑定；

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

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

7、小程序端数据为差量更新方式，由于小程序不支持删除对象属性，使用的设置值为 null 的方式替代，导致遍历时可能出现不符合预期的情况，需要自行过滤一下值为 null 的数据；

8、为兼容各端，事件需使用 v-on 或 @ 的方式绑定；

9、禁止蒙版下的页面滚动，可使用 @touchmove.stop.prevent=”moveHandle”；

10、按键修饰符：uni-app运行在手机端，没有键盘事件，所以不支持按键修饰符。

11、表单控件：select 标签用 picker 组件进行代替

radio 用 radio-group 组件进行代替

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

13、跨端的富文本处理方案详见：https://ask.dcloud.net.cn/article/35772；

14、全局组件：支持配置全局组件，需在 main.js 里进行全局注册，注册后就可在所有页面里使用该组件。

15、vue特性支持表：https://uniapp.dcloud.io/use?id= ... f%e6%8c%81%e8%a1%a8

十六、App.vue

1、文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData；

2、应用生命周期仅可在App.vue中监听，在页面监听无效；

3、App.vue不能写模板；

4、App.vue中简单的全局变量机制globalData，js中操作globalData的方式如下： getApp().globalData.text = ‘test’，在应用onLaunch时，getApp对象还未获取，暂时可以使用this.$scope.globalData获取globalData。

5、在App.vue中，可以一些定义全局通用样式。

十七、main.js

1、使用Vue.use引用插件，使用Vue.prototype添加全局变量，使用Vue.component注册全局组件。

2、无法使用vue-router，路由须在pages.json中进行配置。

十八 div标签引起的样式错误
如果在uniapp的页面中使用 div 标签，会造成页面样式错误，底部会流出一行白底的空间，页面元素也使用不了，解决办法是把 div 换成 view 就好了，页面的height:100%;就会生效了，否则就会变成height:unset; 尔造成页面的高失效。