uni-app 开发微信公众号（H5）JSSDK 的使用方式

╰+哭是因爲堅強的太久メ 2022-04-25 02:20 222阅读 0赞

因为这个jssdk被uni-app坑了好多天，作者说支持1.4版本，但是我用1.4的两个分享的新方法一直不支持。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MzQ3NTQx_size_16_color_FFFFFF_t_70]  
最后只能放弃了，期待什么时候能更新上。

基本的使用方法：  
第一步 - 下载使用方式  
下载地址：https://unpkg.com/jweixin-module@1.4.1/out/index.js

项目引用：  
![在这里插入图片描述][20190430152800417.png]  
项目下新建模块，放在该模块下。  
main.js引用：

var jweixin = require('jweixin-module')
    
    		//获取微信公众号的配置
    		uni.request({
    		
    			url: 'xxxxxxxxxxx',
    			dataType: 'text',
    			data: {
    				url: window.location.href.split('#')[0]
    			},
    			success: res => {
    				var s = JSON.parse(res.data);
    				console.log(s.data);
    				
    				 jweixin.config({
    					 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    					 appId: s.data.appId, // 必填，公众号的唯一标识
    					 timestamp: s.data.timestamp, // 必填，生成签名的时间戳
    					 nonceStr: s.data.nonceStr, // 必填，生成签名的随机串
    					 signature: s.data.signature.toLowerCase(), // 必填，签名，见附录1
    					 jsApiList: ["onMenuShareTimeline", "onMenuShareAppMessage","onMenuShareQQ","onMenuShareWeibo","onMenuShareQZone"]
    				});	
    				
    				jweixin.ready(function () {
    
    				 //获取“分享到QQ”按钮点击状态及自定义分享内容接口（即将废弃）
    				 jweixin.onMenuShareQQ({
    					 title: title, // 分享标题
    					 desc: desc, // 分享描述
    					 link: url, // 分享链接
    					 imgUrl: imgurl, // 分享图标
    					 success: function () {
    						 // 用户确认分享后执行的回调函数
    					 },
    					 cancel: function () {
    						 // 用户取消分享后执行的回调函数
    					 }
    				});
    				
    				//获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
    				 jweixin.onMenuShareAppMessage({
    					 title: title, // 分享标题
    					 desc: desc, // 分享描述
    					 link: url, // 分享链接
    					 imgUrl: imgurl, // 分享图标
    					 type: '', // 分享类型,music、video或link，不填默认为link
    					 dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    					 success: function () {
    						 // 用户确认分享后执行的回调函数
    					 },
    					 cancel: function () {
    						 // 用户取消分享后执行的回调函数
    					 }
    				});
    				
    				//获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
    				 jweixin.onMenuShareTimeline({
    					 title: title, // 分享标题
    					 desc: desc, // 分享描述
    					 link: url, // 分享链接
    					 imgUrl: imgurl, // 分享图标
    					 type: '', // 分享类型,music、video或link，不填默认为link
    					 dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    					 success: function () {
    						 // 用户确认分享后执行的回调函数
    					 },
    					 cancel: function () {
    						 // 用户取消分享后执行的回调函数
    					 }
    				});
    				
    				//获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
    				 jweixin.onMenuShareWeibo({
    					 title: title, // 分享标题
    					 desc: desc, // 分享描述
    					 link: url, // 分享链接
    					 imgUrl: imgurl, // 分享图标
    					 type: '', // 分享类型,music、video或link，不填默认为link
    					 dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    					 success: function () {
    						 // 用户确认分享后执行的回调函数
    					 },
    					 cancel: function () {
    						 // 用户取消分享后执行的回调函数
    					 }
    				});
    				
    				 //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口（即将废弃）
    				 jweixin.onMenuShareQZone({
    					 title: title, // 分享标题
    					 desc: desc, // 分享描述
    					 link: url, // 分享链接
    					 imgUrl: imgurl, // 分享图标
    					 type: '', // 分享类型,music、video或link，不填默认为link
    					 dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
    					 success: function () {
    						 // 用户确认分享后执行的回调函数
    					 },
    					 cancel: function () {
    						 // 用户取消分享后执行的回调函数
    					 }
    				});
    			});
    			},
    			fail: err => {
    				console.log('request fail', err);
    			}
    	});

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MzQ3NTQx_size_16_color_FFFFFF_t_70]: /images/20220210/6290cbba8da74038b6bbd54b92df033f.png
[20190430152800417.png]: /images/20220210/d3e69fa252894a2b9ecc0fc6e18bd15f.png

