微信小程序入门（五）：Node.js的express框架 + miniprogram-ci 实现小程序代码的“上传”操作和 “自动生成二维码预览”操作

出处不详，经久不息

已于 2022-03-18 18:41:08 修改

阅读量2.5k

点赞数 2

分类专栏：七. 测开之小程序（自用）文章标签： nodejs express vscode miniprogram-ci

于 2021-09-07 15:30:29 首次发布

本文链接：https://blog.csdn.net/sulia1234567890/article/details/120158797

版权

七. 测开之小程序（自用）专栏收录该内容

5 篇文章 7 订阅

订阅专栏

1. 回顾：前面尝试了三种方式来上传小程序的代码

2. 这里尝试第四种上传方式：通过Node.js的框架express, 来实现“上传”功能

2.1 Express介绍

2.2 实现步骤

2.2.1 新建文件夹miniprogram-ci-express，打开VSCode，在终端用命令进入文件夹

2.2.2 初始化： npm init

2.2.3 安装Express模块并将其保存到依赖列表中： $ cnpm install express --save

2.2.4 安装几个跟express框架相关的模块

2.2.5 安装Express完成后，查看版本：$ cnpm list express

2.2.6 安装miniprogram-ci并将其保存到依赖列表中：$ cnpm install miniprogram-ci --save

2.2.7 先在Express框架中完成最基本的get/post接口定义，并访问

2.2.8 在express框架中实现小程序代码的上传操作，详见下方步骤

3. 延伸：通过Node.js的框架express, 来实现“自动生成二维码预览”功能

3.1 在上传功能的框架下，在/src目录下新增一个脚本 preview.js

3.2 index.js脚本中新增接口 `/api/preview`

3.3 保存，重新运行命令：node index.js

3.4 在Postman中，选择post方法，发送“预览”请求

3.5 在本地相应目录下，检查是否已顺利生成二维码文件

1. 回顾：前面尝试了三种方式来上传小程序的代码

（1）在微信开发者工具中直接上传。

（2）直接通过终端命令行的miniprogram-ci upload命令并设置相关的选项参数，或者通过node命令运行upload.js脚本(终端或者VSCode中)，来上传。

（3）在Jenkins中，通过构建命令（命令行，node.js脚本），来上传。

可参考此文：微信小程序入门（四）：miniprogram-ci + Jenkins + git 实现小程序代码的上传等操作

2. 这里尝试第四种上传方式：通过Node.js的框架express, 来实现“上传”功能

2.1 Express介绍

（1）Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助开发者创建各种Web应用，和丰富的HTTP工具。

（2）使用 Express 可以快速地搭建一个完整功能的网站。

（3）Express 框架核心特性：

可以设置中间件来响应 HTTP 请求。

定义了路由表用于执行不同的 HTTP 请求动作。

可以通过向模板传递参数来动态渲染 HTML 页面。

2.2 实现步骤

2.2.1 新建文件夹miniprogram-ci-express，打开VSCode，在终端用命令进入文件夹

2.2.2 初始化： npm init

2.2.3 安装Express模块并将其保存到依赖列表中： $ cnpm install express --save

2.2.4 安装几个跟express框架相关的模块

$ cnpm install body-parser --save
$ cnpm install cookie-parser --save
$ cnpm install multer --save

2.2.5 安装Express完成后，查看版本：$ cnpm list express

2.2.6 安装miniprogram-ci并将其保存到依赖列表中：$ cnpm install miniprogram-ci --save

（为后续上传小程序源码做准备）

2.2.7 先在Express框架中完成最基本的get/post接口定义，并访问

(这里只是针对express框架的基本练习，可跳过。上传功能的实现，请直接看下一步 2.2.8)

（1）上面安装完成后，目录下自动生成一个package.json和一个package-lock.json（代码略）

{
  "name": "miniprogram-ci-express",
  "version": "1.0.0",
  "main": "index.js",
  "devDependencies": {},

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js"
  },
  "author": "",
  "license": "ISC",
  "description": "",

  "dependencies": {
    "body-parser": "^1.19.0",
    "cookie-parser": "^1.4.5",
    "express": "^4.17.1",
    "miniprogram-ci": "^1.6.1",
    "multer": "^1.4.3"
  }
}

