行业动态

心之所向,素履以往,愿为客户创造最大的价值

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


uni-app开发


二、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 或 @ 的方式绑定;


数字化升级,从现在开始!

为全球1000+客户成功搭建部署直播系统 助力企业高速增长

联系我们
客服 电话

咨询电话

电话客服在线时间工作日9:00-18:00

+86 153-2764-1456
微信
微信