h5微信分享实现（node+express）;

时间  2020-10-22 标签 html 前端 node linux ios nginx express npm json bootstrap
前言

(^o^)/~
h5页面在微信中使用微信分享功能，实现个性化分享模版。
从默认样式：
image.pnghtml

到自定义样式：
image.png前端

第一步：注册微信公众平台帐号（已有略过此步）

https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=
image.pngnode

我的只能注册订阅号类型，服务号就须要企业认证了。企业权限大一些，能用的接口比较全，分享的话我的的就行。linux

目前网页端能使用的微信功能（支付除外）都属于公众号的范畴，隶属于微信公众平台，和微信开放平台无关；ios

注册完登陆后能够查看本身的权限，能用那些功能。
image.pngnginx

第二步：接入sdk

这一步容易卡关，应为首先须要一台能用的服务器和备案的域名；没办法，微信对接要求很苛刻，本地没法实现对接
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1express

image.png

安全域名这里要求将某个密钥文件放在服务器根目录。
image.pngnpm

下面就要开始写代码了。json

第三步：建立服务，放置指定文件(有现成服务的放下文件，这一步跳过)

文件结构以下：
image.pngbootstrap

//server.js
const express = require('express');
const { resolve } = require('path');
const publicPath = resolve('./public');

const server = express();

async function bootstrap(){
    server.use(express.static(publicPath));//托管静态文件
    server.listen(9222,function(){
        console.log('server run at:http://localhost:9222')
    })
}
bootstrap();

启动服务试一下：
image.png

查看文件是否正常查看：
http://localhost:9222/MP_verify_kuKy0AHjAhdrFeBO.txt
image.png
这样就能够放到服务器上去了。
image.png
通常用这两个工具操做服务器就够了。
image.png
将静态资源传上去,node_modules手动安装比较好:
image.png
假定服务器上已经安装好了node,npm,yarn.pm2等工具。
我这里使用yarn安装，用npm也是同样的。

用pm2托管服务:
输入命令pm2 start server.js
image.png
服务启动成功就能够试一下MP_verify_kuKy0AHjAhdrFeBO.txt可否访问。
http://www.liubingyang.top:9222/MP_verify_kuKy0AHjAhdrFeBO.txt
提示：个人是ubuntu系统，默认9222端口不可访问，需打开防火墙限制：

ufw allow xxx//开放接口
ufw status  查看接口放开状态

image.png

image.png
虽然能够访问，但要求是直接访问，不能带端口号，用nginx简单配置下就行：(默认已经安装了nginx)
找到nginx配置文件夹 nginx.conf(每一个系统不一致，使用whereis nginx能够粗略查找)
image.png
个人是在 /etc/nginx下，进入nginx.conf文件夹下用vim直接建立编辑一个test.conf文件。
image.png
image.png
只须要以下代码就够了，那两个add_header是用来处理接口跨域请求的，也能够不要。

server {
        listen 80;
        server_name www.liubingyang.top;

        location / {
            add_header 'Access-Control-Allow-Origin' '$http_origin';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
            proxy_pass http://127.0.0.1:9222;
        }
}

在线编辑，或者本地编辑完用xftp传上去也能够。
编辑完保存后（编辑输入i命令，编辑完输入ESC->:wq->回车），开启（或重启nginx）

ngixn -s reload

image.png
正常（在linux系统中，没有消息就是最好的消息）
再试试：
http://www.liubingyang.top/MP_verify_kuKy0AHjAhdrFeBO.txt
image.png
文件放置正常；

第三步：页面接入sdk

看文档，页面引入js，并配置初始项。
新建html
image.png
image.png

//inde.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    测试分享
</body>
</html>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
   wx.config({
        debug: true, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
        appId: '', // 必填，公众号的惟一标识
        timestamp: '', // 必填，生成签名的时间戳
        nonceStr: '', // 必填，生成签名的随机串
        signature: '',// 必填，签名
        jsApiList: [] // 必填，须要使用的JS接口列表
    });
</script>

前端作的事情就是把appId，timestamp，nonceStr，signature这4个参数填下就好了，都是必填项。
appId在平台的基本配置中找到（页面拉到最下面）；
https://mp.weixin.qq.com/advanced/advanced?action=dev&t=advanced/dev&token=1496518416&lang=zh_CN
image.png

image.png

jsApiList不能为空，就先把分享有关的几个接口先写进去：

jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareQZone'] // 必填，须要使用的JS接口列表

timestamp，nonceStr，signature三个参数由服务端对接提供（appId也能够由服务端提供）。
接下来就开始作服务端对接，解决这三个参数的获取。

第四步：服务端获取signature

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

