Разработка публичного аккаунта Nodejs WeChat

Обзор

key	value
название проекта	Разработка публичного аккаунта Node WeChat
Описание Проекта	Используйте узел для написания интерфейсов, отдельные интерфейсы и серверы для получения данных подписи.
Разработчик	leinov
Дата выпуска	2018-11-07
склад	гитхаб-адрес

Установить и использовать

скачать

git clone git@github.com:leinov/node-weixin-api.git

npm install

развивать

• Настройте белый список доменных имен в фоновом режиме официальной учетной записи WeChat.
• существуетserver/weixin/wx.jsдобавить свой собственныйappid secret
• существуетsrc/index/index.jsвнутриwxShareдобавить свой собственный контент
• npm run dev
• Откройте инструменты разработчика WeChat для отладки
• npm run build
• Поместите файл txt, загруженный во время настройки доменного имени, в папку dist
• загрузить на сервер
• pm2 start www.jsзапустить службу
• Откройте соединение в WeChat и поделитесь им с друзьями для тестирования.
• Расширение: измените массив jsApiList в /src/component/wxconfig.js и добавьте WeChat API, который хотите использовать.

Архитектура

использование технологии

• многостраничная многостраничная архитектура webpack-react-multi-page
• webpack4
• react16
• es6
• node
• js-sdk
• git

Структура каталогов и функции Введение

|-- node-weixin-api //项目
    |-- dist //编译生产目录
        |-- index
            |-- index.css
            |-- index.js
        |-- index.html
        |-- xxx.txt // 微信域名绑定识别文件
    |-- node_modules
    |-- server // node文件
        |-- sign.js //公众号文档提供签名算法
        |-- wx.js //获取签名数据文件
    |-- src //开发目录
        |-- index
            |-- images/
            |-- js/
                |-- app.js
                |-- b.js
            |-- index.scss
            |-- index.js //页面js入口文件
        |-- template.html // webpack html-webpack-plugin 插件生成html模板
        |-- style.sass //公共sass
    |-- webpackConfig //webpack配置
    |-- package.json
    |-- .gitignore
    |-- webpack.config.js //webpack配置文件
    |-- www.js //生产启动程序

WIKI

Когда мы разрабатываем веб-страницы WeChat, нам необходимо настроить внешний интерфейс с помощью данных подписи WeChat, возвращаемых серверной частью, прежде чем мы сможем использовать интерфейсы API, такие как совместное использование, изображения и аудио, предоставляемые WeChat. Здесь мы используем идею разделения фронта и бекенда, берем в качестве примера раздачу кругу друзей и используем узел для завершения этого процесса

На следующем рисунке js-sdk не используется для разработки страницы, чтобы поделиться стилем в WeChat.

Далее будем реализовывать шаг за шагом

Шаг 1: Привяжите доменное имя

Сначала войдите на общедоступную платформу WeChat, войдите в «Настройки функций» «Официальных настроек учетной записи» и заполните «Домен безопасности интерфейса JS».

При добавлении доменного имени необходимо загрузить txt-файл и поместить его в корневой каталог, доступный веб-серверу, например, http://www.leinov.com/xxx.txt. Доступный статический корневой каталог, например статический узел. файл установлен как общедоступный файл, просто сделайте его общедоступным

Примечание. После входа в систему вы можете проверить соответствующие разрешения интерфейса в «Центре разработчиков», чтобы узнать, есть ли разрешения на совместное использование круга друзей.

Шаг 2: импортируйте файл WeChat JS

Добавьте следующие файлы JS на страницу, которая должна вызывать интерфейс JS (поддерживается https):Горячая вода Думаю QQ.com/open/is/price…Вы также можете скачать непосредственно в локальный каталог для ознакомления

Шаг 3: Вставьте конфигурацию проверки разрешений через интерфейс конфигурации (шестой шаг подробно объяснен)

Все страницы, которые должны использовать JS-SDK, должны сначала вводить информацию о конфигурации, иначе они не могут быть вызваны (один и тот же URL-адрес нужно вызывать только один раз, а веб-приложение SPA, которое меняет URL-адрес, может вызываться каждый раз при изменении URL-адреса). В настоящее время клиент WeChat для Android не поддерживает новые функции pushState H5, поэтому используйте pushState для реализации веб-приложений.

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表
});

