构建模板小程序步骤

项目说明：uni-app构建小程序，vue+element构建后台框架。

原理：微信开放平台可绑定第三方平台服务商，在第三方服务商的详情>开发配置中可绑定开发小程序，通过此小程序上传的代码可成为小程序模板，通过小程序模板库的某个模板，可批量生成小程序。

批量生成小程序的时候需要先填写项目名称，小程序appid,oemid等值，填写完毕需要小程序的管理者授权，授权成功后则可以根据填写数据生成对应模板的小程序，此时填写的值以及小程序的信息将被写入小程序的模板然后生成对应的小程序。故，在小程序内部则可通过ext.json获取到对应的值。

第一步 创建两个分支

分支一：保存原始代码方便日后调试
分之二：为分支一保存构建后的代码，日后每次都从在分支二合并分支的新增代码

第二步修改manifest.json文件的小程配置

改manifest.json文件

"mp-weixin": {
    /* 小程序特有相关 */
    "usingComponents": true,
    "appid": "",//已绑定至微信开放平台第三方平台的开发小程序,此处需要填写
    "setting": {
      "urlCheck": false,
      "es6": true
    }
  }

第三步 定义ext.json，将文件存储于项目根目录，方便每次打包后将此文件复制到打包后项目的根目录

ext.json文件

{
  "extEnable": true,
  "extAppid": "",//已绑定至微信开放平台第三方平台的开发小程序，可通过此小程序，将模板代码上传至小程序模板库的草稿箱中,此处需要填写
  "directCommit": false,
  "ext": {
    "oem_id": 0,//oem项目的用户id,此处置空
    "appname":"", //生成小程序的名称,此处置空
    "logo":""//生成小程序的logo,此处置空
  }
}

第四步 接收ext.json文件的值并保存至仓库

App.vue文件

import { IExt } from "@/api/types";
import { LoginModule } from "@/store/modules/login";

console.log(uni.getExtConfigSync());
if (uni.getExtConfigSync()) {
  LoginModule.setExt(uni.getExtConfigSync() as IExt);
}

login.ts文件

ext = {
oem_id: 0,
appname: '',
logo: '',
}

@Mutation
public setExt(ext: IExt) {
this.ext = ext
uni.setNavigationBarTitle({
  title: ext.appname,
})
}

第五步 修改项目中公用的项目名称,项目logo,Copyright等标识

第六步 请求的header携带oem参数

api.ts文件

import { LoginModule } from "@/store/modules/login";

const oem = LoginModule.ext.oem_id
config.header['oem'] = oem

第七步 打包上传

yarn run build:mp-weixin

• 复制ext.json到包的根目录
• 打开微信开放平台将找到对应模板点击 添加到模板库
• 在批量小程序后台中添加项目模板，填写templateID（模板库中可找到），填写请求地址（记得写线上的）。然后创建成功

需要注意：用户的请求地址将作为服务地址在用户扫码授权后直接填写至小程序中，若授权时填写的不正确，小程序模板重新生成后域名发生改变，需要直接登录小程序后台进行更改，或者再次授权进行更改。

第八步 批量小程序后台(开发后使用)操作说明

1. 获取授权

• 需要告知扫码者授权的小程序
• 未填写基本信息的小程序无法授权

2. 上传小程序

• 小程序的请求域名需要存在于: 微信开放平台>三方服务商>详情>基本信息>小程序服务器域名.若不存在请添加，否则上传小程序则会报错

3. 提交审核

• 后台类小程序需要告知审核着测试账号，并简单描述小程序

4. 发布小程序

• 上线需要确定改小程序是否需要搜索，不需要搜索的小程序需要登录微信小程序>设置>隐私设置>关闭允许搜索

本作品采用《CC 协议》，转载必须注明作者和本文链接