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

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

大家作为前端可能活多或少的都写过结合微信jsdk开发的微信h5网页,对授权登录这块以及部分sdk可能都有通过后台接口来调用,那么大家有没有想过,这些后台接口都是怎么写的呢?那么今天这篇文章就带大家来了解下是如何写的!

一、准备

注册微信订阅号

注册小程序测试号

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

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

,进去后注册开通隧道,有免费的。

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


这是我的隧道:(免费的如果启动不了就直接用这个吧)

81b62507806744cfa63f1e9ab67f4662.png

使用sunny-ngrok尝试一次转发:

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

f2a4d61560bf408a9d74923f39cbe6e8.png

说明127.0.0.1:3000已经被转发到zhifieji.vipgz4.idcfengye.com的公网ip上了。

建个weixin目录,npm初始化:

npm init -y

把下面的内容复制到package.json里:

{
  "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"
  }
}

然后安装依赖

npm install
# 或
yarn


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

index.js:

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);

index.html:

<!DOCTYPE html>
<html>
<head>
    <title>全栈开发微信公众号</title>
    <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(需要安装), 3000端口打开127.0.0.1

npm install -g nodemon
nodemon


8be6a24b07be4130ad0bacf305ada2ff.png

0748b3fa017c4ede92f95330b02b45cc.png

前面说通过ngrok把3000端口转发到了zhifieji.vipgz4.idcfengye.com上,我们打开这个网址试下:

9f5eb340292e4f5c8b561134b67e5aa4.png

二、使用消息接口

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

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


43094a3fe32647649819c305c85eb381.png

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

685c47c618f54c52b0fb7fa2ebe21edc.png

23a7198292a54f47b1448db9106a0cbb.png

接口配置的URL就是转发的网址加了/wechat,再去提交接口配置信息(要多试试,才能提交成功)。

再就是在项目seed目录里配置,新建一个conf.js,把前面的appid、appsecret、token带


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

在index.js里引入,使用一个库co-wechat,所以index.js将变成下面:

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),如下图:


image.png


相关文章
|
7天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
7天前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
7天前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。
|
25天前
|
开发框架 JavaScript 安全
js开发:请解释什么是Express框架,以及它在项目中的作用。
Express是Node.js的Web开发框架,简化路由管理,支持HTTP请求处理。它采用中间件系统增强功能,如日志和错误处理,集成多种模板引擎(EJS、Jade、Pug)用于HTML渲染,并提供安全中间件提升应用安全性。其可扩展性允许选用合适插件扩展功能,加速开发进程。
|
26天前
|
缓存 JavaScript 前端开发
js开发:请解释什么是Webpack,以及它在项目中的作用。
Webpack是开源的JavaScript模块打包器,用于前端项目构建,整合并优化JavaScript、CSS、图片等资源。它实现模块打包、代码分割以提升加载速度,同时进行资源优化和缓存。借助插件机制扩展功能,并支持热更新,加速开发流程。
17 4
|
7天前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中PWA技术的应用,PWA结合Web的开放性和原生应用的性能,提供离线访问、后台运行、桌面图标和原生体验。开发者可利用Service Worker实现离线访问,Worker处理后台运行,Web App Manifest添加桌面图标,CSS和JavaScript提升原生体验。实践中需注意兼容性、性能优化和用户体验。PWA技术能提升小程序的性能和用户体验,助力开发者打造优质小程序。
|
4天前
|
开发框架 前端开发 JavaScript
采用C#.Net +JavaScript 开发的云LIS系统源码 二级医院应用案例有演示
技术架构:Asp.NET CORE 3.1 MVC + SQLserver + Redis等 开发语言:C# 6.0、JavaScript 前端框架:JQuery、EasyUI、Bootstrap 后端框架:MVC、SQLSugar等 数 据 库:SQLserver 2012
|
7天前
|
SQL 安全 小程序
探索微信小程序全栈开发的安全性问题
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的安全性问题,包括数据安全、接口安全、隐私保护和代码安全。为解决这些问题,建议采取数据加密、使用HTTPS协议、身份认证与授权、输入验证、安全审计及漏洞扫描以及安全培训等措施。通过这些方法,开发者可提升小程序安全性,保护用户隐私和数据。
|
26天前
|
Web App开发 JavaScript 前端开发
js开发:请解释什么是Node.js,以及它的应用场景。
Node.js是基于V8的JavaScript运行时,用于服务器端编程。它的事件驱动、非阻塞I/O模型使其在高并发实时应用中表现出色,如Web服务器、实时聊天、API服务、微服务、工具和跨平台桌面应用(使用Electron)。适用于高性能和实时需求场景。
18 4
|
26天前
|
JavaScript 前端开发 编译器
js开发: 请解释什么是Babel,以及它在项目中的作用。
**Babel是JavaScript编译器,将ES6+代码转为向后兼容版本,确保在旧环境运行。它在前端构建中不可或缺,提供语法转换、插件机制、灵活配置及丰富的生态系统,支持代码兼容性和自定义编译任务。**
17 6