479686314@qq.com
479686314@qq.com
  • 发布:2019-06-12 20:03
  • 更新:2019-09-04 11:42
  • 阅读:4204

微信内H5使用JSSDK分享

分类:uni-app

最近一直有人问jssdk的问题,官方贴也太简单,没有说明。所以这里再写一篇简单教程,附有代码。其实这个sdk还是比较简单的,只是因为uni-app的h5端是SPA单页应用,所以容易出现签名错误,或者配置没有正确初始化的问题。

服务端计算签名

文档地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

引入JSSDK

推荐使用npm安装,参考 http://ask.dcloud.net.cn/article/35380

创建一个js文件,封装微信相关功能

笔者是放在common目录,文件名称是wechat.js
代码如下:

import request from './request'; //笔者自己封装的网络请求类,也可以直接使用uni.request  
var jweixin = require('jweixin-module');  

export default {  
        //判断是否在微信中  
    isWechat:function(){  
        var ua = window.navigator.userAgent.toLowerCase();  
        if(ua.match(/micromessenger/i) == 'micromessenger'){  
            return true;  
        }else{  
            return false;  
        }  
    },  
        //初始化sdk配置  
    initJssdk:function(callback ,url){  
                //服务端进行签名 ,可使用uni.request替换。 签名算法请看文档  
        request.post('/api/oauth/wechat/sign',{url:url},function(res){  
            if(res.data){  
                jweixin.config({  
                     debug: false,  
                     appId: res.data.appId,  
                     timestamp:res.data.timestamp,  
                     nonceStr: res.data.nonceStr,  
                     signature:res.data.signature,  
                     jsApiList: [  
                         'checkJsApi',  
                         'onMenuShareTimeline',  
                         'onMenuShareAppMessage'  
                     ]  
                });  
                //配置完成后,再执行分享等功能  
                if(callback){  
                    callback(res.data);  
                }  
            }  

        });  
    },  
        //在需要自定义分享的页面中调用  
    share:function(data ,url){  
        url =url ? url :window.location.href;  
        if(!this.isWechat()){  
            return ;  
        }  
                //每次都需要重新初始化配置,才可以进行分享  
        this.initJssdk(function(signData){  
            jweixin.ready(function(){    
                var shareData = {  
                     title: data&&data.title ? data.title: signData.site_name,  
                     desc: data&&data.desc ? data.desc: signData.site_description,  
                     link: url,  
                     imgUrl: data&&data.img ?data.img :signData.site_logo,  
                     success: function (res) {  
                                                 //用户点击分享后的回调,这里可以进行统计,例如分享送金币之类的  
                        request.post('/api/member/share');  
                     },  
                     cancel: function (res) {  
                     }  
                 };  
                 //分享给朋友接口  
                 jweixin.onMenuShareAppMessage(shareData);  
                 //分享到朋友圈接口  
                 jweixin.onMenuShareTimeline(shareData);  
            });  
        } ,url);  
    }  
}

全局引用

在main.js中引入

// #ifdef H5  
import wechat from './common/wechat'  
if(wechat.isWechat()){  
    Vue.prototype.$wechat =wechat;  
}  
// #endif

在页面中调用

例如,在文章详情页面自定义分享内容。

// #ifdef H5  
if (this.$wechat && this.$wechat.isWechat()) {  
     this.$wechat.share({  
          desc: article.title,  
          img: article.image  
    });  
}  
// #endif

注意事项

1 测试时,可以将debug设置为true,可以看到日志信息
2 签名建议在服务端,签名的url必须和当前页面的url一致,否则自定义分享无效
3 每个页面都需要单独初始化配置,即jweixin.config()
4 在公众号后台设置安全域名
5 笔者的例子是在history模式下,Android、IOS手机均已正常上线使用。若您使用的是hash模式,请自行测试,理论上应该也可以,如果有问题,请检查上述几点。如果还不行,请尝试在签名的事哈去掉url上的 '#'以后部分(含'#')
6 如有遗漏或建议,欢迎下面留言

13 关注 分享
DCloud_UNI_GSQ yorick 479686314@qq.com onfireme@163.com 1769794040@qq.com jiangdateng@126.com 263436934@qq.com 158462532@qq.com ybs5431@163.com he.xu@isotool.cn 达达x 星剑如雨 503753577@qq.com