（2）编写待运行的脚本index.js

const upload = require(`./src/upload.js`)
const express = require('express')
const app = express()
const port = 3000

app.get(`/`, (req, res) => {
    res.send('hello world!!')
})

//1.1 添加get一个新的接口
app.get(`/test1`, (req, res) => {
    res.send('test1 on 0907')
})

//1.2 获取url中的query的参数，例如 http://abc.com/a/b?key1=val1&key2=val2
app.get(`/test2`, (req, res) => {
    const {key1, key2} = req.query
    console.log(key1, key2)
    res.send('test2 0907')
})

//1.3.1  获取url path中的单个参数，类似于restfull风格的接口，例如：http://abc.com/user/:id
app.get(`/test3/user/:id`, (req, res) => {
    console.log(req.params)
    res.send('test3.1 0907')
})

//1.3.2  获取url path中的多个参数，类似于restfull风格的接口，例如：http://abc.com/:classId/:id
app.get(`/test3/:classId/:id`, (req, res) => {
    console.log(req.params)
    res.send('test3.2 0907')
})

//1.4  同时获取query和params，例如：http://abc.com/:grade/:classId?stuId=4
app.get(`/test4/:grade/:classId`, (req, res) => {
    console.log(req.params)
    console.log(req.query)
    res.send('test4 0907')
})

//2.1 新建post接口, 在postman中演示
app.post(`/test5`, (req, res) => {
    res.send('test5 0907')
})

// 2.2 获取body, 在postman中演示
app.use(express.json()) // 需要提前在app中添加json模块
app.post('/test6', (req, res) => {
    console.log(req.body)
    res.send('test6')
})

// 2.3 获取body + query + params
app.use(express.json()) // 需要提前在app中添加json模块
app.post(`/test7/:grade/:classId`, (req, res) => {
    res.send({body: {...req.body}, query: {...req.query}, params: {...req.params}})
})

//upload
app.post(`/api/upload`, (req, res) => {
    upload({...req.body})
    res.send("upload finished")
    console.log(req.body)
})

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

（3）在VSCode终端通过命令行： node index.js 来启动服务。返回Example app listening at http://localhost:3000

（4）在浏览器端（针对get接口）或postman（针对post接口），输入URL （http://localhost:3000+接口，其中接口的具体定义，在index.js中），看到页面能顺利显示index.js中定义的内容，即实现了express框架的最简单的应用。

2.2.8 在express框架中实现小程序代码的上传操作，详见下方步骤

（1）在文件夹下新增新文件：/src/upload.js，代码如下：

const upload = (params) => {
  const ci = require('miniprogram-ci')
  
  const baseDir = "C:/xxx/WeChatProjects"
  //const {appid, version, desc} = params  // 从参数中获取对应的值
  const appid = "xxxxxxx"
  const version = "3.0.1"
  const desc = "3.0.1-desc"
  const projectPath = `${baseDir}/miniprogram-s2/`
  const privateKeyPath = `${baseDir}/private.${appid}.key`

    //延伸
    // TODO 自定义操作
    // 更新代码...
    // 从数据库去获取相关信息

    //创建对象
    const project = new ci.Project({
      appid,
      type: 'miniProgram',
      projectPath,
      privateKeyPath,
      ignores: ['node_modules/**/*'],
    })

    //上传
    const uploadResult = ci.upload({
      project,
      version,
      desc,
      setting: {
        es6: false,
      },
      robot: 6,
      onProgressUpdate: console.log,
    })
    console.log(uploadResult)
}
module.exports = upload

（2）保存文件，重新运行命令： node index.js

这里的index.js脚本，同2.2.7步中的index.js脚本。

即上面2.2.7步中的脚本已经包含了upload.js脚本的调用及upload接口的定义。因此这里不赘述。

（3）在Postman中，选择POST方法，输入URL：http://localhost:3000/api/upload，点击send，观察响应内容。

（4）VSCode终端会出现上传代码的进度信息

