- A+
1.准备工作:HbuiderX + 微信开发者工具下载安装+小程序账号申请开通(这里就不例举了,可以看同账号uniapp小程序开发准备)
2.创建项目
新版本的HbuilderX点击新建项目——选择uni-app——选择默认模板——输入项目名称——选择Vue版本(此随笔是前后端分离开发,不使用UniCloud云开发)
3.目录有用介绍
里面基本包含
pages文件夹——存放页面,等同于Vue中的view
static文件夹——存放静态资源,类似于Vue中的assets
App.vue存放每个页面的公共部分——像是下拉刷新或者分享小程序需要放在App.vue中的生命周期中
index.html——根
main.js——入口文件
* manifest.json——项目配置文件(重要)在里面可以进行分享功能、小程序的Appid等重要功能配置
pages.json——页面路由等配置(在创建文件的时候它会自动添加路由,如果使用到分包需要自己去进行修改、以及对整个小程序的表头或者TabBar等进行配置)
4.配置小程序开发者工具调试
选择运行——运行到小程序模拟器——运行设置 找到小程序运行配置 —— 点击浏览选择微信开发者工具.exe 保存后即可
5.配置manifest.json文件
将自己申请的小程序APPID填写到微信小程序配置中的微信小程序AppID中
6.启动项目
选择运行——运行到小程序模拟器——微信开发者工具(第一次启动会有一些慢且需要自己扫码登陆,选择自己当前的小程序项目即可)
7.配置微信开发者工具
右上角详情进行开发设置
建议开启将JS编译为ES5、不校验合法域名其他自动开启的就不用关闭了
在基本信息可以看到自己的发布状态和appid等信息
8.根据需求开发
以上就是UniApp创建和运行小程序项目的步骤了
小白第一次写博客,如有错误请指正,感谢