微信SDK的使用经验

最新推荐文章于 2023-06-29 14:02:13 发布
最新推荐文章于 2023-06-29 14:02:13 发布
阅读量333 收藏
点赞数
原文链接：https://my.oschina.net/u/3026585/blog/888559
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

一、使用前的准备工作

步骤一：绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。

备注：登录后可在“开发者中心”查看对应的接口权限。

步骤二：引入js文件

在需要调用接口的页面引用：http://res.wx.qq.com/open/js/jweixin-1.0.0.js

需要注意的地方：如果页面启用了https，务必引入： https://res.wx.qq.com/open/js/jweixin-1.0.0.js 

步骤三：通过config接口注入权限验证配置
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，公众号的唯一标识
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表
});
步骤四：通过ready接口处理成功验证
wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
步骤五：通过error接口处理失败验证
wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

二、在项目中的配置说明

1、绑定域名

    绑定域名是项目负责人去弄的事情，我写代码时，用的是一个测试域名，是同事帮我用ngrok工具配置的，也可以在买，应该有很多方法吧。

        测试功能时，需要在这个网站配置相关信息：

        http://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

        进入上面的网址，用微信扫码登录，会得到下面的信息：

        微信号："......"  、appID："......."

        将测试域名填入这个页面的“JS接口安全域名”，即可进行测试，测试使用“微信web开发者工具”

2、引入JS文件

require(['http://res.wx.qq.com/open/js/jweixin-1.2.0.js'],function(wx){
  //开始你的代码
})

3、通过config接口注入权限验证配置

    在我参与的项目中，是后台同事配置的，然后提供一个接口，调用这个接口即可拿到这些数据进行配置，接口文档如下：

获取微信JS-SDK中TicketToken以及签名信息

POST /api/weixin/getTicketToken

参数：

1. ghId, ##公众号原始ID
2. url, ##需要调用js-sdk的页面地址，是全地址，包括http

example:

参数：

{
"param":{
  "ghId":"gh_c4e032e50bcc",
  "url":"http://adminte.xiaoyinghui.cn/index.html?param=aaa"
 }
}
返回：

{
    "msg":"查询成功",
    "code":"0",
    "data":{       
        "appId":"wxdc97aac88c438930",
        "timestamp":"1481629113",
        "nonceStr":"af98eb9a-1969-4306-984c-0df9d597449f",
        "signature":"cbd8ea61d00f8fd2d31d0b1e32750340c321d1b2"
    }
}
返回data中的参数说明

 appId: '', // 公众号的唯一标识
 timestamp: , // 生成签名的时间戳
 nonceStr: '', // 生成签名的随机串
 signature: '',// 签名，

    案例代码：

var sendData = {
  "param": JSON.stringify({
    "ghId": "", //公众号原始ID，微信号
    "url": window.location.href //页面全地址
   })
};
ece.post(ece.url.user.register.checkWxConfig, sendData).suc(function (result) {
  if(0 == result.code){
    wx.config({
      debug: false,
      appId: result.data.appId,
      timestamp: result.data.timestamp,
      nonceStr: result.data.nonceStr,
      signature: result.data.signature,
      jsApiList:[
        'getLocation', //获取地理位置接口
        'chooseImage', //拍照或从手机相册中选图接口
        'uploadImage', //上传图片接口
        'chooseWXPay' //发起支付请求接口
        'scanQRCode', //调起微信扫一扫接口
      ]
    });
  }
}).err(function (result) {

});

三、在实际项目中用到的点

1、定位

    获取地理位置接口：

wx.getLocation({
    type: 'wgs84', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
    success: function (res) {
        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
        var speed = res.speed; // 速度，以米/每秒计
        var accuracy = res.accuracy; // 位置精度
    }
});

    说明：调用微信SDK定位，获取到的只是当前位置的经度和维度等信息，我们需要将它换算成城市的信息。在这里，我调用了后台提供的接口，传入经度和纬度等参数到后台，会返回对应的省、城市名称给我：

