本篇内容主要讲解“小程序预览码怎么生成”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“小程序预览码怎么生成”吧!
为了省事，直接把前后端的东西放在一起。
先看看入口文件index.js，从这里我们可以知道后端要做两件事情，第一要能访问到前端build出来的静态资源，第二要能与前端通过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())
// 处理静态资源 这里是前端build好之后的目录
app.use(koaStatic(
path.resolve(__dirname, '../dist')
))
// 路由处理接口
app.use(router.routes()).use(router.allowedMethods())
// 监听端口
app.listen(9871)
console.log(`[demo] start-quick is starting at port ${port}`)静态资源方面的话使用koa-static即可，重点是怎样给前端提供接口，这就要看路由了。
server/router/index.js
const Router = require('koa-router')
// 业务逻辑
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这里可以清晰看到，后端提供了四个接口，但具体每个接口的业务逻辑则封装在controller里的wx.js，如果以后还有别的业务逻辑，就在controller加相应的模块即可。
server/controller/wx.js
// 微信开发者工具接口调用逻辑
const {open, login, preview, build} = require('../utli/wxToolApi')
// 处理成功失败返回格式的工具
const {successBody, errorBody} = require('../utli')
class WxController {
/**
* 根据环境对mpvue项目进行打包
* @returns {Promise<void>}
*/
static async build (ctx) {
// 前端传过来的get参数
const query = ctx.request.query
if (!query || !query.env) {
ctx.body = errorBody(null, '构建项目失败')
return
}
const [err, data] = await build(query.env)
ctx.body = err ? errorBody(err, '构建项目失败') : successBody(data, '构建项目成功')
}
/**
* 打开微信开发者工具
* @returns {Promise<void>}
*/
static async open (ctx) {
const [err, data] = await open()
ctx.body = err ? errorBody(err, '打开微信开发者工具失败') : successBody(data, '打开微信开发者工具成功')
}
/**
* 登录微信开发者工具
* @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
为了代码更加清晰，这里将具体操作微信开发者工具的接口逻辑抽到util/wxToolApi.js里去了，仅仅处理怎样以统一格式返回给前端。
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 = {
/**
* 根据环境对mpvue项目进行打包
* @param env [doc, pre, prd]
* @returns {*}
*/
build (env) {
return promiseWrap(new Promise((resolve, reject) => {
// 进入项目目录
shell.cd(PROJECT_PATH)
// 执行打包命令
shell.exec(`npm run build:${env}`, function (code, stdout, stderr) {
resolve(stdout)
})
}))
},
/**
* 打开微信开发者工具
* @returns {*}
*/
open () {
return promiseWrap(new Promise((resolve, reject) => {
// 进入项目目录
shell.cd(INSTALL_PATH)
// 执行微信开发者工具接口“命令行启动工具”
shell.exec(`cli -o ${PROJECT_PATH}`, function (code, stdout, stderr) {
if (stderr) return reject(stderr)
resolve(stdout)
})
}))
},
/**
* 获取微信开发者工具端口号
* @returns {Promise<*>}
*/
async getPort () {
shell.cd(PORT_PATH)
// http 服务在工具启动后自动开启，HTTP 服务端口号在用户目录下记录，可通过检查用户目录、检查用户目录下是否有端口文件及尝试连接来判断工具是否安装/启动。
const [err, data] = await readFile(PORT_FILE_NAME)
return err ? errorBody(err, '读取端口号文件失败') : successBody(data, '读取端口号文件成功')
},
/**
* 微信开发者工具进行登录
* @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)
})
}))
},
/**
* 微信开发者工具获取预览码
* @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接口需要用命令行调用方式？那是因为HTTP调用方式必须加端口，比如open接口
# 打开工具 http://127.0.0.1:端口号/open # 打开/刷新项目 http://127.0.0.1:端口号/open?projectpath=项目全路径
如果你根本都没有打开微信开发者工具，在以下地方就会找不到端口：
端口号文件位置： macOS : ~/Library/Application Support/微信web开发者工具/Default/.ide Windows : ~/AppData/Local/微信web开发者工具/User Data/Default/.ide
所以作为一个全自动化打码工具，怎么可能还要自己去手动打开微信开发者工具呢！
后端的东西基本就那么多，终于到前端了，前端十分简单，就不多说了：
<template>
<div><group title="请选择环境"> <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表示取得数据的协定名称，image/png 是数据类型名称，base64 是数据的编码方法，逗号后面就是这个image/png文件base64编码后的数据。
base64Prefix: 'data:image/png;base64,',
// 登录二维码
loginImg: '',
// 预览二维码
preImg: '',
// 环境 默认为doc
env: 'doc',
// 所有的环境选项
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()
// 打开微信开发者工具
const {data: {code}} = await openProject()
if (code !== 0) {
// 登录微信开发者工具
await this.login()
hideLoading()
return
}
// 根据环境打包
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,'
其实到这里已经基本实现了整个打码功能，但如果真的要可以用还有很多事情没做。
部署到测试机器上。虽然可以直接用自己的机子作为部署这个工具的机器，但这实在是有点……如果要部署到测试机器上，有一个问题就是，微信开发者工具依赖图形界面，而服务器一般是命令行，虽然有 https://github.com/cytle/wech... 这样的项目移植微信开发者工具到linux，但这种部署方式似乎还是怪怪的。
假设完成了上述部署，进行小程序项目打包的环节需要修改一下，变成根据选择的环境，到相应的代码仓库（比如gitlab）拉取该环境的最新代码，然后进行安装依赖才能执行打包命令。
既然都做到这一步了，也不差把上传小程序也加上去，微信开发者工具接口也有提供，这样一来整个测试打码到上线的步骤都有了。
到此，相信大家对“小程序预览码怎么生成”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