要回复文章请先登录注册

945618130@qq.com

945618130@qq.com

最近好像报错了jweixin的 Cannot read property 'config' of undefined
2019-09-04 11:42
风中旋转

风中旋转

为什么微信分享没有选择联系人直接返回了怎么提示分享成功了
2019-09-02 20:09
小嘚瑟

小嘚瑟

回复 he.xu@isotool.cn:
您好,用了您的demo,点击分享按钮后显示config:ok,证明签名是成功的,可是之后就没有反应了
2019-08-30 15:16
he.xu@isotool.cn

he.xu@isotool.cn

不好意思,昨天太冲动了,经过我重新开一个项目,严格按照代码来执行,分享成功了。
附上demo
https://share.weiyun.com/57g71Zl
2019-08-28 12:35
he.xu@isotool.cn

he.xu@isotool.cn

希望官方可以给个 稳定的jssdk解决方案
2019-08-27 18:10
he.xu@isotool.cn

he.xu@isotool.cn

哎,最近发现这个代码有问题了,同样的代码,就HBuilderX升级后,就怎么都分享不了了。之前都可以用。
2019-08-27 18:10
Kadima1

Kadima1

回复 1196307337@qq.com:
你这解决了吗?
2019-08-20 09:31
1196307337@qq.com

1196307337@qq.com

回复 he.xu@isotool.cn:
可以贴下完整代码嘛,坑了好几天了
2019-08-15 15:14
342500019@qq.com

342500019@qq.com

大侠们 有没有成功的PHP版本的签名代码哈~
2019-08-15 00:30
1979563468@qq.com

1979563468@qq.com

回复 he.xu@isotool.cn:
可以请教下为什么我的onMenuShareAppMessage没有回调
2019-08-02 15:12
he.xu@isotool.cn

he.xu@isotool.cn

建议使用history模式,因为在h5授权登录的时候 跳转url加入code的时候,不容易出问题
2019-08-02 12:43
he.xu@isotool.cn

he.xu@isotool.cn

再补充一下,history模式 如果出现找不到页面的问题,这是spa单页面应用的后端路由处理问题,可以查看
Vue Router官方文档:
https://router.vuejs.org/zh/guide/essentials/history-mode.html
2019-08-02 12:43
he.xu@isotool.cn

he.xu@isotool.cn

谢谢,我测试了一下,虽然中间出现了一些问题,但是最终Ok了,分享功能的新接口updateAppMessageShareData也可以用。(测试时间:2019年8月1日,jweixin-module版本^1.4.1)。
我补充几点我在测试过程中遇到的问题
1、外部页面调用作者案例中的 share 方法时,一定要将代码卸载onShow中,因为onShow代表的是url变化时候一定会调用到,这点应该是 单页面应用(SPA) 的问题吧。
2、将manifest.json文件 -> h5配置 -> 路由模式换成hash。

最后祝大家早日脱坑,我叫许鹤,不知道有人认识我么。哈哈
2019-08-01 15:10
1979563468@qq.com

1979563468@qq.com

unirequst如何请求呢,我请求回来 config报错is not function
2019-08-01 14:40
cl9000@126.com

cl9000@126.com

我的H5是嵌套在别人小程序中的,而且内网开发,怎们引入路径(只直接下载源文件,引入吗?)
2019-07-19 15:53
poul_xtf0923@163.com

poul_xtf0923@163.com

回复 479686314@qq.com:
不对的
2019-07-16 19:35
479686314@qq.com

479686314@qq.com (作者)

回复 poul_xtf0923@163.com:
history 签名url使用location.href
2019-07-16 18:50
poul_xtf0923@163.com

poul_xtf0923@163.com

ios history模式 一直报invalid signature,签名的url用的是入口url,作者知道啥原因不
2019-07-16 17:23
479686314@qq.com

479686314@qq.com (作者)

回复 312191136@qq.com:
登录是网页oauth授权,直接网页跳转的,不需要jssk
2019-07-16 11:47
312191136@qq.com

312191136@qq.com

