微信自定义图文分享的配置

微信自定义分享流程

公众号配置与后台接口书写内容

1. 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

   
   
   微信自定义分享

2. 后台开发人员书写验证接口，返回如下的验证信息

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

官方文档说明: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

前端调用

1. 引用SDK文件
   在需要调用JS接口的页面引入如下JS文件，（支持https）：http://res.wx.qq.com/open/js/jweixin-1.6.0.js

2. 书写代码
   其中browser.versions.mobile、md5Fn、getTimestamp、md5Key为自行书写的工具函数或参数，可忽略，以主体逻辑为主

//配置分享信息
var wxDIY_tit = 'xxxx本科生线上毕业展';
var wxDIY_desc = 'xxxx本科生线上毕业展';
var wxDIY_pic = 'http://www.xxxx.edu.cn/images/sharePic.jpg';       
var wxDIY_link = window.location.href;
//公众号配置JS白名单的网址
var baseURL = 'https://www.xxxx.edu.cn'

//浏览器判断 移动端、微信环境下，初始化脚本
if(browser.versions.mobile && browser.versions.weixin){
    initWXShareSDKFn();
};

//微信SDK自定义分享图文
function initWXShareSDKFn(){
    //请求接口
    var _link = baseURL+'/api/weixin/signature';
    //未添加签名
    var _postMes = {
        "url": wxDIY_link,
        "timestamp": getTimestamp()
    };
    var _md5Str = "timestamp=" +_postMes['timestamp'] + "&key=" + md5Key;
    _postMes['sign'] = md5Fn(_md5Str);

    myAjaxFn(_link,"POST",_postMes,function(res){
        //处理请求的数据
        if(res.errorcode==0 && res.weixin.appId){
            // res.weixin
            wx.config({
                debug: false, // 开启调试模式
                appId: res.weixin.appId, // 必填，公众号的唯一标识
                timestamp: res.weixin.timestamp, // 必填，生成签名的时间戳
                nonceStr: res.weixin.nonceStr, // 必填，生成签名的随机串
                signature: res.weixin.signature, // 必填，签名，见附录1
                jsApiList: ['checkJsApi','updateTimelineShareData','updateAppMessageShareData'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            //判断当前客户端版本是否支持指定JS接口
            wx.checkJsApi({
                jsApiList: [ 
                    'getLocation', 
                    'updateTimelineShareData', 
                    'updateAppMessageShareData' 
                ], // 需要检测的JS接口列表
                success: function(res) {
                    console.log(res.errMsg)  
                }
            });
            wx.ready(function() {
                // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容（1.4.0）
                wx.updateAppMessageShareData({
                    title: wxDIY_tit, // 分享标题
                    desc: wxDIY_desc, // 分享描述
                    link: wxDIY_link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: wxDIY_pic, // 分享图标
                    success:function(res){}
                });

                // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
                wx.updateTimelineShareData({
                    title: wxDIY_tit, // 分享标题
                    desc: wxDIY_desc, // 分享描述
                    link: wxDIY_link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                    imgUrl: wxDIY_pic, // 分享图标
                    success:function(){}
                });
            });

        }
    },function(err){
        console.log(err);
    });
}