微信浏览器h5分享卡片模式

微信内置浏览器中的h5想要分享给朋友或者朋友圈的时候是卡片模式并且带图片和标题

需要用到微信的jweixin-module包，这里拿在uni的h5项目中作为例子

安装包 npm install jweixin-module --save 和 npm install sha1 --save 如果由后端来加密签名那就不需要安装sha1

<script>
const jweixin = require('jweixin-module')
import sha1 from 'sha1'
import randomString from '@/utils/randomString.js'
export default {onLaunch() {this.weiXinShareFn()},methods: {weiXinShareFn() {// 获取urlconst linkUrl = window.location.href.split('#')[0]const u = navigator.userAgentconst isWeixin = u.toLowerCase().indexOf('micromessenger') !== -1// 判断当前是否在微信浏览器内if (isWeixin) {// 这里需要请求后端配置的接口uni.request({url: 'http://xxxxxx',method: 'GET',data: { code: 'cws_gzh' },success: res => {//返回jsapi码const ticket = res.data.ticket || ''//时间戳const timestamp = Math.round(new Date().getTime() / 1000).toString()//随机字符串const nonceStr = randomString()//签名算法(微信给的格式)const jsons = `jsapi_ticket=${ticket}&noncestr=${nonceStr}&timestamp=${timestamp}&url=${linkUrl}`// 把签名转为sha算法const signature = sha1(jsons)jweixin.config({debug: false,   // 调试模式appId: 'xxxxxxx',      // 公众平台申请的idtimestamp,       // 时间戳nonceStr,        // 随机字符串signature,       // 签名jsApiList: [     // 申请需要使用的api'updateAppMessageShareData','updateTimelineShareData']})jweixin.ready(() => {const shareData = {title: 'xxxx',  // 标题desc: 'xxxxxxxx',    //详情link: linkUrl,   // h5链接imgUrl: ''      // 图片链接 只能是网络连接}//分享给朋友jweixin.updateAppMessageShareData(shareData)//分享到朋友圈jweixin.updateTimelineShareData(shareData)})}})}}}
}
</script>

// 随机字符串
export default function randomString(len) {const = len || 16const str = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'const maxPos = str.length;let value = ''for (let i = 0; i < len; i++) {value += str.charAt(Math.floor(Math.random() * maxPos))}return value;
}

如果是原生的h5页面就需要导入cdn

并且方法不再用jweixin.xxx 而是用wx.xxx

微信官方说明文档：概述 | 微信开放文档

后端怎么获取ticket凭证的方法都在文档中有说明

注意一个很坑的问题，如果该h5链接是添加在公众号底部菜单栏的话，那么打开并分享的时候是正常的。但是如果用户是从一个聊天界面，或者说用户是直接点击这个h5的链接进来的这个时候再分享出去给其他好友那么还是一条链接而已，不会是一个带图片标题的卡片。解决办法是需要进入这个h5后然后收藏，最后在我的微信收藏中分享出去这样才会是一个带图片标题的卡片

微信浏览器h5分享卡片模式相关推荐

uniapp 转H5 实现微信浏览器自定义分享样式
uniapp 转H5后实现微信浏览器自定义分享样式 uniapp 项目转 h5 1.在manifest.json文件中,找到H5配置一下路径,需要注意这个名字需要和布到线上的文件夹名字一致 2.就是 ...
微信浏览器H5页面自动播放背景音乐
微信浏览器H5页面自动播放背景音乐最近遇到一个需求一个文章详情页(图文结合) 进入页面后自动播放背景音乐正常用video标签后安卓打开后是自动播放的但是ios是不支持自动播放的经过不懈努力的 ...
关于微信浏览器H5 React,Vue工程化项目input无法自动聚焦疑难杂症排查
前言最近使用React开发微信H5搜索框自动聚焦功能,发现路由跳转页面后无法自动聚焦.尝试了各种方法均不生效-后来发型是异步加载组件问题,个人估计是微信浏览器在异步组件加载完成后导致节点失焦. 尝试 ...
uniapp微信浏览器H5授权微信登录
1.准备一个触发微信登录的按钮 <button class="wechat-logo" @click="getWeChatCode">微信授权登录& ...
微信浏览器H5下载文件
微信浏览器无法下载文件,我们可以跳转外部浏览器进行下载. 首先绑定按钮事件(我这里用的uniapp开发) <button class="btn" @click="d ...
极光魔链web版，兼容微信浏览器代码分享
只需把配置的短链地址替换代码中的"你的魔链地址"即可 <!DOCTYPE html><html lang="en"> <head& ...
微信浏览器H5页面软键盘关闭导致页面空缺的问题
微信6.7.4 H5页面里的select,input软键盘弹起的时候页面会上移,软键盘关闭页面不会下移.导致页面空缺了一部分. 微信6.7.3及其它版本不会有这个问题!页面会随着软键盘关闭而下移恢复正 ...
HTML——微信浏览器H5页面调用微信扫一扫
使用JS-SDK调用微信扫一扫,需要有公众号支持,通过公众号生成JS-SDK使用权限签名.本文直接调用已封装好的接口来获取随机数(noncestr).时间戳(timestamp).签名(signatu ...
uni-app写app点击app的分享，分享至微信，在微信中点击分享卡片打开小程序并跳转至相应页面
uni-app写的app // 分享小程序async handleShare(index) {let _this = this;setTimeout(() => {this.drawCanvas ...

微信浏览器h5分享卡片模式

微信浏览器h5分享卡片模式相关推荐

最新文章

热门文章