微信小程序上線發(fā)布具體流程簡(jiǎn)析
前言
微信提供的開發(fā)者工具是可以預(yù)覽、上傳項(xiàng)目的，不過當(dāng)我們實(shí)際進(jìn)行項(xiàng)目開發(fā)的時(shí)候會(huì)發(fā)現(xiàn)這種預(yù)覽、發(fā)布方式不是那么的科學(xué)。
我們很難保證本地代碼的純凈，所以很容易錯(cuò)發(fā)、漏發(fā)代碼；如果我們還有其他構(gòu)建指令的話就更加噩夢(mèng)了，因?yàn)殚_發(fā)者工具的發(fā)布是直接上傳目錄，并不會(huì)再走自己的構(gòu)建指令了，經(jīng)常會(huì)出現(xiàn)忘記構(gòu)建就把包丟上去的情況。
這個(gè)時(shí)候就需要借助微信官方提供的CI工具，使得小程序的預(yù)覽、上傳可以脫離開發(fā)者工具，給前端同學(xué)們更大的發(fā)揮空間，下面我們先來看看現(xiàn)有發(fā)布模式。
發(fā)布模式一覽
開發(fā)者工具上傳發(fā)布
優(yōu)點(diǎn)
所見即所得
在模擬器中看到的功能、頁(yè)面就是上傳發(fā)布后的功能、頁(yè)面。
可視化界面操作
缺點(diǎn)
代碼源不穩(wěn)定，容易誤發(fā)代碼
開發(fā)者工具是會(huì)將當(dāng)前運(yùn)行的項(xiàng)目代碼完整的上傳到微信官方，并沒有版本的概念，這樣十分容易出現(xiàn)代碼錯(cuò)漏的狀況。
需要手動(dòng)構(gòu)建、部署，無法遠(yuǎn)程發(fā)布o(jì)r定時(shí)發(fā)布
無論是預(yù)覽還是部署，都必須開發(fā)人員手動(dòng)觸發(fā)，故也無法遠(yuǎn)程發(fā)布以及定時(shí)發(fā)布。
多開發(fā)人員發(fā)布時(shí)，需要頻繁替換體驗(yàn)版本
CI工具上傳發(fā)布
利用CI工具，我們可以通過腳本拉取Git倉(cāng)庫(kù)中指定分支的代碼(保證了代碼源的穩(wěn)定)，然后執(zhí)行自定義的構(gòu)建流程，最后調(diào)用CI工具內(nèi)的預(yù)覽/上傳方法，完成項(xiàng)目的預(yù)覽或上傳，并且可以接收預(yù)覽/上傳成功的回調(diào)。
又因?yàn)樵谡{(diào)用上傳方法的時(shí)候可以指定機(jī)器人(也就是上傳人)，所以我們可以將體驗(yàn)版的機(jī)器人固定住，后續(xù)每次上傳都可以無縫替換線上的體驗(yàn)版，不需要人工登錄到小程序后臺(tái)去替換。
總體來說，利用CI工具進(jìn)行預(yù)覽、上傳，可以完美避開開發(fā)者工具方案的所有缺點(diǎn)，并且讓開發(fā)者更加靈活的定制整個(gè)發(fā)布流，要說缺點(diǎn)是什么，那筆者只能說它沒有配備可視化的操作界面（但是可以二次開發(fā)）。
如何接入CI工具
密鑰申請(qǐng)&IP白名單配置
代碼拉取
避免本地代碼污染，保證代碼純凈，拉取的方式有很多種，這里挑兩個(gè)常見的場(chǎng)景介紹一下。
Jenkins
Jenkins內(nèi)置了接入Gitlab/Github的能力，我們只需要將對(duì)應(yīng)的倉(cāng)庫(kù)以及分支配置好，允許Job的時(shí)候就會(huì)自動(dòng)到對(duì)應(yīng)的倉(cāng)庫(kù)拉取指定分支。
腳本拉取
如果團(tuán)隊(duì)內(nèi)沒有Jenkins服務(wù)的支持，我們也可以通過Node來進(jìn)行代碼拉取。
const childProcess = require('child_process')
childProcess.exec('git clone xxx', () => {
// 代碼拉取成功后，就可以進(jìn)行后續(xù)的構(gòu)建流程
})代碼構(gòu)建
在進(jìn)行項(xiàng)目構(gòu)建之前，我們需要先生成project.config.json。
也許大家會(huì)有疑惑，這個(gè)文件難道不是開發(fā)者工具會(huì)自動(dòng)生成的嗎？
是的，但是這個(gè)文件實(shí)在太重要了，它里面有小程序的appid以及小程序內(nèi)置的各種構(gòu)建、上傳選項(xiàng)，所以我們需要保證文件內(nèi)容的正確性，并且在.gitignore中忽略該配置文件，不允許開發(fā)人員將自己本地的配置覆蓋到倉(cāng)庫(kù)里。
隨后就可以進(jìn)行我們熟悉的WEB前端工程化，以及可以方便的注入各種環(huán)境變量。因?yàn)楣P者這個(gè)小程序是基于Taro開發(fā)的，所以生成project.config.json之后可以直接運(yùn)行Taro提供的構(gòu)建指令。
const fs = require('fs')
const path = require('path')
const childProcess = require('child_process')
const ci = require('miniprogram-ci')
const ENV = process.env.MINI_APP_ENV
const APPID = ENV === 'prod' ? 'PROD_APPID' : 'TEST_APPID'
childProcess.exec('git clone xxx', () => {
fs.readFile(path.join(__dirname, '../project.pre.config.json'), (err, data) => {
if (err) {
// 異常處理...
} else {
const pcj = JSON.parse(data)
pcj.appid = APPID
fs.writeFile(path.join(__dirname, '../project.config.json'), JSON.stringify(pcj, null, 2), () => {
childProcess.exec('taro build --type weapp', async (err) => {
if (err) {
// 異常處理...
} else {
// 構(gòu)建成功，可運(yùn)行CI工具提供的方法
}
})
})
}
})
})預(yù)覽/上傳
構(gòu)建完成之后就可以走預(yù)覽/上傳的流程了，這些在微信的文檔里都說的十分清楚，筆者這里簡(jiǎn)單的寫個(gè)上傳的示例：
const fs = require('fs')
const path = require('path')
const childProcess = require('child_process')
const dayjs = require('dayjs')
const ci = require('miniprogram-ci')
const ENV = process.env.MINI_APP_ENV
const APPID = ENV === 'prod' ? 'PROD_APPID' : 'TEST_APPID'
childProcess.exec('git clone xxx', () => {
fs.readFile(path.join(__dirname, '../project.pre.config.json'), (err, data) => {
if (err) {
// 異常處理...
} else {
const pcj = JSON.parse(data)
pcj.appid = APPID
fs.writeFile(path.join(__dirname, '../project.config.json'), JSON.stringify(pcj, null, 2), () => {
childProcess.exec('taro build --type weapp', async (err) => {
if (err) {
// 異常處理...
} else {
const version = `${ENV.toUpperCase()}.${dayjs().format('YYMMDD.HHmm')}`
const project = new ci.Project({
appid: APPID,
type: 'miniProgram',
projectPath: path.join(__dirname, '../dist'),
privateKeyPath: path.join(__dirname, `./keys/private.${APPID}.key`),
ignores: ['node_modules/**/*'],
})
const uploadResult = await ci.upload({
project,
version,
robot: ROBOT_ID[ENV],
desc: `CI發(fā)布 -- 發(fā)布時(shí)間${dayjs().format('YYYY/MM/DD HH:mm:ss')}`,
})
// 上傳成功后續(xù)處理...
// 打上發(fā)布Tag...
// 郵件、企業(yè)IM等通知負(fù)責(zé)人提審版本...
}
})
})
}
})
})體驗(yàn)版替換
這里多嘮一個(gè)豆知識(shí)，小程序體驗(yàn)版指定了一次之后，后面是可以直接替換的，不需要每次都登錄后臺(tái)手動(dòng)替換，只需要每次上傳的開發(fā)者是同一個(gè)就可以了。
小程序助手
比較遠(yuǎn)古的時(shí)期，微信還沒有小程序助手這個(gè)玩意，這時(shí)候想發(fā)版審核通過的小程序就必須借助電腦。
現(xiàn)在微信提供了小程序助手，通過它我們可以遠(yuǎn)程提審、遠(yuǎn)程發(fā)布。
總結(jié)
到此這篇關(guān)于微信小程序上線發(fā)布具體流程的文章就介紹到這了,更多相關(guān)微信小程序發(fā)布流程內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了js讀取配置文件的方法,需要的朋友可以參考下2014-02-02
這篇文章主要給大家介紹了關(guān)于ES6中類（Class）的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
認(rèn)識(shí)Knockout及如何使用Knockout綁定上下文
Knockout簡(jiǎn)稱ko，是一個(gè)輕量級(jí)的javascript類庫(kù)，采用MVVM設(shè)計(jì)模式（即Model、view、viewModel），簡(jiǎn)單優(yōu)雅的實(shí)現(xiàn)了雙向綁定，實(shí)時(shí)更新，幫助您使用干凈的數(shù)據(jù)模型來創(chuàng)建豐富的、響應(yīng)式的用戶界面2015-12-12
js動(dòng)態(tài)設(shè)置select下拉菜單的默認(rèn)選中項(xiàng)實(shí)例
今天小編就為大家分享一篇js動(dòng)態(tài)設(shè)置select下拉菜單的默認(rèn)選中項(xiàng)實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08![我也種棵OO樹JXTree[js+css+xml]](http://img.jbzj.com/images/xgimg/bcimg4.png)
我也種棵OO樹JXTree[js+css+xml]...2007-04-04
通過偽協(xié)議解決父頁(yè)面與iframe頁(yè)面通信的問題
這篇文章主要介紹了通過偽協(xié)議解決父頁(yè)面與iframe頁(yè)面通信的問題,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了小程序支持SVG，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了帶左右箭頭圖片輪播的JS代碼，有需要的朋友可以參考一下2013-12-12
js拖拉表格實(shí)現(xiàn)內(nèi)容計(jì)算
這篇文章主要為大家詳細(xì)介紹了js拖拉表格實(shí)現(xiàn)內(nèi)容計(jì)算，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
我們需要引入幾個(gè)相關(guān)的概念：執(zhí)行環(huán)境棧、全局對(duì)象、執(zhí)行環(huán)境、變量對(duì)象、活動(dòng)對(duì)象、作用域和作用域鏈等，這些概念正是JS引擎工作的核心組件。這篇文章的目的不是孤立的為你講解每一個(gè)概念需要的朋友可以參考下2016-11-11