微信公众号开发weixin-js-sdk实现自定义分享

不管做什么都要坚持。

前言

前段时间开发的公众号，有一个自定义分享功能，今天分享一下代码和开发中遇到的问题，避免踩坑。

使用vue开发版本2.6.11
微信JS-SDK版本1.4.0
接口请求使用axios
此文章只是一个demo，可根据自己具体项目修改

安装 weixin-js-sdk

npm install weixin-js-sdk --save

封装分享js

微信公众号开发需登录才能获取appid，此文章只有分享部分代码，授权采用静默授权，后台提供的接口，我这里只负责调用。

import wxSdk from 'weixin-js-sdk'  //h5分享用到
import {getSignPackage} from './api' // 分享接口后台提供，用于获取appid，timestamp，nonceStr，signature
var Shares = {
  // h5分享功能
  shareCode: function (imgurl, title, desc, link, callback,) {
    var url = window.location.href
    let arr = {
      url: url
    }
    getSignPackage(arr).then((res) => {
      wxSdk.config({
        // debug: true, // 用来调试
        appId: res.data.appId, // 必填，公众号的唯一标识
        timestamp: res.data.timestamp, // 必填，生成签名的时间戳
        nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
        signature: res.data.signature, // 必填，签名
        jsApiList: ["updateAppMessageShareData", "updateTimelineShareData", "onMenuShareAppMessage", "onMenuShareTimeline"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
      });
      wxSdk.ready(function () {
        // 自定义“分享给朋友”及“分享到QQ”按钮的分享内容
        wxSdk.updateAppMessageShareData({
          title: title, // 分享标题
          desc: desc, // 分享描述
          link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: imgurl, // 分享图标
          success: function (res) {
            console.log(res, 'success')
            // 用户确认分享后执行的回调函数
            if (callback) {
              callback('success');
            }
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
            console.log('erroe')
            if (callback) {
              callback('cancel');
            }
          }
        });
        // 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容
        wxSdk.updateTimelineShareData({
          title: title, // 分享标题
          desc: desc, // 分享描述
          link: link, // 分享链接
          imgUrl: imgurl, // 分享图标
          success: function (res) {
            // 用户确认分享后执行的回调函数
            if (callback) {
              callback('success', res);
            }
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
            if (callback) {
              callback('cancel');
            }
          }
        });
      })
    })
  }
}
export {
  Shares
}

要分享的页面使用 http://XXXX

哪个页面需要分享就把这个代码放在哪个页面，由于我这个分享出去的页面不是当前页面，所以还需要写一个分享出去的页面 http://XXXX/share，部署到服务器上就可以了。
分享出去打开就是这个页面了 http://XXX/share
index.vue

//先导入上面封装的分享方法
import { Shares } from '@/utils/share'
mounted() {
    let imgurl = 'http://XXX/logo.png'
    let title = '自定义分享'
    let desc = '自定义分享demo'
    let link = 'http://XXX/share?&userid=' + 1 // 自定义分享链接 ios分享链接不能带端口号 否则分享失效，此链接应该为线上链接，此处只是一个demo,user_id是为了分享页面能够拿到数据所以我这传了个参数
    // console.log(imgurl, title, desc, link)
    Shares.shareCode(imgurl, title, desc, link, (status,data) => {
      if(status === 'success') {
        console.log('success')// 分享成功的操作
      } else if(status === 'cancel') {
        console.log('error'// 分享失败的操作
      }
    })
}

总结

1、遇到的问题需要在微信公众平台设置合法域名
2、vue路由记得设置为 mode: 'history' 模式，后台nigix设置

location / {
  try_files $uri $uri/ /index.html;
}

3、ios自定义分享失效，配置的域名一定不能带端口号，分享出去的页面也不能带端口，之前因为带端口号调试了很久才找到问题。

感谢您

如果觉得这篇文章对您有帮助的话，动一动小手点着赞吧
有问题可关注我的公众号 前端小喵，回复“加入”加我微信，我们一起交流学习，有问题欢迎指正