（5）在小程序页面查看版本管理，看看在upload.js中设置要上传的小程序代码是否已顺利上传。

3. 延伸：通过Node.js的框架express, 来实现“自动生成二维码预览”功能

3.1 在上传功能的框架下，在/src目录下新增一个脚本 preview.js

preview.js脚本详情：

const preview = (params) => {
    const ci = require('miniprogram-ci')
    const baseDir = "C:/xxx/WeChatProjects"
    // const {appid, version, desc} = params  // 从参数中获取对应的值
    const appid = "xxxxxx"
    //const version = "7.0.1"
    const desc = "7.0.1-desc预览测试"
    const projectPath = `${baseDir}/miniprogram-s2/`
    const privateKeyPath = `${baseDir}/private.${appid}.key`

    const project = new ci.Project({
        appid,
        type: 'miniProgram',
        projectPath,
        privateKeyPath,
        ignores: ['node_modules/**/*'],
      })
      
      const previewResult = ci.preview({
        project,
        desc, // 此备注将显示在“小程序助手”开发版列表中
        setting: {
          es6: false,
        },
        robot: 7,
        qrcodeFormat: 'image',
        qrcodeOutputDest: 'C:/xxx/WeChatProjects/QRCode/pre7.png', //生成的二维码存放的本地路径
        onProgressUpdate: console.log,

        // pagePath: 'pages/index/index', // 预览页面
        // searchQuery: 'a=1&b=2',  // 预览参数 [注意!]这里的`&`字符在命令行中应写成转义字符`\&`
      })

      console.log(previewResult)
}

module.exports = preview

3.2 index.js脚本中新增接口 `/api/preview`

Index.js脚本详情：

const upload = require(`./src/upload.js`)
const preview = require(`./src/preview`)

const express = require('express')
const app = express()
const port = 3000

………………………//同上，省略一部分跟该“生成二维码”无关的接口的定义

//upload接口

app.post(`/api/upload`, (req, res) => {
    upload({...req.body})
    res.send("upload finished")
    console.log(req.body)
})

//preview接口

app.post(`/api/preview`, (req, res) => {
    preview()
    res.send("preview finished")
    console.log(req.body)
})

app.listen(port, () => {
    console.log(`Example app listening at http://localhost:${port}`)
})

3.3 保存，重新运行命令：node index.js

3.4 在Postman中，选择post方法，发送“预览”请求

选择POST方法，输入URL：http://localhost:3000/api/preview，点击send

3.5 在本地相应目录下，检查是否已顺利生成二维码文件

至此，本文结束。

即最简单的小程序代码上传和生成预览二维码的操作，可以按照上面的步骤来实现。

当然，这是最简单的版本，可根据需求，利用express框架，完成更多的操作，包括小程序相关的。后面有时间练习其他功能的话，再贴文。

10.28补充：

今天尝试了一遍上述操作，有几个小坑，记录一下：

（1）index.js文件中，要手动导入自己编写的模块。没有手动加入，工具自动识别帮忙加入的可能是错误的其他模块，会导致运行失败。

const upload = require(`./src/upload.js`)

const preview = require(`./src/preview`)

（2）生成预览二维码的路径设置中，要包含二维码文件的名字比如 pre7.png, 我一开始只是写了路径，报错了，排查才意识到这个问题。

qrcodeOutputDest: 'C:/xxx/WeChatProjects/QRCode/pre7.png'

出处不详，经久不息

关注

2
点赞
踩
16

收藏

觉得还不错? 一键收藏
2
评论
微信小程序入门（五）：Node.js的express框架 + miniprogram-ci 实现小程序代码的“上传”操作和 “自动生成二维码预览”操作

目录1. 回顾：前面尝试了三种方式来上传小程序的代码2. 这里尝试第四种方式：通过Node.js的框架express, 来实现“上传”功能2.1 Express介绍2.2 实现步骤1. 回顾：前面尝试了三种方式来上传小程序的代码1.1 在微信开发者工具中直接上传1.2 直接通过终端命令行的miniprogram-ci upload命令并设置相关的选项参数，或者通过node命令运行upload.js脚本(终端或者VSCode中)，来上...
复制链接

扫一扫