总结微信jssdk使用

在实际项目中调用微信jssdk，这篇博客主要做一个总结记录

首先是关于微信jssdk调用步骤

1.在公众号内部的“公众号设置”的“功能设置”里填写“JS接口安全域名”。
备注：登录后可在“开发者中心”查看对应的接口权限。

2.引入JS文件:在需要调用JS接口的页面引入JS文件http://res.wx.qq.com/open/js/jweixin-1.2.0.js(支持https)。
备注：微信jssdk支持使用 AMD/CMD 标准模块加载方法加载，在使用vue-cli开发spa项目中可已在webpakc.base.conf中配置externals属性，webpack可以不处理应用的某些依赖库，依旧可以在代码中通过CMD、AMD或者window/global全局的方式访问。

3.配置wx.config：（以下是官方文档配置，所有参数除了jsApiList，其余参数从后端接口动态获取）

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

4.通过ready接口处理成功验证（和我们通常写window.onload一个意思，当wx.config验证成功后开始执行你需要的微信jssdk）

wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
备注：wx不仅仅有ready回调函数具体请参考以下微信官方文档
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

其次是配置微信公众号（在配置过程中请参考官方提示）

1.业务域名设置:

设置业务域名后，在微信内访问该域名下页面时，不会被重新排版。用户在该域名上进行输入时，不出现安全提示。

2.JS接口安全域名设置:

设置JS接口安全域名后，公众号开发者可在该域名下调用微信开放的JS接口。

3.网页授权域名:

用户在网页授权页同意授权给公众号后，微信会将授权数据传给一个回调页面，回调页面需在此域名下，以确保安全可靠。(此设置获取code，通过code去请求openId,每个用户对应每一个公众号都只有一个openId)。

4.如果要调用微信支付接口，还需要配置支付授权目录、扫码支付回调URL配置。

重点注意:

1.配置config时后台签名算法需要当前页面url：

这里我们提供的url（当前网页的URL，不包含#及其后面部分），如果你没有对你的URL做处理，微信config会配置失败。

2.调用jsApiList时一定要在wx.ready(function(){});中执行否则会有报错;(对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中)。

3.获取用户授权时，分为snsapi_base（不弹出授权页面，直接跳转，只能获取用户openid）和 snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且，即使在未关注的情况下，只要用户授权，也能获取其信息）两种形式获取授权，目前我使用的是snsapi_base模式，直接通过回调地址，链接参数拼接的方式获取code，然后去获取openId。

4.微信支付配置的timestamp，signature等和wx.config配置的参数是不一致的，需要重新配置。

总结微信jssdk使用相关推荐

php拍照从手机相册中选择,微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例...
本文实例讲述了微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法.分享给大家供大家参考,具体如下: 目前中js-sdk 1.0版本中,预览图片提供了2个接口,接口的定义参考官方文档 1.预览 ...
js sdk 一键分享微信_微信jssdk实现分享到微信
本来用的是这个插件http://overtrue.me/share.js/和百度分享相同之处:在微信分享的时候,分享的链接都不能获取到缩略图... 不同之处:百度分享在微信低版本是可以看到缩略图的( ...
使用vux+ajax,Vue 应用中结合vux使用微信 jssdk的方法
vux微信分享说明分享接口只有认证公众号才能使用,域名必须备案且在微信后台设置. 先确认已经满足使用jssdk的要求再进行开发. 引入在 main.js 中全局引入: console.log(Vu ...
微信公众号开发之微信JSSDK
概述微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统的能力,同时可以直接使用微 ...
微信公众平台开发微信JSSDK开发
根据微信开发文档步骤如下: 1.先登录微信公众平台进入"公众号设置"的"功能设置"里填写"JS接口安全域名". JS接口安全域名设置 mi. ...
如何正确的在项目中接入微信JS-SDK
微信JS-SDK的功能如果你点进来,那么我相信你应该知道微信的JS-SDK可以用来做什么了.微信的官方文档描述如下. 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. ...
微信jssdk，实现多图上传的一点心得
一.首先在common.js里封装一个函数,在需要调用jsSDK的页面引用此方法即可实现微信的信息配置function signatureJSSDK() { var url = window.loca ...
微信jssdk ajax 获取签名,【Golang版】微信access_token、jsapi_ticket、signature签名算法生成示例，开箱即用...
# WXToken 项目地址:[https://github.com/henson/WXToken](https://github.com/henson/WXToken) 因为手上有一个项目需要用到微 ...
微信JS-SDK之图像接口开发详解
2019独角兽企业重金招聘Python工程师标准>>> 参考: 微信JS-SDK之图像接口开发详解 http://www.cnblogs.com/it-cen/p/4587812.h ...
【坑爹微信】微信JSSDK图片上传问题和解决
目录 List 1. 那一抹淡淡的忧伤-–微信开发基础 2. 用纯js是不可能用纯js了,这辈子都不用纯js了 -– 微信JSSDK开发以及问题解答 3. 要你命3000 -- 微信支付开发系列问题解 ...

总结微信jssdk使用

总结微信jssdk使用

总结微信jssdk使用相关推荐

最新文章

热门文章