那调起微信公众号授权登陆怎么实现呢!
2019-07-16 11:10
onfireme@163.com

onfireme@163.com

请问一下 onMenuShareAppMessage onMenuShareTimeline 有的用户分享有回调有的没有怎么回事呀
2019-07-11 09:59
WildKuang

WildKuang

请问下,微信小程序内嵌的h5要使用JSSDK还必须要申请个微信公众号才行么?
2019-06-27 16:29
479686314@qq.com

479686314@qq.com (作者)

回复 JUNHUAing:
首先服务端签名代码不要有问题。history 使用location.href签名, hash模式去掉#以后(含#)的部分签名。
2019-06-26 12:06
JUNHUAing

JUNHUAing

我的老是报invalid signature,百度的方法都试过了,还是不行啊,求救!
2019-06-26 11:51
479686314@qq.com

479686314@qq.com (作者)

回复 1324198599@qq.com:
这个提示的意思是你域名不在安全域啊,你微信后台设置安全域名了吗?
2019-06-26 10:36
1324198599@qq.com

1324198599@qq.com

回复 onfireme@163.com:
找到原因了,我的分享地址里边自定义参数有中文,所以不行,我把自定义参数encodeURIComponent的了一下,就行了
2019-06-26 10:35
1324198599@qq.com

1324198599@qq.com

回复 onfireme@163.com:
我也不知道我的哪里不对,按照正常流程执行没有问题,单独对分享页面进行刷新,config是OK的,掉分享方法的时候,就出现updateAppMessageShareData:fail link must be in js secure domain list
2019-06-26 09:31
onfireme@163.com

onfireme@163.com

回复 1324198599@qq.com:
我目前采用的时 location.href ,没有问题
2019-06-25 21:23
1324198599@qq.com

1324198599@qq.com

回复 onfireme@163.com:
我现在遇到在ios端,详情页刷新之后,我重新config了,config成功了,但是分享报fail link must be in js secure domain list,在安卓上没有问题,遇到过这种问题吗
2019-06-25 20:02
onfireme@163.com

onfireme@163.com

回复 479686314@qq.com:
例如我要所有页面关闭微信转发分享功能键,不可能每个页面跳转都使用location.href
2019-06-24 14:35
479686314@qq.com

479686314@qq.com (作者)

回复 onfireme@163.com:
history模式,分享参数自定义没有问题的, 但是签名的时候必需用当前浏览器中的地址,location.href就行了。
2019-06-22 15:44
onfireme@163.com

onfireme@163.com

请问一下作者,项目是在history模式下,并配置了服务器,不报404错误,然而详情页面微信签名会出问题,问题和vue一样,(对于Android,用每个页面的URL做签名参数,对于IOS,使用入口URL进行签名(切记),我是使用VUEX进行url的更新)或者需要再次刷新当前页面,自定义分享才有效果,请问在uniapp中如何解决这个问题呢。谢谢!
2019-06-22 14:37
945618130@qq.com

945618130@qq.com

回复 RandyGump:
你是说template.html吗?
2019-06-18 16:39
479686314@qq.com

479686314@qq.com (作者)

回复 739361287@qq.com:
签名是服务端计算的。使用本机电脑也可以。但是微信内分享是要验证安全域名的,你的域名要和微信公众号后台设置的一致才行。
2019-06-17 15:47
739361287@qq.com

739361287@qq.com

微信的签名需要有服务器及域名吗?本机电脑可以弄嘛?
2019-06-17 14:43
RandyGump

RandyGump

回复 479686314@qq.com:
找到原因了,因为之前尝试用HTML来引入JS,忘记把那个配置删掉,估计先加载那个配置了
2019-06-17 00:46
RandyGump

RandyGump

回复 479686314@qq.com:
各种加载方式都试过,js路径也试过,就是不行,奇怪了
2019-06-16 19:35
479686314@qq.com

479686314@qq.com (作者)

回复 RandyGump:
检查下引入方式是否正确。var jweixin = require('jweixin-module'); 这句,只有npm安装时才可以,否则要指定js路径。
2019-06-16 10:44
RandyGump

RandyGump

我按步骤来的,为什么jweixin最后加载出来是undefined?
2019-06-16 02:33