一、初步认识
- HBuilderX官方IDE下载地址: http://www.dcloud.io/hbuilderx.html
- 选择版本: 下载App开发版,可开箱即用;
- 如使用cli方式创建项目,可直接下载标准版
- 创建uni-app: 工具栏里的文件 -> 新建 -> 项目 -> 选择uni-app,输入工程名
- 运行uni-app: 快捷键 ctrl+r 选择运行方式
- 显示项目目录: 视图 -> 显示文档结构图
- 发布为微信小程序:
- 申请微信小程序AppID
- 在HBuilderX中顶部菜单依次点击 "发行" => "小程序-微信",输入小程序名称和appid点击发行即可在 unpackage/dist/build/mp-weixin 生成微信小程序项目代码
- 在微信开小程序发者工具中,导入生成的微信小程序项目
- 测试项目代码运行正常后,点击“上传”按钮,之后按照 “提交审核” => “发布” 小程序标准流程,逐步操作即可
- 不建议使用vue-cli创建项目:必须使用vue-cli3.X,vue-cli更新快于HBuilderX
npm install -g @vue/cli vue create -p dcloudio/uni-preset-vue my-project //运行并发布微信小程序版uni-app npm run dev:mp-weixin npm run build:mp-weixin
- 学习uni-app路径:
- uni-app首页介绍 https://uniapp.dcloud.io/quickstart
- 快速上手 https://uniapp.dcloud.io/quickstart
- 3节官方教程 https://ke.qq.com/course/343370?taid=2788142445051210
- 白话uni-app http://ask.dcloud.net.cn/article/35657
- 培训实战视频 https://ke.qq.com/course/379043?from=800006421
- 不太需要专门去学习小程序开发,只看uni-app官网即可
- 注意vuejs可以在html中使用,而uni-app里没有HTML,直接就是vue文件。
- 另外vue的路由、npm可以不学
- uni-app官方教程学习手记