序言：

责任编辑主要就如是说 uniapp 的此基础采用，和采用 uniapp 在民营企业合作开发的操作过程中的两个详尽业务流程，较为适宜第二次采用uniapp 合作开发QQ小业务流程的合作伙伴，或是没过作战经验的爸爸妈妈参照；采用 Hbuildx 相互配合 Uniapp 架构紧密结合 Uview 的UI架构为我们模拟那时的Demo！

产品目录

一、uniapp工程项目起跑

1. 辅助工具浏览

2. 工程项目建立

3. 加装新颖应用程序

4. 运转至QQ合作应用软件

5. 工程项目运行

6. 个人化小业务流程

7. 合作开发时怎样初始化API

二、QQ小业务流程正式发布

2. 配置小业务流程主体信息

3. 配置服务器域名

4. 正式发布上架业务流程

① 点击 Hbuildx 辅助工具栏中的发行

②点击QQ合作开发者辅助工具中的上传按钮

③ 这个时候我们就要去QQ公众平台登录我们的小业务流程合作开发者账户查看体验版小业务流程

④ 终于到了申请提交审核，正式正式发布

一、uniapp工程项目起跑

开始之前还是先看一下官网对 Uniapp 的如是说，也让我们有个更全面的认识；

uni-app 是两个采用 Vue.js (https://vuejs.org/)合作开发所有前端应用的架构，合作开发者编写一套代码，可正式发布到iOS、Android、Web（响应式）、和各种小业务流程（QQ/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。（Uniapp 官网地址：https://uniapp.dcloud.io/）

1. 辅助工具浏览

Uniapp 是配个 HBuildx 这个合作应用软件来采用的，所以我们要先浏览 Hbuildx 合作应用软件；

Hbuildx 浏览地址：https://www.dcloud.io/hbuilderx.html

2. 工程项目建立

上一步我们已经浏览好了 HBuildx 这个合作应用软件，下一步我们需要建立工程项目了！

我用的是 Windows 可能和 Mac 稍有差别；左上角点击文件 –> 新建 –> 工程项目

下图我们能看到有 普通工程项目，有 uni-app 工程项目

就我个人而言，一般在工作中，我会选择新建普通工程项目，因为uni-app示例工程项目虽然很香，但是并不是很利于合作开发，需要删除很多东西，所以我个人选择的是普通工程项目；

3. 加装新颖应用程序

点击辅助工具 –> 应用程序加装，我们可以看到 Hbuildx 给我们提供了核心应用程序；

什么是核心应用程序呢？ 就是利于我们合作开发，可以提高我们合作开发效率的东西；

什么是应用程序市场呢？我们在开发操作过程中，遇到了 UI 架构或是 uniapp 内置组件满足不了我们的业务需求的，就可以前往应用程序市场去看看，总会有两个较为满意的！

比如我们采用 Git 往仓库提交代码，我们就可以浏览 Git 应用程序，辅助我们采用Git！比如我们格式化代码我们就可以浏览 Prettier 应用程序，ctrl + K 快捷格式化

4. 运转至QQ合作应用软件

到这一步合作开发前的配置基本上已经完成了，我们要运转一下我们的工程项目看一下了

但是，运转小业务流程我们需要注意几个地方：

① 配置manifest.json文件，配置QQ小业务流程AppID

QQ小业务流程AppID 哪里来？登录QQ公众平台，合作开发管理 –> 合作开发设置中

② 运转QQ小程序需要配置配置合作开发者辅助工具路径，这样 Hbuildx 才知道去哪里打开QQ合作开发者辅助工具

③ Hbuildx 的配置结束了，我们还需要配置QQ合作开发者辅助工具，不然是会运转失败的

开启QQ合作开发者辅助工具中的服务端口

5. 工程项目运转

工程项目在运转之前我们需要先添加一点点代码才可以运转以后看到效果，不然只是两个白页面，并不是我们想看到的

pages 下面我们新增两个页面，在 pages.json当中配置一下此基础的tabbar部分

index 代码

<template> <view class=”content”> <!– <logo></logo> –> <!– #ifdef MP-WEIXIN –> <view class=”text-area”> <button type=”warn” size=”default” plain open-type=”getPhoneNumber” @getphonenumberntryCode || phoneNumber”>+{{ countryCode + – + phoneNumber }}</text> </text> </view> </view> <!– #endif –> <!– #ifndef MP-WEIXIN –> <view class=”text-area”><text class=”title”>请在QQ小业务流程中打开</text></view> <!– #endif –> </view></template> <script>export default { data() { return { title: Hello, }; }, methods: { getPhoneNumber(e) { if (!e.detail) { return; } } },};</script> <style lang=”scss”>.content { display: flex; flex-direction: column; align-items: center; justify-content: center;} .text-area { width: 80%; margin-top: 35%; font-size: 48rpx; button { margin: 60rpx 0; }}</style>

H5 代码

<template> <view class=”h5″> <logo></logo> <view class=”h5-title”> <!– #ifndef H5 –> <text>请在H5平台打开</text> <!– #endif –> </view> </view></template> <script> export default { data() { return { }; } }</script> <style lang=”scss”>.h5{ display: flex; flex-direction: column; align-items: center; justify-content: center; &-title{ font-size: 48rpx; }}</style>

然后点击运转，运转到QQ小业务流程，就可以看到我们刚才写的内容

6. 个人化小业务流程

什么是个人化小业务流程呢？就是不同的Tabbar，不同的导航栏，展示和普通小业务流程不一样的效果，这个中间凸起的Tabbar 我们可以采用Uview里边的Tabbar，也可以自己去定义两个tabbar，详尽的自定义tabbar教程我们可以看自定义tabbar教程，其他的个人化设置我们就不一一说了，感兴趣的可以查一下！

7. 合作开发时怎样初始化API

相信我们都知道合作开发QQ小业务流程需要配置服务器域名，而且服务器域名必须是 https:// 开头，拥有SSL证书，域名经过备案等等…….难道我们合作开发时就要提前设置好吗？

也不一定，如果我们公司，或是客户在起初并没给到我们域名的时候，我们可以QQ合作开发者辅助工具里，勾选不校验合法域名、web-view(业务域名)、TLS版本和HTTPS证书 ，然后利用我们的局域网 IP 地址就可以轻松进行合作开发，这是你就要分开环境了，我们的合作开发环境和生产环境！

以上都是合作开发环节，下面属于配置环节，做两个上架前的准备

二、QQ小业务流程正式发布

到这里我相信此基础的小业务流程合作开发部分我们都已经很了解了，那么产品经理这会儿说了，小程啊，小业务流程马上要上架了，你告诉我需要什么资料啊？或是说你准备一下上架吧，这会是不是很懵？别着急，接下来我们一步一步看

如果合作开发者拥有多个移动应用、网站应用、和公众帐号（包括小业务流程），可通过 UnionID 来区分用户的唯一性，因为只要是同两个QQ开放平台帐号下的移动应用、网站应用和公众帐号（包括小业务流程），用户的 UnionID 是唯一的。换句话说，同一用户，对同两个QQ开放平台下的不同应用，UnionID是相同的。

2. 配置小业务流程主体信息

为什么要提前配置小业务流程主体信息呢？看下图

上面的截图是我们的两个已经上架的小业务流程，小业务流程正式发布后，非个人类帐号可通过认证方式改名。所以我们在上架前最好把能配置的都配置一下，避免上架以后再去更改审核时间长、需要资料多等麻烦事儿！

3. 配置服务器域名

上面说了我们在合作开发时候可以通过 IP 来初始化后端大哥的 API，那么上架以后肯定是不行了；因每个QQ小业务流程需要事先设置通讯域名，小业务流程只可以跟指定的域名进行网络通信。包括普通 HTTPS 请求（wx.request）、上传文件（wx.uploadFile）、浏览文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。