开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第28天,点击查看活动详情
为什么使用uni-app
- uni-app:跨平台。
- 真正做到“一套代码,多端发行”!
- 条件编译:优雅的在一个项目里调用不同平台的特色功能。打通了接口。接口名不同的时候写判断。打包可以进行选择生成哪一端。
- 运行体验更好
- 组件、api与微信小程序一致
- 兼容weex原生渲染(使用局部渲染方案)
- 通用的技术栈,学习成本更低
- vue的语法、微信小程序的api
- 内嵌mpvue
- 开放生态,组件更丰富
- 支持通过npm安装第三方包
- 支持微信小程序自定义组件及SDK
- 兼容mpvue组件及项目
- App端支持和原生混合编码
- DCloud将发布插件市场
平台功能框架图
快速上手
- 通过HBuilderX可视化界面
3. 通过vue-cli命令行
如何把uni-app上的代码展示在微信开发工具上
1.在HBuilderX上选择运行=>运行到小程序模拟器=>微信开发者工具=>如果是第一次使用的话,需要选择微信开发者工具的安装路径。选择以后如果微信开发者工具没有通过设置=>安全设置打开服务端口的话会报错,需要打开,打开以后重新上面的操作即可
uni-app上
微信开发工具上
如何把uni-app上的代码展示在支付宝开发工具上
1.在HBuilderX上选择运行=>运行到小程序模拟器=>支付宝开发者工具->选择路径
2. 停止运行,重新运行->复制路径
3. 在支付宝开发者工具->打开项目->复制路径->完成即可
uni-app发行
- 原生app-查看云打包:速度慢
- 原生App-本地打包:很麻烦,需要配置iOS和安卓的本地
- 各个小程序:上面在各个小程序打开的操作,只是临时的,真正的生成是在发行里
在DCLOLID申请账号。,获取id,然后在HBuilder里登录,就可自动获取uni-app的应用标识(AppId)
cli创建项目和HBuilderX可视化界面创建项目的区别
- cli创建的项目,是传统的node项目结构。工程代码在src目录下,编译器在项目下,编译结果在dist目录下。
- HBuilderX可视化创建的项目,是一种免node开发概念。工程代码在项目目录下,编译器在HBuilderX目录下而不是项目下,编译结果在项目的unpackage目录下。
有些习惯了cli的开发者,使用HBuilderX可视化模式时不适应。讲解下它们的差别以及为什么HBuilderX提供了多种方式。