微信公众号H5端网页分享微信好友-实现思路(踩坑记录总结)

微信公众号H5端网页分享微信好友-实现思路(踩坑记录总结)H5 端网页微信分享 微信 h5 分享

大家好,欢迎来到IT知识分享网。

第三方配置就不说了,按着官方文档来就可以了
H5端 微信分享 使用JS-SDK
详情请查看JS-SDK说明文档

第一个坑

在进行接口鉴权时需要签名等参数,签名等参数需要调用后端接口返回。需要注意的是:调用接口需要一个参数就是页面路径地址(url参数,我这边页面路径用url作为入参,具体看后端拿什么字段作为入参字段)
区分俩种情况:

  1. IOS端
    微信IOS版,每次切换路由,SPA的url是不会变的,发起签名请求的url参数必须是最初进入页面时的url
  2. Android端
    微信安卓版,每次切换路由,SPA的url是会变的,发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)
/ 这段代码写在App.vue的onLaunch生命周期中(在获取签名时_SYSTEM_AUTHURL会用到) * 定义全局第一次进入的页面地址,否则iOS端微信JSSDK授权会一直报invalid signature签名失效的错误 * IOS:微信IOS版,微信安卓版,每次切换路由,SPA的url是不会变的,发起签名请求的url参数必须是最初进入页面时的url * Android:微信安卓版,每次切换路由,SPA的url是会变的,发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的) * */ let authUrl = window.location.href.split('#')[0]; uni.setStorageSync('_SYSTEM_AUTHURL', authUrl); 

第二个坑

updateAppMessageShareData的link参数,分享链接的地址上有带中文的参数(中文参数值会被干掉),安卓上分享是可以正常分享,但是在IOS上会出现报错,导致你分享标题、描述、图片等都失效了:
在这里插入图片描述

// 分享的链接link "https://www.xxx.com/test?&eid=1&name=名字" // 改成 "https://www.xxx.com/test?&eid=1&name="+encodeURIComponent("名字") 

updateAppMessageShareData示例:

// jweixin 是引入的微信sdk.js文件 jweixin.updateAppMessageShareData({ 
    title: '', // 分享标题 desc: '的哈加快速度好看\r\n的时间里将埃里克', // 分享描述 link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: '', // 分享图标(我这里是oss的图片全路径) success: res => { 
    console.log('成功', res); }, error: err => { 
    console.log('失败', err); }, cancel: can => { 
    console.log('取消', can); } }) 

小技巧

对于描述要实现多行显示的话:
只需要在updateAppMessageShareData的分享描述desc值,需要换行的地方拼接上一个’\r\n’。
title标题和desc描述文字过长时,会自动显示’…’

实现思路

  1. 先创建一个公共js文件wxsdk.js:
    a.引入官方文档的微信sdk文件
    b.引入获取签名的api接口文件
    c.引入store仓库index.js文件
    wesdk.js文件里大致执行顺序是:
    getWxConfig里面先调用isWechat 判断当前环境是否是微信内置浏览器
    后调用shareAppMessage分享的方法,并将分享的配置信息传过去(定制情况下),非定制情况下(这里传的是应用首页路径)
