首页> 移动开发> 微信JS-SDK快速开发与调试

[文章]微信JS-SDK快速开发与调试

收藏
0 1343 0


【摘要】

微信JS-SDK微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫等微信特有的能力,为微信用户提供更优质的网页体验。 Senparc.Weixin SDK 是基于C#针对微信各模块的开源开发套件,已全面支持微信公众号、微信支付、企业号、开放平台、JSSDK、摇一摇周边等模块。本文通过一个自定义分享链接的功能,介绍如何利用Senparc.Weixin SDK和【微信web开发者工具】对微信JS-SDK进行快速开发与调试。

【正文】

一、实现功能

 

 

 

 

 

 

 

 

 

 

 

 








如上图在微信内访问的两个页面,分别点击右上角【】在底部弹出的菜单页中选择【发送给朋友】,如下是在交流区的截图。

在就交流区中的截图我们可以看出我们分享给好友的链接有明显的区别:为什么新浪的新闻链接有标题、描述、新浪Logo图标,而我们测试的分享页面Demo仅仅一个链接和默认图标呢?这就是本文要介绍主要内容,利用微信JS-SDK接口,在微信内实现分享链接的标题、信息、图标自定义设置。

二、开发环境

在微信JS-SDK接口的开发,你需要登录公众号平台做如下配置:

1、 设置JS接口安全域名

2、 获取AppIDAppSecret

三、代码编写

DEMO采用Asp.net MVC框架进行网页开发,并引入开源微信开发套件

Senparc.Weixin.MP库文件用于与微信进行请求验证参数的生成。

1、 Action开发

步骤一

运行如下命令,在包管理器安装Senparc.Weixin.MP

PM> Install-Package Senparc.Weixin.MP

步骤二

利用微信开发库Senparc.Weixin.MPJSSDKHelperJsApiTicketContainer获取与微信通信的相关权限验证配置参数。

2、 cshtml页面开发

步骤一、在页面引入如下JS文件,(支持https):

http://res.wx.qq.com/open/js/jweixin-1.2.0.js

步骤二、通过config接口注入权限验证配置

步骤三:通过ready接口处理成功验证

步骤四:通过error接口处理失败验证

步骤五:获取“分享给朋友”按钮点击状态及自定义分享内容接口

注意:onMenuShareAppMessage自定义分享链接时,链接的域名一定是【JS接口安全域名】中的一个(最多可设置3个),否则自定义信息将失败(失败信息不提示)。

说明:

微信JS-SDK开发文档:

http://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3#.E6.AD.A5.E9.AA.A4.E4.B8.80.EF.BC.9A.E5.BC.95.E5.85.A5JS.E6.96.87.E4.BB.B6

微信开源微信开发套件Senparc.Weixin.MP

https://github.com/JeffreySu/WeiXinMPSDK

四、微信开发者工具介绍

在调用某些微信接口时,需要在手机上进行调试开发,非常不方便,微信 web 开发者工具正是解决这样的问题,它在一定程度上模拟了微信环境,使得我们可以在PC端上进行微信开发调试,是微信开发调试的利器,目前支持小程序、公众平台的调试。

本文使用的版本下载地址:

https://dldir1.qq.com/WechatWebDev/1.0.0/201801081/wechat_devtools_1.02.1801081_x64.exe 或者在百度搜索关键字【微信web开发者工具】进行下载。

五、发布测试环境进行测试


【小结】

本文通过一个自定义分享链接的功能,介绍如何利用Senparc.Weixin SDK和【微信web开发者工具】对微信JS-SDK进行快速开发与调试。

移动开发
最近热帖
{{item.Title}} {{item.ViewCount}}
近期热议
{{item.Title}} {{item.PostCount}}