步骤一:绑定域名

先登录微信公众平台进入”公众号设置“的”功能设置“里填写”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. NOIP模拟测试26「嚎叫响彻在贪婪的机房·主仆见证了 Hobo 的离别·征途堆积出友情的永恒」

    题目比较神仙,注意是题目神仙 贪婪暗示贪心,堆积暗示堆优化$\%\%\%\%\%\%\%$ 两个乱搞$+$一个堆优化$dp$ 嚎叫响彻在贪婪的机房 题解 对于一个序列来说只要他们差的$gcd$不为$1 ...

  2. 小白学k8s(7)helm[v3]使用了解

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

  3. DOS命令行(1)——Windows目录与文件应用操作

    cd 1.使用cd快速切换到指定盘符与目录中 命令格式1:cd [/d] [<盘符>][<路径>] 或 chdir [/d] [<盘符>][<路径>] ...

  4. idea自动更新代码

    如何开启或关闭idea的自动更新代码? File-Setting-Appearance&Beha-System Setting-Updates 选中或取消勾选Automatically che ...

  5. Vue(10)表单输入绑定v-model

    v-model v-model指定可以实现表单值与属性的双向绑定.即表单元素中更改了值会自动的更新属性中的值,属性中的值更新了会自动更新表单中的值 绑定的属性和事件 v-model在内部为不同的输入元 ...

  6. 用jquery通过点击事件把下拉列表币种的值传给文本框1,再通过文本框1的币种名称用if转化为币别传值给文本框2保存

    <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>& ...

  7. 面向.NET开发人员的Dapr- actors 构建块

    原文地址:https://docs.microsoft.com/en-us/dotnet/architecture/dapr-for-net-developers/actors The actor m ...

  8. 05 找出占用CPU、内存过高的进程

    #!/bin/bash export PATH=/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/root/bin echo "----- ...

  9. C++智能指针之shared_ptr与右值引用(详细)

    1. 介绍 在 C++ 中没有垃圾回收机制,必须自己释放分配的内存,否则就会造成内存泄露.解决这个问题最有效的方法是使用智能指针(smart pointer).智能指针是存储指向动态分配(堆)对象指针 ...

  10. gitlab hostname修改

    cd /var/opt/gitlab/gitlab-rails/etc vim gitlab.yml /home/git/gitlab/config/gitlab.yml production: &a ...