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

0

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

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

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

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

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

目录

  • 一、服务器准备工作

  • 二、开发NodeJS接口服务

  • 三、部署NodeJS服务到阿里云

  • 四、开发小程序客户端

  • 五、提交发布小程序

一、服务器准备工作

注: 如没有服务器与域名,需要购买解析并备案成功后,才能继续以下操作!

1.1 申请并部署SSL证书到服务器

服务器是有的,域名也是有的。但是要配置https协议支持。

使用的是阿里云提供的免费证书(一年有效期)

选择免费证书,立即购买。按提示操作即可。

购买完成后,点创建证书。创建完成后,完成申请操作填写域名等信息,等待申请通过后就可以部署证书了。

申请通过后,点部署

选择自己购买的服务器后部署。路径是存放在所选服务器上的位置。不懂可以点红圈看说明。

至此,证书的服务器自身部分结束。

1.2 开放443端口并下载证书配置到NodeJS服务中

点下载,选择何适的服务器类型下载证书,没有提供NodeJS的,我下载了其它。下载后上传到服务器并记住位置。如【001】

/www/cert/xxx.com.key
/www/cert/xxx.com.pem

然后打开443端口给SSL使用:

在服务器实例的安全组中,配置规则,添加443端口

服务器的准备工作基本完成。

 

二、开发NodeJS接口服务

2.1 使用Koa2框架搭建

创建一个项目目录: serve

在目录中安装依赖包

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了。

五、提交,发布小程序

5.1 上传代码

在工具右上,点击上传填写相关说明即可上传。

上传成功后,会在小程序管理后台生成一个开发体验版本

将此版本提交审核后,会生成一个审核版本

审核通过后,可随时将审核通过的版本发布上线。

到此一个完整的开发流程大纲就结束了。写的不详细。只为记录大纲过程。

最后,这次初体验完成的小程序《喝点好啤酒》码亮一下,欢迎体验:

发表评论说说你的看法吧

精品模板蓝瞳原创精品网站模板

^