步骤一:绑定域名

先登录微信公众平台进入”公众号设置“的”功能设置“里填写”JS接口安全域名“。(登录后可在”开发者中心“查看对应的接口权限。)

1、打开微信公众平台,

2、找到【公众号设置】,

3、点击【功能设置】,

4、找到【JS接口安全域名】,点击旁边的【设置】。

5、点击下载文件,然后上传服务器。如果在修改业务域名的时候已经上传过这个文件了,就跳过这步操作。

6、在下面,输入要修改的域名,点击【保存】即可

步骤二:引入JS文件

在需要条用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.4.0.js

如需进一步提升服务稳定性,当上述资源不可访问时,可访问:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js(支持https)。

步骤三:通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用。

wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名
jsApiList: [] // 必填,需要使用的JS接口列表
});

步骤四:通过ready接口处理成功验证

wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,
则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});

步骤五:通过error接口处理失败验证

wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,
对于SPA可以在这里更新签名。
});

获取微信签名:

this.getSignAction = function (openId,doAction) {
var urlAdd = $location.absUrl().split('#')[0];
var data = {
"openid": openId ? openId : "123456",
"url": urlAdd
};
this.getJson({
"url": "wxgetSign",
"data": {"data": data}
}).then(function (success) {
if (success.success) {
var data = success.obj;
if (data) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: APPID, //公众号唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: [
"chooseWXPay",
"hideMenuItems",
"onMenuShareTimeline",
"onMenuShareAppMessage"
]// 必填,需要使用的JS接口列表
});
wx.error(function(res){
console.log(res);
});
wx.ready(function(){
wx.checkJsApi({
jsApiList: ['chooseWXPay', "hideMenuItems","onMenuShareTimeline","onMenuShareAppMessage"],
success: res => {
const {chooseWXPay} = res.checkResult;
console.log('checked api:', res)
},
fail: err => {
console.log('check api fail:', err)
}
});
doAction&&typeof doAction ==="function"&&doAction();
});
} else {
// $scope.alertHint("获取签名数据为空", data)
}
return;
}
// $scope.alertHint(success.msg);
});
};

JSSDK的使用

链接:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

微信JSSDK的使用步骤的更多相关文章

  1. C#微信开发-微信JS-SDK(1)之通过config接口注入权限验证配置

    官方文档是微信JS-SDK的使用步骤http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#JSSDK.E4.BD.B ...

  2. .Net微信网页开发之使用微信JS-SDK自定义微信分享内容

    第一步.微信JS-SDK的使用步骤,配置信息的生成获取讲解: 关于JS-SDK的使用步骤和timestamp(时间戳),nonceStr(随机串),signature(签名),access_token ...

  3. .Net微信网页开发之使用微信JS-SDK调用微信扫一扫功能

    前言: 之前有个项目需要调用微信扫描二维码的功能,通过调用微信扫码二维码功能,然后去获取到系统中生成的二维码信息.正好微信JS-SDK提供了调用微信扫一扫的功能接口,下面让我们来看看是如何实现的吧. ...

  4. Net微信网页开发之使用微信JS-SDK获取当前地理位置

    前言: 前段时间有一个关于通过获取用户当前经纬度坐标,计算出该用户距离某指定地点之间的距离.因为做这个项目需要能够获取到比较精确的经纬度坐标,刚开始使用的是百度地图结果发现百度地图地位不太准确(有时候 ...

  5. 微信JS-SDK使用步骤(以微信扫一扫为例)

    概述: 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用 ...

  6. C#开发微信门户及应用(39)--使用微信JSSDK实现签到的功能

    随着微信开逐步开放更多JSSDK的接口,我们可以利用自定义网页的方式来调用更多微信的接口,实现我们更加丰富的界面功能和效果,例如我们可以在页面中调用各种手机的硬件来获取信息,如摄像头拍照,GPS信息. ...

  7. 微信JS-SDK坐标位置转换为百度地图坐标

    微信JS-SDK开发过程中,使用getLocation获取坐标位置,如何将微信获取的坐标直接应用到百度地图中,显示以下效果: 说明:红色图标是从微信转换过来的位置,蓝色图标是周边位置.首先从微信开发流 ...

  8. 前端工程师如何快速的开发一个微信JSSDK应用

    亲们,订阅号出来已经很久了,作为一个前端工程师或者全栈工程师,你是不是错过了什么?大概许多攻城狮同砚还没有反应过来订阅号怎么回事,就马上要被微信的应用号秀一脸了.在应用号还没有正式出来之前,我们赶紧一 ...

  9. 微信公众平台开发 微信JSSDK开发

    根据微信开发文档步骤如下: 1.先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”. JS接口安全域名设置 mi.com(前面不用带www/http,域名必须备案过) 2.引 ...

随机推荐

  1. dos脚本语法学习

    一个dos批处理脚本,通过关键字搜索注册表并删除,坑很多,语法也很怪异,详情看注释 @echo off ::声明采用UTF-8编码,避免中文乱码问题,>NUL可以吞掉chcp输出的内容 chcp ...

  2. 一个SQLServer中JSON文档型数据的查询问题

    近日在项目中遇到一个问题: 如何在报表中统计JSON格式存储的数据? 例如有个调查问卷记录表,记录每个问题的答案. 其结构示意如下(横表设计) Id user date Q1_Answer Q2_An ...

  3. 对标 Spring Boot & Cloud ,轻量框架 Solon 1.5.8 发布

    Solon 是一个轻量的Java基础开发框架.强调,克制 + 简洁 + 开放的原则:力求,更小.更快.更自由的体验.支持:RPC.REST API.MVC.Job.Micro service.WebS ...

  4. 简易版JDBC连接池

    JDBC连接池mini版的实现 首先是工具类 DbUtil 主要参数就是Driver.User.PWD等啦,主要用于建立连接 URL需要注意的是SSL和serverTimezone参数,和mysql驱 ...

  5. 处理python中的信号

    什么是信号 信号(signal)-- 进程间通讯的一种方式,也可作为一种软件中断的方法.一个进程一旦接收到信号就会打断原来的程序执行来按照信号进行处理. 简化术语,信号是一个事件,用于中断运行功能的执 ...

  6. kafka高性能吞吐原因

    1. 简单回顾 Kafka作为时下最流行的开源消息系统,被广泛地应用在数据缓冲.异步通信.汇集日志.系统解耦等方面.相比较于RocketMQ等其他常见消息系统,Kafka在保障了大部分功能特性的同时, ...

  7. 23、swap分区扩充

    23.1.使用fdisk创建构建sapw: fdisk /dev/sdb=>分一个主分区/dev/sdb1(同理也可以使用parted mbr模式和parted gpt模式构建一个主分区) pa ...

  8. 全局获取HttpContext

    全局获取HttpContext 在我们平常开发中会有这样的需求,我们的Service业务层需要获取请求上下文中的用户信息,一般我们从控制器参数传递过来.如果你觉得这样就可以了,请您关闭文章. 场景 但 ...

  9. Docker:Linux离线安装docker

    docker离线下载路径 docker所有版本:https://download.docker.com/linux/static/stable/ 离线安装 1.解压 #解压tar包 tar -xvf ...

  10. python logger 动态设置日志名

    代码: import logging logger = logging.getLogger('') logger.setLevel(level=logging.INFO) def setLogName ...