微信公众平台JS-SDK结构调用方法

很多朋友说微信的开发文档遍地坑,有的地方看不懂。其实不然,我个人觉得还是不都仔细,如果仔细阅读微信的开发文档写的还是比较清晰的,而却功能确实很强大,无论是信息查询还是硬件调用几乎无所不能,只要掌握的技巧便可。
下面我们来说一下的如何使用吧
准备工作
1.确保你的域名已备案
2.公众号已授权您的域名
3.获取开发所需的APPID、签名、JS文件等。
这些基本操作我就不多说了,搬砖就好。
废话不说直接上码

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>微信公众号JSSDK接口方法</title>
    <script type="text/javascript" src="resource/js/mobile/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="resource/js/mobile/jweixin-1.6.0.js"></script>
</head>
<!--
1.jweixin-1.6.0.js      这个是微信JS-SDK,现在的最新版本1.6.0
2.jquery-3.4.1.min.js   这个应该不用说了吧,JQ最新版本
-->
<body>
<script>
	//配置参数
	wx.config({
		debug: true, 	// 开启调试模式
		appId: '', 		// 必填,公众号的唯一标识
		timestamp: , 	// 必填,生成签名的时间戳
		nonceStr: '', 	// 必填,生成签名的随机串
		signature: '',	// 必填,签名
		jsApiList: [] 	// 必填,需要使用的JS接口列表
	});
	//执行方法
	wx.ready(function(){ 
	});
	//请求失败
	wx.error(function(res){
		console.log(res);
	});
</script>
</body>
</html>

这样就可以啦!
下面我们详细的说一下关于接口的使用方法吧
首先是wx.config这个配置参数,在请求官方服务器接口的时候,服务要验证您的身份信息,这个参数起到的就是这个作用。配置完毕后刷新页面,页面就会弹出一个窗,提示您的配置是否成功,当然也可以在页面console中提示errMsg: “config:ok” ,表示接口已通。

errMsg: "config:ok"   

下面我们说一下wx.config配置的一些重点吧
主要有两点,1.调试模式 2.接口列表
调试模式:其实这个道理很简单,新手刚开始使用时候一定要开启哦,这样接口的一些返回信息会提示出来,方便找到错误,对于老搬运工就无所谓了,因为页面的console中就有提示信息。重点是页面开发完毕后记得一定关闭掉。
接口列表:我们先说一下作用吧,这里填写你这个页面需要调用的功能接口名称,如果是多个接口就用逗号隔开。接口列表的作用就是用来验证服务器你所需要调用的接口是否可以使用。注意不验证后面是无法使用的,所以这里必须填写。
至于其他的参数如:appid、时间戳啥的我就不多说了直接搬砖就可以啦。

另外呢!很多童鞋说的遍地坑这里也是一个,因为很多童鞋在看开发文档的时候不够仔细,忽略了这个地方,直接去文档的目录里找功能,然后就复制出来用,后来发现不好使,才往前看最后发现是接口列表没有配置。

好啦当我们配置完config后,我们再来说一下wx.reday吧
它的主要作用就是执行接口方法,把你要调用的接口方法写到这里,完成具体的功能实现。至于方法文档里都有搬砖就可以啦。

最后我们说一下wx.error吧,它的功能就是当wx.config验证失败的时候返回的参数,你可以console,当然也可以执行一些当验证失败后要执行的一些功能方法。我基本是不用,哈哈!

好啦,今天我们就说到这里,后面我会写一些实例分享给大家。
比如:获取当前经纬度、调用手机相册、调用摄像头、扫描二维码、分享等一些常用功能。

希望对于和我一样的小白自学爱好者能起到帮助。
给人玫瑰手留余香,如果对您有帮助,就点个赞吧~!
有什么不懂的可以在评论里留言。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
好的,关于微信分享的问题,我可以给你一些指导。首先,你需要在你的 HTML5 页面中引入微信 JS-SDK,然后在页面加载完成后初始化 JS-SDK。接着,你需要通过 JS-SDK 提供的接口来配置分享的内容和参数,最后调用分享接口即可完成分享。 具体步骤如下: 1. 引入微信 JS-SDK 在 HTML 页面中引入微信 JS-SDK,如下所示: ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> ``` 2. 初始化 JS-SDK 在页面加载完成后,初始化 JS-SDK。你需要先通过微信公众平台获取到你的 AppID 和 AppSecret,然后使用这些信息初始化 JS-SDK。示例代码如下: ```javascript wx.config({ debug: false, appId: 'your app id', timestamp: 'your timestamp', nonceStr: 'your nonceStr', signature: 'your signature', jsApiList: [ 'onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone' ] }); ``` 其中,`appId`、`timestamp`、`nonceStr` 和 `signature` 分别是通过微信公众平台生成的,用于验证你的身份和权限的参数。`jsApiList` 是你需要使用的 JS-SDK 接口列表。 3. 配置分享内容和参数 在初始化 JS-SDK 后,你需要通过 JS-SDK 提供的接口来配置分享的内容和参数。示例代码如下: ```javascript wx.ready(function() { wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); ``` 其中,`onMenuShareAppMessage` 和 `onMenuShareTimeline` 分别是分享给好友和分享到朋友圈的接口。你需要提供分享的标题、描述、链接和缩略图等参数。 4. 调用分享接口 最后,在页面中调用分享接口即可完成分享。示例代码如下: ```javascript wx.ready(function() { wx.onMenuShareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); wx.onMenuShareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); // 在需要分享的地方调用 shareAppMessage 和 shareTimeline 接口 // 示例代码如下 document.querySelector('#share-btn').addEventListener('click', function() { wx.shareAppMessage({ title: '分享标题', desc: '分享描述', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); document.querySelector('#share-timeline-btn').addEventListener('click', function() { wx.shareTimeline({ title: '分享标题', link: '分享链接', imgUrl: '分享缩略图', trigger: function(res) {}, success: function(res) {}, cancel: function(res) {}, fail: function(res) {} }); }); }); ``` 这样就完成了微信分享功能的实现。需要注意的是,由于微信的安全机制,分享的链接必须是在微信公众平台中配置过的域名,否则可能无法正常分享。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Cocosinu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值