Vue项目引入js-sdk,实现微信自定义分享

H5微信分享,就是在微信浏览器页面,点击右上角的三个小点点,底部弹窗选择分享方式。
默认的分享 标题是当前页面的标题,图标是默认图标,描述信息是当前页的链接地址

10101.png

0101.png

功能立项

假期结束之后,把功能实现跟产品详细解释了一番..嗯,挺复杂,那就暂时搁置吧,等有时间再弄...
7月份,炎炎三伏天悄悄来临,大家手头上的工作,似乎都有了那么一些轻松,时间多了一丝空空,自定义分享,安排起来。
官方文档,瞄起来,头疼头疼疼
微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。

通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力,为微信用户提供更优质的网页体验。

使用基本就是下面几个步骤


1111.png

前期准备

运维操作公众号后台,绑定安全域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“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

2222.png

感悟

遇到问题不要怕,先保证安全域名配置正确,然后保证后台签名加密正确
前后端调不通,一般都是参数的问题,尽量从后台找问题,签名 加密等
签名的时效是有限制的,一段时间会过期

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容