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

第三方配置就不说了，按着官方文档来就可以了

第一个坑

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

IOS端
微信IOS版，每次切换路由，SPA的url是不会变的，发起签名请求的url参数必须是最初进入页面时的url
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上会出现报错，导致你分享标题、描述、图片等都失效了：

只要把分享链接先 encodeURIComponent转码就可以了。
例如：

// 分享的链接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描述文字过长时，会自动显示’…’

实现思路

先创建一个公共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.hospitalIdvar 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.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.htmlif (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);}})
}

在store仓库中initsdk.js文件中写初始化sdk方法：

import getters from '../getters.js';
import wxopt from '@/util/plugins/wxsdk.js'
const payment = {state: {// 微信sdk 页面中通过Getter获取wxsdk: null,},actions: {// 初始化微信SDKinit_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

在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"])
}

在需要实现定制分享的页面中：

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"])
}

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

微信公众号H5开发，在微信浏览器打开H5，无法一键下载图片
微信公众号H5开发,在微信浏览器打开H5,无法一键下载图片背景解决方案文章参考背景微信公众号H5开发,在普通浏览器,可以直接通过以下代码下载图片: let a = document.crea ...
微信公众号h5界面获取展示微信内置地图与地图坐标间的转换 — 微信地图（gcj02）转为百度地图
此文章中实例用测试号进行演示 .getLocation openLocation 主要运用微信JS-SDK,微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信 ...
微信公众号(移动端网页)必备的调试神器
1.移动端调试神器vConsole 由于在移动端无法打开控制台,所以想办法打印调试console的数据一直苦恼.之前用的是chrome的inspect调试,但是只能使用移动版的chrome查看数据,兼 ...
php h5微信公众号支付接口,微信公众号H5支付接口调用方法
本文实例为大家分享了微信内h5调用支付接口的具体代码,供大家参考,具体内容如下官方文档微信公众号h5接口调用 // 判断微信版本是否在5.0以上 // window.navigator.user ...
微信公众号h5的分享功能
微信公众号h5的分享功能配置如下: 微信配置 wx.config({debug,appId,timestamp,nonceStr,signature,jsApiList: ['onMenuShareA ...
Java开源项目—通用CRM管理系统（微信小程序+微信公众号+H5网页+PC管理后台）
前言 CRM(客户关系管理)管理系统是一种用于管理客户关系的软件系统,通过收集.组织和分析客户关系数据,帮助企业更好地了解客户,提高客户满意度,提升客户服务水平,建立长期客户关系,提升企业的销售和服务 ...
微信html5开发常见bug,微信公众号H5之微信分享常见错误和问题
url转码确认 url是页面完整的 url(请在当前页面 alert(location.href.split('#')[0])确认),包括 'http(s)/'部分,以及'?'后面的 GET参数部分 ...
微信小程序webview清除缓存、微信公众号h5清除缓存、页面白屏、空白、不刷新问题
一.缓存带来的问题和原因我们在发布新版本的时候,在打开微信小程序webview嵌套的h5页面或微信公众号h5页面时,常常会发现页面还是上个版本的旧页面或者打开直接空白白屏了,那么为什么会存在这个问 ...
微信公众号H5页面开发--微信JS-SDK引用
微信公众号H5页面开发–微信JS-SDK引用微信提供了微信公众号开发者手册,官方地址:https://mp.weixin.qq.com/ 公众号内许多复杂的业务场景,都是通过网页形式来提供服务,这时 ...

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

第一个坑

第二个坑

小技巧

实现思路

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

最新文章

热门文章