羊仔
羊仔
  • 发布:2019-08-12 11:37
  • 更新:2022-08-24 15:58
  • 阅读:12215

nui-app h5微信分享的jweixin demo

分类:uni-app

第一步:npm install jweixin-module --save
第二步:在main.js里或者具体的页面这样写

import jswx from 'jweixin-module/out/index.js'  
 let wx_config = “后台返回的config”  

                     jswx.config(  
                     {  
                         debug:false,  
                         appId:wx_config.appId, // 必填,公众号的唯一标识  
                         timestamp:wx_config.timestamp , // 必填,生成签名的时间戳  
                         nonceStr: wx_config.nonceStr, // 必填,生成签名的随机串  
                         signature: wx_config.signature,// 必填,签名  
                         jsApiList:wx_config.jsApiList // 必填,需要使用的JS接口列表          
                     }                                 
                     );  
            jswx.ready(()=>{  
                                          //分享给朋友  
                    jswx.onMenuShareTimeline({  
                        title: 'xxxx', // 分享标题  
                        link: 'https://www.xxx.com', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致  
                        imgUrl: 'https:///www.xxx.com/icon.png', // 分享图标  
                        success: function () {  
                        // 用户点击了分享后执行的回调函数  
                    },  
                     });      
                                         //分享朋友圈  
                     jswx.onMenuShareAppMessage({  
                            title: 'xxxx', // 分享标题  
                            desc: 'xxxx', // 分享描述  
                            link: 'https://www.xxx.com', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致  
                        imgUrl: 'https:///www.xxx.com/icon.png', // 分享图标  
                            success: function () {  
                             uni.showToast({  
                                    title: '分享成功',  
                                    duration: 2000  
                                });  
                            }  
                            });  
                })  

//以上

亲测可用,再有问题就是后台的锅了,怼他们。。。。。还有一个,如果一切正常报:invalid Signature ,那有可能是后台需要获取你前端当前页面的href,否则一直会报这个错,你获取window.location.href给它,如果是tp5的话,应该是

$url = ‘当前链接(前端获取分享那页的链接:window.location.href,传过来这里)’//这步非常重要,官方文档都没有的  
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";  

    $signature = sha1($string);

生成签名的这个位置

最终效果

4 关注 分享
1***@163.com 5***@qq.com damdmen qq1563204347

要回复文章请先登录注册

quanpeifeng

quanpeifeng

回复 贝贝g :
老大 报这个问题最后是怎么解决的?
2019-12-12 13:36
羊仔

羊仔 (作者)

回复 1***@qq.com :
单独install 一下不存在的文件
2019-12-11 09:09
1***@qq.com

1***@qq.com

你好 npm install 之后 提示文件不存在
2019-12-10 16:32
羊仔

羊仔 (作者)

回复 Sun7 :
好的
2019-11-15 15:51
Sun7

Sun7

感谢楼主!!终于解决了!! 但是我看了一下微信JS SDK官网: onMenuShareAppMessage ,onMenuShareTimeline 这两个分享准备要废了,换新的了。所以提醒一下楼主:)
2019-11-15 15:07
羊仔

羊仔 (作者)

回复 3***@qq.com :
https://blog.csdn.net/qq_38350907/article/details/84921813
2019-11-11 09:41
祥祥0808

祥祥0808

按你的方法在本地微信开发者工具中已经成功了,但传到服务器上,手机分享的报errMsg config:invalid signature。有谁也遇到这个问题?怎么解决
2019-10-01 09:17
羊仔

羊仔 (作者)

回复 3***@qq.com :
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 按微信官方文档写就行
2019-08-30 14:20
贝贝g

贝贝g

按照这样操作之后,小程序的会报错显示 thirdScriptError sdk uncaught third Error Cannot read property 'jWeixin' of undefined
TypeError: Cannot read property 'jWeixin' of undefined
这是怎么回事
2019-08-28 10:12
羊仔

羊仔 (作者)

回复 1***@qq.com :
history有可能会识别成后端的模块
2019-08-15 16:26