前后端进行分开开发:

1:后端实现获取

  +++接口凭证:access_token (公众号的全局唯一接口调用凭据)

    ** GET 获取:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET

  +++接口票据:jsapi_ticket ( JS-SDK 配置签名票据)

    ** GET获取:https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi

2:进行字典URL键值对的格式排序(即key1=value1&key2=value2…)拼接成字符串

(微信配置签名以)

详情:#附录1-JS-SDK使用权限签名算法 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

后端实现了签名配置,前端调用后端提供的接口即可

注意:打开是在自己服务号配置好的域名形式打开:如 http://buy.shopline.com//html/index.html

在微信开发工具或是微信上,打开 便会提示 配置具体是否成功信息!

config:ok即表示完成配置,就可以调用 JS-SDK了,实现自己具体的想要的JS-SDK提供的接口!

/js/wxconfig.js

    //配置 wx.config
//这一步配置成功的 $.ajax({
url: '/config',
type: 'GET',
//必须进行 url 编码
////////////////////
data: {
url: location.href.split('#')[0]//@todo 重要:后台需要获取签名使用
},
dataType: 'json',
success: function (res) {
wx.config({
beta: true,
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: res.appid, // 必填,公众号的唯一标识 wx4943f6480a79a436
timestamp: res.timestamp, // 必填,生成签名的时间戳
nonceStr: res.nonceStr, // 必填,生成签名的随机串
signature: res.signature,// 必填,签名,见附录1
jsApiList: ['chooseInvoice', 'chooseCard'] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
}
})

//index.html

<script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script src="/js/wxconfig.js"></script>
<script>
wx.ready(function () {
//此处配置完成,根据自己需求进行接口是否配置完成调用
//wx.ready 如 document.ready
});
</script>

只要这一步,成功了!下面干正事......

调用微信JS-SDK配置签名的更多相关文章

  1. 微信JS SDK配置授权,实现分享接口

    微信开放的JS-SDK面向网页开发者提供了基于微信内的网页开发工具包,最直接的好处就是我们可以使用微信分享.扫一扫.卡券.支付等微信特有的能力.7月份的时候,因为这个分享的证书获取问题深深的栽了一坑, ...

  2. 调用微信js sdk

    场景:需要调用微信获取当前位置的借口. 途径:查看微信 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 .后 ...

  3. 微信JS SDK接入的几点注意事项

    微信JS SDK接入,主要可以先参考官网说明文档,总结起来有几个步骤: 1.绑定域名:先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”.备注:登录后可在“开发者中心”查看对 ...

  4. 实战微信JS SDK开发:贺卡制作与播放(1)

    前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细 ...

  5. 微信js sdk上传多张图片

    微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="111111111111 ...

  6. 微信JS SDK使用权限签名算法

    jsapi_ticket 生成签名之前必须先了解一下jsapi_ticket,jsapi_ticket是公众号用于调用微信JS接口的临时票据.正常情况下,jsapi_ticket的有效期为7200秒, ...

  7. 微信js SDK接口

    微信JS-SDK说明文档 http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 一.微信登录功能 在进行微信OAut ...

  8. 微信js sdk分享开发摘记java版

    绑定域名和引入js的就不说了 废话不说直接上代码 public void share(HttpServletRequest request) throws Exception { StringBuff ...

  9. 关于微信JS SDK接口wx.previewImage预览接口的使用

    然后后之前的项目,突然往微信上迁移了,一些微信的接口没怎么用过,比较陌生,这次的功能是想调用微信的接口,实现图片放大的功能, 就找到官方文档:http://qydev.weixin.qq.com/wi ...

  10. 微信支付配置信息,JSAPI接口,H5调用微信js接口支付,微信公众号支付

    微信支付已经做完了,没接触过微信的我,经历了非常艰难的3天,才把微信支付给做出来,对于专业的人来说,估计就是一小时就搞定的事情了,虽然说做了很长时间,但是确实也学到东西了,也收获了不少,下面跟大家分享 ...

随机推荐

  1. DVD租赁系统

    跟着网上的视频学的,还有个别地方写的不够好,主要学习dao模式,这里其中的BaseUtil类不错 DVD.java package com.dvd.entiy; public class DVD { ...

  2. 'react-scripts' is not recognized as an internal or external command

    React项目在执行npm start的时候报下面的错误: 解决办法:把项目目录中node_modules文件夹删掉,重新npm install一下,然后再执行npm start

  3. MongoDB的客户端管理工具--nosqlbooster 连接MongoDB服务器

    nosqlbooster的官网地址为https://nosqlbooster.com.大家如果想直接下载,可以登入下载网址https://nosqlbooster.com/downloads. 下载w ...

  4. darknet的安装及报错解决

    darknet 是YOLO网络的一个框架,安装见官网:https://pjreddie.com/darknet/ 跟着步骤就可以安装好了. 由于官网是全英文的,所以本文根据官网进行中文释义. 本人在按 ...

  5. AlertWindowManager 弹出提示窗口使用帮助(上)

    LookAndFeel(界面外观): NativeStyle:本地化界面为真实用系统内置外观 SkinName:本地化界面(NativeStyle:)设置为假可使用皮肤外观 OptionAnimate ...

  6. vue/cli3 配置vux

    安装各插件 试过 安装“必须安装”的部分亦可 1.安装vuex npm install vuex --save-dev 2.在项目里面安装vux[必须安装] npm install vux --sav ...

  7. spring boot 的使用

    一:首先安装spring boot插件 两种方式安装, 1:使用myeclipse自带的安装插件的功能 help>  install from catalog> 将出现下面的界面,搜寻sp ...

  8. [js]顶部导航和内容区布局

    自己实现顶部导航布局--内容显示 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...

  9. MongoDB--运行环境

    版本 a.b.c  a大版本  b中版本分奇数偶数 奇数是开发版 偶数是稳定版 c小版本 ssh工具:远程Linux机器.在windows下使用 Linux 下使用vim     windows下使用 ...

  10. come on! linux install JDK9.0.1

    哈哈,JDK9已经出来了 我们把它安装到Linux上吧! 一下载JDK9 http://www.oracle.com/technetwork/java/javase/downloads/index.h ...