发表评论取消回复

表情：

评论列表（有 0 条评论，222人围观）

还没有评论，来说两句吧...

相关阅读

相关 H5调用微信JSSDK开发总结

最近需要开发一个小项目，他的一个需求为：能够在微信中分享（转发好友以及朋友圈），而且要求图片和标题摘要等内容自定义。本着试一试的态度，我用手机访问自己搭建在服务器上的IP地址，

悠悠/ 2023年07月04日 15:46/ 0 赞/ 62 阅读

相关微信公众号H5订阅消息开发 uniapp订阅消息

简单说一下流程：在页面带参数跳转到 https://mp.weixin.qq.com/mp/subscribemsg ，然后用户授权确认或者取消以后，会返回参数里面 red

古城微笑少年丶/ 2022年12月20日 08:54/ 0 赞/ 284 阅读

相关 uniapp H5 JSSDK封装使用

先看效果吧，封装以后使用很方便，两行代码就能得到微信网页开发中的 jssdk 的 wx.config 执行了 wx.ready 还是 wx.error ，如果返回 true

朱雀/ 2022年12月20日 05:35/ 0 赞/ 332 阅读

相关 uni-app 开发微信公众号（H5）分享支付 JSSDK 的使用

UNI-APP 开发微信公众号（H5）分享支付 JSSDK 的使用先看一遍微信 JS SDK 文档：http://caibaojian.com/wx

约定不等于承诺〃/ 2022年12月10日 05:00/ 0 赞/ 1126 阅读

相关 uniapp 开发的H5 微信公众jssdk验签 invalid signature的问题

1. 根据微信jssdk文档说明配置传当前访问的url给后端 2. [验签地址][Link 1] https://mp.weixin.qq.com/debug/cgi-b

清疚/ 2022年09月10日 01:26/ 0 赞/ 262 阅读

相关 uni-app 开发微信公众号（H5）JSSDK 的使用方式

因为这个jssdk被uni-app坑了好多天，作者说支持1.4版本，但是我用1.4的两个分享的新方法一直不支持。 ![在这里插入图片描述][watermark_type_Zm

╰+哭是因爲堅強的太久メ/ 2022年04月25日 02:20/ 0 赞/ 223 阅读

相关 H5开发微信公众号

利用H5开发微信公众号一、首先授权配置公众号设置 --》功能设置设置业务域名! ![自定义菜单][SouthEast] 这里的MP\_ve

梦里梦外;/ 2021年09月16日 02:08/ 0 赞/ 834 阅读

相关微信公众号H5 - 使用vue开发微信公众号网页

应项目需求，最近我开始了我的第一次微信公众号网页的开发，第一次接触到公众号网页的我是很懵逼的。通过了解并实现了需求的我下面来进行讲解一下，希望可以帮助到有需要的朋友。ps：

小鱼儿/ 2021年09月07日 06:12/ 0 赞/ 946 阅读

相关微信公众号H5 - 关于微信公众号h5网页实现分享图片

近期，因为产品需求，要在公众号上面实现分享图片的功能，后面发现用了weixin-js-sdk方法分享出来的图片是一个链接的形式分享的。如下图：我要的效果图： ![

怼烎@/ 2021年09月07日 06:03/ 0 赞/ 866 阅读

相关微信公众号开发之微信JSSDK使用（踩坑）

微信公众号开发之微信JSSDK使用（踩坑）微信JSSDK介绍官方文档地址：https://mp.weixin.qq.com/wiki?t=resource/res_m...

朱雀/ 2020年06月19日 08:58/ 0 赞/ 1516 阅读