image.png
根据文档的附录（上面这个页面往下翻）描述，能够判断出咱们须要的三个参数构成：
timestamp：时间戳（特别提示：就是个随机数字，new Date().getTime()能够获取，可是12位的，这里只要10位，截取一下就好了）；
nonceStr：随机码，也是自定义的，这里写死也行。
signature：最重要的签名字段，是由上面两个加上url和jsapi_ticket拼成的字符串，再进行sha1加密获得。
例如：

jsapi_ticket=xx&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

加密后会获得一个简短的密文：
image.png

下面就看怎么获取jsapi_ticket：
image.png
分两步，先获取access_token：
https://developers.weixin.qq.com/doc/offiaccount/Basic_Information/Get_access_token.html
image.png
介绍有兴趣慢慢看吧，我只管接口，参数，返回就好了。
grant_type固定值client_credential，secret和appid在一个地方查看。
image.png
新建controller文件夹和config文件夹，新增获取access_token的controller和config文件：

//config/index.js
 module.exports = {
    grant_type:'client_credential',
    appid:'wx9c48ee416a064a99',//换成本身的，和域名绑定的
    secret:'030fa057e50a2e3eedd42cc2e605edb6',//换成本身的，和域名绑定的

    timestamp:new Date().getTime().toString().slice(0,10),
    nonceStr:'Wm3WZYTPz0wzccnW',

    localPath:'http://www.liubingyang.top',
}

//access_token.js
const { Router } =require("express");
const axios = require('axios');
const config = require('../config');
class Axios {
    async init(){
        const router =  Router();
        router.get('/',this.get);
        return router;
    }
    get = async (req,res)=>{
        let url = `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appid}&secret=${config.secret}`;
        const { data } = await axios.get(url);
        res.json(data);
    }
}

module.exports = async function(){
    return await new Axios().init();
}

controller文件入口：

//contriller/index.js
const { Router } = require('express');
const access_tokenController = require('./access_token.js');

module.exports = async function(){
    const router = Router();
    router.use('/access_token', await access_tokenController());
    return router;
}

server.js一样作下修改：

//server.js
const express = require('express');
const { resolve } = require('path');
const bodyParser= require('body-parser');
const server = express();

const publucPath = resolve('./public');

const initControllers = require('./controller');
const bootstrap = async function(){
    server.use(bodyParser.urlencoded({ extended: false }));//处理表单入参
    server.use(bodyParser.json({ extended: false }));//处理json入参
    server.use(express.static(publucPath));
    server.use(await initControllers());
    server.listen(9222,function(){
        console.log('server run at http://localhost:9222');
    })
}
bootstrap();

将修改后的代码放到服务器上：
image.png

安装axios插件，重启pm2:
image.png
在浏览器中试一下接口
http://www.liubingyang.top/access_token
image.png
能够正常返回，下面用access_token换取jsapi_ticket：
image.png
用get方法请求这个接口就能够了。新建jsapi_ticket的controller:
image.png

//jsapi_ticket.js
const { Router } = require('express');
const axios = require('axios');
const urlUtil = require("url");
const querystring = require("querystring");

class Jsapi_ticket {
    async init(){
        const router = Router();
        router.use('/',this.get);
        return router;
    }
    get = async (req,res)=>{
        //获取返回的url对象的query属性值 
        var arg = urlUtil.parse(req.url).query;

        //将arg参数字符串反序列化为一个对象
        var params = querystring.parse(arg);
        const url = `https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=${params.access_token}&type=jsapi`;
        const { data } = await axios.get(url);
        res.json(data);
    }
}

module.exports = async function(){

    return await new Jsapi_ticket().init();
}

