uniapp:vue语法,跨端开发(H5,小程序,原生app),支持打包app(原生API),如果你熟悉Vue.js,则推荐 uni-app。
1、开发规范
uniapp = vue语法规范 + uni内置组件(跟小程序的组件名基本一致) + uni.api() + uni-ui跨端UI库 + flex布局
官方文档:
uni-app代码编写,基本语言包括js、vue、css。以及ts、scss等css预编译器。
在app端,还支持原生渲染的nvue,以及可以编译为kotlin和swift的uts。
DCloud还提供了使用js编写服务器代码的uniCloud云引擎。所以只需掌握js,你可以开发web、Android、iOS、各家小程序以及服务器等全栈应用。
为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:
页面文件遵循Vue单文件组件规范,即每个页面是一个.vue文件
组件标签靠近小程序规范
接口能力(JS API)靠近小程序规范,但需将前缀 wx、my 等替换为 uni
数据绑定及事件处理同 Vue.js 规范,同时补充了应用生命周期及页面的生命周期
如需兼容app-nvue平台,建议使用flex布局进行开发
uni-app分编译器和运行时(runtime)。uni-app能实现一套代码、多端运行,是通过这2部分配合完成的。
编译器将开发者的代码进行编译,编译的输出物由各个终端的runtime进行解析,每个平台(Web、Android App、iOS App、各家小程序)都有各自的runtime
2、功能框架图
3、创建项目
点击工具栏里的文件 -> 新建 -> 项目:
选择uni-app类型,输入工程名,选择模板,点击创建,即可成功创建。
4、配置
统一配置:
打开manifest.json:
-
基础配置:填入Dcloud appID,没有需要获取一下
-
H5配置:
路由模式-->history
运行基础路径: /
-
微信小程序配置:
(1)、填入appID,选择:ES6转ES5;上传代码时样式补全,上传代码时自动压缩,检查安全域名和TLS版本
(2)、打开微信开发者工具
设置-->安全设置-->开启服务端口
(3)、打开HBuilderX
工具-->设置-->运行配置-->微信开发工具路径-->浏览找到微信开发者工具的安装路径
5、运行
(1)、浏览器运行
进入到项目里,点击工具栏的运行 --> 运行到浏览器 -> 选择浏览器
(2)、真机运行:usb连接手机和电脑,手机手动开启USB调试,苹果选择信任,进入到项目里,点击工具栏的运行 --> 真机运行 --> 选择你的设备,会在你机器上装Hbuilder测试软件,打开软件(需要设置信任)。
android手机的步骤:
①打开"开发人员选项”
②在“开发人员选项”里打开usb调试
(3)、微信开发者工具里运行:进入到项目里,点击工具栏的运行 --> 运行到小程序模拟器 --> 微信开发者工具,即可在微信开发者工具里面体验uni-app。
6、打包
(1)、发行H5:选择网站-H5手机版
(2)、发行小程序:小程序开发工具->上传->公众平台小程序账号->提交审核
(3)、发行app:保证HBuilderX是最新版,和云打包端的版本要一致
在HBuilderX工具栏,点击发行,选择原生app-云端打包,会出现如下界面,点击打包即可。
7、项目结构
pages // 主要分页注册
static // 静态资源引用
App.vue // 应用配置
main.js // 入口文件,配置一些全局的逻辑
manifest.json //跨平台所有配置项文件(appid,pc跨域,小程序设置)
pages.json //全局配置和页面配置
uni.scss //全局scss
uniapp和小程序的对应关系
uniapp文件 | 属性 | 小程序文件 |
---|---|---|
pages.json | globalStyle | app.json->window |
pages.json | pages.style | pages.json |
manifest.json | 开发配置 | project.config.json |
app.vue | app.js+app.wxss | |
pages/index/index.vue | pages/index/wxml+wxss+js | |
/static | 静态本地资源 | /images |
8、注意
-
支持template/block;
-
es7 支持 async await;
-
支持css背景图片链接本地资源;
-
路由推荐小程序,不支持 vue-router ,路由接参数同小程序;
-
(生命周期)钩子函数推荐用小程序,支持vue钩子;
-
样式支持rpx,规范对齐小程序,类 | id打头 flex布局;
-
npm 支持, 推荐先从 uni-app插件市场-->npm;
-
全局组件:在 main.js 里进行全局注册Vue.component,注册后就可以在所有的页面里使用该组件;
-
全局变量:公用模块(douban)|挂载 Vue.prototype|globalData|vuex;
-
不支持dom操作,关于dom规范,对齐mpvue(v-html不可用,物理键盘事件不存在)