H5微信分享,就是在微信浏览器页面,点击右上角的三个小点点,底部弹窗选择分享方式。
默认的分享 标题是当前页面的标题,图标是默认图标,描述信息是当前页的链接地址
功能立项
假期结束之后,把功能实现跟产品详细解释了一番..嗯,挺复杂,那就暂时搁置吧,等有时间再弄...
7月份,炎炎三伏天悄悄来临,大家手头上的工作,似乎都有了那么一些轻松,时间多了一丝空空,自定义分享,安排起来。
官方文档,瞄起来,头疼头疼疼
微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。
使用基本就是下面几个步骤
前期准备
运维操作公众号后台,绑定安全域名
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。
项目背景:创建两个项目,发布3个网站,
A是统一登录入口,单独的项目,单独的站点 xxx.aaa.com。
B和C是通用商城,共用同一个项目,根据不同的商城地址,动态配置商城的api请求地址等。
B是荣荣商城 ,发布单独站点 xxx.bbb.com,C是爱爱商城,发布单独站点 xxx.ccc.com。
A登录 通过后台对账号的匹配,返回相应的网站地址 xxx.bbb.com 或者 xxx.ccc.com,拼接登录返回的token,然后通过window.href链接到新网站地址,在通用商城项目中,区分商城,获取商城匹配,截取token拿到用户信息。
重点0:配置安全域名时 三个网站的域名都需要配置 : xxx.aaa.com,xxx.bbb.com,xxx.ccc.com
重点1:公众号后台大概需要有两个地方配置域名,运维自己看着办
vue项目编码接入js-sdk,接口联调
引入js-sdk,有三种方式
在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.6.0.js
如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。
备注:支持使用 AMD/CMD 标准模块加载方法加载
前两个方式引入 在index.html文件中通过script标签引入
方式1:直接通过script 引用官网提供的链接地址
<script
type="text/javascript"
src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"
></script>
方式2:把js-sdk下载,保存到本地 static目录中,然后引用本地js
保存js文件的步骤:打开js-sdk 提供的js链接地址,把内容copy到本地新建的js文件中,weixin-1.6.0.js
<script type="text/javascript" src="./static/js/weixin-1.6.0.js"></script>
方式3:通过npm 安装js-sdk
npm install weixin-js-sdk
在需要分享的页面中引入
import wx from 'weixin-js-sdk'
在每个需要使用JS-SDK的页面通过config注入权限验证配置
注意:是每个页面都要配置config。因为vue单页面SPA应用,当每次url变化的时候,也需要进行调用配置config
具体实现代码
后端定义接口,前端传递当前路径的URL地址,给后端进行加密,后端返回初始化配置需要的相关参数
tips:因为vue-router默认使用的hash模式,所以链接地址中包含#,在传递给后端进行加密的url路径地址,需要对# 进行截取
url: location.href.split('#')[0]
项目入口js文件中,导入WeiXinUtils,初始化微信js-sdk配置
const Vue = require('vue')
import App from './App'
import store from './store'
import router from './router'
const Vuex = require('vuex')
import VueLazyLoad from 'vue-lazyload'
import wxutil from './utils/WeiXinUtils'
//注册到vue原型上
Vue.use(VueLazyLoad)
// 微信分享配置初始化
wxutil.init();
Vue.use(Vuex)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
WeiXinUtils.js 封装微信分享,利用router全局后置钩子函数afterEach,保证每个URL切换时都能执行接口调用 ,配置config 注入配置,在回调函数wx.ready中 配置分享参数
import userApi from "../js/api/users"
import router from '../router'
//判断是否是 微信浏览器
function isWxBrowser() {
var ua = navigator.userAgent.toLowerCase();
let isWx = ua.match(/MicroMessenger/i) == "micromessenger";
if (!isWx) {
return false;
} else {
let isWxWork = ua.match(/WxWork/i) == "wxwork";
if (isWxWork) {
return false;
} else {
return true;
}
}
}
const wxutil = {
init(){
router.afterEach((to, from) => {//router全局后置钩子函数
if (isWxBrowser()) {//是微信浏览器
userApi.getWechatShare({ //调用后端接口
url: location.href.split('#')[0]
}).then(res => {
if (res.resCode == 0) {
let data = res.resData;
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature,// 必填,签名
jsApiList: ['checkJsApi','updateAppMessageShareData','updateTimelineShareData'] // 必填,需要使用的JS接口列表,目前只用到分享
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
wx.updateAppMessageShareData({
title: data.titile, // 分享标题
desc: data.description, // 分享描述
link: data.shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 http://test-logon.51czt.com
imgUrl: data.logoPath, // 分享图标
success: function () {
}
});
wx.updateTimelineShareData({
title: data.titile, // 分享标题
link: data.shareUrl, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: data.logoPath, // 分享图标
success: function () {
}
});
});
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
console.log("错误:" + res);
});
}
}).catch(e => {
});
}
})
},
};
export default wxutil;
最终实现效果
可以自定义分享标题,分享描述信息,分享图标。图标的大小有限制,似乎是最大32k
感悟
遇到问题不要怕,先保证安全域名配置正确,然后保证后台签名加密正确
前后端调不通,一般都是参数的问题,尽量从后台找问题,签名 加密等
签名的时效是有限制的,一段时间会过期