uniapp实现H5分享并增加积分

一、下载微信 js-sdk 到项目

npm instaill jweixin-module --save

微信 JS-SDK 说明文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

二、创建一个 wechat.js 文件

import store from "@/store/index.js";
import reply from "@/utils/reply.js";
import {
    
     addIntegral } from '@/api/all.js' // 增加积分接口

let jweixin = require('jweixin-module')

export default {
    
    
    // 判断是否在微信中  
    isWechat () {
    
    
        let ua = window.navigator.userAgent.toLowerCase();
        if (ua.match(/micromessenger/i) == 'micromessenger') {
    
    
            // console.log(‘是微信客户端‘)
            return true;
        } else {
    
    
            // console.log(‘不是微信客户端‘)
            return false;
        }
    },
    // 初始化sdk配置  
    initJssdkShare(info,link) {
    
    
        uni.request({
    
    
            url: store.getters.requestUrl + '/api.wechat/jssdk', // 需要向后端拿签名
            method: 'post',
            data: {
    
    
                url: window.location.href // 根据后端需要的地址
            },
            success: res => {
    
    
                if (res.data.code == 1) {
    
    
                    const newData = res.data.data;
                    jweixin.config({
    
    
                        /* debug 开启调试模式,调用的所有api的返回值会在客户端alert出来，
                           若要查看传入的参数信息可在pc端通过log打出。*/
						debug: true, 
						appId: newData.appId, // 公众号的唯一标识
						timestamp: newData.timestamp, // 生成签名的时间戳
						nonceStr: newData.nonceStr, // 生成签名的随机串
						signature: newData.signature, // 签名
						jsApiList: [
							'checkJsApi',
							'updateAppMessageShareData',
							'updateTimelineShareData',
							'onMenuShareWeibo'
						], // 需要使用的JS分享接口列表
					});
					jweixin.ready(function () {
    
    
					    let shareData = {
    
    
					        title: info.title,
					        desc: info.desc,
					        link: link,
					        imgUrl: info.img,
					        success: async res => {
    
    
								/* 手机上返回的是sendAppMessage:ok，
                                   微信开发者工具上返回的是onMenuShareAppMessage:ok */
								if(res.errMsg == "onMenuShareAppMessage:ok" || 										res.errMsg == 'sendAppMessage:ok') {
    
    
									const result = await addIntegral();
									if(result.code == 1) {
    
    
										reply.tips({
    
    title: '分享积分获取成功'});
									} else {
    
    
										reply.tips({
    
    title: result.info});
									}
								}
							},
							fail: err => {
    
    }
					    };
					     // 分享给朋友/分享到QQ接口  
						jweixin.updateAppMessageShareData(shareData);
					    // 分享到朋友圈/分享到QQ空间接口
						jweixin.updateTimelineShareData(shareData);
						// 分享到腾讯微博接口
						jweixin.onMenuShareWeibo(shareData);
					});
					jweixin.error(function (err) {
    
    });
                }
            }
        });
    },
    // 在需要分享的页面中调用  
    share(info,link) {
    
    
        if (!this.isWechat()) return false;
        link = link || window.location.href;
        this.initJssdkShare(info,link);
    }
}

这里有几个坑需要注意：

1. 公众号的分享只能通过右上角 … h5的分享触发，默认分享当前页面，这里只是配置分享内容
2. 当前分享页面的链接必须与后台配置JS接口安全域名和网页授权域名一致
3. 分享接口成功：手机返回 sendAppMessage:ok，微信开发者工具返回 onMenuShareAppMessage:ok
4. 无论分享成功还是取消都会走success事件，点击查看官方解释

三、在 main.js 中全局引入

import wechat from './utils/wechat.js'
if (wechat.isWechat()) Vue.prototype.$wechat = wechat;

四、在页面中使用

// 在 onLoad 中调用
share() {
    
    
    if (this.$wechat && this.$wechat.isWechat()) {
    
    
        this.$wechat.share({
    
    
            title: "分享标题",
            desc: "描述",
            img: "http://xxx.jpg",
        });
    }
},