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

HSL-

已于 2023-04-21 11:12:47 修改

阅读量4.7k

点赞数 8

文章标签：微信前端 javascript

于 2022-08-20 14:19:10 首次发布

本文链接：https://blog.csdn.net/weixin_52335582/article/details/126438883

版权

微信内置浏览器中的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() {
            // 获取url
            const linkUrl = window.location.href.split('#')[0]
			const u = navigator.userAgent
			const 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',      // 公众平台申请的id
							timestamp,       // 时间戳
							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 || 16
　　const 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后然后收藏，最后在我的微信收藏中分享出去这样才会是一个带图片标题的卡片