软件开发的时间通常是这样的:一开始的 90% 开发工作用掉了整个计划 90% 的时间,剩下的 10% 同样需要整个计划 90% 的时间,而最终发布前的修改也是如此。—— 汤姆 · 嘉吉
当你看到这里,相信你已经做好了准备(一台折腾得起的电脑和一颗肯行动的心),准备跟着我一同进入 Uniapp 的世界。
正所谓工欲善其事,必先利其器(这句话我经常说:>),我们要开发微信小程序和app,有两个工具是必不可少的:
- 微信开发者工具
- HbuilderX
注意:配置与安装方法 windows 系统一致。
# 微信开发者工具
我们要做的应用需要编译成小程序,因此也要下载微信开发者工具进行编译预览效果。

找到对应版本,下载安装,完成打开

这里先做个配置,找到菜单 【设置】 >> 【安全设置】,该配置可以使 Uniapp 使用命令行调用微信开发者工具,实现项目的预览与热更新

把服务端口选择开启即可

这里如果不开启,接下来的调试会报以下错

# HbuilderX
打开 HbuilderX官方,使用 Uniapp 框架开发项目搭配官方的编辑器 HBuilderX 开发,编辑器集成了node,添加了很多底层配置。无需复杂的安装,开箱即用并且搭配了可视化界面,可以轻松编辑。

下载对应安装包(我的是 Mac 机),下载选择一个 App 开发版本(App 开发版已集成相关插件、开箱即用),下载成功后直接解压:

一顿操作后找到这个图标打开,打开基本上可以达到秒开。

如果你熟悉了其他大众化的编译器,完全可以无缝衔接过来,因为可以快捷键切换,这样还是同样的配方,熟悉的味道,不用再次学习。打开编译器,空白区域可看快捷键方案设置,点击选择即可。

然后修改主题 【工具】>>【主题】>>【酷黑】,即可看到熟悉的 IDE 的界面。

# 新建项目
【选择新建项目】 >> 【uni-app】 >> 【默认模板】 >> 【创建】;选择 uni-app(U) 创建项目是为了开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序。

一秒创建成功

目录结构:
- pages 业务页面文件存放的目录
- static 静态文件目录(images之类)
- App.vue App 全局应用配置
- main.js 初始化入口文件
- manifest.json 多端配置信息
- pages.json 配置页面路由、导航等信息,类似原生小程序的 app.json
# 插件配置
选择菜单 【工具】 >> 【插件安装】


建议安装这些:
- NPM
- 内置浏览器
- 内置终端
- App真机运行
- uni-app编译
- Git插件
- js-beautify
- prettier
- htmlhint
- stylelint
- eslint-plugin-vue
- eslint-js
- js压缩
- css压缩
- scss/sass编译
- es6编译
其余根据自己需要安装。
# 运行 Uniapp 项目
上面的配置插件完成之后,就可以小试一下刚才的项目了,运行 Uniapp 项目主要有3种方式:
- 浏览器