import jweixin from '@/js_sdk/jweixin-module/index.js'; import { 
    getWxOptions } from '@/util/api/weixin.js' import store from "@/store" //判断是否在微信中  const isWechat = function() { 
    var ua = window.navigator.userAgent.toLowerCase(); if (ua.match(/micromessenger/i) == 'micromessenger') { 
    return true; } else { 
    return false; } }; //获取微信JSSDK授权 const getWxConfig = function(shareLink) { 
    let share = shareLink ? shareLink : '/pages/home/index?status=phi&hospitalId=' + store.getters.domainInfo.hospitalId var that = this; if (!that.isWechat()) { 
    // '/pages/error/wechat'这个是警告页面提示请在微信内打开(防止将页面地址复制在手机浏览器打开) return uni.reLaunch({ 
    url: '/pages/error/wechat' }) } let u = navigator.userAgent; let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 // 判断是否拿微信开发者工具打开,是的话不能走 window.entryUrl,否则sdk授权不成功 if (u.indexOf('wechatdevtools') > -1) { 
    isiOS = false } let pageUrl = ''; if (isiOS) { 
    pageUrl = uni.getStorageSync('_SYSTEM_AUTHURL'); }else { 
    pageUrl = window.location.href.split('#')[0]; } let hospitalId = uni.getStorageSync('_SYSTEM_HOSPITALID'); // 判断是否合作机构 请求不同授权接口 getWxOptions({ 
    partnersCode: uni.getStorageSync('_PARTNER_CODE'), url: pageUrl, hospitalId }).then(res => { 
    jweixin.config({ 
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: res.data.appid, // 必填,公众号的唯一标识 timestamp: res.data.timestamp, // 必填,生成签名的时间戳,由开发者生成的当前时间戳 nonceStr: res.data.nonceStr, // 必填,生成签名的随机串,由开发者随机生成 signature: res.data.signature, // 必填,签名 // 必填,需要使用的JS接口列表 jsApiList: [ 'checkJsApi', 'openLocation', 'chooseImage', 'openAddress', 'chooseWXPay', 'updateAppMessageShareData', 'updateTimelineShareData', 'getLocalImgData', 'uploadImage', 'hideMenuItems' ] }) jweixin.ready(() => { 
    / * config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口, * 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 */ //分享给朋友接口--如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行 // jweixin.updateAppMessageShareData('相关参数'); setTimeout(function() { 
    that.shareAppMessage(share); }, 100); //分享到朋友圈接口--如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行 // jweixin.updateTimelineShareData('相关参数'); // [生产环境] 要隐藏的菜单项,只能隐藏“传播类”和“保护类”按钮,所有 menu 项见附录3 // https://developers.weixin..com/doc/offiaccount/OA_Web_Apps/JS-SDK.html if (process.uniEnv.ENV == 'prod') { 
    jweixin.hideMenuItems({ 
    menuList: ['menuItem:copyUrl'] }); } }); jweixin.error(err => { 
    console.log(err, '接口验证失败'); }); }) }; // 分享页面 const shareAppMessage = function(shareParams) { 
    let customizationShare = typeof shareParams == 'object' ? true : false; let shareContent = { 
    title: '', desc: '', link: '', imgUrl: '' }; if(customizationShare) { 
    // 定制分享内容 shareContent.title = shareParams.title; shareContent.desc = shareParams.desc; shareContent.link = store.getters.domainInfo.host + process.uniEnv.BASE_DIST + shareParams.link; shareContent.imgUrl = process.uniEnv.BASE_FILEURL + '/' + shareParams.imgUrl; }else { 
    // 这里拿的是store仓库中默认的分享内容 shareContent.title = store.getters.domainInfo.htmlAbbreviation + sTitle; shareContent.desc = store.getters.domainInfo.shareText; shareContent.link = store.getters.domainInfo.host + process.uniEnv.BASE_DIST + '/pages/home/index?status=phi&hospitalId=' + store.getters.domainInfo.hospitalId; shareContent.imgUrl = process.uniEnv.BASE_FILEURL + '/' + store.getters.domainInfo.logo; }; jweixin.updateAppMessageShareData({ 
    title: shareContent.title, // 分享标题 desc: shareContent.desc, // 分享描述 link: shareContent.link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: shareContent.imgUrl, // 分享图标 success: res => { 
    console.log('成功', res); }, error: err => { 
    console.log('失败', err); }, cancel: can => { 
    console.log('取消', can); } }) } 
  1. 在store仓库中initsdk.js文件中写初始化sdk方法:
import getters from '../getters.js'; import wxopt from '@/util/plugins/wxsdk.js' const payment = { 
    state: { 
    // 微信sdk 页面中通过Getter获取 wxsdk: null, }, actions: { 
    // 初始化微信SDK init_wxsdk({ 
     commit, state, getters }, shareParams ) { 
    let link; if(shareParams) { 
    shareParams.link = shareParams.link + '&hospitalId=' + getters.domainInfo.hospitalId; link = shareParams; }else { 
    link = '/pages/home/index?status=phi&hospitalId=' + getters.domainInfo.hospitalId; }; // 通过config接口注入权限验证配置 state.wxsdk = wxopt; state.wxsdk.getWxConfig(link); // 配置授权 } } } export default payment 
  1. 在App.vue的onLaunch生命周期中接着第一个坑示例代码后面写上初始化微信sdk方法,走默认分享内容
import { 
    mapActions, mapGetters } from 'vuex'; onLaunch: function(options) { 
    let authUrl = window.location.href.split('#')[0]; uni.setStorageSync('_SYSTEM_AUTHURL', authUrl); // 写上初始化sdk方法 this.init_wxsdk(); } // 还需要在methods生命周期中写上 methods: { 
    ...mapActions(["init_wxsdk"]) } 
  1. 在需要实现定制分享的页面中:
import { 
    mapActions, mapGetters } from 'vuex'; onLoad(options) { 
    // 走定制分享内容 let shareParam = { 
    title: this.details.fullName + ' ' + this.details.titleValue || this.details.role, desc: hospitalName + ' ' + this.deptName + '\r\n' + beGoodAt, link: nowPagesPath, imgUrl: img }; this.init_wxsdk(shareParam); // 走默认分享内容 this.init_wxsdk(); } // 还需要在methods生命周期中写上 methods: { 
    ...mapActions(["init_wxsdk"]) } 

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/150086.html

(0)
上一篇 2025-03-20 19:10
下一篇 2025-03-20 19:20

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信