微信html5页面开发教程,微信网页开发，如何在H5页面中设置分享的标题，内容以及缩略图...

前言

最近的需求是做一个移动端H5的长屏广告页，最后需要在微信分享的时候修改文案以及带上图片，这个实现起来也不是很复杂。

实现步骤

先绑定域名，先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。由于该自定义分享需要借助微信的jssdk来实现，所以这一步是必须的。

通过config接口注入权限验证配置，所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用。

// 生成签名随机字符串

function createNoncerStr() {

const chars = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z",

"A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"]

var noncerStr = ""

for (let index = 0; index < 16; index++) {

const element = chars[randomNum(0, 51)];

noncerStr += element;

}

return noncerStr

}

const nonceStr = createNoncerStr();

wx.config({

debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

appId: '公众号的id', // 必填，公众号的唯一标识

timestamp: new Date().getTime(), // 必填，生成签名的时间戳

nonceStr: nonceStr, // 必填，生成签名的随机串

signature: sha1(`jsapi_ticket=${通过后台接口拿到的jsTicket，如何拿可以去看官网说明}&noncestr=${noncerStr}&timestamp=${timestamp}&url=${url}`),// 必填，签名，sha1方法可以直接引入第三方的js库

jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData',] // 必填，需要使用的JS接口列表，分享会用到这两个接口

});

配置自定义分享内容

wx.ready(function () { //需在用户可能点击分享按钮前就先调用

// 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)

window.wx.updateAppMessageShareData({

title: '标题', // 这是分享展示卡片的标题

desc: '描述', // 分享描述

link: '点进去的链接', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

imgUrl: '缩略图地址', // 分享图标

success: function () {

// 设置成功

}

})

// 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)这个是不支持加入描述的要注意一下

window.wx.updateTimelineShareData({

title: '标题', // 这是分享展示卡片的标题

link: '点进去的链接', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

imgUrl: '缩略图地址', // 分享图标

success: function () {

// 设置成功

}

})

});

完成，开始测试。

小结

之所以写一下是之前在网上找的一篇博客明明都是错的，用了之后没反应也要发出来，误导人，浪费时间，所以将自己亲测可用的方法记下来