微信JS-SDK开发 入门指南
2017-06-11 10:18
387 查看
目录
前言1. 过程
1.1 代码
1.2 代理
1.2.1 下载
1.2.2 解压
1.2.3 运行
1.2.4 查看
2. 微信接口测试
2.1 申请测试帐号
2.1.1 测试号信息
2.1.2 接口配置信息
2.1.3 Js安全接口域名
参考
前言
自己要做一个微信分享,一般来说,接第三方平台就可以了。但是现在的需求是可以更改在分享的时候, 需要修改分享的时候显示的标题和图片。这个时候就涉及到需要调微信提供的接口了。在做的过程中,觉得这个过程比较繁琐,因此记录下来,供人参考。在看本文之前请务必已经将微信公众平台中的微信网页开发下的
微信JS-SDK说明文档第一部分浏览一次。这样,更容易明白我在说什么。
本文仅针对微信网页开发, 简单的说明一下整个过程:
前端将当前页面的url传递给后端,当然也可以是后端直接获取前端的url。
后台根据前端页面的url和相关的算法,生成一个签名(
signature), 并将生成签名的其他数据传递给前端,具体查看微信公众平台。
当前端接受到后端传回的数据后,就可以通过
config接口注入权限验证配置了,一旦成功后, 微信端会弹出:
errMsg: {config is ok}。
调用微信的各种接口。
提供一个微信分享第三方平台, 请搜索如何接入。
各种后台生成
signature的方法,微信公众平台已经提供了几种语言的,如果你使用的是不同的语言,可以根据提供的方法进行相应的修改。
提示: 报错可以查看微信公众平台上的解决方案。
1. 过程
1.1 代码
前端使用SDK的步骤:componentDidMount() { const that = this; const url = encodeComponentURI(location.href); // 向后台发送请求 // url作为参数传递到后台去 // () => {}, 当后台返回数据后,调用回调函数 this.props.actions.getSignaturePack(url, (obj) => { const { signPackage } = obj; const { appId, timestamp, nonceStr, signature } = signPackage; // 参考微信公众平台: https://mp.weixin.qq.com/wiki // JSSDK使用步骤 // 第一步: 填写JS接口安全域名,请查看 2.1申请测试帐号 // 第二步: 引入JS文件 // 第三步: 通过config接口注入权限验证配置 wx.config({ debug: true, // 调试模式, 请设置为true appId, timestamp, nonceStr, signature, jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], }); // 第四步: 通过ready接口处理成功验证 wx.ready(() => { // 第五步: 判断客户端是否支持要使用的接口 wx.checkJsApi({ jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'], success: () => { }, }); // 第六步: 接口调用, 如分享给朋友 const { displayLink, title, abstract } = this.props.state.detail; wx.onMenuShareAppMessage({ title, desc: abstract, link: location.href, imgUrl: displayLink, type: '', dataUrl: '', success: () => {}, cancel: () => {}, }); }); }); }
1.2 代理
当你的代码都完成的差不多的时候,你需要开始扫描微信二维码进行测试,你却发现扫出来的结果是网络错误或者是其他错误。这是由于你在本地起的服务,而你用的第三方的平台生成的二维码,你的URL当然是localhost:8000之类的,所以你肯定是扫不出来东西的。
因此你需要一个这样的工具,在你起的本地服务,可以映射到公网上去。当然,你也可以自己搭建一个公网服务器,然后将你的项目放到服务器上,但是如果这么做,你的测试就麻烦很多了。你每次的修改代码都要上传到服务器上去,当然,你也可以直接在服务器上进行操作。说了这么多,其实就是想推荐一个叫
ngrok的代理工具给你,十分方便。它可以将你本地起的一个服务映射到公网上去。
1.2.1 下载
点击ngrok官网, 根据你的系统下载相应的版本。由于我是Centos7, 因此就只是介绍
Centos7。
1.2.2 解压
unzip ngrok
1.2.3 运行
ngrok的运行十分简单,首先将你本地的服务起起来,然后一条命令搞定, 将端口号为
8001的服务映射到公网上去。
./ngrok http 8001
1.2.4 查看
打开浏览器,输入控制台里ngrok为你分配的二级域名,你就可以看到你的项目在公网上运行了。因为它是免费的,所以它有2个缺点:
慢,其实慢不慢是看个人的,我个人是认为慢。
二级域名是随机的,所以我一般这个控制台打开后就不会再关闭的。
上面的两个缺点,其实都是可以解决的,就是付费。
2. 微信接口测试
当你的项目可以在公网上跑了,你就可以进行接口测试了,但是在测试之前,你还需要进行下面几步。2.1 申请测试帐号
在你申请测试帐号之前,假如你已经有公众号了,如果没有,请去微信公众平台申请一个。打开微信公众平台,登录。
看左侧侧边栏,最下面,点击开发者工具。
进入公共平台测试帐号。
这个时候一共显示了三个模块,分别是测试号信息、接口配置信息,Js接口安全域名。
下面分别介绍下这三个模块。
2.1.1 测试号信息
这里展示了
appId和
appSecret, 它是你后台用来生成签名所需要的。如果你要测试,需要将你之前写的
appId和
appSecret改为测试帐号生成的
appId和
appSecret。
2.1.2 接口配置信息
URL请填写
ngrok映射的地址。关于
token的话,它是你在调用微信有的接口的时候需要填写的,由于我所调用的分享接口是用不到
token的,因此我就不详细解释了。
值得注意的是,
token是可以任意填的,但是你要保证满足它的规则以及它与你网站设置的
token保持一致。记得,当你在这里填写
token的时候,你的项目里已经设置好了
token,否则将会提示配置失败。
提示: 这里的
token和你之前要获取的
jsapi_ticket所需要的
access_token是不一样的东西。
2.1.3 Js安全接口域名
这里填写你所映射的
ngrok的地址,有两点需要注意,第一个就是
ngrok映射的是二级域名,所以你直接填写你的二级域名就可以了。第二个就是一定记得不要加协议(
http://), 直接输入
xxxxxxxx.ngrok.io就可以了。
参考
微信公众平台Django使用微信分享接口
相关文章推荐
- 夺命雷公狗---微信开发54----微信js-sdk接口开发(1)之快速入门
- 微信公众平台开放JS-SDK(微信内网页开发工具包)
- 【微信公众平台开发】微信JS-SDK开发
- 微信JS-SDK开发(自定义分享)
- 微信开发入门指南
- C#微信开发-微信JS-SDK(1)之通过config接口注入权限验证配置
- 微信开放JS-SDK,助力网页开发
- 微信JS-SDK入门(JAVA版)
- 进一步封装微信JS SDK,使开发人员对JS SDk透明
- thinkphp微信开发之jssdk拉取卡券及卡券的核销
- 微信JS SDK开发 共享问题小结
- 伪命题:微信开放JS-SDK,助力网页开发
- 基于微信JS_SDk开发微信网页及微信公共应用
- 用c#开发微信 (10) JS-SDK 基本用法- 分享接口“发送到朋友”
- 微信开放JS-SDK,助力网页开发[转自微信官方]
- 微信 JS-SDK 开发
- 实战微信JS SDK开发:贺卡制作与播放(1)
- 实战微信JS SDK开发:贺卡制作与播放(2)
- 微信JS-SDK之图像接口开发详解
- 微信js sdk分享开发摘记java版