wx.ready(function () {
  $(".add-msg").on("touch click",function () { //点击按钮调用，获取当前位置信息
    wx.getLocation({
      type: 'wgs84',
      success: function (res) {
        var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
        var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
        var speed = res.speed; // 速度，以米/每秒计
        var accuracy = res.accuracy; // 位置精度
        
        //调用接口，将经纬度换算成城市
        ece.get(ece.url.user.register.getLocation.replace(":x",latitude).replace(":y",longitude))
        .suc(function (result) {
          if(0 == result.code){
            $(".add-msg").text(result.data.province + result.data.city);   
          }else{
            console.log(result.msg);
          }
         }).err(function () {
           console.log("服务器异常");
         })
      },
      cancel: function (res) {
        console.log('用户拒绝授权获取地理位置');
      },
      fail: function (res) {  //定位失败
        alert("请检查是否已开启GPS服务");
      }
    });
  });
});
2、拍照/上传照片

    拍照或从手机相册中选图接口：

wx.chooseImage({
    count: 1, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
    success: function (res) {
        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
    }
});

    上传图片接口：

wx.uploadImage({
    localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得
    isShowProgressTips: 1, // 默认为1，显示进度提示
    success: function (res) {
        var serverId = res.serverId; // 返回图片的服务器端ID
    }
});

    在这里，我是先调起拍照功能或从手机相册选择照片，再将照片上传到服务器，再从服务器中拿：        

wx.ready(function(){
  $(".camera").on("touch click", function () { //点击拍照
    wx.chooseImage({
      count: 1,
      sourceType: ['camera'],
      success: function (res) {
        //上传图片接口
        wx.uploadImage({
          localId: res.localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
          isShowProgressTips: 1, // 默认为1，显示进度提示
          success: function (res) {
            var serverId = res.serverId; // 返回图片的服务器端ID
            ece.get(ece.url.common.upImgToFileHost + '/' + serverId).suc(function(res){
              if('0' === res.code){
                $(".vipimg").attr("src", ece.url.common.getFile + '/' + res.data);
              }
            });
            //为避免时间太久，可以先将选择好的图片赋值到指定位置
            $(".vipimg").attr("src", res.localIds);
          }
        });
      }
    });
  });
  $(".chooseimg").on("touch click", function () { //点击添加图片
    wx.chooseImage({
      count: 1,
      sourceType: ['album'],
      success: function (res) {
        //上传图片接口
        wx.uploadImage({
          localId: res.localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
          isShowProgressTips: 1, // 默认为1，显示进度提示
          success: function (res) {
            var serverId = res.serverId; // 返回图片的服务器端ID
            ece.get(ece.url.common.upImgToFileHost + '/' + serverId).suc(function(res){
              if('0' === res.code){
                $(".vipimg").attr("src", ece.url.common.getFile + '/' + res.data);
              }
            });
            //为避免时间太久，可以先将选择好的图片赋值到指定位置
            $(".vipimg").attr("src", res.localIds);  
          }
        });
      }
    });
  });
})
3、微信支付

    参考文档：https://pay.weixin.qq.com/wiki/doc/api/index.html

WeixinJSBridge.invoke(
  'getBrandWCPayRequest', {
   "appId":"wx2421b1c4370ec43b",     //公众号名称，由商户传入     
   "timeStamp":"1395712654",         //时间戳，自1970年以来的秒数     
   "nonceStr":"e61463f8efa94090b1f366cccfbbb444", //随机串     
   "package":"prepay_id=u802345jgfjsdfgsdg888",     
   "signType":"MD5",         //微信签名方式：     
      "paySign":"70EA570631E4BB79628FBCA90534C63FF7FADD89" //微信签名 
   },
   function(res){     
     if(res.err_msg == "get_brand_wcpay_request:ok" ) {
       //支付成功后的操作
     }else if(res.err.msg == "get_brand_wcpay_request:cancel"){
       //支付取消后的操作
     }else if(res.err.msg == "get_brand_wcpay_request:cancel"){
       //支付失败后的操作
     }     
  }
);

    在我参与的项目中，appId、timeStamp、nonceStr、package、signType是通过调用后台提供的接口获取到的：

    一定要注意中文的冒号：和英文的冒号:   ！！！

