小程序預覽碼如何生成
小程序開發(fā)時,會可能會需要開發(fā)一個預覽碼,那么需要怎么開發(fā),下面是開發(fā)詳細流程及發(fā)布過程
最重要的事情莫過于看看微信開發(fā)者工具有沒有給我們提供這樣的接口讓我們?nèi)ゲ僮?,?jīng)過一番查閱文檔我們會發(fā)現(xiàn),果然有!
https://developers.weixin.qq....
會發(fā)現(xiàn),文檔給我們提供了兩種方式的接口,命令行調(diào)用以及HTTP調(diào)用。有了接口,一切都好辦了,無非就是調(diào)一下接口,拿到二維碼,貼到頁面上去而已嘛,很簡單。
梳理開發(fā)流程
我們就把這個簡單的事情,用流程圖說明一下:
https://www.processon.com/vie...
所需技術(shù)
工欲善其事,必先利其器,我們要搞這個東西,還是先要把用到的技術(shù)整理一下。
- 微信開發(fā)者工具
- 一個小程序項目(這里以一個mpvue項目為例子)
- 前端vue + vux,這里前端沒什么需要做的東西,這樣的搭配純屬是因為本來就正在做移動端的東西,直接拿來用而已。
- 后端koa2,當然后端用什么都可以,這里選擇koa2,純屬是因為我也不會用別的……
- 前后端HTTP請求統(tǒng)一用axios
- 涉及到node操作命令行需要用到shelljs
好像沒別的東西了,用到了再說吧。
擼起袖子從后端開始
為了省事,直接把前后端的東西放在一起。項目目錄:
可以看到server這個目錄下放的都是后端的東西。
server/index.js
先看看入口文件index.js,從這里我們可以知道后端要做兩件事情,第一要能訪問到前端build出來的靜態(tài)資源,第二要能與前端通過HTTP接口進行交互。見代碼:
const path = require('path') const Koa = require('koa') const koaStatic = require('koa-static') const bodyParser = require('koa-bodyparser') const router = require('./router') const app = new Koa() const port = 9871 app.use(bodyParser()) // 處理靜態(tài)資源 這里是前端build好之后的目錄 app.use(koaStatic( path.resolve(__dirname, '../dist') )) // 路由處理接口 app.use(router.routes()).use(router.allowedMethods()) // 監(jiān)聽端口 app.listen(9871) console.log(`[demo] start-quick is starting at port ${port}`)
靜態(tài)資源方面的話使用koa-static即可,重點是怎樣給前端提供接口,這就要看路由了。
server/router/index.js
const Router = require('koa-router') // 業(yè)務邏輯 const wx = require('../controller/wx') const router = new Router({ // 接口前綴 比如open接口 請求路徑就是/api/open prefix: '/api' }) router.get('/open', wx.open) .get('/login', wx.login) .get('/preview', wx.preview) .get('/build', wx.build) module.exports = router
這里可以清晰看到,后端提供了四個接口,但具體每個接口的業(yè)務邏輯則封裝在controller里的wx.js,如果以后還有別的業(yè)務邏輯,就在controller加相應的模塊即可。
server/controller/wx.js
// 微信開發(fā)者工具接口調(diào)用邏輯 const {open, login, preview, build} = require('../utli/wxToolApi') // 處理成功失敗返回格式的工具 const {successBody, errorBody} = require('../utli') class WxController { /** * 根據(jù)環(huán)境對mpvue項目進行打包 * @returns {Promise<void>} */ static async build (ctx) { // 前端傳過來的get參數(shù) const query = ctx.request.query if (!query || !query.env) { ctx.body = errorBody(null, '構(gòu)建項目失敗') return } const [err, data] = await build(query.env) ctx.body = err ? errorBody(err, '構(gòu)建項目失敗') : successBody(data, '構(gòu)建項目成功') } /** * 打開微信開發(fā)者工具 * @returns {Promise<void>} */ static async open (ctx) { const [err, data] = await open() ctx.body = err ? errorBody(err, '打開微信開發(fā)者工具失敗') : successBody(data, '打開微信開發(fā)者工具成功') } /** * 登錄微信開發(fā)者工具 * @returns {Promise<void>} */ static async login (ctx) { const [err, data] = await login() ctx.body = err ? errorBody(err, '登錄二維碼返回失敗') : successBody(data, '登錄二維碼返回成功') } /** * 查看預覽碼 * @returns {Promise<void>} */ static async preview (ctx) { const [err, data] = await preview() ctx.body = err ? errorBody(err, '預覽二維碼返回失敗') : successBody(data, '預覽二維碼返回成功') } } module.exports = WxController
為了代碼更加清晰,這里將具體操作微信開發(fā)者工具的接口邏輯抽到util/wxToolApi.js里去了,僅僅處理怎樣以統(tǒng)一格式返回給前端。
util/wxToolApi.js
const {promiseWrap, successBody, errorBody} = require('../utli') const {INSTALL_PATH, PROJECT_PATH, PORT_PATH, PORT_FILE_NAME, HOST} = require('../const') const {readFile} = require('../utli/nodeApi') const shell = require('shelljs') const axios = require('axios') module.exports = { /** * 根據(jù)環(huán)境對mpvue項目進行打包 * @param env [doc, pre, prd] * @returns {*} */ build (env) { return promiseWrap(new Promise((resolve, reject) => { // 進入項目目錄 shell.cd(PROJECT_PATH) // 執(zhí)行打包命令 shell.exec(`npm run build:${env}`, function (code, stdout, stderr) { resolve(stdout) }) })) }, /** * 打開微信開發(fā)者工具 * @returns {*} */ open () { return promiseWrap(new Promise((resolve, reject) => { // 進入項目目錄 shell.cd(INSTALL_PATH) // 執(zhí)行微信開發(fā)者工具接口“命令行啟動工具” shell.exec(`cli -o ${PROJECT_PATH}`, function (code, stdout, stderr) { if (stderr) return reject(stderr) resolve(stdout) }) })) }, /** * 獲取微信開發(fā)者工具端口號 * @returns {Promise<*>} */ async getPort () { shell.cd(PORT_PATH) // http 服務在工具啟動后自動開啟,HTTP 服務端口號在用戶目錄下記錄,可通過檢查用戶目錄、檢查用戶目錄下是否有端口文件及嘗試連接來判斷工具是否安裝/啟動。 const [err, data] = await readFile(PORT_FILE_NAME) return err ? errorBody(err, '讀取端口號文件失敗') : successBody(data, '讀取端口號文件成功') }, /** * 微信開發(fā)者工具進行登錄 * @returns {*} */ login () { return promiseWrap(new Promise(async (resolve, reject) => { // 獲取端口號 const portData = await module.exports.getPort() if (portData.code !== 0) { reject(portData) return } const port = portData.data axios.get(`http://${HOST}:${port}/login?format=base64`) .then(res => { resolve(res.data) }) .catch(e => { reject(e) }) })) }, /** * 微信開發(fā)者工具獲取預覽碼 * @returns {*} */ preview () { return promiseWrap(new Promise(async (resolve, reject) => { const portData = await module.exports.getPort() if (portData.code !== 0) { reject(portData) return } const port = portData.data axios.get(`http://${HOST}:${port}/preview?format=base64&projectpath=${encodeURIComponent(PROJECT_PATH)}`) .then(res => { resolve(res.data) }) .catch(e => { reject(e) }) })) } }
這里有一點需要注意,為什么只有open接口需要用命令行調(diào)用方式?那是因為HTTP調(diào)用方式必須加端口,比如open接口
# 打開工具 http://127.0.0.1:端口號/open # 打開/刷新項目 http://127.0.0.1:端口號/open?projectpath=項目全路徑
如果你根本都沒有打開微信開發(fā)者工具,在以下地方就會找不到端口:
端口號文件位置: macOS : ~/Library/Application Support/微信web開發(fā)者工具/Default/.ide Windows : ~/AppData/Local/微信web開發(fā)者工具/User Data/Default/.ide
所以作為一個全自動化打碼工具,怎么可能還要自己去手動打開微信開發(fā)者工具呢!
前端
后端的東西基本就那么多,終于到前端了,前端十分簡單,就不多說了:
<template> <div> <group title="請選擇環(huán)境"> <radio :options="envOption" v-model="env"></radio> </group> <x-button class="btn" type="default" @click.native="handlePreviewProject">點擊預覽</x-button> <div v-if="loginImg" class="code"> <divider>請先登錄</divider> <img class="code-img" :src="loginImg" </div> <div v-if="preImg" class="code" id="preImg"> <divider>預覽二維碼</divider> <img class="code-img" :src="`${base64Prefix}${preImg}`" </div> </div> </template> <script> import {openProject, login, previewProject, buildProject} from 'SERVICES/index' import {showLoading, hideLoading} from 'UTILS' import { Divider, XButton, Radio, Group } from 'vux' export default { data () { return { // data表示取得數(shù)據(jù)的協(xié)定名稱,image/png 是數(shù)據(jù)類型名稱,base64 是數(shù)據(jù)的編碼方法,逗號后面就是這個image/png文件base64編碼后的數(shù)據(jù)。 base64Prefix: 'data:image/png;base64,', // 登錄二維碼 loginImg: '', // 預覽二維碼 preImg: '', // 環(huán)境 默認為doc env: 'doc', // 所有的環(huán)境選項 envOption: ['doc', 'pre', 'prd'] } }, components: { Divider, XButton, Radio, Group }, methods: { handleError (msg) { alert(msg) }, async login () { const {data: {code, data, msg}} = await login() if (code !== 0) { this.handleError(msg) return code } this.loginImg = data return code }, async previewProject () { const {data: {code, data, msg}} = await previewProject() if (code !== 0) { this.handleError(msg) return code } this.preImg = data return code }, async handlePreviewProject () { showLoading() // 重置二維碼 this.resetImg() // 打開微信開發(fā)者工具 const {data: {code}} = await openProject() if (code !== 0) { // 登錄微信開發(fā)者工具 await this.login() hideLoading() return } // 根據(jù)環(huán)境打包 await buildProject(this.env) // 預覽 await this.previewProject() hideLoading() }, resetImg () { this.loginImg = '' this.preImg = '' } } } </script> <style lang='less'> .btn { width: 90%!important; margin: 30px auto 30px auto; } .code { display: flex; align-items: center; flex-direction: column; .code-img { width: 300px; height: 300px; } } </style>
這里有一個坑就是,login返回的base64是帶了data:image/jpeg;base64,前綴的,所以可以直接放到img的src里,但是獲取預覽碼的preview返回的卻沒有這個前綴!所以需要自己加上去,就是那個base64Prefix:'data:image/png;base64,'
最后
其實到這里已經(jīng)基本實現(xiàn)了整個打碼功能,但如果真的要可以用還有很多事情沒做。
- 部署到測試機器上。雖然可以直接用自己的機子作為部署這個工具的機器,但這實在是有點……如果要部署到測試機器上,有一個問題就是,微信開發(fā)者工具依賴圖形界面,而服務器一般是命令行,雖然有 https://github.com/cytle/wech... 這樣的項目移植微信開發(fā)者工具到linux,但這種部署方式似乎還是怪怪的。
- 假設(shè)完成了上述部署,進行小程序項目打包的環(huán)節(jié)需要修改一下,變成根據(jù)選擇的環(huán)境,到相應的代碼倉庫(比如gitlab)拉取該環(huán)境的最新代碼,然后進行安裝依賴才能執(zhí)行打包命令。
- 既然都做到這一步了,也不差把上傳小程序也加上去,微信開發(fā)者工具接口也有提供,這樣一來整個測試打碼到上線的步驟都有了。
HiShop小程序工具提供多類型商城/門店小程序制作,可視化編輯 1秒生成5步上線。通過拖拽、拼接模塊布局小程序商城頁面,所看即所得,只需要美工就能做出精美商城。更多小程序商店請查看:小程序商店