新人村
- 获得工具 —— 开发文档、下载编辑器、插件市场
- 使用工具 —— 运行demo
- 走出新人村 —— 导入工程、真正的项目跑起来
获取工具
你会vue,上手uniapp就很简单。学习一门语言或者技术,最好的途径就是官方网站,官网文档以及案例分析。这就好比买家秀与卖家秀,看看买家秀真实的使用心得,更加符合实际应用。
-
官方文档 uni-app 官网
-
编辑器 (开发uniapp就得下载这个软件,但是它真的不好用) HBuilderX
优点:uniapp相关跨平台的打包、调试、配置以及自身框架的支持友好
缺点:git提交(得配合小乌龟使用),不如webstrom内置的git 搜索不如webstrom、不能查看某个方法的来源(这点最不能忍受!!!简直痛苦不堪)
3.额外的帮手 (内置组件,扩展组件不够用的时候就得额外找其他插件了) 插件市场
使用工具
下载了HBuildx,就可以用起来了
1.新建项目(可以选择hello uniapp 一个小demo先跑起来,看着代码实际跑起来)
- 实际项目的全家桶
- uni-app 内置了 Vuex
- 也可以安装UView 这样第三方UI框架
- 用的vue语法(支持vue2.0、vue3.0)
- 还有nvue(在 App 端,如果使用 vue 页面,则使用 webview 渲染;如果使用 nvue 页面(native vue 的缩写),则使用原生渲染)
- 路由、缓存(这些后续都可以查阅官方文档)
走出新人村
如果是已有项目,新人第一天接触uniapp 如何跑起来
-
导入工程
-
打开对应的cmd(控制台),npm i (uniapp 也是需要运行的)
- 点击运行(拿微信小程序来说,一定要在运行配置里面配置微信小程序安装路径,不然不能自动打开微信开发者工具ide)
- 打开微信开发者(这里需要自己新建项目)
最重要的一张图!!!!!!微信开发者工具 新建项目-选择文件地址-选到 Unpackage/dist/dev/mp-weixin
这样就差不多运行起来了~~~~~~~~
总结
后面会陆续分享遇到的坑,使用方法、解决问题。 已经有支付宝小程序、微信小程序、安卓应用的上线产品