構建模板小程式步驟

zmxcode發表於2021-07-16

專案說明：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. 獲取授權
  • 需要告知掃碼者授權的小程式
  • 未填寫基本資訊的小程式無法授權
  1. 上傳小程式
  • 小程式的請求域名需要存在於: 微信開放平臺>三方服務商>詳情>基本資訊>小程式伺服器域名.若不存在請新增，否則上傳小程式則會報錯
  1. 提交稽核
  • 後臺類小程式需要告知稽核著測試賬號，並簡單描述小程式
  1. 釋出小程式
  • 上線需要確定改小程式是否需要搜尋，不需要搜尋的小程式需要登入微信小程式>設定>隱私設定>關閉允許搜尋
本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章