微信分享

微信分享

服务器端

'use strict';
const Controller = require('egg').Controller;
const signature = require('wx_jsapi_sign');
const pify = require('pify');

class IndexController extends Controller {
  async getsignature() {
    const { ctx } = this;
    let url = ctx.request.body.url;
    if (!url) { // 必须验证,不传url getSignature还是会返回signature
      ctx.throw(400, 'url is require.');
    }
    url = decodeURIComponent(url);
    ctx.body = await pify(signature.getSignature(this.app.config.wechat_config))(url);
  }
}

module.exports = IndexController;

注意:
* pify是帮助cb形式转化为await形式
* url要验证是否存在,不传url getSignature还是会返回signature
* decodeURIComponent(url): 客户端加密,服务器端解密,不加密的话会url中带有&等特殊字符会显示invalid signature

客户端

<script src="jweixin-1.0.0.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
// 使用 jq 动态加载 微信配置
$.ajax({
    url: '/getsignature' // 此处url请求地址需要替换成你自己实际项目中服务器数字签名服务地址
        ,
    type: 'post',
    data: {
        url: encodeURIComponent(location.href.split('#')[0]) // 将当前URL地址上传至服务器用于产生数字签名
    }
}).done(function(r) {
    // 返回了数字签名对象
    console.log(r);
    console.log(r.appid);
    console.log(r.timestamp);
    console.log(r.nonceStr);
    console.log(r.signature);
    // 开始配置微信JS-SDK
    wx.config({
        debug: true,
        appId: r.appId,
        timestamp: r.timestamp,
        nonceStr: r.nonceStr,
        signature: r.signature,
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
            'onMenuShareWeibo',
            'hideMenuItems',
            'chooseImage'
        ]
    });
    // 调用微信API
    wx.ready(function() {
        var sdata = {
            title: '那年|测试微信分享及相关API',
            desc: '那年|测试微信分享及相关API',
            link: location.href.split('#')[0],
            imgUrl: 'http://game.4gshu.com/xuangedan/other-project/2015-01-06/img/share-wx-logo.jpg', // 不需要加密
            success: function() {
                alert('用户确认分享后执行的回调函数');
            },
            cancel: function() {
                alert('用户取消分享后执行的回调函数');
            }
        };
        wx.onMenuShareTimeline(sdata);
        wx.onMenuShareAppMessage(sdata);
        // 添加图片
        $('#addPic').on('click', function() {
            wx.chooseImage({
                success: function(res) {
                    var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
                    // var imgs = localIds.split(',');
                    localIds.forEach(function(v, i) {
                        alert(v);
                        $('#picList').append('<li><img src="' + v + '" alt="" width="50"></li>');
                    });
                }
            });
        });
    });
});

注意:
* url: encodeURIComponent(location.href.split(‘#’)[0])
* imgUrl:应该为完整的http, 不能少了http:// 或者 https://,不需要加密啊
* link: location.href.split(‘#’)[0],,分享的url需要与调用接口的上传的url一致,但是不需要加密

微信有缓存,或导致各种bug,建议使用清理,或使用微信web开发者工具

1 Star2 Stars3 Stars4 Stars5 Stars (1 打了分, 平均分: 2.00)
Loading...

发表评论

邮箱地址不会被公开。 必填项已用*标注