手把手教你如何使用NodeJs和JavaScript开发微信公众号(三)

简介: 手把手教你如何使用NodeJs和JavaScript开发微信公众号

全局票据(一样用到mongoose,从上次的修改)

mongoose.js:

const mongoose = require('mongoose')
const {
    Schema
} = mongoose
mongoose.connect('mongodb://localhost:27017/weixin', {
    useNewUrlParser: true
}, () => {
    console.log('Mongodb connected..')
})
exports.ServerToken = mongoose.model('ServerToken', {
    accessToken: String
});
//以下为seed_up新增
schema = new Schema({
    access_token: String,
    expires_in: Number,
    refresh_token: String,
    openid: String,
    scope: String,
    create_at: String
});
// 自定义getToken方法
schema.statics.getToken = async function (openid) {
    return await this.findOne({
        openid: openid
    });
};
schema.statics.setToken = async function (openid, token) {
    // 有则更新,无则添加
    const query = {
        openid: openid
    };
    const options = {
        upsert: true
    };
    return await this.updateOne(query, token, options);
};
exports.ClientToken = mongoose.model('ClientToken', schema);

继续改下index.js:

const { ServerToken,ClientToken } = require('./mongoose')//全局票据来源
const oauth = new OAuth(conf.appid, conf.appsecret,
    async function (openid) {
        return await ClientToken.getToken(openid)
    },
    async function (openid, token) {
        return await ClientToken.setToken(openid, token)
    }
)

写出来效果如下:完美

image.png


八、调用微信jssdk

准备:

1.获取jsconfig

index.html:


<cube-button @click='getJSConfig'>获取jsconfig</cube-button>
async getJSConfig(){
  console.log('wx',wx)
  const res = await axios.get('/getJSConfig',{
      params:{
          url:window.location.href
      }
  })
  console.log('config',res)
  res.data.jsApiList = ['onMenuShareTimeline']
  wx.config(res.data)
  wx.ready(function () {
      console.log('wx.ready......')
  })
}

index.js:

/**
 * 获取JSConfig
 */
router.get('/getJsConfig',async ctx => {
    console.log('getJSSDK...',ctx.query)
    const res = await api.getJsConfig(ctx.query)
    ctx.body = res
})

如果能走到wx.ready(),说明这个时候可以使用别的功能那个api了。

322f09c8ff0d4c23a930f5ec21094e85.png

2.获取网络状态

在wx.ready()后加,当然在ready()里加最为合理:

//获取网络状态
wx.getNetworkType({
     success: function (res) {
         // 返回网络类型2g,3g,4g,wifi
         const networkType = res.networkType
         console.log('getNetworkType...', networkType)
     }
})

0c7d8570cc314110bbd0af42059e4a80.png

获取到我是wifi环境,很完美!其余的jssdk调用方法也是如此!

还有一点,通常我们十前后端分离的开发项目,所以我把项目改成了前后端分离。

九、前后端分离的开发


1、新建了个weixin_pro的项目

2、将weixin项目的package.json复制到weixin_pro

3、分一个cube-ui目录为前端代码

4、分一个quiz目录为后端代码

4f2facde4d1e49f7b308495cd7bcf8d7.png

5、weixin_pro下安装依赖,为后端依赖

6、cube-ui下安装依赖为前端依赖

7、分别启动前端代码后后端代码

运行效果如下:


image.png

十、代码地址

前后端分离前的代码:https://gitee.com/huqinggui/weixin.git

前后端分离后的代码:https://gitee.com/huqinggui/weixin_pro.git



相关文章
|
25天前
|
JavaScript 前端开发 API
释放 Node.js 的力量:服务器端 JavaScript 综合指南
释放 Node.js 的力量:服务器端 JavaScript 综合指南
20 0
|
29天前
|
前端开发 JavaScript
快乐编程之旅:了解这20道JavaScript手写题助力提升开发内力
快乐编程之旅:了解这20道JavaScript手写题助力提升开发内力
|
1天前
|
前端开发 关系型数据库 MySQL
基于python+django+vue.js开发的医院门诊管理系统/医疗管理系统
基于python+django+vue.js开发的医院门诊管理系统/医疗管理系统
9 2
|
18天前
|
JavaScript iOS开发 MacOS
掌握NVM、NRM和NPM:Node.js开发的利器
掌握NVM、NRM和NPM:Node.js开发的利器
28 0
|
18天前
|
资源调度 JavaScript 开发工具
从npm慢如蜗牛到飞驰如光:nrm加速你的Node.js开发
从npm慢如蜗牛到飞驰如光:nrm加速你的Node.js开发
58 0
|
18天前
|
监控 JavaScript 前端开发
Node.js:JavaScript世界的全能工具
Node.js:JavaScript世界的全能工具
68 0
|
19天前
|
JavaScript 前端开发
【JavaScript精通之道】掌握数据遍历:解锁现代化遍历方法,提升开发效率!
在JavaScript开发中,经常需要对数组、对象等数据结构进行遍历操作。为了提高开发效率,JavaScript提供了多种灵活的遍历方法。本文将介绍JavaScript中常用的数据结构遍历方法,助你更好地操作数据。
|
21天前
|
小程序 前端开发 JavaScript
微信小程序开发前端基础知识一
微信小程序开发前端基础知识一
|
21天前
|
前端开发 小程序
微信小程序开发前端基础知识二
微信小程序开发前端基础知识二
|
24天前
|
小程序 JavaScript 前端开发
如何开发一个微信小程序
如何开发一个微信小程序
49 0

相关产品

  • 云迁移中心