全栈开发微信公众号(上)

简介: 全栈开发微信公众号

准备

注册微信订阅号

注册小程序测试号


sunny-ngrok工具安装及注册账号


注意:sunny-ngrok的原型是ngrok,不过是国外的,sunny-ngrok类似是国内的一个私服,速度更快了,主要作用是域名转发,模拟公网ip和端口,甚至可以配置了给客户在公网上展示项目。地址: http://www.ngrok.cc/ ,进去后注册开通隧道,有免费的。


记住:一个微信号只能注册一种微信产品,但是可以管理多个。


使用sunny-ngrok尝试一次转发


下载工具,启动工具,输入隧道id,回车


说明127.0.0.1:3000将被转发到~~~.com公网ip上

建个weixin目录,npm初始化

{
  "name": "weixin-lesson",
  "version": "1.0.0",
  "description": "微信开发课程备课资料 ====",
  "main": "index.js",
  "directories": {
    "doc": "doc"
  },
  "scripts": {
    "sunny": "./bin/sunny clientid 62d16df91a118fd3",
    "ngrok": "./bin/ngrok http 3000",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git@gitlab.kaikeba.com:web_dev/weixin-lesson.git"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "co-wechat": "^2.3.0",
    "co-wechat-oauth": "^2.0.1",
    "crypto": "^1.0.1",
    "express": "^4.16.4",
    "jsonwebtoken": "^8.4.0",
    "koa": "^2.6.2",
    "koa-bodyparser": "^4.2.1",
    "koa-compress": "^3.0.0",
    "koa-jwt": "^3.5.1",
    "koa-route": "^3.2.0",
    "koa-router": "^7.4.0",
    "koa-socket": "^4.4.0",
    "koa-static": "^5.0.0",
    "koa-views": "^6.1.5",
    "koa-websocket": "^5.0.1",
    "koa-xml-body": "^2.1.0",
    "moment": "^2.23.0",
    "mongoose": "^5.4.4",
    "promise-redis": "0.0.5",
    "pug": "^2.0.3",
    "redis": "^2.8.0",
    "request": "^2.88.0",
    "request-promise": "^4.2.2",
    "socket.io": "^2.2.0",
    "watch": "^1.0.2",
    "wechat": "^2.1.0",
    "wechat-oauth": "^1.5.0",
    "xml2js": "^0.4.19"
  }
}

weixin目录下建立seed目录,seed目录下建立index.js和index.html

const Koa = require('koa')
const Router = require('koa-router')
const static = require('koa-static')
const bodyParser = require('koa-bodyparser');
const app = new Koa()
app.use(bodyParser())
const router = new Router()
app.use(static(__dirname + '/'))
app.use(router.routes()); /*启动路由*/
app.use(router.allowedMethods());
app.listen(3000);
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <script src="https://unpkg.com/vue@2.1.10/dist/vue.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/cube-ui/lib/cube.min.js"></script>
    <script src="https://cdn.bootcss.com/qs/6.6.0/qs.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/cube-ui/lib/cube.min.css">
    <style>
        /* .cube-btn {
            margin: 10px 0;
        } */
    </style>
</head>
<body>
    <div id="app">
        <cube-input v-model="value"></cube-input>
        <cube-button @click='click'>Click</cube-button>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                value: 'input'
            },
            methods: {
                click: function () {
                    console.log('click')
                }
            },
            mounted: function () {
            },
        });
    </script>
</body>
</html>

在seed目录打开终端,执行nodemon,300端口打开127.0.0.1


在打开隧道赠送的域名


使用消息接口


微信自带消息自动回复功能,可以在公众平台设置,但是很死板,无法动态回复消息

进入微信开发者工具,申请公众平台测试账号

有一些配置,填写转发的域名,token随意,要和服务器的用的一样


再就是在项目里配置,新建一个conf.js

module.exports={
    appid: 'wx77f481fc8a9113a4',
    appsecret: '2b84470b9fb0f8166a8518c5b40edaf9',
    token: 'qweqwe'
}

在index.js里引入

使用一个库co-wechat

const Koa = require('koa')
const Router = require('koa-router')
const static = require('koa-static')
const bodyParser = require('koa-bodyparser');
const app = new Koa()
const conf = require('./conf')//引入conf
app.use(bodyParser())
const router = new Router()
app.use(static(__dirname + '/'))
const wechat = require('co-wechat')//使用co-wechat库
router.all('/wechat', wechat(conf).middleware(
    async message => {
        console.log('wechat:', message)
        return 'Hello World ' + message.Content
    }
))
app.use(router.routes()); /*启动路由*/
app.use(router.allowedMethods());
app.listen(3000);

知识点:co-开头的库是代表着满足异步要求的库


再去提交接口配置信息(要多试试,才能提交成功)


成功后,这个时候呢,可以关注下面的测试号二维码


发送1,会回复Hello World 1(如果是设置的没有这中获取用户发送的信息的方法,所以有时候也需要api),如下图


微信一些api的调用

相关文档: https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html

获取token

const axios = require('axios')
const tokenCache = {
    access_token:'',
    updateTime:Date.now(),
    expires_in:7200
}
router.get('/getTokens',async ctx => {//获取token
    const wxDomain =  `https://api.weixin.qq.com`
    const path = `/cgi-bin/token`
    const param = `?grant_type=client_credential&appid=${conf.appid}&secret=${conf.appsecret}`
    const url = wxDomain + path + param
    const res = await axios.get(url)
    Object.assign(tokenCache,res.data,{
        updateTime:Date.now()
    })
    ctx.body = res.data
})

获取用户信息

router.get('/getFollowers',async ctx => {//获取用户信息
    const url = `https://api.weixin.qq.com/cgi-bin/user/get?access_token=${tokenCache.access_token}`
    const res = await axios.get(url)
    console.log('getFollowers:',res)
    ctx.body = res.data
})

上面都是原生的用法接下来我们使用co-wechat-api包来看看

安装 co-wechat-api

yarn add co-wechat-api
const WechatAPI = require('co-wechat-api')
const api = new WechatAPI(
    conf.appid,
    conf.appsecret,
    // // 取Token
    // async () => await ServerToken.findOne(),
    // // 存Token
    // async token => await ServerToken.updateOne({}, token, { upsert: true })
)
router.get('/getFollowers', async ctx => {
    let res = await api.getFollowers()
    res = await api.batchGetUsers(res.data.openid, 'zh_CN')//加上后会返回详细信息
    ctx.body = res
})

相关文章
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
501 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
592 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
114 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
79 6
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
196 1
|
1月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
68 5
|
1月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
61 5
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
575 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
29天前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
30 0
|
1月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
331 0
下一篇
无影云桌面