微信公众号学习笔记（下）

5)   微信 JS-SDK

微信 JS-SDK 是微信公众平台提供的基于微信内的网页开发工具包。通过使用微信 JS-SDK，开发者可以在网页中实现拍照、选图、语言、获取网络状态、地理位置等手机系统功能，同时可以直接使用微信分享、微信支付等微信特有的能力。

1. 绑定域名

在网页中需要使用 JS-SDK 功能，首先需要在微信公众平台中绑定域名。进入微信公众平台，在菜单栏选择设置 -> 公众号设置 -> 功能设置 -> 点击“JS接口安全域名”中的设置，具体设置参考页面说明。

1. 开始使用 JS-SDK

1)   在使用 JS-SDK 前，首先需要引入下面的js脚本。

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

注意：使用最新的版本，否则有些接口可能已经废弃！

2)   然后，通过 config 接口进行权限验证配置，具体如下：

wx.config({

    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。

    appId: '', // 必填，公众号的唯一标识

    timestamp: , // 必填，生成签名的时间戳

    nonceStr: '', // 必填，生成签名的随机串

    signature: '',// 必填，签名

    jsApiList: [] // 必填，需要使用的JS接口列表

});

注意：所有的 JS-SDK 接口都需要在 config 接口成功验证之后才能够调用成功。否则可能报错：the permission value is offline verifying

3)   权限验证配置过程

1. 处理验证成功

config 是一个客户端的异步操作，当完成验证后会执行 wx.ready() 函数，例如：

wx.ready(function() { alert("ready"); });

注：执行 wx.ready() 函数并不意味着成功用过了权限验证，只是说明权限验证操作成功。

1. 处理验证失败

当 wx.config() 验证失败后，会执行 wx.error() 函数，例如：

wx.error(function(res) { alert("wx.error:" + JSON.stringify(res)); });

4)   调用基础接口

JS-SDK 提供一个基础接口，即 wx.checkJsApi()，用于检测当前客户端版本是否支持指定的接口，具体语法参考官方文档。

5)   分享接口

JS-SDK 提供了一组分享接口，可以将当前网页分享到朋友圈、QQ空间、朋友、QQ等。

注意：分享的"link"参数必须在“绑定域名”范围（三个）内的，否则将报错：fail link must be in js secure domain list

6)   图像接口

JS-SDK 提供了一组图像接口，可以在网页中进行拍照或从手机相册中选图、预览图片、上传图片、下载图片、获取本地图片等。

7)   图像接口

JS-SDK 提供了一组图像接口，可以在网页中进行录音、播放录音、上传语言、下载语言、识别语言等。

8)   获取网络状态接口

调用 wx.getNetworkType() 接口可以获取当前网络类型，例如：2g，3g，4g，wifi

9)   地理位置接口

JS-SDK 提供了2个与地理位置有关的接口，用于获取地位和使用微信内置地图查看位置。

10)  关闭当前网页窗口接口

调用 wx.closeWindow() 接口可以关闭当前网页窗口。

l  参考文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

6)   微信浏览器私有接口 WeixinJSBridge

微信提供了一组私有接口 - WeixinJSBridge，通过 WeixinJSBridge 可以实现分享文章、关注用户、微信支付等功能。

1. onBridgeReady 事件

当微信内置浏览器完成内部初始化后会触发 WeixinJSBridgeReady 事件，可以在此事件的处理函数中添加一些页面初始化代码。例如：

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady()

{

    alert("WeixinJSBridgeReady");

    WeixinJSBridge.call('hideOptionMenu');

    WeixinJSBridge.call('showToolbar');

});

1. WeixinJSBridge.call() 方法

通过 WeixinJSBridge.call() 方法可以调用微信浏览器私有接口。

1. WeixinJSBridge.invoke() 方法

也可以通过 WeixinJSBridge.invoke() 方法调用微信浏览器的私有接口，包括预览图片、获取网络类型、关闭当前网页、发送邮件、JS API 支付接口等。

1. 微信门店管理

门店功能是公众平台向商户提供的对其线下实体门店数据的基础管理能力。通过门店管理功能，商户可对自己的实体门店数据进行线上管理，并在相关业务场景中运营和展示。

1)   申请开通门店功能

登录微信公众平台 -> 左侧菜单栏选择功能 -> 添加功能插件 -> 门店管理，进行申请。但是，新版本的微信公众平台已经没有“微信门店”插件了？

2)   门店管理开发接口

1. 获取门店列表

POST 方式请求：https://api.weixin.qq.com/cgi-bin/poi/getpoilist?access_token=

1. 获取门店信息

POST 方式请求：http://api.weixin.qq.com/cgi-bin/poi/getpoi?access_token=

1. 创建门店

POST 方式请求：http://api.weixin.qq.com/cgi-bin/poi/addpoi?access_token=

1. 删除门店

POST 方式请求：http://api.weixin.qq.com/cgi-bin/poi/delpoi?access_token=

l  参考文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1444378120

1. 微信支付