var sendData = {
  "param":JSON.stringify({
  "product_id": payValue.productId,
  "sku_item_id": payValue.skuId,
  "sku_item_num": $(".num").val(),
  "is_account": acc,
  "children_info": jsonObj
  })
}
//调用接口，获取需要的数据
ece.post(ece.url.course.detail.putOrder, sendData).suc(function (result) {
  if("0" === result.code){
    WeixinJSBridge.invoke(
	  'getBrandWCPayRequest',{
	    appId: result.data.appId, //公众号名称，由商户传入
		timeStamp: result.data.timeStamp, //时间戳，自1970年以来的秒数
		nonceStr: result.data.nonceStr, //随机串
		package: result.data.package,
		signType: result.data.signType, //微信签名方式：
		paySign: result.data.paySign //微信签名
	  },
	  function(res){
	    if(res.err_msg == "get_brand_wcpay_request:ok" ) {
		  //支付成功后的处理					
        }
	  }
    );
  }
})
4、微信扫一扫

    调起微信扫一扫接口：

wx.scanQRCode({
    needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
    scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
    success: function (res) {
    var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
}
});

    在我参与的项目中，扫码成功后直接跳转到结果页面：

wx.ready(function () {
  //点击调起扫一扫
  $(".scanbtn").on("touch click",function () {
    wx.scanQRCode({
      needResult: 0, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
      scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
      success: function (res) {
        var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
      }
    });
  });
});

 

参考资料：

微信公众平台开发者文档： https://mp.weixin.qq.com/wiki/home/

微信支付开发文档：https://pay.weixin.qq.com/wiki/doc/api/index.html

 

额外补充：如何使用js设置或获取当前页面的地址

window.location.hash设置或获取 href 属性中在井号“#”后面的分段
window.location.host设置或获取 location 或 URL 的 hostname 和 port 号码
window.location.hostname设置或获取 location 或 URL 的主机名称部分
window.location.href设置或获取整个 URL 为字符串
window.location.pathname设置或获取对象指定的文件名或路径
window.location.port设置或获取与 URL 关联的端口号码
window.location.protocol设置或获取 URL 的协议部分
window.location.search设置或获取 href 属性中跟在问号后面的部分

转载于:https://my.oschina.net/u/3026585/blog/888559

