乐趣区

uni-app 1.4 发布,一套代码,发行小程序(微信/支付宝/百度)、H5、App多个平台

在 2019 新年到来之际,uni-app 1.4 版本正式发布,新增支持百度、支付宝小程序,开放插件市场,同时注入更多优秀特性,为开发者送上了一份新年大礼!
支持更多小程序平台
uni-app 1.4 版本新增支持百度、支付宝小程序,从此一次开发,可发布小程序(微信 / 支付宝 / 百度)、H5、App(iOS/Android)6 大平台!

uni-app 在 HBuilderX 开发工具中有非常友好高效的支持,提供可视化操作菜单,发行各家小程序简单便利详情,这里不再赘述;本文主要说明如何通过 vue-cli 编译发行各家小程序。
使用 cli 编译到各家小程序之前,需先安装 vue-cli 并创建 uni-app 项目,主要命令如下:
# npm script
# 全局安装 vue-cli
$ npm install -g @vue/cli
# 创建 uni-app 项目,会提示选择项目模板
$ vue create -p dcloudio/uni-preset-vue my-project
# 进入项目目录
$ cd my-project
Tips:如果之前已使用过老版本的 uni-app cli 插件,则通过 npm 将 uni-app 升级到最新版,即可获得将原有 uni-app 项目转换到各家小程序的能力
支持支付宝小程序
使用如下命令进行支付宝小程序的编译预览及发行打包
# npm script
# dev 模式,编译预览
$ npm run dev:mp-alipay
# build 模式,发行打包
$ npm run build:mp-alipay
发行到支付宝小程序,需要你下载并打开支付宝小程序开发者工具,然后选择项目编译目录(dev 模式、build 模式编译目录不同,见下方说明)进行预览或发行。
dev 模式 和 build 模式的区别:

dev 模式编译目录为项目根目录下的 /dist/dev/ 目录
build 模式编译目录为项目根目录下的 /dist/build/ 目录
dev 模式有 SourceMap 可以方便的进行断点调试
build 模式会将代码将会进行压缩,体积更小更适合发布为正式版应用

目前 hello uni-app 已上线支付宝小程序,可以打开支付宝,扫描以下二维码进行体验:

支持百度智能小程序
百度智能小程序的编译方式与支付宝小程序一致,简单替换平台标识(mp-baidu)即可。
你可以使用如下命令进行百度智能小程序编译预览及打包:
# npm script
# dev 模式,编译预览
$ npm run dev:mp-baidu
# build 模式,发行打包
$ npm run build:mp-baidu
发行到百度智能小程序,需要你下载并打开百度开发者工具,然后选择项目编译目录进行预览或发行。
Tips:dev 模式、build 模式差异同支付宝小程序
支持通过 cli 命令行编译到微信小程序平台
uni-app 很早就支持发行到微信小程序,但需在 HBuilderX 开发工具中操作;uni-app 1.4 版本支持通过 vue-cli 编译到微信小程序,方式同支付宝小程序。
你可以使用如下命令进行微信小程序编译预览及打包:
# npm script
# dev 模式,编译预览
$ npm run dev:mp-weixin
# build 模式,发行打包
$ npm run build:mp-weixin
同样,发行到微信小程序,需要你下载并打开微信开发者工具,然后选择项目编译目录进行预览或发行。
其它功能特性
uni-app 插件市场上线了!支持前端组件、js sdk、页面模板、项目模板、原生插件等多种类型,还支持原生插件的云打包,详情。
插件市场作为轮子的需求者和制造者之间的对接平台,将提升所有 uni-app 开发者的效率和重用程度。
另外,uni-app 1.4 版本在条件编译、H5 平台等方面也有大量改建,详见如下:

新增 条件编译 static 支持平台目录,不同平台可定义自己的独有静态文件 详情

新增 条件编译 支持多平台“或”运算符:||。例如:// #ifdef MP-WEIXIN || MP-BAIDU 代表在微信小程序和百度小程序均生效
新增 条件编译 pages.json 支持条件编译。pages.json 里不引用的页面不会打包,可以更自由的管理不同平台文件的打包策略。
修复 条件编译 使用 ifndef 导致编译错误的问题
新增 manifest.json 中(mp-weixin 节点下)新增 permission 配置,用于微信小程序接口权限相关设置
新增 蓝牙相关 API 详情

新增 低功耗蓝牙相关 API 详情

新增 iBeacon 相关 API 详情

优化 css 编译报错提示
修复 v-for item 部分写法编译失败的问题
H5 平台 新增 canvas 组件和相关 API
H5 平台 优化 导航栏自定义按钮支持 float 属性
H5 平台 修复 uni.showModal 内容过多显示超出屏幕的问题
H5 平台 修复 picker 组件未设置 value 属性值时报错的问题
H5 平台 修复 TabBar 页面 onHide 钩子函数不触发的问题
H5 平台 修复 map 组件中 marker 图像不显示的问题
H5 平台 修复 AudioContext 事件监听报错的问题
H5 平台 修复 swiper 组件动态设置 current 后 swiper 不切换的问题
H5 平台 修复 swiper 组件设置属性 previous-margin、next-margin 显示异常的问题
H5 平台 修复 picker 组件显示的选中项不正确的问题 #103

H5 平台 修复 picker 组件动态设置高度后显示异常的问题
H5 平台 修复 radio 组件设置 color 属性不生效的问题 #119

H5 平台 修复 picker 组件 columnchange 事件不触发的问题

未来规划
uni-app 将尽快适配字节跳动小程序,并进一步抹平 H5、各家小程序之间的平台差异,让开发者尽可能的一套代码,顺滑的发行到多个平台。
uni-app 在小程序端,引用和改造了 mpvue 及 Megalo,感谢美团点评团队、网易考拉团队对开源社区的贡献!
uni-app 会在开源的路上继续前行,为帮助 uni-app 更好的成长,更好的服务开发者,欢迎您给 uni-app 反馈改进意见,或 Star 鼓励。

退出移动版