微信小程序上線發(fā)布具體流程簡(jiǎn)析
前言
微信提供的開(kāi)發(fā)者工具是可以預(yù)覽、上傳項(xiàng)目的,不過(guò)當(dāng)我們實(shí)際進(jìn)行項(xiàng)目開(kāi)發(fā)的時(shí)候會(huì)發(fā)現(xiàn)這種預(yù)覽、發(fā)布方式不是那么的科學(xué)。
我們很難保證本地代碼的純凈,所以很容易錯(cuò)發(fā)、漏發(fā)代碼;如果我們還有其他構(gòu)建指令的話就更加噩夢(mèng)了,因?yàn)殚_(kāi)發(fā)者工具的發(fā)布是直接上傳目錄,并不會(huì)再走自己的構(gòu)建指令了,經(jīng)常會(huì)出現(xiàn)忘記構(gòu)建就把包丟上去的情況。
這個(gè)時(shí)候就需要借助微信官方提供的CI工具,使得小程序的預(yù)覽、上傳可以脫離開(kāi)發(fā)者工具,給前端同學(xué)們更大的發(fā)揮空間,下面我們先來(lái)看看現(xiàn)有發(fā)布模式。
發(fā)布模式一覽
開(kāi)發(fā)者工具上傳發(fā)布
優(yōu)點(diǎn)
所見(jiàn)即所得
在模擬器中看到的功能、頁(yè)面就是上傳發(fā)布后的功能、頁(yè)面。
可視化界面操作


缺點(diǎn)
代碼源不穩(wěn)定,容易誤發(fā)代碼
開(kāi)發(fā)者工具是會(huì)將當(dāng)前運(yùn)行的項(xiàng)目代碼完整的上傳到微信官方,并沒(méi)有版本的概念,這樣十分容易出現(xiàn)代碼錯(cuò)漏的狀況。
需要手動(dòng)構(gòu)建、部署,無(wú)法遠(yuǎn)程發(fā)布o(jì)r定時(shí)發(fā)布
無(wú)論是預(yù)覽還是部署,都必須開(kāi)發(fā)人員手動(dòng)觸發(fā),故也無(wú)法遠(yuǎn)程發(fā)布以及定時(shí)發(fā)布。
多開(kāi)發(fā)人員發(fā)布時(shí),需要頻繁替換體驗(yàn)版本

CI工具上傳發(fā)布
利用CI工具,我們可以通過(guò)腳本拉取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ù)每次上傳都可以無(wú)縫替換線上的體驗(yàn)版,不需要人工登錄到小程序后臺(tái)去替換。
總體來(lái)說(shuō),利用CI工具進(jìn)行預(yù)覽、上傳,可以完美避開(kāi)開(kāi)發(fā)者工具方案的所有缺點(diǎn),并且讓開(kāi)發(fā)者更加靈活的定制整個(gè)發(fā)布流,要說(shuō)缺點(diǎn)是什么,那筆者只能說(shuō)它沒(méi)有配備可視化的操作界面(但是可以二次開(kāi)發(fā))。
如何接入CI工具
密鑰申請(qǐng)&IP白名單配置

代碼拉取
避免本地代碼污染,保證代碼純凈,拉取的方式有很多種,這里挑兩個(gè)常見(jiàn)的場(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)沒(méi)有Jenkins服務(wù)的支持,我們也可以通過(guò)Node來(lái)進(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è)文件難道不是開(kāi)發(fā)者工具會(huì)自動(dòng)生成的嗎?
是的,但是這個(gè)文件實(shí)在太重要了,它里面有小程序的appid以及小程序內(nèi)置的各種構(gòu)建、上傳選項(xiàng),所以我們需要保證文件內(nèi)容的正確性,并且在.gitignore中忽略該配置文件,不允許開(kāi)發(fā)人員將自己本地的配置覆蓋到倉(cāng)庫(kù)里。
隨后就可以進(jìn)行我們熟悉的WEB前端工程化,以及可以方便的注入各種環(huán)境變量。因?yàn)楣P者這個(gè)小程序是基于Taro開(kāi)發(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ù)覽/上傳的流程了,這些在微信的文檔里都說(shuō)的十分清楚,筆者這里簡(jiǎn)單的寫(xiě)個(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)替換,只需要每次上傳的開(kāi)發(fā)者是同一個(gè)就可以了。
小程序助手
比較遠(yuǎn)古的時(shí)期,微信還沒(méi)有小程序助手這個(gè)玩意,這時(shí)候想發(fā)版審核通過(guò)的小程序就必須借助電腦。
現(xiàn)在微信提供了小程序助手,通過(guò)它我們可以遠(yuǎn)程提審、遠(yuǎn)程發(fā)布。


總結(jié)
到此這篇關(guān)于微信小程序上線發(fā)布具體流程的文章就介紹到這了,更多相關(guān)微信小程序發(fā)布流程內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
TypeScript裝飾器之項(xiàng)目數(shù)據(jù)轉(zhuǎn)換詳解
這篇文章主要為大家詳細(xì)介紹了TypeScript項(xiàng)目中是如何進(jìn)行數(shù)據(jù)轉(zhuǎn)換的,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
JS+canvas畫(huà)一個(gè)圓錐實(shí)例代碼
本篇文章給大家講解html中用canvas函數(shù)配合JS畫(huà)出一個(gè)圓錐形的圖形實(shí)例,有需要的朋友學(xué)習(xí)測(cè)試下吧。2017-12-12
javascript中函數(shù)的寫(xiě)法實(shí)例代碼詳解
這篇文章主要介紹了javascript中函數(shù)的寫(xiě)法 ,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-10-10
基于JavaScript實(shí)現(xiàn)Tab選項(xiàng)卡切換效果
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)Tabs選項(xiàng)卡切換效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11
javascript 通用loading動(dòng)畫(huà)效果實(shí)例代碼
這篇文章主要介紹了javascript 通用loading動(dòng)畫(huà)效果實(shí)例代碼,有需要的朋友可以參考一下2014-01-01