controller/index.js别忘注册下接口：
image.png
文件放到服务器上，安装url插件，重启pm2:
image.png
启动成功能够用pm2 logs查看日志，pm2 flush能够清空全部日志。
试一下Jsapi_ticket接口：(access_token有时效性，得用本身刚获取的)
[http://www.liubingyang.top/js...
image.png
这里也正确的拿到了ticket。
接下来开始组装签名signature：
image.png

//signature.js
const { Router } = require('express');
const axios = require('axios'); 
const config = require('../config');
const urlUtil = require("url");
const querystring = require("querystring");

class Signature{
    async init(){
        const router = Router();
        router.get('/',this.get)
        return router;
    }
    get = async (req,res)=>{
        //获取返回的url对象的query属性值 
        var arg = urlUtil.parse(req.url).query;
        console.log('arg:'+arg);
        //将arg参数字符串反序列化为一个对象
        var params = querystring.parse(arg);
        let access_token ='';
        {
            const { data } = await axios.get(`${config.localPath}/access_token`);
            if( data.access_token ){
                access_token = data.access_token;
            }else{
                res.json(data);
                return;
            }
            console.log('access_token:'+access_token);
        }
        {
            const { data } = await axios.get(`${config.localPath}/jsapi_ticket?access_token=${access_token}`);
            let ticket = '';
            if(data.ticket){
                ticket = data.ticket;
            }else{
                res.json(data);
                return
            }
            console.log('ticket:'+ticket);
            console.log('url:'+params.url)
            const signature = `jsapi_ticket=${ticket}&noncestr=${config.nonceStr}&timestamp=${config.timestamp}&url=${params.url}`;
            console.log('signature:'+signature);
            res.json({signature});

        }


    }
}

module.exports = async function(){
    return await new Signature().init();
}

应为是在服务器上调试，多写几个console便于查看问题，
controller/index.js注册接口
image.png

上传文件重启pm2:
image.png
这个时候就开着pm2 logs查看下接口：
http://www.liubingyang.top/signature?url=http://www.liubingyang.top
image.png
image.png
日志也出来了，接口也正常。

最后一步 前端获取参数

最后就是提供前端开接口获前端全部须要的参数：
image.png

//wx_config.js
const { Router } = require('express');
const axios = require('axios');
const sha1 = require('node-sha1');
const config = require('../config');

class Wx_config {
    async init(){
        const router = Router();
        router.use('/',this.post);
        return router;
    }
    post = async (req,res)=>{
        console.log('req.body'+JSON.stringify(req.body))
        console.log('req.body.url:'+req.body.url);
        const { data } = await axios(`${config.localPath}/signature?url=${req.body.url}`);
        let signature = '';

        if(data.signature){
            signature = data.signature;
        }else{
            res.json(data);
            return;
        }
        res.json({
            timestamp : config.timestamp,
            nonceStr : config.nonceStr,
            signature:sha1(signature),
        })
    }
}

module.exports = async function(){
    return await new Wx_config().init();
}

最后更新下controller/index.js
image.png
修改下index.html,这里就不啰嗦了，把须要的都放进去：

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    测试分享
</body>
</html>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
    const xhr = new XMLHttpRequest();
    function wx_config(){
        return new Promise(res =>{
            xhr.onreadystatechange = function(event){
                if(event.target.status == 200 && event.target.readyState == 4){
                    res(xhr.responseText);
                }
            }
            xhr.open('post', 'http://www.liubingyang.top/wx_config');
            xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xhr.send(`url=${encodeURIComponent(location.href.split('#')[0])}`);
        })
    }
    let configs = '';
    (async function(){
        configs = await wx_config();
        console.log(configs)
        const { timestamp,nonceStr,signature } = JSON.parse(configs);
        let config = {
            debug: true, // 开启调试模式,调用的全部api的返回值会在客户端alert出来，若要查看传入的参数，能够在pc端打开，参数信息会经过log打出，仅在pc端时才会打印。
            appId: 'wx9c48ee416a064a99',// 必填，公众号的惟一标识

            timestamp, // 必填，生成签名的时间戳
            nonceStr, // 必填，生成签名的随机串
            signature,// 必填，签名
            jsApiList: ['chooseImage','onMenuShareTimeline','onMenuShareAppMessage','onMenuShareQQ','onMenuShareQZone'] // 必填，须要使用的JS接口列表
        }
        wx.config(config);

        wx.ready(function(){
            let config={ 
                title: '测试用例', // 分享标题
                desc: '你看这个行不行', // 分享描述
                link: location.href, // 分享连接，该连接域名或路径必须与当前页面对应的公众号JS安全域名一致
                type: 'link',//分享类型,music、video或link，不填默认为link,
                imgUrl:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603186815698&di=7ec300630a404299c855c73a99773e17&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201411%2F04%2F20141104225457_f8mrM.thumb.700_0.jpeg',
                success: function () {
                    alert('分享测试成功')
                }
            }
                wx.onMenuShareTimeline(config)
                wx.onMenuShareAppMessage(config)
                wx.onMenuShareQQ(config)
                wx.onMenuShareQZone(config)
            })
        })()
</script>

文件更新到服务器上，安装node-sha1插件并重启pm2:
image.png
记得先清空日志
查看页面状况
http://www.liubingyang.top/
image.png
开的是debug模式，各个参数都能看到。参数正常，就能够用手机微信测试了：
image.png
表示配置成功，这里最容易出现的错误是invalid signature，签名不正确，解决办法照着这个查就好了
image.png
调用分享给朋友：
image.png
这样就没有问题了。
呈现的结果image.png

总结

在微信的条条框框中探索探索某个功能的实现是比较困难的，尤为是新手，文档像说明书同样，几乎没有逻辑可寻，并且有不少地方更新的太快，而手册又比较老。
好比这两个接口，实际上我的是没有权限的，文档里并无说明。我的只能用比较老的快废弃的接口
image.png

上面有不少我踩过的坑就不一一说明了，也许你遇不到，也许你遇到的我没遇到过，慢慢探索吧。微信功能实现其实主要由服务端完成，前端作的不多，熟悉对接流程会使前端同窗对微信体系有更深的理解，出了问题也能从容的应对。

联系我们 沪ICP备13005482号-10