微信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}×tamp=${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 () {
// 设置成功
}
})
});
完成,开始测试。
小结
之所以写一下是之前在网上找的一篇博客明明都是错的,用了之后没反应也要发出来,误导人,浪费时间,所以将自己亲测可用的方法记下来
微信html5页面开发教程,微信网页开发,如何在H5页面中设置分享的标题,内容以及缩略图...相关推荐
- 微信公众号开发教程[017]-网页开发-JSSDK
jssdk就是在微信页面里调用手机设备(如相机,重力感应等)的一套javascript代码. 题外话,做app时,在网页里调用手机设备,比较出名的是cordova,大家可以度娘一下,练练手.不过我嫌这 ...
- iSpring Suite教程:如何在iSpring Suite中设置麦克风
iSpring Suite是用于PowerPoint的完整的电子学习创作工具包.这篇文章是一篇iSpring Suite的使用教程,教您如何在iSpring Suite中设置麦克风~ 点击下载iSpr ...
- 微信小程序开发教程||微信小程序 小程序简介||微信小程序 开始||微信小程序 小程序代码构成
微信小程序 小程序简介 小程序简介 小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 小程序技术发展史 小程序并非凭空冒出来的一个概念.当微信中的 ...
- 视频教程-基于python的微信公众号开发教程-微信开发
基于python的微信公众号开发教程 微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试(软考)--"信 ...
- 视频教程-微信公众号使用教程-微信开发
微信公众号使用教程 大秦电商创始人,专注网络技术的电商应用.已经出品<1小时建站><微博营销实战><PHP采集><网络招商系统> 秦子恒 ¥39.00 ...
- SAP UI5 应用开发教程之四十八 - 如何在 SAP UI5 应用里开发条形码扫描功能试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- SAP UI5 应用开发教程之四十五 - 如何在 SAP UI5 应用里使用 jQuery 和原生的 DOM API
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- SAP UI5 应用开发教程之三十 - SAP UI5 的路由过程中进行参数传递试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
- SAP UI5 应用开发教程之五十九 - 如何在 SAP UI5 应用里显示世界地图试读版
一套适合 SAP UI5 初学者循序渐进的学习教程 教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
最新文章
- python直方图hist用法参数详解
- IT职场规划和学习方法
- 自由自在珍珠奶茶以市场细分来创新品牌
- git安装,windows下git bash默认目录更改
- DFF(深度前馈网络)学习参考
- PHP的单引号和双引号
- 收音机磁棒天线4根接法_重磅彩蛋:DE1103收音机不用打磨就能用拉杆/外接天线收中波...
- java gpu hash_比特币 GPU 挖矿 Sha256 Hash实现(OpenCL)
- latex 设置pdf的页边距
- 0112 - 借用纸币发行门票
- keyshot卡住了还能保存吗_Sketchup建模和渲染能取代3dsMax吗?
- C#与.NET程序员面试宝典 1.2.4 简历中的闪光点----突出可转移技能(可能是你忽略的优势)...
- 计算机office demo,办公软件应用(Office2007)中级_DEMO盘-2013
- Android编译内核并刷入
- 第三方支付架构设计之:自有账户支付(六)
- MySQL中常用日期时间函数及获得
- google多开设置
- java记事本课程设计报告前言_java课程设计报告(记事本程序).doc
- 电信手机号段的归属地汇总l表
- gta5oracle2数据,GTA5 handling 数据详细研究结果(2018年最新研究)