步骤一:绑定域名

先登录微信公众平台进入”公众号设置“的”功能设置“里填写”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. 小白学k8s(7)helm[v3]使用了解

    helm使用 什么是helm 安装helm Helm V2 & V3 架构设计 配置kube config helm使用 添加仓库 helm安装nginx helm的核心概念 Chart Co ...

  2. SqlServer中offset..fetch 的使用问题

    好久没更新了,最近忙的很,也生病了,重感冒,555~~~ 早上抽的一丝空闲,来讲讲SqlServer中的分页问题.其实用过了多种数据库,分页这问题已经是老生常谈的问题了.不管是开发什么类型的网站,只要 ...

  3. win10下简单截图

    win10 下面可以 win+shift+s 拖动截图,个人感觉是最简单的

  4. Go语言中底层数组和切片的关系以及数组扩容规则

    Go语言中底层数组和切片的关系以及数组扩容规则 demo package main import ( "fmt" ) func main() { // 声明一个底层数组,长度为10 ...

  5. 27、Tomcat服务的安装与配置

    服务器名称 ip地址 slave-node1 172.16.1.91 27.1. Tomcat简介: Tomcat是Apache软件基金会(Apache Software Foundation)的Ja ...

  6. 在ubuntu16下编译openJDK11

    为什么需要编译自己的jvm源码? 想象下, 你想看看java线程是如何start的? 去源码里一找 native void start0(), 此时如果你对jvm源码比较熟悉, 那么可以下载openJ ...

  7. bugkuCTF

    这题说实话我一脸懵逼,计网还没学的我,瑟瑟发抖,赶紧去百度. 思路分析: 涉及到域名解析,也就是dns服务,看了看writeup,都是修改host文件,百度了下host文件的作用,才明白了 host文 ...

  8. 字符串中的第一个唯一字符 python

    给定一个字符串,找到它的第一个不重复的字符,并返回它的索引.如果不存在,则返回 -1. s = "leetcode" 返回 0. s = "loveleetcode&qu ...

  9. 「ARC103D」 Distance Sums

    「ARC103D」 Distance Sums 传送门 水题. 首先如果让你求树上的节点 \(i\) 到其它所有节点的距离和,这是非常简单的,这就是非常常规的换根 \(\texttt{DP}\). 那 ...

  10. 【Python从入门到精通】(十一)Python的函数的方方面面【收藏下来保证有用!!!】

    您好,我是码农飞哥,感谢您阅读本文,欢迎一键三连哦. 本文主要介绍Python的函数,函数的定义,使用,可变参数等等都有详细介绍. 干货满满,建议收藏,需要用到时常看看. 小伙伴们如有问题及需要,欢迎 ...