pp电子

登录
免费开通
产品中心
更多服务

小程序预览码怎样天生

—— 2018 ——
07/18
00:00

泉源：

作者：未知

阅读：0

栏目：小程序开发

2018/7/18 0:00:00 泉源：不详 作者：未知

小程序开发时，，，，，会可能会需要开发一个预览码，，，，，那么需要怎么开发，，，，，下面是开发详细流程及宣布历程

小程序预览码怎样天生

找微信开发者工具的接口

最主要的事情莫过于看看微信开发者工具有没有给我们提供这样的接口让我们去操作，，，，，经由一番查阅文档我们会发明，，，，，果真有！

https://developers.weixin.qq....
会发明，，，，，文档给我们提供了两种方式的接口，，，，，下令行挪用以及HTTP挪用。 。有了接口，，，，，一切都好办了，，，，，无非就是调一下接口，，，，，拿到二维码，，，，，贴到页面上去罢了嘛，，，，，很简朴。 。

梳理开发流程
我们就把这个简朴的事情，，，，，用流程图说明一下：
https://www.processon.com/vie...

小程序预览码怎样天生

 

所需手艺

工欲善其事，，，，，必先利其器，，，，，我们要搞这个工具，，，，，照旧先要把用到的手艺整理一下。 。

  1. 微信开发者工具
  2. 一个小程序项目（这里以一个mpvue项目为例子）
  3. 前端vue + vux，，，，，这里前端没什么需要做的工具，，，，，这样的搭配纯属是由于原来就正在做移动端的工具，，，，，直接拿来用罢了。 。
  4. 后端koa2，，，，，虽然后端用什么都可以，，，，，这里选择koa2，，，，，纯属是由于我也不会用别的……
  5. 前后端HTTP请求统一用axios
  6. 涉及到node操作下令行需要用到shelljs

似乎没别的工具了，，，，，用到了再说吧。 。

撸起袖子从后端最先

为了省事，，，，，直接把前后端的工具放在一起。 。项目目录：

 

小程序预览码怎样天生

可以看到server这个目录下放的都是后端的工具。 。

server/index.js
先看看入口文件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,'

最后

着实到这里已经基本实现了整个打码功效，，，，，但若是真的要可以用尚有许多事情没做。 。

  1. 安排到测试机械上。 。虽然可以直接用自己的机子作为安排这个工具的机械，，，，，但这着实是有点……若是要安排到测试机械上，，，，，有一个问题就是，，，，，微信开发者工具依赖图形界面，，，，，而服务器一般是下令行，，，，，虽然有 https://github.com/cytle/wech... 这样的项目移植微信开发者工具到linux，，，，，但这种安排方式似乎照旧怪怪的。 。
  2. 假设完成了上述安排，，，，，举行小程序项目打包的环节需要修改一下，，，，，酿成凭证选择的情形，，，，，到响应的代码客栈（好比gitlab）拉取该情形的最新代码，，，，，然后举行装置依赖才华执行打包下令。 。
  3. 既然都做到这一步了，，，，，也不差把上传小程序也加上去，，，，，微信开发者工具接口也有提供，，，，，这样一来整个测试打码到上线的方法都有了。 。

小程序工具提供多类型商城/门店小程序制作，，，，，可视化编辑 1秒天生5步上线。 。通过拖拽、拼接模？？？？？榻峁剐〕绦蛏坛且趁，，，，，所看即所得，，，，，只需要美工就能做出细腻商城。 。更多小程序市肆请审查：小程序市肆


【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，，，若有知识产权人并不肯意我们使用，，，，，若是有侵权请连忙联系。 。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，，，仅系客观性形貌，，，，，如您需要相识该类商品/服务详细的资讯，，，，，请您直接与该类商品/服务的提供者联系。 。


KESION pp电子软件

KESION pp电子软件是海内领先的在线教育软件及私域社交电商软件服务提供商，，，，，恒久专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。 。
公司焦点产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化自力安排品牌网校和在线教育咨询等。 。

KESION 一直通过手艺立异，，，，，提供产品和服务，，，，，助力企业向数字化转型，，，，，通过科技驱动商业刷新，，，，，让商业变得更智慧！



▼点击进入pp电子官网相识更多



热门标签
SaaS
上/下篇

  • 微信小程序性能优化实现流程

    为什么要做性能优化？？？？？？ 一切性能优化都是为了体验优化 1. 使用 小程序 时，，，，，是否会经常遇到如下问题？？？？？？ 翻开是一直白屏 翻开是loading态，，，，，转好几圈 我的页面点了...

    微信小程序运营SaaS 2018/7/18 0:00:00

  • 小程序ICP证怎么办理,小程序ICP证申请流程

    ICP证指的是《增值电信营业谋划允许证》，，，，，由各地通讯治理局审批揭晓。 。许多小程序开发者对此都有许多问题，，，，，下面为各人解答小程序ICP证办理问题。 。...

    SaaS 2018/7/17 0:00:00
换一换相关推荐
精选内容
热门精选
pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站 pp电子·模拟器(试玩游戏)官方网站
【网站地图】
小程序预览码怎样天生 - KESION pp电子