Все интерфейсы WeChat, которые мы используем, должны быть вПредставляем wx js-sdkи в предпосылке настройки конфигурации Ниже мы в основном объясним, как получить данные конфигурации, подписанные WeChat, через node.

Шаг 4: Создайте данные конфигурации подписи

Данные, необходимые на шаге 3, должны быть сгенерированы путем вычисления подписи. Ниже приведены шаги для создания данных подписи.

• 1. Получить access_token через appid и secret официального аккаунта
• 2. Получите билет билета на основе access_token
• 3. СогласноWeChat предоставляет алгоритм генерации подписи узла(требуется билет, параметры URL для возврата данных конфигурации

Здесь следует подчеркнуть, что секрет должен быть записан на бэкенде и не должен быть раскрыт на фронтенде, поэтому для возврата данных необходимо использовать интерфейс.

Получить подписанные данные конфигурации с полным кодом server/wx.js

/*********************************************************************************
 * @file: 返回微信开发需要的config数据
 * @desc:
 * 		1,通过appid和secret获取access_token
 *  	2.根据access_token获取ticket
 *  	3.根据ticket和url(访问的页面地址由接口传过来 )通过sgin加密返回前度需要用到的config数据
 * @ahthor: leinov
 * @usedate:2018-11-07
**********************************************************************************/

const request = require("request");
const Base64 = require("js-base64").Base64;
const sign = require("./sign.js"); //微信提供在开发文档可以找到下载到本地
const base={
	appid:"****",//公众号appid
	secret:"****", // 公众号secret （重要不要暴露在前端）
	wxapi:"https://api.weixin.qq.com/cgi-bin"
};
/**
 * 根据appid,secret获取access_token
 */
function  getAccessToken(){
	return new Promise((resolve, reject)=>{
		request.get(`${base.wxapi}/token?grant_type=client_credential&appid=${base.appid}&secret=${base.secret}`, function (error, response, body) {
			if(error!==null){
				reject("获取access_token失败 检查getAccessToken函数");
			}
			resolve(JSON.parse(body));
		});
	});
}

/**
 * 根据access_token获取api_ticket
 *
 * @param  {String} access_token
 * @return {Promise}
 */
function getTicket(access_token){
	return new Promise((resolve,reject)=>{
		request.get(`${base.wxapi}/ticket/getticket?access_token=${access_token}&type=jsapi`, function (error, response, body) {
			if(error!==null){
				reject("获取api_ticket失败 检查getTicket函数");
			}
			resolve(JSON.parse(body));
		});
	});
}

/**
 * 根据api_ticket和url通过加密返回所有config数据
 *
 * @param  {String} href
 * @return {Object} configdata
 */
async function getConfigData(href){
	let configData;
	try{
		const accessTokenData = await getAccessToken();
		const ticketData = await getTicket(accessTokenData.access_token);
		const decodeHref = Base64.decode(href);
		configData = sign(ticketData.ticket,decodeHref);
		configData.appid = base.appid;
	}catch(err){
		//打印错误日志
		console.log(err);
		configData = {};
	}
	return configData;
}

module.exports = getConfigData;

используется здесьrequestЧтобы запросить интерфейс WeChat, sign.js — это алгоритм подписи узла, предоставленный WeChat. Вы можете скачать его самостоятельно. Вы можете получить следующие данные подписи через запрос интерфейса WeChat и алгоритм подписи узла.

  timestamp: ,  // 生成签名的时间戳
  nonceStr: '', // 生成签名的随机串
  signature: '',// 签名

Шаг 5: Напишите интерфейс для возврата данных конфигурации

Вышеприведенный wx.js получил данные, а затем мы используем узел для написания интерфейса для возврата данных. Обратите внимание на следующееhref, href возвращается внешним интерфейсом для генерации подписи, а доменное имя адреса этой веб-страницы должно быть внесено в белый список в настройках.

var express = require("express");
var app = express();
var getConfigData = require("./server/wx.js");
var port = "3000";

//获取微信配置数据接口
app.get("/wxconfigdata", function(req, res){ //获取配置
	let href = req.query.href;//get获取前端传来的base64网页地址
	getConfigData(href).then((data)=>{
		res.send(JSON.stringify(data));
	});
});

var server = http.createServer(app);
server.listen(port);
server.on("listening", onListening);

Это запускает службу на порту 3000 Мы посетили "http://localhost:3000/wxconfigdataВы можете получить данные, но эти данные неверны, так как локахост не соответствует имени домена в белом списке в настройках, поэтому мы должны поставить его на тестовый сервер для тестирования в процессе разработки.

Шаг 6: Внешний запрос на получение данных подписи

/*********************************************************************************
 * @file: src/wxconfig.js 通过接口获取微信config数据
 * @ahthor: leinov
 * @usedate:2018-11-07
**********************************************************************************/

import { Base64 } from "js-base64";
const axios = require("axios");

/**
 * 页面调用微信分享方法
 *
 * @param  {Object} obj      分享的标题，描述，图片等
 * @param  {type} callback
 * @return {type}
 */
function wxShare(obj,callback){
	const href = Base64.encode(location.href);
	//base64当前页面地址传给后端生成签名
	axios.get(`${location.origin}/wxconfigdata?href=${href}`).then((res)=>{
		wx.config({
			debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId: res.data.appid, // 必填，公众号的唯一标识
			timestamp: res.data.timestamp, // 必填，生成签名的时间戳
			nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
			signature: res.data.signature,// 必填，签名，见附录1
			jsApiList: ["onMenuShareTimeline","onMenuShareAppMessage"] // 必填，需要使用的JS接口列表，所有JS接口列表见文档
		});
		shareConfig(obj,callback);
	}).catch((err)=>{
		shareConfig({},callback);
	});
}

function shareConfig(obj,callback){
	wx.ready(function(){
		//分享到朋友圈
		wx.onMenuShareTimeline({
			title:  obj.timelinetitle ? obj.timelinetitle : obj.title , // 分享标题
			link: obj.link, // 分享链接
			imgUrl: obj.imgUrl ? obj.imgUrl :"" , // 分享图标
			success: function () {
				if (typeof callback === "function"){
					callback();
				}
			},
			cancel: function () {
				// 用户取消分享后执行的回调函数
			}
		});

		// 分享给微信好友
		wx.onMenuShareAppMessage({
			title: obj.title, // 分享标题
			desc: obj.desc, // 分享描述
			link: obj.link, // 分享链接
			imgUrl: obj.imgUrl ? obj.imgUrl:"",
			success: function () {
				if (typeof callback === "function"){
					callback();
				}
			},
			cancel: function () {
				// 用户取消分享后执行的回调函数
			}
		});
	});
}

export default wxShare;

Шаг 7: Используйте страницу

Предполагая, что мы используем реакцию, мы можем вызвать конфигурацию в js-файле с упакованной записью реакции.

import wxShare from "../component/wxconfig.js";
wxShare({
	title: "驾多多-小程序时代的驾校管理系统", // 分享标题
	desc:"驾多多驾校管理系统。帮助驾校在互联网时代，零门槛使用小程序工具，提升招生量、提升服务能力、降低运营成本，是为驾校提供人、财、物及业务办理的综合管理系统。", // 分享描述
	link: location.href, // 分享链接
	imgUrl:"https://***/jiaddwxicon.png" , // 分享图标
});

Когда конфигурация правильная, могут быть реализованы описание заголовка и изображение для обмена конфигурацией, а также могут быть реализованы доступные интерфейсы, предоставляемые WeChat.

tips

• Отладка в инструментах разработчика WeChat
• Приложение и секрет должны быть правильными
• Доменное имя должно быть зарегистрировано
• Местоположение TXT на сервере, необходимое для привязки доменного имени, должно быть правильным

Ссылаться на

• Документ по разработке общедоступной учетной записи WeChat

код репозитория на гитхабе