置顶uni-app开发小程序总结精选热门

最近开发项目中使用 uni-app 开发了 微信小程序，整个体验下来还算流畅，下面做一些总结：

HBuilderX安装的时候选择标准版，不要下载APP开发版，至于uni-app编辑都可以在标准版里面通过插件安装或者是直接通过vue-cli命令行创建项目，另外就我个人使用之后，APP开发版编译小程序的时候，有时候会导致编译出来的小程序页面空白（只剩下）。

HBuilderX运行/发布微信小程序在编译完成之后会尝试打开微信开发者工具，实际上就是用命令行控制微信开发者工具（命令行 V2），这个需要在开发者工具的设置 -> 安全设置中开启服务端口。

官方提供了HBuilderX可视化界面和vue-cli命令行两种方式创建项目，不过cli版如果想安装less、scss、ts等编译器，需自己手动npm安装。在HBuilderX的插件管理界面安装无效，那个只作用于HBuilderX创建的项目。

以HBuilderX可视化界面创建的项目：

1. components：组件文件，不用引入声明，直接使用。
2. pages：页面
   1. index：首页
3. static：静态资源
4. store：全局状态管理中心
5. unpackage：打包文件
6. .gitignore：忽略文件，暂时忽略 文件
7. APP.vue：应用配置，用来配置App全局样式以及监听
8. main.js：Vue初始化入口文件
9. manifest.json：配置应用名称、appid、logo、版本等打包信息
10. pages.json：配置页面路由、导航条、选项卡等页面类信息
11. uni.scss：整体控制应用的风格，https://uniapp.dcloud.io/collocation/uni-scss
12. mixins：混入
13. utils：工具，uni.request 和 uni.uploadFile 方法封装
14. config：配置文件
    1. index.js：类似于vue.config.js
    2. theme.js：配置在js中使用的主题配置
15. sitemap.json：配置页面是否被索引
16. package.json：npm相关，直接安装对应的库，和web一样引入使用
17. package-lock.json：npm相关

完整代码可查看https://github.com/fxss5201/uni-template

我是在全局放了网络监控，当断网的时间弹出断网弹窗禁止操作，再次联网的时间，关闭弹窗。

:

至于测试可以在 添加编译模式 设置：