微信jssdk使用

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Aftvc8304/article/details/76922206

  

在实际项目中调用微信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(){});中执行否则会有报错。

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

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

  以上就是我的总结,如果有问题欢迎提出。

阅读更多
换一批

没有更多推荐了,返回首页