序言
Perhaps，好久没预览网志了，前几日在广州公干，Maignelay陈腐了很久，不该每晚上班刷抖音、玩游戏中奇拉，预备把之前做的两个小流程事例详尽的如是说一下，从加装C++开始重新合作开发TRAP两遍，希望对初涉小程序的你略有协助。
二维码新体验，一睹为快
合作开发前的预备
目前合作开发小流程的常用合作开发计划：QQ原生植物wxml合作开发，wepy，mpvue，taro、uni-app等，详尽好坏对照能参照「天猫纹路生物医学」的这首诗：小流程格朗普雷县架构的全面性评定；
好的话不多少，步入自问自答，这里重新整理两个单纯的Xmind，其实小流程的合作开发并没想像中的那么繁杂，接下去我将渐渐的从头开始阐释这个两个小流程项目，带大家踏入自问自答：
接下去的内容我假定你已了解关于HTML、CSS和JavaScript 的T03W科学知识。并且有一定的Vue基础，假如你刚开始自学前端合作开发，将责任编辑做为你的第二步可能不是最好的点子！
1 QQ小流程账号方面
1.1 注册注册登记QQ小流程账号
假如已注册注册登记小流程账号，能略去此步~
假定没小流程账号：
我们能通过左上角 → 立刻注册注册登记 → 注册注册登记的账号类别 → 优先选择小流程类别注册注册登记步入注册注册登记网页 → 输出电子邮箱 → 公钥 → 接收者 → 转化成电子邮箱 → 核对市场主体重要信息（根据另一方面优先选择类别：个人、企业、政府、新闻媒体等） → 注册登记相关重要信息方可注册注册登记；「注册注册登记小常识：」:电子邮箱做为登入账号，需要填
1.2 登入QQ小流程后台
1.「完善相关重要信息」补充小流程名称重要信息，上传小流程头像，核对小流程如是说并根据后续合作开发的内容优先选择服务范围；
2.「绑定合作开发者」登入QQ公众平台小流程，步入用户身份-合作开发者，新增绑定合作开发者、新体验者。（新体验者的含义是在小流程没通过审核正式发布之前，新体验者能使用该小流程）；
3.
1.3 下载QQ合作开发者工具
前往合作开发者工具下载网页，根据自己的操作系统下载对应的加装包进行加装,建议现在稳定版本的加装包，其实QQ合作开发者工具不止能合作开发小流程，也能用来制作QQ小游戏，有兴趣的朋友能找找相关资料，合作开发这款属于自己的小游戏~
QQ合作开发者工具加装完毕后，双击打开软件，进行登入方可，由于我们是使用uni-app进行合作开发小流程,所以这里先打开登入方可，后面我们使用相关工具自动编译小流程；
1.4 总结
以上是关于小流程注册注册登记、QQ合作开发者工具下载的内容，文章比较简练，假如需要对小流程有更深一步的了解，能查看QQ小流程官方开放文档,官方文档中对于小流程的架构配置、组件如是说、API以及扩展能力等有非常系统的讲解，非常适合初学者对小流程的自学；
2 HBuilderX、uni-app方面
序言
可能大家对HBuilderX、uni-app的了解的不是很多；这两者都是DCloud旗下的产品。
DCloud公司拥有500万合作开发者用户，几十万应用事例、10亿手机端月活用户，数千款uni-app插件、70+QQ/qq群，合作开发者能放心优先选择。
HBuilderX
HBuilderX是这款专为Vue的打造编辑器，C++架构，启动速度、大文档打开速度、编码提示，都还是挺不错的，我们今天合作开发小流程用到的就是这款编辑器，我最开始接触它的绿柔主题感觉特别清爽、特别舒服; 其实我们在Vue.js的官网我们也能看到他的身影。
uni-app
uni-app是两个使用 Vue.js 合作开发所有前端应用的架构，合作开发者编写一套代码，可发布到iOS、Android、H5、以及各种小流程（QQ/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。个人接触新体验下来，上手快，效果高；
「开始我们接下去的小流程就是用HBuilderX编辑器，加之uni-app架构来合作开发的」
2.1 HBuilderX的下载与使用
HBuilderX的下载
我们能访问HBuilderX官方下载地址: 进行下载，建议大家优先选择APP合作开发版进行下载，后面能把一套代码编译成多个平台使用，效果非常Nice
鼠标右键出现菜单
→ 点击菜单项：发送到
→ 点击桌面快捷方式，方可把图标放到桌面
→ 双击方可正常使用；
HBuilderX的单纯使用
HBuilderx的使用方法其实与VScode、WebStorm、Atom等编辑器大同小异，假如你接触过上述编辑器，那么对你来说一定非常轻松！
3 新建项目
我们之前已经下载了App合作开发版，能开箱即用，启动HBuilderX软件
接下去让我们创建两个uni-app项目，点击工具栏里的文件 -> 新建 -> 项目：
优先选择uni-app类别，输出工程名，优先选择模板，点击创建，方可成功创建。uni-app自带的模板有 Hello uni-app ，是官方的组件和API示例。还有两个重要模板是 uni-ui项目模板，日常合作开发推荐使用该模板，已内置一些官方的常用组件。
创建成功后，我们就能在QQ合作开发工具中运行啦。步入我们刚才创建的项目，点击工具栏的运行 -> 运行到小流程模拟器 -> QQ合作开发者工具，方可在QQ合作开发者工具里面新体验uni-app。
接下去会开始编译，并打开QQ合作开发者工具，当你看到以下网页时，说明你新建项目这一步骤就已经完成啦！
在创建的u
「小常识」
由于我们是利用HBuilderX启动QQ合作开发者工具，所以我们在合作开发过程中，需要保持QQ合作开发者工具的打开。
我们是第一次使用，需要先配置小流程合作开发者工具的的相关路径，才能运行成功。点击工具栏的工具 -> 设置 -> 运行配置 -> 小流程运行配置, 如下图，需在输出框输出QQ合作开发者工具的加装路径。
首次合作开发时需要在小流程中设置 QQ合作开发者工具 -> 设置 -> 安全设置，将服务端口开启,能使用相关的命令行调用工具。
uni-app默认把项目编译到根目录的unpackage目录。
编译成功后，我们需要把QQ小流程的appID在QQ合作开发者工具中核对，如下图：
3.1 目录分析及UI组件引入
├─ colorui # 本项目引入了colorui组件，用于引入美化样式组件├─ components # 用于存放组件的目录，能自行添加组件├─ pages/ # 业务网页文件存放的目录，后续合作开发的网页都会存放于此│ ├─ home/
│ │ ├─ index.vue # home网页│ │ …..
├─ static # 存放应用引用静态资源（如图片、音频等）的目录，注意：静态资源只能存放于此├─ unpackage/ # 打包目录├─ App.vue # 应用配置，用来配置App全局样式以及监听├─ main.js # Vue初始化入口文件├─ manifest.json # 配置应用名称、appid、logo、版本等打包重要信息├─ package.json # 配置网页路由、导航条、选项卡等网页类重要信息本项目引入了两个组件：mi-loading、ColorUI
3.1.1 UI组件-mi-loading
相信大家在小流程的新体验中有看到Loading的动画，这边引入了两个Loading的组件，mi-loading
通过上方链接下载Zip包文件，下载源码解压，复制项目根目录的 /mi-loading 文件夹到你的项目components目录中方可打开mi-loading.vue这个文件，里面的loading动画是能自行使用Gif图配置，大家能查看该源码的第四行，img配置的的图片地址就是自定义的Loding，mi-loading源码地址，我把自定义的图片放置到了：/static/img/loading.gif,图片地址：点此查看# 使用方法this.$refs.Loading.show() // 打开this.$refs.Loading.hide() // 关闭3.2.2 UI组件-ColorUI
本项目引入了插件市场的ColorUI-UniApp组件库，引入方法如下：
通过上方链接下载Zip包文件，下载源码解压，复制项目根目录的 /colorui 文件夹到你的项目根目录App.vue 文件引入关键Css main.css、icon.css，让改UI组件成为每个网页公共css<style> @import“colorui/main.css”; @import“colorui/icon.css”; ….</style>我们能使用该UI库中封装好的导航栏，测试效果。
在App.vue文件中加入如下配置，用于获得系统重要信息,该文件源码地址：App.vue// onLaunch: 当小流程加载完毕后就执行的方法onLaunch: function(){
uni.getSystemInfo({
success: function(e){
// #ifndef MPVue.prototype.StatusBar = e.statusBarHeight;
if (e.platform == android) {
Vue.prototype.CustomBar = e.statusBarHeight +50;
} else{
Vue.prototype.CustomBar = e.statusBarHeight + 45;
};
// #endif// #ifdef MP-WEIXINVue.prototype.StatusBar = e.statusBarHeight;
letcustom = wx.getMenuButtonBoundingClientRect();
Vue.prototype.Custom = custom;
Vue.prototype.CustomBar = custom.bottom + custom.top – e.statusBarHeight;
// #endif // #ifdef MP-ALIPAYVue.prototype.StatusBar = e.statusBarHeight;
Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight;
// #endif}
})}
pages.json文件 配置取消系统导航栏,该文件源码地址：pages.json# 复制下面命令需要把注释删除，否则会报错{“globalStyle”: {“navigationStyle”: “custom”, // custom为自定义模式“navigationBarTextStyle”: “white”, // 标题文字设为白色“navigationBarTitleText”: “uni-app”, // 标题名称“navigationBarBackgroundColor”: “#007AFF”, // 更改导航背景色“backgroundColor”: “#FFFFFF”// 全局背景色 }}运行成功后如下图所示：
好的，这样我们已经成功的引入了该UI库，此时能在QQ合作开发者工具中看到效果，无需手动刷新，当我们在HBuilderX中添加代码保存，代码会自动编译，QQ合作开发者工具会自动刷新；
总结
以上就是我们这款小流程的合作开发预备工作，下首诗我们将会踏入进行实际项目的从零合作开发，从新建两个项目到小流程代码的审核上传。
