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

width=device-width	表示网页宽度默认等于屏幕宽度
initial-scale=1	原始缩放比例为1.0，即网页初始大小占屏幕面积的100%
user-scalable=no	表示用户不能手动缩放

4) 微信网页开发样式库

CSS基础

微信网页开发样式库 WeUI

WeUI 是与微信原生视觉体验一致的基础样式库，使用它可以设计出与微信客户端一致的网页视觉效果。WeUI 目前包含 button、cell、dialog、progress、toast、Msg Page、atricle、icon 等个元素。

首先，在页面中引入 weui.css，例如：/dist/style/weui.css

按钮

WeUI 中定义的按钮 class：

可选值	描述
weui_btn	WeUI 按钮，宽度为100%
weui_btn_primary	绿色背景的 WeUI 基础按钮
weui_btn_disabled	被禁用的 WeUI 按钮
weui_btn_warn	红色背景的 WeUI 警告按钮
weui_btn_default	灰边、灰底的 WeUI 按钮
weui_btn_plain_default	黑边、白底的 WeUI 按钮
weui_btn_plain_primary	绿边、白底的 WeUI 按钮
weui_btn_mini	自适应宽度的 WeUI 按钮

这些按钮 class 通常组合使用，例如：<a href="#" class="weui_btn weui_btn_primary">weui_btn weui_btn_primary按钮</a>

列表视图 Cell

Cell 用于将信息以列表的结构显示在页面上，每个 Cell 由多个 section（部分）组成，每个 section 包括标题(weui_cells_title)以及单元格(weui_cells)。

对话框 Dialog

WeUI 中定义的对话框 class：

可选值	描述
weui_dialog_confirm	包含“确定”和“取消”按钮的对话框
weui_dialog_alert	只包含“确定”按钮的对话框
weui_dialog	用于定义包含对话框内容的 div 元素
weui_dialog_title	用于定义包含对话框标题的 div 元素

进度条 Progress

WeUI 中定义的进度条 class：

可选值	描述
weui_progress	用于定义包含进度条和取消操作按钮的容器
weui_progress_bar	用于定义整个进度条
weui_progress_inner_bar	用于定义进度条当前进度的部分
weui_progress_opr	用于定义对进度条进行操作的超链接
weui_progress_cancel	用于定义取消按钮

临时提示框 Toast

临时提示框用于临时显示某些信息，并且会在数秒后自动消失。

WeUI 中定义的临时提示框 class：

可选值	描述
weui_loading_toast	用于定义“加载中”临时提示框
weui_mask_transparent	用于定义临时提示框的背景黑幕
weui_progress_inner_bar	用于定义进度条当前进度的部分
weui_loading	用于定义临时提示框中的加载动图
weui_loading_leaf weui_loading_leaf_0	用于定义加载动图中的一个叶子，最后一个数字决定该叶子的位置
weui_toast_content	用于定义“加载中”临时提示框的提示文字

Msg Page

WeUI 中定义了一组用于显示结果页（Msg Page）的 class，结果页通常用于在进行一系列操作步骤后，作为流程结束的总结性页面。结果页的作用主要是告知用于操作处理结果以及必要的相关细节等信息。

WeUI 中定义的 Msg Page class：

可选值	描述
weui_msg	用于定义 Msg Page
weui_icon_area	用于定义微信图标的区域
weui_icon_success	用于定义操作成功图标
weui_icon_msg	用于定义微信图标
weui_text_area	用于定义文本区域
weui_msg_title	用于定义标题区域
weui_msg_desc	用于定义描述信息文本
weui_opr_area	用于定义操作区域
weui_btn_area	用于定义按钮区域
weui_extra_area	用于定义显示其他信息的区域

文章页面 Article

在 WeUI 中可以使用 article 元素定义一篇文章页面，例如：

……

</article>

图标 Icon

WeUI 中定义了一组 class，用于在网页中定义图标。

WeUI 中定义的图标 class：

可选值	描述
weui_icon_msg	用于定义图标
weui_icon_success	用于定义成功图标
weui_icon_info	用于定义信息图标
weui_icon_warn	用于定义警告图标
weui_icon_waiting	用于定义等待图标
weui_icon_safe_success	用于定义安全成功图标
weui_icon_safe_warn	用于定义安全警告图标
weui_icon_success_no_circle	用于定义没有圆框的成功图标
weui_icon_waiting_circle	用于定义有一个圆框的等待图标
weui_icon_circle	用于定义圆框图标
weui_icon_download	用于定义下载图标
weui_icon_info_circle	用于定义有一个圆框的信息图标
weui_icon_cancel	用于定义取消图标

可以使用<i>元素定义，例如：<i class="weui_icon_cancel"></i>

5) 微信 JS-SDK

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

绑定域名

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

开始使用 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) 权限验证配置过程

处理验证成功

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

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

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

处理验证失败

当 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 可以实现分享文章、关注用户、微信支付等功能。

onBridgeReady 事件

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

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

{

alert("WeixinJSBridgeReady");

WeixinJSBridge.call('hideOptionMenu');

WeixinJSBridge.call('showToolbar');

});

WeixinJSBridge.call() 方法

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

WeixinJSBridge.call("hideOptionMenu")	单击微信网页右上角的按钮后，隐藏第一行菜单
WeixinJSBridge.call("showOptionMenu")	单击微信网页右上角的按钮后，显示第一行菜单，默认为显示
WeixinJSBridge.call("hideToolbar")	隐藏微信网页底部的导航栏
WeixinJSBridge.call("showToolbar")	显示微信网页底部的导航栏

WeixinJSBridge.invoke() 方法

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

微信门店管理

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

1) 申请开通门店功能

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

2) 门店管理开发接口

获取门店列表

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

获取门店信息

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

创建门店

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

删除门店

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) 微信支付的类型

付款码支付

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

JSAPI 支付

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

Native支付

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

APP支付

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

H5支付

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

小程序支付

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

人脸支付

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

2) 支付工具

代金券或立减优惠

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

现金红包

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

企业付款

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

3) 开通微信支付

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

第一步，准备微信公众号

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

第二步，申请微信支付

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

第三部，开发和部署

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

l 商户号（MCHID）

l 商户支付秘钥（KEY）

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

4) 开发步骤

设置支付目录
设置授权域名

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

5) JSAPI 支付

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

n 准备工作

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

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

n 具体实现步骤如下：

第一步：OAuth2.0 授权

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

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

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

1) 准备请求参数

2) 签名

3) 构造请求参数

4) 调用统一支付接口

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

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

第三步：发起JSAPI支付

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

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

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

6) 扫码支付模式一

n 准备工作

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

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

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

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

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

n 具体实现步骤如下：

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

1) 接收并解析回调数据

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

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

7) 扫码支付模式二

n 准备工作

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

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

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

n 具体实现步骤如下：

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

1) 准备请求参数

2) 签名

3) 构造请求参数

4) 调用统一支付接口

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

8) 订单查询

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

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

9) 支付模式比较

支付类型	OAuth授权	方便设置金额	适用场景
JSAPI 支付	是	方便	适合在公众号网页中使用
扫码支付模式一	否	不方便	适合在根据订单支付的场景，使用（使用产品ID关联金额等信息）
扫码支付模式二	否	方便	适合在网页中扫码支付

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