快捷導(dǎo)航

微信小程序上線發(fā)布具體流程簡析

更新時間：2022年10月29日 08:24:37 作者：mykurisu

眾所周知,微信小程序制作成功后,是需要提交到微信公眾平臺去審核的,審核通過后,才可以發(fā)布上線的,上線了之后才可以進行運營的,下面這篇文章主要給大家介紹了關(guān)于微信小程序上線發(fā)布具體流程的相關(guān)資料,需要的朋友可以參考下

前言

微信提供的開發(fā)者工具是可以預(yù)覽、上傳項目的，不過當我們實際進行項目開發(fā)的時候會發(fā)現(xiàn)這種預(yù)覽、發(fā)布方式不是那么的科學(xué)。

我們很難保證本地代碼的純凈，所以很容易錯發(fā)、漏發(fā)代碼；如果我們還有其他構(gòu)建指令的話就更加噩夢了，因為開發(fā)者工具的發(fā)布是直接上傳目錄，并不會再走自己的構(gòu)建指令了，經(jīng)常會出現(xiàn)忘記構(gòu)建就把包丟上去的情況。

這個時候就需要借助微信官方提供的CI工具，使得小程序的預(yù)覽、上傳可以脫離開發(fā)者工具，給前端同學(xué)們更大的發(fā)揮空間，下面我們先來看看現(xiàn)有發(fā)布模式。

發(fā)布模式一覽

開發(fā)者工具上傳發(fā)布

優(yōu)點

所見即所得

在模擬器中看到的功能、頁面就是上傳發(fā)布后的功能、頁面。

可視化界面操作

缺點

代碼源不穩(wěn)定，容易誤發(fā)代碼

開發(fā)者工具是會將當前運行的項目代碼完整的上傳到微信官方，并沒有版本的概念，這樣十分容易出現(xiàn)代碼錯漏的狀況。

需要手動構(gòu)建、部署，無法遠程發(fā)布or定時發(fā)布

無論是預(yù)覽還是部署，都必須開發(fā)人員手動觸發(fā)，故也無法遠程發(fā)布以及定時發(fā)布。

多開發(fā)人員發(fā)布時，需要頻繁替換體驗版本

CI工具上傳發(fā)布

利用CI工具，我們可以通過腳本拉取Git倉庫中指定分支的代碼(保證了代碼源的穩(wěn)定)，然后執(zhí)行自定義的構(gòu)建流程，最后調(diào)用CI工具內(nèi)的預(yù)覽/上傳方法，完成項目的預(yù)覽或上傳，并且可以接收預(yù)覽/上傳成功的回調(diào)。

又因為在調(diào)用上傳方法的時候可以指定機器人(也就是上傳人)，所以我們可以將體驗版的機器人固定住，后續(xù)每次上傳都可以無縫替換線上的體驗版，不需要人工登錄到小程序后臺去替換。

總體來說，利用CI工具進行預(yù)覽、上傳，可以完美避開開發(fā)者工具方案的所有缺點，并且讓開發(fā)者更加靈活的定制整個發(fā)布流，要說缺點是什么，那筆者只能說它沒有配備可視化的操作界面（但是可以二次開發(fā)）。

如何接入CI工具

密鑰申請&IP白名單配置

代碼拉取

避免本地代碼污染，保證代碼純凈，拉取的方式有很多種，這里挑兩個常見的場景介紹一下。

Jenkins

Jenkins內(nèi)置了接入Gitlab/Github的能力，我們只需要將對應(yīng)的倉庫以及分支配置好，允許Job的時候就會自動到對應(yīng)的倉庫拉取指定分支。

腳本拉取

如果團隊內(nèi)沒有Jenkins服務(wù)的支持，我們也可以通過Node來進行代碼拉取。

const childProcess = require('child_process')
childProcess.exec('git clone xxx', () => {
    // 代碼拉取成功后，就可以進行后續(xù)的構(gòu)建流程
})

代碼構(gòu)建

在進行項目構(gòu)建之前，我們需要先生成project.config.json。

也許大家會有疑惑，這個文件難道不是開發(fā)者工具會自動生成的嗎？

是的，但是這個文件實在太重要了，它里面有小程序的appid以及小程序內(nèi)置的各種構(gòu)建、上傳選項，所以我們需要保證文件內(nèi)容的正確性，并且在.gitignore中忽略該配置文件，不允許開發(fā)人員將自己本地的配置覆蓋到倉庫里。

隨后就可以進行我們熟悉的WEB前端工程化，以及可以方便的注入各種環(huán)境變量。因為筆者這個小程序是基于Taro開發(fā)的，所以生成project.config.json之后可以直接運行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)建成功，可運行CI工具提供的方法
                    }
                })
            })
        }
    })
})

預(yù)覽/上傳

構(gòu)建完成之后就可以走預(yù)覽/上傳的流程了，這些在微信的文檔里都說的十分清楚，筆者這里簡單的寫個上傳的示例：

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ā)布時間${dayjs().format('YYYY/MM/DD HH:mm:ss')}`,
                        })
                        // 上傳成功后續(xù)處理...
                        // 打上發(fā)布Tag...
                        // 郵件、企業(yè)IM等通知負責人提審版本...
                    }
                })
            })
        }
    })
})