微信支付是微信和第三方支付平台财付通联合推出的移动支付产品。利用提供的开发接口，商户可以通过微信实现在线收款、发放红博爱、企业付款等功能。

1)   微信支付的类型

1. 付款码支付

用户打开微信钱包-付款码的界面，商户扫码后提交完成支付

1. JSAPI 支付

用户通过微信扫码、关注公众号等方式进入商家H5页面，并在微信内调用JSSDK完成支付

1. Native支付

用户打开“微信扫一扫”，扫描商户的二维码后完成支付

1. APP支付

商户APP中集成微信SDK，用户点击后跳转到微信内完成支付

1. H5支付

用户在微信以外的手机浏览器请求微信支付的场景唤起微信支付

1. 小程序支付

用户在微信小程序中使用微信支付的场景

1. 人脸支付

无需掏出手机, 刷脸完成支付, 适合线下各种场景

2)   支付工具

1. 代金券或立减优惠

商户营销和运营的能力，给用户发放代金券或立减优惠的相关说明

1. 现金红包

提供给商户营销的能力，商户给用户派发现金红包相关说明

1. 企业付款

企业付款至用户微信支付零钱或银行卡

3)   开通微信支付

商户需要提交申请，并通过审批后，才可以开通微信支付。

1. 第一步，准备微信公众号

只有拥有通过认证的微信公众账号的用户才能接入微信支付，并且需要为服务号或者企业号。认证审核的服务费为300元/次。

1. 第二步，申请微信支付

申请微信支付的前提是公众号必须通过认证。

1. 第三部，开发和部署

开通微信支付后，开发者可以从微信客服人员那里得到如下信息：

l  商户号（MCHID）

l  商户支付秘钥（KEY）

l  证书（apiclient_cert.p12）,仅在退款、发送红包和付款时需要。

4)   开发步骤

1. 设置支付目录
2. 设置授权域名

l  参考文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3

5)   JSAPI 支付

JSAPI 支付就是通过调用微信提供的 Java Script API，实现在线支付功能的。

n  准备工作

1. 首先，登录“微信商户平台”开通 JSAPI 支付功能，进入产品中心 -> 我的产品 -> 支付产品 -> 开通“JSAPI 支付”即可。

https://pay.weixin.qq.com/index.php/core/info

n  具体实现步骤如下：

1. 第一步：OAuth2.0 授权

1)   用户同意授权，获取code

2)   通过 code 换取网页授权 access_token

1. 第二步：调用统一支付接口

1)   准备请求参数

2)   签名

3)   构造请求参数

4)   调用统一支付接口

1. POST 方式请求：https://api.mch.weixin.qq.com/pay/unifiedorder
2. 解析统一支付接口响应参数
3. 准备发起JSAPI支付的参数

l  参考文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=9_1

1. 第三步：发起JSAPI支付

注：在网页中使用 JS WeixinJSBridge 内置对象进行发起JSAPI支付。

l  参考文档：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_7&index=6

1. 第三步：接收微信支付结果通知

6)   扫码支付模式一

n  准备工作

1. 首先，登录“微信商户平台”开通 Native 支付功能，进入产品中心 -> 我的产品 -> 支付产品 -> 开通“Native 支付”即可。

https://pay.weixin.qq.com/index.php/core/info

1. 然后，配置扫码支付回调链接，登录“微信商户平台”，进入产品中心 ->

开发配置 -> 支付配置 -> 设置“扫码回调链接”。

1. 参考文档：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_4

n  具体实现步骤如下：

1. 第一步：根据微信支付规定格式生成二维码
2. 第二步：微信支付系统收到扫码请求后，会发起对商户后台的回调，带有product_id、openid等参数，要求商户系统返回数据包

1)   接收并解析回调数据

2)   调用统一支付接口，获取prepay_id

1. 第三步：商户后台系统将prepay_id等参数返回给微信支付系统
2. 第三步：接收微信支付结果通知

7)   扫码支付模式二

n  准备工作

1. 首先，登录“微信商户平台”开通 Native 支付功能，进入产品中心 -> 我的产品 -> 支付产品 -> 开通“Native 支付”即可。

https://pay.weixin.qq.com/index.php/core/info

1. 参考文档：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=6_5

n  具体实现步骤如下：

1. 第一步：设置扫码支付的订单数据
2. 第二步：调用统一支付接口

1)   准备请求参数

2)   签名

3)   构造请求参数

4)   调用统一支付接口

1. POST 方式请求：https://api.mch.weixin.qq.com/pay/unifiedorder
2. 解析统一支付接口响应参数
3. 在页面中显示支付二维码（从第三步生成获取）
4. 第三步：根据返回的code_url生成二维码，并以文件内容返回
5. 第三步：接收微信支付结果通知

8)   订单查询

POST 方式请求：https://api.mch.weixin.qq.com/pay/orderquery

参考文档：https://pay.weixin.qq.com/wiki/doc/api/native.php?chapter=9_2

9)   支付模式比较

10)  发放红包与企业付款《待续》