关键字：微信支付 微信支付v3 jsapi支付 统一支付 Native支付 prepay_id&作者：方倍工作室原文:&&
本文介绍微信支付下的jsapi实现流程
微信支付现在分为v2版和v3版，号之前申请的为v2版，之后申请的为v3版。V3版的微信支付没有paySignKey参数。v2的相关介绍请参考方倍工作室的其他文章。本文介绍的微信支付v3。
1. OAuth2.0授权
JSAPI 支付前需要调用 登录授权接口获取到用户的 Openid 。所以需要做一次授权，这次授权是不弹出确认框的。其实质就是在用户访问
http://www.fangbei.org/wxpay/js_api_call.php
https://open./connect/oauth2/authorize?appid=wx8888&redirect_uri=http://www.fangbei.org/wxpay/js_api_call.php&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect
以此来获得code参数，并根据code来获得授权access_token及openid
其实现的详细流程可参考&
在微信支付的Demo中，其代码为
1 //使用jsapi接口
2 $jsApi = new JsApi_pub();
4 //=========步骤1：网页授权获取用户openid============
5 //通过code获得openid
6 if (!isset($_GET['code']))
//触发微信返回code码
$url = $jsApi-&createOauthUrlForCode(WxPayConf_pub::JS_API_CALL_URL);
Header("Location: $url");
//获取code码，以获取openid
$code = $_GET['code'];
$jsApi-&setCode($code);
$openid = $jsApi-&getOpenId();
这一步的最终结果就是获得了当前用户的openid
ou9dHt0L8qFLI1foP-kj5x1mDWsM
2. 统一支付
统一支付是JSAPI/NATIVE/APP各种支付场景下生成支付订单，返回预支付订单号的接口，目前微信支付所有场景均使用这一接口统一支付中以下参数从配置中获取，或由类自动生成，不需要用户填写
$this-¶meters["appid"] = WxPayConf_pub::APPID;//公众账号ID
$this-¶meters["mch_id"] = WxPayConf_pub::MCHID;//商户号
$this-¶meters["spbill_create_ip"] = $_SERVER['REMOTE_ADDR'];//终端ip
$this-¶meters["nonce_str"] = $this-&createNoncestr();//随机字符串
$this-¶meters["sign"] = $this-&getSign($this-¶meters);//签名
在JSAPI支付中，另外填写以下参数
//统一支付接口中，trade_type为JSAPI时，openid为必填参数！
$unifiedOrder-&setParameter("openid","$openid");//商品描述
$unifiedOrder-&setParameter("body","方倍工作室");//商品描述
//自定义订单号，此处仅作举例
$timeStamp = time();
$out_trade_no = WxPayConf_pub::APPID."$timeStamp";
$unifiedOrder-&setParameter("out_trade_no","$out_trade_no");//商户订单号
$unifiedOrder-&setParameter("total_fee","1");//总金额
$unifiedOrder-&setParameter("notify_url",WxPayConf_pub::NOTIFY_URL);//通知地址
$unifiedOrder-&setParameter("trade_type","JSAPI");//交易类型
其他为选填参数
//非必填参数，商户可根据实际情况选填
//$unifiedOrder-&setParameter("sub_mch_id","XXXX");//子商户号
//$unifiedOrder-&setParameter("device_info","XXXX");//设备号
//$unifiedOrder-&setParameter("attach","XXXX");//附加数据
//$unifiedOrder-&setParameter("time_start","XXXX");//交易起始时间
//$unifiedOrder-&setParameter("time_expire","XXXX");//交易结束时间
//$unifiedOrder-&setParameter("goods_tag","XXXX");//商品标记
//$unifiedOrder-&setParameter("openid","XXXX");//用户标识
//$unifiedOrder-&setParameter("product_id","XXXX");//商品ID
这些参数最终组成了这样的xml数据，
&openid&&![CDATA[ou9dHt0L8qFLI1foP-kj5x1mDWsM]]&&/openid&
&body&&![CDATA[方倍工作室]]&&/body&
&out_trade_no&&![CDATA[wx79]]&&/out_trade_no&
&total_fee&1&/total_fee&
¬ify_url&&![CDATA[http://www.fangbei.org/wxpay/notify_url.php]]&&/notify_url&
&trade_type&&![CDATA[JSAPI]]&&/trade_type&
&appid&&![CDATA[wx8888]]&&/appid&
&mch_id&&/mch_id&
&spbill_create_ip&&![CDATA[61.50.221.43]]&&/spbill_create_ip&
&nonce_str&&![CDATA[60uf9sh6nmppr9azveb2bn7arhy79izk]]&&/nonce_str&
&sign&&![CDATA[2D8ABBA23D0F]]&&/sign&
将这些数据提交给统一支付接口
https://api.mch./pay/unifiedorder
将获得返回 如下数据
&return_code&&![CDATA[SUCCESS]]&&/return_code&
&return_msg&&![CDATA[OK]]&&/return_msg&
&appid&&![CDATA[wx8888]]&&/appid&
&mch_id&&![CDATA[]]&&/mch_id&
&nonce_str&&![CDATA[Be8YX7gjCdtCT7cr]]&&/nonce_str&
&sign&&![CDATA[885B6D8EF753A00C8EEDB]]&&/sign&
&result_code&&![CDATA[SUCCESS]]&&/result_code&
&prepay_id&&![CDATA[wx]]&&/prepay_id&
&trade_type&&![CDATA[JSAPI]]&&/trade_type&
其中包含了最重要的预支付ID参数，prepay_id，值为&
3、JS API支付
前面的准备工作做好了以后，JS API根据prepay_id生成jsapi支付参数生成代码如下
//=========步骤3：使用jsapi调起支付============
$jsApi-&setPrepayId($prepay_id);
$jsApiParameters = $jsApi-&getParameters();
生成的json数据如下
"appId": "wx8888",
"timeStamp": "",
"nonceStr": "gbwr71b5no6q6ne18c8up1u7l7he2y75",
"package": "prepay_id=wx",
"signType": "MD5",
"paySign": "9CF851EBF6C7D"
在微信浏览器中调试起js接口，代码如下
&meta http-equiv="content-type" content="text/charset=utf-8"/&
&title&微信安全支付&/title&
&script type="text/javascript"&
//调用微信JS api 支付
function jsApiCall()
WeixinJSBridge.invoke(
'getBrandWCPayRequest',
&?php echo $jsApiP ?&,
function(res){
WeixinJSBridge.log(res.err_msg);
//alert(res.err_code+res.err_desc+res.err_msg);
function callpay()
if (typeof WeixinJSBridge == "undefined"){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', jsApiCall, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', jsApiCall);
document.attachEvent('onWeixinJSBridgeReady', jsApiCall);
jsApiCall();
&/br&&/br&&/br&&/br&
&div align="center"&
&button style="width:210 height:30 background-color:#FE6714; border:0px #FE6714 cursor:
font-size:16" type="button" onclick="callpay()" &贡献一下&/button&
当用户点击&贡献一下&按钮时，将弹出微信支付插件，用户可以开始支付。
4、支付通知
支付成功后，通知接口中也将收到支付成功的xml通知
&appid&&![CDATA[wx8888]]&&/appid&
&bank_type&&![CDATA[CFT]]&&/bank_type&
&fee_type&&![CDATA[CNY]]&&/fee_type&
&is_subscribe&&![CDATA[Y]]&&/is_subscribe&
&mch_id&&![CDATA[]]&&/mch_id&
&nonce_str&&![CDATA[60uf9sh6nmppr9azveb2bn7arhy79izk]]&&/nonce_str&
&openid&&![CDATA[ou9dHt0L8qFLI1foP-kj5x1mDWsM]]&&/openid&
&out_trade_no&&![CDATA[wx79]]&&/out_trade_no&
&result_code&&![CDATA[SUCCESS]]&&/result_code&
&return_code&&![CDATA[SUCCESS]]&&/return_code&
&sign&&![CDATA[0C1D7F550A5A138F0CEB]]&&/sign&
&sub_mch_id&&![CDATA[]]&&/sub_mch_id&
&time_end&&![CDATA[58]]&&/time_end&
&total_fee&1&/total_fee&
&trade_type&&![CDATA[JSAPI]]&&/trade_type&
&transaction_id&&![CDATA[4026]]&&/transaction_id&
阅读(...) 评论()需求发布后1小时内收到服务商响应每个需求平均有10个服务商参与95%以上的需求得到了圆满解决所有需求不向雇主和服务商收取任何佣金年货包装设计特价，企业送礼倍有面儿
匹配服务商
选择服务商，签单
服务商工作
验收工作，满意后付款
已投标服务商
综合评分：0颗星
速度：0.00
服务：0.00
态度：0.00
好评率：0%
共有6个服务商参与报价，查看更多服务商报价
参与报价,开始赚钱
提交你的报价和方案
中标后交付作品
获得任务赏金微信大众号支付H5调用支付详解 - 移动开发当前位置:& &&&微信大众号支付H5调用支付详解微信大众号支付H5调用支付详解&&网友分享于：&&浏览：0次微信公众号支付H5调用支付详解最近项目需要微信支付，然后看了下微信公众号支付，，虽然不难，但是细节还是需要注意的，用了大半天时间写了个demo，并且完整的测试了一下支付流程，下面分享一下微信公众号支付的经验。
一、配置公众号微信支付&&
& &需要我们配置微信公众号支付地址和测试白名单。
& & &比如：支付JS页面的地址为 /shop/pay/
& & & & & & 那此处配置/shop/pay/
& 二、开发流程
& & &借用微信公众号支付api(地址 http://pay./wiki/doc/api/index.php?chapter=7_4)，我们需要开发的为红色标记出的。如下：
三、向微信服务器端下订单
& & & & & & &调用统一下单接口，这样就能获取微信支付的prepay_id（http://pay./wiki/doc/api/index.php?chapter=9_1）。
& & &在调用该接口前有几个字段是H5支付必须填写的openid
& & 3.1 获取openid
& & & & &可以通过网页授权形式（http://mp./wiki/17/c0f37d13d5d2c37b468d75.html）
& & & &在微信中发送如下链接
https://open./connect/oauth2/authorize?appid=wx520c15f&redirect_uri=要跳转的下订单的url&response_type=code&scope=snsapi_base&state=123#wechat_redirect
& &3.2 下订单获取prepay_id
& & 代码如下，实际上是通过post发送一个xml 文件，获取微信服务器端发送过来的prepay_id。
import java.io.ByteArrayInputS
import java.io.IOE
import java.io.InputS
import java.io.UnsupportedEncodingE
import java.util.D
import java.util.HashM
import java.util.I
import java.util.M
import java.util.Map.E
import java.util.R
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import mons.codec.digest.DigestU
import org.springframework.stereotype.C
import org.springframework.web.bind.annotation.RequestM
import org.xmlpull.v1.XmlPullP
import org.xmlpull.v1.XmlPullParserE
import org.xmlpull.v1.XmlPullParserF
import com.fasterxml.jackson.databind.JsonN
import com.gson.oauth.O
import com.gson.oauth.P
import com.gson.util.HttpK
import com.sy.util.DatetimeU
import com.sy.util.JsonU
@Controller
@RequestMapping(&/pay&)
public class WXPayController {
@RequestMapping(value = &wxprepay.do&)
public void jspay(HttpServletRequest request, HttpServletResponse response, String callback) throws Exception {
// 获取openid
String openId = SessionUtil.getAtt(request, &openId&);
if (openId == null) {
openId = getUserOpenId(request);
String appid = &wx16691fcb&;
String paternerKey = &ININGFENG1234567fdfwfdfd1ss234567&;
String out_trade_no = getTradeNo();
Map&String, String& paraMap = new HashMap&String, String&();
paraMap.put(&appid&, appid);
paraMap.put(&attach&, &测试&);
paraMap.put(&body&, &测试购买支付&);
paraMap.put(&mch_id&, &&);
paraMap.put(&nonce_str&, create_nonce_str());
paraMap.put(&openid&, openId);
paraMap.put(&out_trade_no&, out_trade_no);
paraMap.put(&spbill_create_ip&, getAddrIp(request));
paraMap.put(&total_fee&, &1&);
paraMap.put(&trade_type&, &JSAPI&);
paraMap.put(¬ify_url&, &http://www.xxx.co/bank/page/wxnotify&);
String sign = getSign(paraMap, paternerKey);
paraMap.put(&sign&, sign);
// 统一下单 https://api.mch./pay/unifiedorder
String url = &https://api.mch./pay/unifiedorder&;
String xml = ArrayToXml(paraMap);
String xmlStr = HttpKit.post(url, xml);
// 预付商品id
String prepay_id = &&;
if (xmlStr.indexOf(&SUCCESS&) != -1) {
Map&String, String& map = doXMLParse(xmlStr);
prepay_id = (String) map.get(&prepay_id&);
Map&String, String& payMap = new HashMap&String, String&();
payMap.put(&appId&, appid);
payMap.put(&timeStamp&, create_timestamp());
payMap.put(&nonceStr&, create_nonce_str());
payMap.put(&signType&, &MD5&);
payMap.put(&package&, &prepay_id=& + prepay_id);
String paySign = getSign(payMap, paternerKey);
payMap.put(&pg&, prepay_id);
payMap.put(&paySign&, paySign);
WebUtil.response(response, WebUtil.packJsonp(callback, JsonUtil.warpJsonNodeResponse(JsonUtil.objectToJsonNode(payMap)).toString()));
* map转成xml
* @param arr
public String ArrayToXml(Map&String, String& arr) {
String xml = &&xml&&;
Iterator&Entry&String, String&& iter = arr.entrySet().iterator();
while (iter.hasNext()) {
Entry&String, String& entry = iter.next();
String key = entry.getKey();
String val = entry.getValue();
xml += &&& + key + &&& + val + &&/& + key + &&&;
xml += &&/xml&&;
// 获取openId
private String getUserOpenId(HttpServletRequest request) throws Exception {
String code = request.getParameter(&code&);
if (code == null) {
String openId = request.getParameter(&openId&);
return openId;
Oauth o = new Oauth();
String token = o.getToken(code);
JsonNode node = JsonUtil.StringToJsonNode(token);
String openId = node.get(&openid&).asText();
return openId;
private String create_nonce_str() {
String chars = &abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ&;
String res = &&;
for (int i = 0; i & 16; i++) {
Random rd = new Random();
res += chars.charAt(rd.nextInt(chars.length() - 1));
private String getAddrIp(HttpServletRequest request){
return request.getRemoteAddr();
private String create_timestamp() {
return Long.toString(System.currentTimeMillis() / 1000);
private String getTradeNo(){
String timestamp = DatetimeUtil.formatDate(new Date(), DatetimeUtil.DATETIME_PATTERN);
return &HZNO& +
private String getSign(Map&String, String& params, String paternerKey )
throws UnsupportedEncodingException {
String string1 = Pay.createSign(params, false);
String stringSignTemp = string1 + &&key=& + paternerK
String signValue = DigestUtils.md5Hex(stringSignTemp).toUpperCase();
private Map&String, String& doXMLParse(String xml)
throws XmlPullParserException, IOException {
InputStream inputStream = new ByteArrayInputStream(xml.getBytes());
Map&String, String& map =
XmlPullParser pullParser = XmlPullParserFactory.newInstance()
.newPullParser();
pullParser.setInput(inputStream, &UTF-8&); // 为xml设置要解析的xml数据
int eventType = pullParser.getEventType();
while (eventType != XmlPullParser.END_DOCUMENT) {
switch (eventType) {
case XmlPullParser.START_DOCUMENT:
map = new HashMap&String, String&();
case XmlPullParser.START_TAG:
String key = pullParser.getName();
if (key.equals(&xml&))
String value = pullParser.nextText();
map.put(key, value);
case XmlPullParser.END_TAG:
eventType = pullParser.next();
四、H5支付
& & & H5支付其实很简单，只需要调用微信内嵌浏览器的js方法就行（http://pay./wiki/doc/api/index.php?chapter=7_7）
&%@ page language=&java& contentType=&text/ charset=UTF-8& pageEncoding=&UTF-8&%&
&%@ taglib prefix=&spring& uri=&http://www.springframework.org/tags& %&
String path = request.getContextPath();
String basePath = request.getScheme() + &://& + request.getServerName() + &:& + request.getServerPort() + path + &/&;
&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&&
&meta charset=&utf-8& /&
&meta name=&viewport& content=&width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0& /&
&meta name=&apple-mobile-web-app-capable& content=&yes& /&
&meta name=&apple-mobile-web-app-status-bar-style& content=&black& /&
&meta name=&format-detection& content=&telephone=no& /&
&title&测试支付&/title&
&link href=&../css/css.css?v=1.0& rel=&stylesheet& type=&text/css&&
&div class=&index_box&&
&div class=&apply_name&&微信js支付测试&/div&
&div class=&branch_con&&
&li&&span class=&name&&测试支付信息&/span&&/li&
&p class=&cz_btn&&&a href=&javascript:pay();& class=&btn_1&&立即支付&/a&&/p&
&script type=&text/javascript& src=&../js/zepto.min.js&&&/script&
&script type=&text/javascript& src=&../js/common.js&&&/script&
&script type=&text/javascript&&
var appId = urlparameter(&appId&);
var timeStamp = urlparameter(&timeStamp&);
var nonceStr = urlparameter(&nonceStr&);
var pg = urlparameter(&pg&);
var signType = urlparameter(&signType&);
var paySign = urlparameter(&paySign&);
function onBridgeReady(){
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
&appId& : appId,
//公众号名称，由商户传入
&timeStamp&: timeStamp,
//时间戳，自1970年以来的秒数
&nonceStr& : nonceStr, //随机串
&package& : &prepay_id=& + pg,
&signType& : signType,
//微信签名方式:
&paySign& : paySign
//微信签名
function(res){
if(res.err_msg == &get_brand_wcpay_request:ok& ) {
alert(&支付成功&);
// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回
ok，但并不保证它绝对可靠。
function pay(){
if (typeof WeixinJSBridge == &undefined&){
if( document.addEventListener ){
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
}else if (document.attachEvent){
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
onBridgeReady();
12345678910
12345678910
12345678910 上一篇：下一篇：文章评论相关解决方案 12345678910 Copyright & &&版权所有主题帖子积分
微信JS SDK 分享到朋友圈 分享给朋友 分享到QQ 拍照或从手机相册中选图 识别音频并返回识别结果 使用微信内置地图查看位置
一、JS部分
wx.ready(function () {
&&// 1 判断当前版本是否支持指定 JS 接口，支持批量判断
&&document.querySelector('#checkJsApi').onclick = function () {
& & wx.checkJsApi({
& && &jsApiList: [
& && &&&'getNetworkType',
& && &&&'previewImage'
& && &],
& && &success: function (res) {
& && &&&alert(JSON.stringify(res));
& && &}
& & });
&&};
&&// 2. 分享接口
&&// 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
&&document.querySelector('#onMenuShareAppMessage').onclick = function () {
& & wx.onMenuShareAppMessage({
& && &title: '移动互联网交流学习',
& && &desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
& && &link: '/',
& && &imgUrl: '/data/attachment/forum//ll77cl5p86p0o.jpg',
& && &trigger: function (res) {
& && &&&alert('用户点击发送给朋友');
& && &},
& && &success: function (res) {
& && &&&alert('已分享');
& && &},
& && &cancel: function (res) {
& && &&&alert('已取消');
& && &},
& && &fail: function (res) {
& && &&&alert(JSON.stringify(res));
& && &}
& & });
& & alert('已注册获取“发送给朋友”状态事件');
&&};
&&// 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
&&document.querySelector('#onMenuShareTimeline').onclick = function () {
& & wx.onMenuShareTimeline({
& && &title: '移动互联网交流学习',
& && &link: '/',
& && &imgUrl: '/data/attachment/forum//ll77cl5p86p0o.jpg',
& && &trigger: function (res) {
& && &&&alert('用户点击分享到朋友圈');
& && &},
& && &success: function (res) {
& && &&&alert('已分享');
& && &},
& && &cancel: function (res) {
& && &&&alert('已取消');
& && &},
& && &fail: function (res) {
& && &&&alert(JSON.stringify(res));
& && &}
& & });
& & alert('已注册获取“分享到朋友圈”状态事件');
&&};
&&// 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
&&document.querySelector('#onMenuShareQQ').onclick = function () {
& & wx.onMenuShareQQ({
& && &title: '移动互联网交流学习',
& && &desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
& && &link: '/',
& && &imgUrl: '/data/attachment/forum//ll77cl5p86p0o.jpg',
& && &trigger: function (res) {
& && &&&alert('用户点击分享到QQ');
& && &},
& && &complete: function (res) {
& && &&&alert(JSON.stringify(res));
& && &},
& && &success: function (res) {
& && &&&alert('已分享');
& && &},
& && &cancel: function (res) {
& && &&&alert('已取消');
& && &},
& && &fail: function (res) {
& && &&&alert(JSON.stringify(res));
& && &}
& & });
& & alert('已注册获取“分享到 QQ”状态事件');
&&};
&&
&&// 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
&&document.querySelector('#onMenuShareWeibo').onclick = function () {
& & wx.onMenuShareWeibo({
& && &title: '移动互联网交流学习',
& && &desc: '在长大的过程中，我才慢慢发现，我身边的所有事，别人跟我说的所有事，那些所谓本来如此，注定如此的事，它们其实没有非得如此，事情是可以改变的。更重要的是，有些事既然错了，那就该做出改变。',
& && &link: '/',
& && &imgUrl: '/data/attachment/forum//ll77cl5p86p0o.jpg',
& && &trigger: function (res) {
& && &&&alert('用户点击分享到微博');
& && &},
& && &complete: function (res) {
& && &&&alert(JSON.stringify(res));
& && &},
& && &success: function (res) {
& && &&&alert('已分享');
& && &},
& && &cancel: function (res) {
& && &&&alert('已取消');
& && &},
& && &fail: function (res) {
& && &&&alert(JSON.stringify(res));
& && &}
& & });
& & alert('已注册获取“分享到微博”状态事件');
&&};
&&// 3 智能接口
&&var voice = {
& & localId: '',
& & serverId: ''
&&};
&&// 3.1 识别音频并返回识别结果
&&document.querySelector('#translateVoice').onclick = function () {
& & if (voice.localId == '') {
& && &alert('请先使用 startRecord 接口录制一段声音');
& && &
& & }
& & wx.translateVoice({
& && &localId: voice.localId,
& && &complete: function (res) {
& && &&&if (res.hasOwnProperty('translateResult')) {
& && && & alert('识别结果：' + res.translateResult);
& && &&&} else {
& && && & alert('无法识别');
& && &&&}
& && &}
& & });
&&};
&&// 4 音频接口
&&// 4.2 开始录音
&&document.querySelector('#startRecord').onclick = function () {
& & wx.startRecord({
& && &cancel: function () {
& && &&&alert('用户拒绝授权录音');
& && &}
& & });
&&};
&&// 4.3 停止录音
&&document.querySelector('#stopRecord').onclick = function () {
& & wx.stopRecord({
& && &success: function (res) {
& && &&&voice.localId = res.localId;
& && &},
& && &fail: function (res) {
& && &&&alert(JSON.stringify(res));
& && &}
& & });
&&};
&&// 4.4 监听录音自动停止
&&wx.onVoiceRecordEnd({
& & complete: function (res) {
& && &voice.localId = res.localId;
& && &alert('录音时间已超过一分钟');
& & }
&&});
&&// 4.5 播放音频
&&document.querySelector('#playVoice').onclick = function () {
& & if (voice.localId == '') {
& && &alert('请先使用 startRecord 接口录制一段声音');
& && &
& & }
& & wx.playVoice({
& && &localId: voice.localId
& & });
&&};
&&// 4.6 暂停播放音频
&&document.querySelector('#pauseVoice').onclick = function () {
& & wx.pauseVoice({
& && &localId: voice.localId
& & });
&&};
&&// 4.7 停止播放音频
&&document.querySelector('#stopVoice').onclick = function () {
& & wx.stopVoice({
& && &localId: voice.localId
& & });
&&};
&&// 4.8 监听录音播放停止
&&wx.onVoicePlayEnd({
& & complete: function (res) {
& && &alert('录音（' + res.localId + '）播放结束');
& & }
&&});
&&// 4.8 上传语音
&&document.querySelector('#uploadVoice').onclick = function () {
& & if (voice.localId == '') {
& && &alert('请先使用 startRecord 接口录制一段声音');
& && &
& & }
& & wx.uploadVoice({
& && &localId: voice.localId,
& && &success: function (res) {
& && &&&alert('上传语音成功，serverId 为' + res.serverId);
& && &&&voice.serverId = res.serverId;
& && &}
& & });
&&};
&&// 4.9 下载语音
&&document.querySelector('#downloadVoice').onclick = function () {
& & if (voice.serverId == '') {
& && &alert('请先使用 uploadVoice 上传声音');
& && &
& & }
& & wx.downloadVoice({
& && &serverId: voice.serverId,
& && &success: function (res) {
& && &&&alert('下载语音成功，localId 为' + res.localId);
& && &&&voice.localId = res.localId;
& && &}
& & });
&&};
&&// 5 图片接口
&&// 5.1 拍照、本地选图
&&var images = {
& & localId: [],
& & serverId: []
&&};
&&document.querySelector('#chooseImage').onclick = function () {
& & wx.chooseImage({
& && &success: function (res) {
& && &&&images.localId = res.localI
& && &&&alert('已选择 ' + res.localIds.length + ' 张图片');
& && &}
& & });
&&};
&&// 5.2 图片预览
&&document.querySelector('#previewImage').onclick = function () {
& & wx.previewImage({
& && ¤t: '/view/photo/photo/public/p.jpg',
& && &urls: [
& && &&&'/view/photo/photo/public/p.jpg',
& && &&&'/view/photo/photo/public/p.jpg',
& && &&&'/view/photo/photo/public/p.jpg'
& && &]
& & });
&&};
&&// 5.3 上传图片
&&document.querySelector('#uploadImage').onclick = function () {
& & if (images.localId.length == 0) {
& && &alert('请先使用 chooseImage 接口选择图片');
& && &
& & }
& & var i = 0, length = images.localId.
& & images.serverId = [];
& & function upload() {
& && &wx.uploadImage({
& && &&&localId: images.localId[i],
& && &&&success: function (res) {
& && && & i++;
& && && & alert('已上传：' + i + '/' + length);
& && && & images.serverId.push(res.serverId);
& && && & if (i & length) {
& && && && &upload();
& && && & }
& && &&&},
& && &&&fail: function (res) {
& && && & alert(JSON.stringify(res));
& && &&&}
& && &});
& & }
& & upload();
&&};
&&// 5.4 下载图片
&&document.querySelector('#downloadImage').onclick = function () {
& & if (images.serverId.length === 0) {
& && &alert('请先使用 uploadImage 上传图片');
& && &
& & }
& & var i = 0, length = images.serverId.
& & images.localId = [];
& & function download() {
& && &wx.downloadImage({
& && &&&serverId: images.serverId[i],
& && &&&success: function (res) {
& && && & i++;
& && && & alert('已下载：' + i + '/' + length);
& && && & images.localId.push(res.localId);
& && && & if (i & length) {
& && && && &download();
& && && & }
& && &&&}
& && &});
& & }
& & download();
&&};
&&// 6 设备信息接口
&&// 6.1 获取当前网络状态
&&document.querySelector('#getNetworkType').onclick = function () {
& & wx.getNetworkType({
& && &success: function (res) {
& && &&&alert(res.networkType);
& && &},
& && &fail: function (res) {
& && &&&alert(JSON.stringify(res));
& && &}
& & });
&&};
&&// 8 界面操作接口
&&// 8.1 隐藏右上角菜单
&&document.querySelector('#hideOptionMenu').onclick = function () {
& & wx.hideOptionMenu();
&&};
&&// 8.2 显示右上角菜单
&&document.querySelector('#showOptionMenu').onclick = function () {
& & wx.showOptionMenu();
&&};
&&// 8.3 批量隐藏菜单项
&&document.querySelector('#hideMenuItems').onclick = function () {
& & wx.hideMenuItems({
& && &menuList: [
& && &&&'menuItem:readMode', // 阅读模式
& && &&&'menuItem:share:timeline', // 分享到朋友圈
& && &&&'menuItem:copyUrl' // 复制链接
& && &],
& && &success: function (res) {
& && &&&alert('已隐藏“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
& && &},
& && &fail: function (res) {
& && &&&alert(JSON.stringify(res));
& && &}
& & });
&&};
&&// 8.4 批量显示菜单项
&&document.querySelector('#showMenuItems').onclick = function () {
& & wx.showMenuItems({
& && &menuList: [
& && &&&'menuItem:readMode', // 阅读模式
& && &&&'menuItem:share:timeline', // 分享到朋友圈
& && &&&'menuItem:copyUrl' // 复制链接
& && &],
& && &success: function (res) {
& && &&&alert('已显示“阅读模式”，“分享到朋友圈”，“复制链接”等按钮');
& && &},
& && &fail: function (res) {
& && &&&alert(JSON.stringify(res));
& && &}
& & });
&&};
&&// 8.5 隐藏所有非基本菜单项
&&document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {
& & wx.hideAllNonBaseMenuItem({
& && &success: function () {
& && &&&alert('已隐藏所有非基本菜单项');
& && &}
& & });
&&};
&&// 8.6 显示所有被隐藏的非基本菜单项
&&document.querySelector('#showAllNonBaseMenuItem').onclick = function () {
& & wx.showAllNonBaseMenuItem({
& && &success: function () {
& && &&&alert('已显示所有非基本菜单项');
& && &}
& & });
&&};
&&// 8.7 关闭当前窗口
&&document.querySelector('#closeWindow').onclick = function () {
& & wx.closeWindow();
&&};
&&// 9 微信原生接口
&&// 9.1.1 扫描二维码并返回结果
&&document.querySelector('#scanQRCode0').onclick = function () {
& & wx.scanQRCode({
& && &desc: 'scanQRCode desc'
& & });
&&};
&&// 9.1.2 扫描二维码并返回结果
&&document.querySelector('#scanQRCode1').onclick = function () {
& & wx.scanQRCode({
& && &needResult: 1,
& && &desc: 'scanQRCode desc',
& && &success: function (res) {
& && &&&alert(JSON.stringify(res));
& && &}
& & });
&&};
&&// 10 微信支付接口
&&// 10.1 发起一个支付请求
&&document.querySelector('#chooseWXPay').onclick = function () {
& & wx.chooseWXPay({
& && ×tamp: ,
& && &nonceStr: 'noncestr',
& && &package: 'addition=action_id%3dgaby1234%26limit_pay%3d&bank_type=WX&body=innertest&fee_type=1&input_charset=GBK¬ify_url=http%3A%2F%2F120.204.206.246%2Fcgi-bin%2Fmmsupport-bin%2Fnotifypay&out_trade_no=8375338&partner=&spbill_create_ip=127.0.0.1&total_fee=1&sign=432B647FE95C7BF73BCD177CEECBEF8D',
& && &paySign: 'bd5b1933cda6e6a9b52e8c9a2b69'
& & });
&&};
&&// 11.3&&跳转微信商品页
&&document.querySelector('#openProductSpecificView').onclick = function () {
& & wx.openProductSpecificView({
& && &productId: 'pDF3iY0ptap-mIIPYnsM5n8VtCR0'
& & });
&&};
&&// 12 微信卡券接口
&&// 12.1 添加卡券
&&document.querySelector('#addCard').onclick = function () {
& & wx.addCard({
& && &cardList: [
& && &&&{
& && && & cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
& && && & cardExt: '{&code&: &&, &openid&: &&, ×tamp&: &&, &signature&:&64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750&}'
& && &&&},
& && &&&{
& && && & cardId: 'pDF3iY9tv9zCGCj4jTXFOo1DxHdo',
& && && & cardExt: '{&code&: &&, &openid&: &&, ×tamp&: &&, &signature&:&64e6a7cc85c6e84b726f2d1cbef1b36e9b0f9750&}'
& && &&&}
& && &],
& && &success: function (res) {
& && &&&alert('已添加卡券：' + JSON.stringify(res.cardList));
& && &}
& & });
&&};
&&// 12.2 选择卡券
&&document.querySelector('#chooseCard').onclick = function () {
& & wx.chooseCard({
& && &cardSign: '97e9c5e58aab3bdf6fde',
& && ×tamp: ,
& && &nonceStr: 'k0hGdSXKZEj3Min5',
& && &success: function (res) {
& && &&&alert('已选择卡券：' + JSON.stringify(res.cardList));
& && &}
& & });
&&};
&&// 12.3 查看卡券
&&document.querySelector('#openCard').onclick = function () {
& & alert('您没有该公众号的卡券无法打开卡券。');
& & wx.openCard({
& && &cardList: [
& && &]
& & });
&&};
&&var shareData = {
& & title: '方倍工作室 微信JS-SDK DEMO',
& & desc: '微信JS-SDK,帮助第三方为用户提供更优质的移动web服务',
& & link: '/txw1958/',
& & imgUrl: '/mmbiz/icTdbqWNOwNRt8Qia4lv7k3M9J1SKqKCImxJCt7j9rHYicKDI45jRPBxdzdyREWnk0ia0N5TMnMfth7SdxtzMvVgXg/0'
&&};
&&wx.onMenuShareAppMessage(shareData);
&&wx.onMenuShareTimeline(shareData);
});
wx.error(function (res) {
&&alert(res.errMsg);
});复制代码二、HTML调用
&!DOCTYPE html&
&html&
&head&
&&&meta charset=&utf-8&&
&&&title&微信JS-SDK Demo&/title&
&&&meta name=&viewport& content=&width=device-width, initial-scale=1, user-scalable=0&&
&&&link rel=&stylesheet& href=&http://demo.open./jssdk/css/style.css?ts=&&
&/head&
&body ontouchstart=&&&
&div class=&wxapi_container&&
& & &div class=&wxapi_index_container&&
& && &&ul class=&label_box lbox_close wxapi_index_list&&
& && &&&&li class=&label_item wxapi_index_item&&&a class=&label_inner& href=&#menu-basic&&基础接口&/a&&/li&
& && &&&&li class=&label_item wxapi_index_item&&&a class=&label_inner& href=&#menu-share&&分享接口&/a&&/li&
& && &&&&li class=&label_item wxapi_index_item&&&a class=&label_inner& href=&#menu-image&&图像接口&/a&&/li&
& && &&&&li class=&label_item wxapi_index_item&&&a class=&label_inner& href=&#menu-voice&&音频接口&/a&&/li&
& && &&&&li class=&label_item wxapi_index_item&&&a class=&label_inner& href=&#menu-smart&&智能接口&/a&&/li&
& && &&&&li class=&label_item wxapi_index_item&&&a class=&label_inner& href=&#menu-device&&设备信息接口&/a&&/li&
& && &&&&li class=&label_item wxapi_index_item&&&a class=&label_inner& href=&#menu-location&&地理位置接口&/a&&/li&
& && &&&&li class=&label_item wxapi_index_item&&&a class=&label_inner& href=&#menu-webview&&界面操作接口&/a&&/li&
& && &&&&li class=&label_item wxapi_index_item&&&a class=&label_inner& href=&#menu-scan&&微信扫一扫接口&/a&&/li&
& && &&&&li class=&label_item wxapi_index_item&&&a class=&label_inner& href=&#menu-shopping&&微信小店接口&/a&&/li&
& && &&&&li class=&label_item wxapi_index_item&&&a class=&label_inner& href=&#menu-card&&微信卡券接口&/a&&/li&
& && &&&&li class=&label_item wxapi_index_item&&&a class=&label_inner& href=&#menu-pay&&微信支付接口&/a&&/li&
& && &&/ul&
& & &/div&
& & &div class=&lbox_close wxapi_form&&
& && &&h3 id=&menu-basic&&基础接口&/h3&
& && &&span class=&desc&&判断当前客户端是否支持指定JS接口&/span&
& && &&button class=&btn btn_primary& id=&checkJsApi&&checkJsApi&/button&
& && &&h3 id=&menu-share&&分享接口&/h3&
& && &&span class=&desc&&获取“分享到朋友圈”按钮点击状态及自定义分享内容接口&/span&
& && &&button class=&btn btn_primary& id=&onMenuShareTimeline&&onMenuShareTimeline&/button&
& && &&span class=&desc&&获取“分享给朋友”按钮点击状态及自定义分享内容接口&/span&
& && &&button class=&btn btn_primary& id=&onMenuShareAppMessage&&onMenuShareAppMessage&/button&
& && &&span class=&desc&&获取“分享到QQ”按钮点击状态及自定义分享内容接口&/span&
& && &&button class=&btn btn_primary& id=&onMenuShareQQ&&onMenuShareQQ&/button&
& && &&span class=&desc&&获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口&/span&
& && &&button class=&btn btn_primary& id=&onMenuShareWeibo&&onMenuShareWeibo&/button&
& && &&h3 id=&menu-image&&图像接口&/h3&
& && &&span class=&desc&&拍照或从手机相册中选图接口&/span&
& && &&button class=&btn btn_primary& id=&chooseImage&&chooseImage&/button&
& && &&span class=&desc&&预览图片接口&/span&
& && &&button class=&btn btn_primary& id=&previewImage&&previewImage&/button&
& && &&span class=&desc&&上传图片接口&/span&
& && &&button class=&btn btn_primary& id=&uploadImage&&uploadImage&/button&
& && &&span class=&desc&&下载图片接口&/span&
& && &&button class=&btn btn_primary& id=&downloadImage&&downloadImage&/button&
& && &&h3 id=&menu-voice&&音频接口&/h3&
& && &&span class=&desc&&开始录音接口&/span&
& && &&button class=&btn btn_primary& id=&startRecord&&startRecord&/button&
& && &&span class=&desc&&停止录音接口&/span&
& && &&button class=&btn btn_primary& id=&stopRecord&&stopRecord&/button&
& && &&span class=&desc&&播放语音接口&/span&
& && &&button class=&btn btn_primary& id=&playVoice&&playVoice&/button&
& && &&span class=&desc&&暂停播放接口&/span&
& && &&button class=&btn btn_primary& id=&pauseVoice&&pauseVoice&/button&
& && &&span class=&desc&&停止播放接口&/span&
& && &&button class=&btn btn_primary& id=&stopVoice&&stopVoice&/button&
& && &&span class=&desc&&上传语音接口&/span&
& && &&button class=&btn btn_primary& id=&uploadVoice&&uploadVoice&/button&
& && &&span class=&desc&&下载语音接口&/span&
& && &&button class=&btn btn_primary& id=&downloadVoice&&downloadVoice&/button&
& && &&h3 id=&menu-smart&&智能接口&/h3&
& && &&span class=&desc&&识别音频并返回识别结果接口&/span&
& && &&button class=&btn btn_primary& id=&translateVoice&&translateVoice&/button&
& && &&h3 id=&menu-device&&设备信息接口&/h3&
& && &&span class=&desc&&获取网络状态接口&/span&
& && &&button class=&btn btn_primary& id=&getNetworkType&&getNetworkType&/button&
& && &&h3 id=&menu-location&&地理位置接口&/h3&
& && &&span class=&desc&&使用微信内置地图查看位置接口&/span&
& && &&button class=&btn btn_primary& id=&openLocation&&openLocation&/button&
& && &&span class=&desc&&获取地理位置接口&/span&
& && &&button class=&btn btn_primary& id=&getLocation&&getLocation&/button&
& && &&h3 id=&menu-webview&&界面操作接口&/h3&
& && &&span class=&desc&&隐藏右上角菜单接口&/span&
& && &&button class=&btn btn_primary& id=&hideOptionMenu&&hideOptionMenu&/button&
& && &&span class=&desc&&显示右上角菜单接口&/span&
& && &&button class=&btn btn_primary& id=&showOptionMenu&&showOptionMenu&/button&
& && &&span class=&desc&&关闭当前网页窗口接口&/span&
& && &&button class=&btn btn_primary& id=&closeWindow&&closeWindow&/button&
& && &&span class=&desc&&批量隐藏功能按钮接口&/span&
& && &&button class=&btn btn_primary& id=&hideMenuItems&&hideMenuItems&/button&
& && &&span class=&desc&&批量显示功能按钮接口&/span&
& && &&button class=&btn btn_primary& id=&showMenuItems&&showMenuItems&/button&
& && &&span class=&desc&&隐藏所有非基础按钮接口&/span&
& && &&button class=&btn btn_primary& id=&hideAllNonBaseMenuItem&&hideAllNonBaseMenuItem&/button&
& && &&span class=&desc&&显示所有功能按钮接口&/span&
& && &&button class=&btn btn_primary& id=&showAllNonBaseMenuItem&&showAllNonBaseMenuItem&/button&
& && &&h3 id=&menu-scan&&微信扫一扫&/h3&
& && &&span class=&desc&&调起微信扫一扫接口&/span&
& && &&button class=&btn btn_primary& id=&scanQRCode0&&scanQRCode(微信处理结果)&/button&
& && &&button class=&btn btn_primary& id=&scanQRCode1&&scanQRCode(直接返回结果)&/button&
& && &&h3 id=&menu-shopping&&微信小店接口&/h3&
& && &&span class=&desc&&跳转微信商品页接口&/span&
& && &&button class=&btn btn_primary& id=&openProductSpecificView&&openProductSpecificView&/button&
& && &&h3 id=&menu-card&&微信卡券接口&/h3&
& && &&span class=&desc&&批量添加卡券接口&/span&
& && &&button class=&btn btn_primary& id=&addCard&&addCard&/button&
& && &&span class=&desc&&调起适用于门店的卡券列表并获取用户选择列表&/span&
& && &&button class=&btn btn_primary& id=&chooseCard&&chooseCard&/button&
& && &&span class=&desc&&查看微信卡包中的卡券接口&/span&
& && &&button class=&btn btn_primary& id=&openCard&&openCard&/button&
& && &&h3 id=&menu-pay&&微信支付接口&/h3&
& && &&span class=&desc&&发起一个微信支付请求&/span&
& && &&button class=&btn btn_primary& id=&chooseWXPay&&chooseWXPay&/button&
& & &/div&
&&&/div&
&/body&
&script src=&http://res./open/js/jweixin-1.0.0.js&& &/script&
&script&
&&wx.config({
& && &debug: false,
& && &appId: 'wxf8b4f85f3a794e77',
& && ×tamp: ,
& && &nonceStr: '2nDgiWM7gCxhL8v0',
& && &signature: '1f8a91fc8bb4e2a818fe54b2ce7687',
& && &jsApiList: [
& && &&&'checkJsApi',
& && &&&'onMenuShareTimeline',
& && &&&'onMenuShareAppMessage',
& && &&&'onMenuShareQQ',
& && &&&'onMenuShareWeibo',
& && &&&'hideMenuItems',
& && &&&'showMenuItems',
& && &&&'hideAllNonBaseMenuItem',
& && &&&'showAllNonBaseMenuItem',
& && &&&'translateVoice',
& && &&&'startRecord',
& && &&&'stopRecord',
& && &&&'onRecordEnd',
& && &&&'playVoice',
& && &&&'pauseVoice',
& && &&&'stopVoice',
& && &&&'uploadVoice',
& && &&&'downloadVoice',
& && &&&'chooseImage',
& && &&&'previewImage',
& && &&&'uploadImage',
& && &&&'downloadImage',
& && &&&'getNetworkType',
& && &&&'openLocation',
& && &&&'getLocation',
& && &&&'hideOptionMenu',
& && &&&'showOptionMenu',
& && &&&'closeWindow',
& && &&&'scanQRCode',
& && &&&'chooseWXPay',
& && &&&'openProductSpecificView',
& && &&&'addCard',
& && &&&'chooseCard',
& && &&&'openCard'
& && &]
&&});
&/script&
&script src=&http://demo.open./jssdk/js/api-6.1.js?ts=&& &/script&
&/html&复制代码
觉得不错？打赏一下吧！1元不嫌少，10元不嫌多！
微信投票,微信公众账号快速吸粉神器！新版微信分享设置教程（集成微信官方JS-sdk域名在微信中打不开怎么办？微信公众账号认证和不认证有什么区别？芬兰可以娶几个老婆,芬兰可以有几个妻子？
12345678910
