微信小程序上線發(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)
所見即所得
在模擬器中看到的功能、頁面就是上傳發(fā)布后的功能、頁面。
可視化界面操作
缺點(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倉庫中指定分支的代碼(保證了代碼源的穩(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)的倉庫以及分支配置好，允許Job的時(shí)候就會(huì)自動(dòng)到對(duì)應(yīng)的倉庫拉取指定分支。
腳本拉取
如果團(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ā)人員將自己本地的配置覆蓋到倉庫里。
隨后就可以進(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)文章
這篇文章主要介紹了JavaScript防抖案例講解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了微信小程序 生成攜帶參數(shù)的二維碼,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值2019-10-10
TypeScript裝飾器之項(xiàng)目數(shù)據(jù)轉(zhuǎn)換詳解
這篇文章主要為大家詳細(xì)介紹了TypeScript項(xiàng)目中是如何進(jìn)行數(shù)據(jù)轉(zhuǎn)換的,文中的示例代碼簡(jiǎn)潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
本文詳細(xì)講解了JS截取字符串的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-02-02
這篇文章主要介紹了js使用cookie記錄用戶名的方法,通過完整實(shí)例形式分析了JavaScript針對(duì)cookie的創(chuàng)建、賦值及刪除等操作技巧,以及通過cookie記錄用戶登錄信息的方法,需要的朋友可以參考下2015-11-11
本篇文章給大家講解html中用canvas函數(shù)配合JS畫出一個(gè)圓錐形的圖形實(shí)例，有需要的朋友學(xué)習(xí)測(cè)試下吧。2017-12-12
javascript中函數(shù)的寫法實(shí)例代碼詳解
這篇文章主要介紹了javascript中函數(shù)的寫法 ,本文通過實(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)畫效果實(shí)例代碼
這篇文章主要介紹了javascript 通用loading動(dòng)畫效果實(shí)例代碼，有需要的朋友可以參考一下2014-01-01
延遲加載的函數(shù)，第一次調(diào)用后，會(huì)覆蓋原來的老函數(shù)，以后再次調(diào)用的是新函數(shù)，不會(huì)再進(jìn)行條件的判斷，提升效率2012-10-10