weixin_34270606
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信sdk的使用
肖肖肖丽珠的博客
07-05 540
//写一个init的函数来获取微信配置信息。apis里面是jS接口列表。back是接口用wx.接口名。对应api里面的接口。使用wxapi的时候都调用一次 var init = function (apis, back) {     api("WechatShare/share", { url: (location + '').replace(/#.+/, "") },10).then(db
微信支付SDK使用总结
m0_55958115的博客
06-25 3461
微信支付SDK使用总结总结统一下单接口调用 微信支付sdk下载地址： 微信支付sdk配置参数有些参数需要手动填写，有些参数会自动将配置文件中的数据填充，害怕后期遗忘，所以记录下来。 统一下单接口调用 使用流程： 其中第2步：申请预订单、第5步：调起支付和第7步：返回回调结果 都是向微信服务器发生请求，微信支付文档提供的参数列表如下： 第2步申请预支付：必须携带参数有： 其中需要手动设置的参数有： $config=new \WxPayConfig(); //初始化预订单类 $wxOrderData=n
下载微信SDK为例，教你在Unity中下载SDK文件(jar/aar)以及对应的依赖库 (使用Play Services Resolver | unity-jar-resolver)
linxinfa的专栏
05-20 3347
你是否在为Unity如何下载SDK的jar或aar文件而苦恼，今天我来解救你。
微信开发相关：使用微信 JS-SDK 接口
最新发布
runsong911的博客
06-29 7859
通过微信 JS-SDK 接口，可以在自己写的 JS 程序中使用很多微信的功能。例如微信里的卡片式链接、拍照上传下载图片、录制播放上传下载音频、获取地理位置、使用摇一摇、扫一扫、微信支付等功能。
下载微信支付sdk的两个方法
chouchilei5210的博客
06-06 503
1.https://mp.weixin.qq.com/paymch/readtemplate?t=mp/business/course3_tmpl&lang=zh_CN 这个是要进入公众平台才能下载的，并且只有php版本的，但是比较轻量化： 第一步：进入公众号，找到“微信支付接口”...
2021年最新微信JS-SDK的使用
码蝗的博客
03-08 1417
微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包。 通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。 微信JS-SDK使用步骤如下: 步骤一：绑定域名 登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。在设置安全域名时，根据注意事项的提示，将下载的文件上传到服务器的根目录下。 注意：如果需要支付功能，还要
H5项目中使用微信JS-SDK（以H5项目批量上传图片为例，兼容IOS及安卓）
前端小白成长记
02-24 5748
H5项目中使用微信JS-SDK（以H5项目批量上传图片为例，兼容IOS及安卓）
企业微信SDK包PHP扩展
03-01
企业微信SDK包PHP扩展是专为开发者设计的工具，用于帮助他们在PHP环境中更方便地集成和使用企业微信的API功能。这个扩展名为“Wxwork”，它提供了丰富的类库和函数，使得开发者能够轻松实现与企业微信接口的交互，如...
C# 版微信 SDK，封装全部已知的微信 API.zip
05-03
可能是目前全网最完整的 C# 版微信 SDK，封装全部已知的微信 API，支持公众平台（订阅号、服务号、小程序、小游戏、小商店）& 开放平台 & 商户平台（微信支付）& 企业微信（企业号）& 广告平台（广点通）& 对话开放...
微信sdk开发
01-18
微信开发sdk,快速开发。。。。。。。。。。。。。。。。。。。。
微信支付最新sdk
02-27
微信支付最新iOS sdk下载,包含libWeChatSDK.a,README.txt,WechatAuthSDK.h,WXApi.h,WXApiObject.h
微信官网sdk及依赖的jar
03-30
微信官网sdk+源码,及它依赖的jar, 微信，是一个生活方式 超过十亿人使用的手机应用, 这个sdk,是官方最新版权. 本人已打成jar且附加源码,方便大家开发微信的支付功能,及学习源码. 绝对好用!
微信sdkdemo
10-21
状态0成功1没有此登录用户，请通过注册码登录2登录失败，请通过注册码登录3登录失败，注册码无效，请重新输入注册码4登录失败，其他原因
获取微信公众号config接口注入权限验证的签名
04-10
vue.js引入jssha后，用于获取微信公众号config接口注入权限验证的签名代码，官网下载的签名，本人无法使用，经过修改可用。
微信支付SDK
10-07
最新的微信支付sdk,欢迎下载。对于的支付宝来说也是类似的。
微信sdk在uniapp中下载引入
04-25
微信sdk，1.6.0
企业微信开发.net版[盛派微信SDK]
04-30
Senparc.Weixin SDK 是目前使用率最高的微信 .NET SDK，也是国内最受欢迎的 .NET 开源项目之一。 目前 Senparc.Weixin 已经支持几乎所有微信平台模块和接口，同时支持 .NET 3.5 / 4.0 / 4.5 / .NET Core 1.1 / .NET...
微信小程序SDK使用实例
cybozu的博客
09-21 3262
大家在做移动端应用开发的时候都会不满足于APP客户端，小程序的应用也越来越广泛了。 今天我们来介绍一套kintone在微信小程序上的SDK。基于这个SDK大家就可以做适用于自己的微信小程序了。
微信云linux sdk下载,02.微信SDK下载及安装
weixin_36296325的博客
05-25 311
## **下载并载入SDK到项目中**## **方法`A`**使用[Composer](https://getcomposer.org/)下载安装，`SDK`符合`PSR`标准\*\*(推荐)\*\*。> 1. 用`composer`来下载安装`SDK`，需要确定框架会不会自动加载`vendor/autoload.php`文件> 2. 如果框架不能自动`vendor/autoloa...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值