vue制作微信分享的单页面应用

前端 - vue框架

后端 - node框架

node负责调用微信的接口获取accesstoken 然后换取ticket去保存

        request('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + 你的appid + '&secret=' + 你的appsecert, function (error, response, body) {
            var content = JSON.parse(body);
            var time = Date.now() + 7200 * 1000;
            content.expires_in = time; // 变更过期时间，由于接口请求有限，所以要变更
            // 利用缓存保存token
            cache.put('token', JSON.stringify(content));
            // 再次请求
            request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + 刚刚的token + '&type=jsapi', function (_error, _response, _body) {
                var content2 = JSON.parse(_body);
                // 缓存ticket
                cache.put('ticket', JSON.stringify(content2));
                // 进行微信签名
                var returnResult = sign('' + content2.ticket + '', '' + url + ''); //签名这个微信官方有demo 这里就不描述了
                // 返回结果
                jsonWrite(res, returnResult);
            });
        })

vue - 前端

首先npm安装微信的sdk

npm install wx-sdk-js

然后通过加载去需要的页面

import wx from 'wx-sdk-js'

然后通过获取刚刚的接口 得到签名后的数据

        wx.config({
          debug: false,
          appId: 你的appid,
          timestamp: 接口获得,
          nonceStr: 接口获得,
          signature: 接口获得,
          jsApiList: [
            "onMenuShareTimeline",
            "onMenuShareAppMessage",
            "onMenuShareQQ"
          ]
        });

这里就完成整个微信分享了