博客

updateAppMessageShareData

目前用的就是最新的分享接口，貌似也存在待废弃的onMenuShareAppMessage，但是几年了都没废弃，用法都差不多。

• 引入js

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

• 加载微信的相关配置

$(function(){
    configWx()
})
//加载微信的配置
function configWx() {  // url可为空 因为request.getHeader("Referer")可以拿到访问者的地址

    let url="/wx/config";
    $.ajax({
        type : 'get',
        url :  url,
        processData: false,   // jQuery不要去处理发送的数据
        contentType: false,   // jQuery不要去设置Content-Type请求头
        // data:{url:url},    //要跳转的页面 需要调用微信拍照的页面
        headers: {'Content-Type': 'application/json'},
        success : function(data) {
            if(data.code ==1 ){
                configWeiXin(data.data.appId, data.data.timestamp, data.data.nonceStr,data.data.signature);
            }else {
                console.log("配置请求错误");
            }
        }
    });
}

function configWeiXin(appId, timestamp, nonceStr, signature) {
    // jsApiList  需要调用的接口都要在这配置放开权限
    wx.config({
        debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: appId,
        timestamp: timestamp,
        nonceStr: nonceStr,
        signature: signature,
        jsApiList: ['showAllNonBaseMenuItem','onMenuShareAppMessage','updateAppMessageShareData','onMenuShareAppMessage','chooseImage','previewImage','uploadImage','downloadImage', 'getLocalImgData','showAllNonBaseMenuItem','getLocation','openLocation'],  //选图接口  预览图片接口 上传图片接口 下载图片接口
        openTagList: ['wx-open-launch-weapp']
    });
}
wx.ready(function () {
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中
    console.log("微信加载成功");
    initShare()
});


wx.error(function (res) {
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名
    console.log("微信加载失败")
});

• 调用api接口

function initShare(){
    var desc = "点击进入详情";

    wx.ready(function () {
        wx.updateAppMessageShareData({
            title: title, // 分享标题
            desc: desc, // 分享描述
            link: shareUrl, // 分享链接
            imgUrl: requestUrl+'/favicon.ico', // 分享图标
            success: function () {

            },
            cancel: function () {

            }
        });
    });
}
![在这里插入图片描述](https://img-blog.csdnimg.cn/758cfd01080c4c11a8ca84a1e5b0b2b5.png)

## 坑1：
正常情况下，通过链接进入H5，通过微信的一些配置，然后右上角分享，分享出来的是个链接

解决：
		把链接放在微信公众号对话框里，通过微信公众号去访问，就会分享出来一个小卡片类似的样式，微信这样的潜规则，应该是防外链相关有关。但是文档里一点没有提及！


以上这坑都是在开发环境下用的测试公众号，线上公众号还不知道，但是作为本地微信开发来说，真的很不友好。