微信公众号h5写一个全局调用微信分享功能

1. 首先先安装依赖

npm install weixin-js-sdk --save

 2. app.vue文件

<script>
    export default {
        onLaunch: function(e) {},
        onShow: function(e) {
            console.log('App Show页面初始');
            // 路由参数存缓存的  这是为了防止他点击其他页面 这两个id没有了
            var querys = this.$route.query; // 路由参数

            if (querys) {
                if (querys.friendId) {
                    uni.setStorageSync("friendId", querys.friendId)
                }
                if (querys.partnerId) {
                    uni.setStorageSync("partnerId", querys.partnerId)
                }
            }
        },
        onHide: function() {
            console.log('App Hide')
        },
        mounted() {
            // let pages = []
            // pages = getCurrentPages();
            // console.log(pages, 'pages');
            // var redirect_link = pages[pages.length - 1].route;
            // this.setWxShare() // 分享传入参数
        },
        globalData: {
            // #ifdef H5
            setWxShare: function(redirect_link, id, imgurl) {

                var merge = require('webpack-merge'); //调用微信集成的方法

                let wzhi = window.location.href //获取当前页面路由
                this.hi = wzhi.split("#")[0];
                // console.log(this.hi, 'this.hi');
                var userInfo = uni.getStorageSync("userInfo");

                let url = "";
                var routes1 = ""

========这些是因为我们的需求是要带账号的id参数=========
                if (userInfo) {
                    // 有自己的用户信息就说明是老用户  老用户的话就用自己的friendId  删掉带过来的friendId
                    if (this.hi.indexOf("friendId") != -1) {
                        // 路由传过来的friendId 截取掉  分享只需要自己的friendId
                        var routes1 = this.hi.split("friendId")[0];
                        url = routes1 + "friendId=" + userInfo.userId;

                    } else if (this.hi.indexOf("partnerId") != -1) {
                        // 路由传过来的partnerId 截取掉  分享只需要friendId
                        var routes1 = this.hi.split("partnerId")[0];
                        url = routes1 + "friendId=" + userInfo.userId
                    } else if (this.hi.indexOf("?") != -1) {
                        url = this.hi + "&friendId=" + userInfo.userId
                    } else {
                        url = this.hi + "?friendId=" + userInfo.userId
                    }
                } else {
                    // 未登录状态  或者新用户
                    if (this.hi.indexOf("friendId") != -1) {
                        routes1 = this.hi.split("&friendId")[0];
                        url = routes1
                    } else if (this.hi.indexOf("partnerId") != -1) {
                        routes1 = this.hi.split("&partnerId")[0];
                        url = routes1
                    } else {
                        url = this.hi
                    }
                }

                
                // 改变路由参数 但是不刷新页面
                window.history.replaceState(null, null, url);

================不需要的话就删掉=======
                url = window.location.href.split("#")[0];

                //请求接口返回签名
                var params = {
                    url: url
                }
                this.common.getConfig(params).then(res => {

                    if (res.code == 200) {

                        var result = res.data;
                        // console.log(result, "result------------------")
                        var wxshare = require('jweixin-module'); //调用微信集成的方法
                        wxshare.config({
                            debug: false, //是否打开调试
                            appId: result.appId, // 公众号的唯一标识  
                            timestamp: result.timestamp, // 生成签名的时间戳  
                            nonceStr: result.nonceStr, // ，生成签名的随机串  
                            signature: result.signature, // 签名  
                            jsApiList: [
                                "updateAppMessageShareData",
                                "updateTimelineShareData",
                            ]
                        });
                        wxshare.ready(function() {
                            //分享给朋友
                            wxshare.updateAppMessageShareData({
                                title: "房东直租", // 分享标题  
                                desc: "易租房，好生活，从这里开始", // 分享描述  
                                link: url, // 当前页面链接  
                                imgUrl: "https://home.link-bl.com/static/images/loginLogo.png", //分享图标                                
                                success: function() { //分享成功回调
                                    // console.log("分享成功");
                                },
                                cancel: function() { //取消分享回调
                                    // console.log("取消分享");
                                }
                            });
                            //分享到朋友圈
                            wxshare.updateTimelineShareData({
                                title: "房东直租", // 分享标题
                                desc: "易租房，好生活，从这里开始", // 分享描述  
                                link: url, // 当前页面链接  
                                imgUrl: "https://home.link-bl.com/static/images/loginLogo.png", // 分享图标                     
                                success: function() {
                                    // console.log("分享成功");
                                },
                                cancel: function() {
                                    // console.log("取消分享");
                                }
                            });
                        })
                    }

                });
            }
            // #endif
        },
        methods: {

        }
    }
</script>

<style>
    /*每个页面公共css */
</style>

3. 写一个混入方法   全局混入  穿件一个文件夹mixins 和pages平级 ，再创建一个share.js文件

 

// share.js
export const share = {
    onShow() {
        // console.log("全局混入");
        // #ifdef H5
        let pages = []
        pages = getCurrentPages();
        if (pages.length > 0) {
            // console.log(pages[pages.length - 1].route, 'pages全局混入');
            if (pages[pages.length - 1].route != 'pages/houseDetail/houseDetail') {
                var redirect_link = pages[pages.length - 1].route;
                this.setWxShare(redirect_link) // 分享传入参数
            }
        }

        // #endif
    },
    created() {

    },
}

 4. 在main.js文件中引入

// 引入全局分享
import {
    share
} from './mixins/share/share.js'
Vue.mixin(share)

最后大功告成！