uniapp implements H5 sharing and increases points

1. Download WeChat js-sdk to the project

npm instaill jweixin-module --save

WeChat JS-SDK documentation: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

2. Create a wechat.js file

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);
    }
}

There are a few pitfalls to note here:

1. The sharing of the official account can only be triggered by the sharing of h5 in the upper right corner. The current page is shared by default. Here we only configure the sharing content.
2. The link to the current shared page must be consistent with the JS interface security domain name and web page authorized domain name configured in the background.
3. The sharing interface is successful: the mobile phone returns sendAppMessage:ok, and the WeChat developer tool returns onMenuShareAppMessage:ok
4. Regardless of whether the sharing is successful or canceled, the success event will occur. Click to view the official explanation.

3. Import it globally in main.js

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

4. Use in pages

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