H5微信分享至好友

准备工作

1.绑定域名：
登录微信公众平台 --> 公众号设置 --> 功能设置 --> 填写“JS接口安全域名”

2.JS-SDK使用：
在页面引入JS文件 :https://res.wx.qq.com/open/js/jweixin-1.2.0.js

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

//或者使用npm
npm install weixin-js-sdk --save

在分享的页面引用

import wx from 'weixin-js-sdk'

3.配置config

//若是vue，在mounted中请求接口配置 wx.config
mounted() {
      this.weiconfig();
 },

weiconfig() {
        var ua = navigator.userAgent.toLowerCase();
        var isWeixin = ua.indexOf('micromessenger') != -1;   //判断是否在微信环境中
        if (isWeixin) {
          verifyConfigForShare({   //调取后端接口，当前页面地址为参数，获取配置所需要的参数：timestamp、noncestr和signature
            url: location.href.split('#')[0],
          }).then(res => {
            if (res.code == 0) {
              wx.config({
                debug: false,  // 是否开启调试模式
                appId: '*********',  // appid
                nonceStr: res.data.content.nonceStr,  // 随机字符串
                signature: res.data.content.signature,  // 签名
                timestamp: res.data.content.timestamp,  // 时间戳
                jsApiList: [  // 需要使用的JS接口列表
                  'onMenuShareTimeline', // 分享到朋友圈接口
                  'onMenuShareAppMessage', //  分享到朋友接口
                  'onMenuShareQQ', // 分享到QQ接口
                  'onMenuShareWeibo', // 分享到微博接口
                  'onMenuShareQZone'
                ]  
              });
              // 分享的参数:标题、图片地址、描述等
              var shareData = {
                imgUrl: 'http://*********.png', // 分享显示的缩略图地址
                link: 'http://*************', // 分享地址
                desc: '分享描述', // 分享描述
                title: '分享标题', // 分享标题
                success: function () {},  // 用户确认分享后执行的回调函数
                cancel:function(){}  // 用户取消分享后执行的回调函数
              }
              //正式使用
              wx.ready(res => {
                wx.onMenuShareTimeline(shareData);   // 分享到朋友圈
                wx.onMenuShareAppMessage(shareData);   // 分享给好友
                wx.onMenuShareQQ({});
                wx.onMenuShareWeibo({});
                wx.onMenuShareQZone({})
              })
            }
          })
        } else {
          this.$message.warning("请在微信中打开该网站，否则无法正常使用")
        }
      }

注意：
1.所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用
2.分享出去的外链的域名必须和公众号后台配置的JS安全域名一致，否则会导致分享的失败
3.wx.config里的debug字段设置为true时，就可以进行调试。
调试要用到微信开发者工具，选择公众号网页项目，输入页面地址就可以了。

image.png

链接：H5微信支付、支付宝支付可以参考H5微信支付、支付宝支付