uni-app/vue 针对不同页面分享内容，封装可复用的微信公众号网页分享

写代码日子啊~~~~

在做电商项目的时候，要求，商品详情页面分享时与其他页面分享时的内容是不一样的，所以这个时候将分享封装成一个可复用的功能。
在开发时发现，首页的商品列表跳到详情页使用uni-app自带的跳转如：uni.navigateTo ~ 这样产生的二级页面地址，分享的内容就没有了。即改为 window.location.href = “www.www.ww” + 参数..... 这样详情页面就可以正常的分享了。
要好好看官方文档_多看几遍~
这边分享所有到的参数是后端提供的，js-sdk说明文档里面有demo~ 后端可参考demo，将前端需要的几个参数拿到~ 如：
timestamp: , // 必填，生成签名的时间戳
nonceStr: '', // 必填，生成签名的随机串
signature: '',// 必填，签名

要提前配置好
1）将js接口安全域名配置好~（登录公众号 ~> 设置（公众号设置）~> js接口安全域名）。下载的txt文件只有放到该项目的同级目录下之后，才能够设置成功。
2）设置IP白名单（通过开发者ID及密码调用获取access_token接口时，需要设置访问来源IP为白名单）~

封装好的分享功能：

//封装方法  .js  后端需要前端提供当前页面的url，拿到前端分享使用的参数

import {HttpUtil} from "@/util/http.js";   // HttpUtil公共请求方法
let wx = require('jweixin-module');        // 微信JS-SDK  安装方法 npm install jweixin-module --save

function onShareData(shareData){
    let _this = this;
    HttpUtil(reqUrl.getConfigInfo, { 
        data: {
            url :  encodeURIComponent(location.href.split("#")[0]), //当前页面的url
        },
        success: data => {
            wxShare(data,shareData);
        }
    });
}

function wxShare(data,shareData){
    //分享到微信朋友
    wx.config({
          debug: false,// 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId:  data.appId,         // 必填，公众号的唯一标识，填自己的！
          timestamp: data.timestamp, // 必填，生成签名的时间戳，刚才接口拿到的数据
          nonceStr: data.nonceStr,   // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名，见附录1
          jsApiList: [
            'updateAppMessageShareData'
          ]
    })

    wx.ready(function () {
        let sn = uni.getStorageSync('sn');
        let storeId = uni.getStorageSync('storeId');
        let normalConfig ={
            shareName: uni.getStorageSync('shopName'),// => 名称
            shareImg : uni.getStorageSync('logo'), // => logo
            shareMs: uni.getStorageSync('desc'),//描述
            linkNow: '/xxx/xxx/xxx?&sn=' + sn + '&Id=' + Id  //这个链接为，分享出去之后，用户访问的地址
        } 
        
        shareData = Object.assign(normalConfig,shareData)
         //分享给朋友
         wx.updateAppMessageShareData({ 
             title: shareData.shareName,
             desc: shareData.shareMs,
             link: api.goHom + shareData.linkNow,// 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
             imgUrl: shareData.shareImg,// 分享图标
             success: function () {
               // 设置成功
                   console.log("updateAppMessageShareData成功");
             },
             fail:function(res){
                 console.log(res);
             }
        })
        wx.error(function (res) {
                console.log("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
        })
    }
}
export default {
    onShareData
}


---------------------------------以上就是封装好的可复用的分享功能了 .js
使用：
如果所有页面分享的都是相同的页面
可以直接在App.vue页面使用
引入分享的js页面  import shareUtil from '@/util/shareUtil.js';
然后页面使用 shareUtil.onShareData() 这个方法就可以。

shareUtil.onShareData() 需要一进入页面就调用，微信分享只能使用微信自带的分享功能，前端所能做的就是修改分享出去的参数。

再点击微信页面中的右上角就可以直接分享内容了。
在分享参数的时候 我是直接取了缓存的 uni.getStorageSync

如果某一个页面需要分享出去不同的内容
//分享~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
//当前页面地址    urlHref
//跳转链接        linkNow
//title          shareName
//描述           shareMs
//分享图片地址    shareImg
let shareData = {
    linkNow : '/xxx/xxx?Id=' + _this.Id + '&sn=' + _this.sn,
    //详情页需要 修改的参数    不需要 则 不用添加
    shareName : _this.resData.name,
    shareImg : _this.Img[0],
    shareMs : _this.resData.msg,
}
shareUtil.onShareData(shareData);

以上就可以分享出不同的参数了。
=========================================end