uni-app开发注意事项总结

2023-06-02 0 1,017

一、HBuilderX – uni-app正式发布

1、uni-app正式发布为H5

1、在 manifest.json 的建模介面展开撰稿;

2、在HBuilderX图标,点选发售,优先选择中文网站-H5智能手机版,如下表所示图,点选方可聚合 H5 的有关天然资源文档,留存于 unpackage 产品目录。

2、uni-app正式发布为小业务流程

1、提出申请QQ小业务流程AppID

2、在HBuilderX中顶端辅助工具栏依序点选 “发售” => “小业务流程-微信”,输出小业务流程中文名称和appid点选发售方可在

unpackage/dist/build/mp-weixin 聚合QQ小业务流程工程项目标识符。

3、在QQ小业务流程合作开发者辅助工具中,引入聚合的QQ小业务流程工程项目,测试数据标识符运行恒定后,点选“上载”按键,后依照 “递交审查” => “正式发布” 小业务流程国际标准业务流程,逐渐操作方式方可。

二、vue-cli -uni-app正式发布

1、运转、正式发布uni-app

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

1、%PLATFORM% 可值域如下表所示:h5、mp-weixin

三、平台规则

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

2、QQ小业务流程会强制要求https链接,并且所有要联网的服务器域名都要配到QQ的白名单中;

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、QQ小业务流程规范: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、QQ小业务流程自定义组件中仅支持class优先选择器;

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

十二、背景图片

1、小业务流程不支持在css中使用本地文档,包括本地的背景图片和文字;

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

3、QQ小业务流程不支持相对路径。

十二、字体图标

1、小业务流程不支持在css中使用本地文档;

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

十四、安装依赖

1、uni-app插件市场。

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

npm install packageName –save

importpackagefrompackageNameconstpackage=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 绑定 中的 classObjectstyleObject 语法;

4、非H5端(非自定义组件编译模式)暂不支持在自定义组件上使用 ClassStyle 绑定;

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=

vue%e7%89%b9%e6%80%a7%e6%94%af%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,

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

十七、main.js

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

2、无法使用vue-router,路由须在pages.json中展开配置。

uni-app开发注意事项总结

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务