h5页面内嵌js SDK实现微信分享

安装 jweixin 模块

npm install  jweixin-module --save

引入到页面

import jweixin from 'jweixin-module'

 

weiXinShareFn() {
                // 获取url
                const linkUrl = window.location.href
                    // 这里需要请求后端配置的接口
                    // 通过接口获取 appid、数字签名等
                    uni.request({
                        url: 'http://xxx/api/user/getWxConfig',
                        method: 'POST',
                        data: {
                            url: this.Url
                            // url:window.location.href
                        },
                        success: res => {
                            jweixin.config({
                                debug: false, // 调试模式 本地调试的时候可以改为true，可以在微信开发者工具中调试
                                appId: res.data.data.appId, // 公众平台申请的id
                                timestamp: res.data.data.timestamp, // 时间戳
                                nonceStr: res.data.data.nonceStr, // 随机字符串
                                signature: res.data.data.signature, // 签名
                                jsApiList: [ // 申请需要使用的api
                                    'checkJsApi',
                                    'updateAppMessageShareData',
                                    'updateTimelineShareData'
                                ]
                            })

                            jweixin.ready(() => {
                                jweixin.checkJsApi({
                                    jsApiList: [
                                        'updateAppMessageShareData',
                                        'updateTimelineShareData'
                                    ],
                                    success: function(res) {
                                        // alert("fontok")
                                    }
                                })
                                const shareData = {
                                    title: title, // 分享出去显示标题（可自定义）
                                    desc: descc, //分享详情描述（可自定义）
                                    link:linkUrl  //分享出去的链接 （可携带参数）
                                    imgUrl: img // 卡片分享 图片链接
                                }
                                //分享给朋友
                                jweixin.updateAppMessageShareData(shareData)
                                //分享到朋友圈
                                jweixin.updateTimelineShareData(shareData)
                            })
                        }
                    })
            },

最后在页面中调用该分享方法就可以了。

遇到的问题：

ios机型分享出去的链接不显示参数，andriod的可以正常显示。原因好像是苹果手机使用window.localtion.href获取的不是当前页面的路径，而是入口页面的链接，首页路径。具体说明可以百度看看。 

解决办法：

1.可以在调用了分享接口的页面组件中，判断是否是ios系统，如果是的话强制刷新一下当前页面。 

2.写一个函数处理ios的url 

getConfigUrl() {
                let u = window.navigator.userAgent;
                let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                //安卓需要使用当前URL进行微信API注册（即当场调用location.href.split('#')[0]）
                //iOS需要使用进入页面的初始URL进行注册，（即在任何pushstate发生前，调用location.href.split('#')[0]）
                // let url = '';
                if (isiOS) {
                    this.Url = (`${window.localStorage.getItem('_iosWXConfig_') || window.location.href.split('#')[0]}`);//获取初始化的url相关参数
                } else {
                    this.Url = (window.location.href.split('#')[0]);
                }
            },