记第一次开发微信小程序全过程_WebAPP_西西优一点

WebAPP记第一次开发微信小程序全过程

记第一次开发微信小程序全过程

微信小程序 NodeJS 小程序阅读：521 时间：2022年10月19日

NodeJS服务器环境开发部署到小程序客户端开发及部署发布的完整过程记录。注意：这是我第一次尝试实践的结果记录。会有很多缺陷，仅供参考。目录一、服务器准备工作二、开发NodeJS接口服务...

NodeJS服务器环境开发部署到小程序客户端开发及部署发布的完整过程记录。

注意：这是我第一次尝试实践的结果记录。会有很多缺陷，仅供参考。

npm i koa // koa框架

npm i https // 用于https协议（小程序需要）

npm i koa-bodyparser // 用于格式化请求body

npm i koa-router // 用于接口路由

npm i koa-sslify // 用于处理https证书

npm i koa2-cors // 用于处理跨域

npm i mysql // 用于操作mysql数据

npm i pm2 -g // 用于守护服务进程

在目录创建index.js，内容大至如，注意其中证书读取位置，即上文标记【001】处

注意：本地运行时会因找到不证书路径报错，需要在本地也存放一份证书并切换。

const Koa = require('koa');
let https = require("https");
let fs = require("fs");
const sslify = require('koa-sslify').default;
const httpsOption = {
  key : fs.readFileSync("/www/cert/xxx.com.key"),
  cert: fs.readFileSync("/www/cert/xxx.com.pem")
}

const port = 3000

const app = new Koa();
app.use(sslify());
const httpsServer  = https.createServer(httpsOption, app.callback());

const router = require('./router/index')
const cors = require('koa2-cors')
var bodyParser = require('koa-bodyparser');
app.use(cors());
app.use(bodyParser());
app.use(router.routes()); 
app.use(router.allowedMethods());
httpsServer.listen(port, (err) => {
  if (err) {
    console.log('server init error', err);
  } else {
    console.log('server running at port :' + port);
  }
});

2.2 路由

在目录创建 /router/index.js，内容如下：

const router = require('koa-router')(); 
const api = require('../api/index')

router.get('/post/top', async ctx => {
  ctx.body = await api.getTopPosts(ctx.query.count)
})

module.exports = router

当访问 /post/top?count=xx时，就会匹配该路由，并返回ctx.body内容

2.3 数据库操作

我的数据是在一套PHP BLOG/CMS： zblog界面程序里管理维护的。这里NodeJS只负责纯数据操作

在目录创建 /db/query.js, 用于连接与操作数据库。内容如下：

const mysqlConfig = {
  host     : '1.1.1.1',
  user     : 'root',  
  password : '%11111111111%',
  database : 'p99',
}
const mysql = require('mysql');

const pool = mysql.createPool(mysqlConfig)

const query = (sql, val) => {
  return new Promise((resolve, reject) => {
    pool.getConnection(function (err, connection) {
      if (err) reject(err);
      else {
        connection.query(sql, val, (err, fields) => {
          if (err) reject(err);
          else resolve(fields);
          connection.release();
        });
      }
    });
  });
};

module.exports = query

在目录创建/api/index.js，用于处理接口请求查询数据库并返回数据，内容如下：

const query = require('../db/query');

async function getTopPosts(count) {
  const sql = `SELECT * FROM p9_tag ORDER BY tag_Count DESC LIMIT ${count}`
  return await query(sql)
}

module.exports = {
  getTopPosts,
}

至此，一个完整，最基本的NodeJS服务代码完成。

可以在serve目录下打开命令行运行一下: pm2 start index.js // pm2可以对进程守护，如意外结束进程，它会重启进程

结束命令为: pm2 stop index.js

三、部署NodeJS服务到阿里云

3.1 安装NodeJS及依赖包

创建一个服务目录，如 /www/serve

安装NodeJS, NPM

yum install -y nodejs
yum install -y npm

安装依赖包,

进入/www/serve/目录后npm i 或者：

npm i koa // koa框架

npm i https // 用于https协议（小程序需要）

npm i koa-bodyparser // 用于格式化请求body

npm i koa-router // 用于接口路由

npm i koa-sslify // 用于处理https证书

npm i koa2-cors // 用于处理跨域

npm i mysql // 用于操作mysql数据

npm i pm2 -g // 用于守护服务进程

将项目代码上传到 /www/serve/目录下，并在当前目录下执行启动命令：

pm2 start index.js

至此服务端的操作全部完成。接下来是小程序端。

四、开发小程序客户端

4.1 申请及配置小程序信息

注册申请https://mp.weixin.qq.com/按指引完成即可。

将AppID记录下来，免得再回头去找。

配置小程序请求服务器域名：

在开发-开发管理-开发设置下，找到服务器域名，添加上文配置好的https域名。

终于可以写小程序了！其实我还是挺讨厌这门不伦不类的语言。。

4.2 下载微信开发者工具开发

扫码登录工具。

在工具中创建项目并关联AppId，就可以开始开发了。

在小程序文档中看的模块化是NodeJS的 module.exports / require 方式，但是我使用了html5的 export / import 也支持。

创建的项目已经包含了基本的框架结构，语法等相关内容看开发文档就好了。

说几处要注意的：

1. /app.json 文件中配置了页面路由，且第一个为首页。路由即为页面文件路径。

{
    "pages": [
        "pages/index/index",
        "pages/tuijian/tuijian",
        "pages/ceshi/ceshi",
        "pages/result/result",
        "pages/detail/detail"
    ],
   ...
}

2. 新建页面

在/pages/目录右键新建文件夹后，在新建立的文件夹右键新建Page，填写页面名称xxx后，会自动生成xxx.json,xxx.wxss,xxx.js,xxx.wxml四个文件，并自动添加到路由，可以省去手动创建。

3. 服务器请求方法为 wx.request()，该方法不支持Promise，如果需要，需自己封装。

function getBeersByTags(tags) {
    return new Promise((resolve, reject) => {
        wx.request({
            url: path + 'beers',
            method: 'POST',
            data: tags,
            success(res) {
                resolve(res)
            },
            fail(err) {
                reject(err)
            }
        })
    })
}

4. 如果需要页面能够在右上角进行分享/分享到朋友圈，必须在页面添加事件回调方法：

  onShareAppMessage() { // 分享到朋友
    return {
      title: '找到最适合你的啤酒',
      path: '/pages/ceshi/ceshi'
    }
  },
  onShareTimeline() { // 分享到朋友圈
    return {
      title: '找到最适合你的啤酒',
      path: '/pages/ceshi/ceshi'
    }
  }

5. 现在小程序已经支持TypeScript了。