微信公众号网页开发步骤

在index.html中引入微信公众JDK的js文件
在vue.config.js中插入configureWebpack: { externals: { wx: 'wx' },即可以全局import wx from 'wx'
授权有两种方式。一种直接获取，一种弹框授权。
第一步：用户同意授权，获取code
第二步：通过code换取网页授权access_token
第三步：刷新access_token（如果需要）
第四步：拉取用户信息(需scope为 snsapi_userinfo)
附：检验授权凭证（access_token）是否有效

获取用户code方法

  getUrlQuery () {let params = location.search.substr(1).split('&')let query = {}params.map(item => {let [key, val] = item.split('=')query[key] = val})return query}let query = this.getUrlQuery()query['code']

通过config接口注入权限验证配置

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接口处理失败验证

鉴权代码：

import wx from 'wx'
import request from '@/utils/request'
function getWxSignature(params) {return request({url: '',method: 'get',params})
}
if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {window.entryUrl = location.href.split('#')[0]
}
const map = new Map()export default async function (jsApiList, callback) {jsApiList = jsApiList || ['getLocation', 'openLocation']const resultApi = []jsApiList.forEach(key => {if(!map.get(key)) {resultApi.push(key)}})if(!resultApi.length) {callback && callback()return;}/*** ios页面路由跳转时得到的url和jssdk锁定的url不一致，安卓不存在此问题，需要换成ios url*/const hostUrl = /(Android)/i.test(navigator.userAgent) ? location.href.split('#')[0] : window.entryUrl;var nonceStr = (function() {return Math.random().toString(36).substr(2, 16);})();var timestamp = (function () {return parseInt(new Date().getTime() / 1000) + '';})();let res = await getWxSignature({timestamp,nonceStr,hostUrl})if (res) {wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: 'xxx', // 必填，公众号的唯一标识timestamp, // 必填，生成签名的时间戳nonceStr, // 必填，生成签名的随机串signature: res.data, // 必填，签名jsApiList: resultApi // 必填，需要使用的JS接口列表})wx.ready(() => {// VALID_SUCCESS = true// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。callback && callback()})wx.error(e => {// VALID_SUCCESS = falsecallback && callback(false)console.log(e)})}
}
调用例子created() {checkWX(['openLocation']) //映入方法后，填入数组},

微信公众号网页开发步骤相关推荐

前端对接微信公众号网页开发流程，前期配置
微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传.图片预览.获取位 ...
前端对接微信公众号网页开发流程，授权对接
前面讲到前端对接微信公众号网页开发流程,前期配置,本篇文章主要详细介绍关于公众号的授权对接. 一.引入微信js-sdk 在需要调用 JS 接口的页面引入如下 JS 文件 http://res.wx. ...
微信公众号网页开发——实用真机调试
前言微信公众号网页开发的真机调试一直是很头疼的事情. 原因一微信公众号配置的JS安全域名只有三个,一个大中型的公众号这三个JS安全域名都是生产的域名,不可能预留域名用于开发和调试. 原因二在微信 ...
前端对接微信公众号网页开发流程，JSSDK使用
前面两篇文章讲解了前端对接微信公众号网页开发流程,前期配置和前端对接微信公众号网页开发流程,授权对接,本篇文章讲解关于微信JSSDK的使用,官方文档地址一.通过 config 接口注入权限验证配 ...
php公众号开发配置网页域名,微信公众号网页开发授权配置流程
1.配置 1.1 公众号配置 1.2 开发者账号配置选择开发者工具->web开发者工具->绑定开发者微信账号. 1.3 开发域名配置选择公众号设置->功能设置,根据需求设置:业务 ...
有关于微信公众号网页开发的流程（自己的看法）
微信官方文档 (真的很详细) 第一步: 网页授权回调域名网页服务内容这个网页回调域名是非常关键的,后面会讲解这个回调的域名的使用,回调字面意思就是会跳转的. 第二步: 使用微信官方的api进行co ...
微信公众号网页开发：播放视频，在列表中滑动会脱离文档流
项目场景: antd移动端端开发微信公众号移动端网页开发问题描述: video-react有问题,在跑马灯中第一次白屏,在列表中滑动会脱离文档流原因分析: 未知解决方案: 直接上代码 < ...
微信公众号支付开发步骤Java（超详细）
做为一个刚刚做完微信公众号的小白,我不得不吐槽一下微信给的官方文档,里面那坑一个接一个,我这是跳进去再爬出来,一下给做了四天,本来技术就不够好,还被文档带的跑偏跑偏...我在这给大家整理一份超级详细的 ...
企业微信公众号网页开发之引入高德地图API
test.jsp 页面文件 WxController.java 后端Controller层代码 WxService.java 后端Service层代码 WxDao.java 后端Dao层代码一.JS ...
vue3+vant开发微信公众号网页爬坑不完全指北
点击上方前端Q,关注公众号回复加群,加入前端Q技术交流群前言 8月底的时候接到了一个微信公众号网页开发的任务, 在此之前我从没开发过微信公众号网页的项目, 心想这回又能学到新东西了, 然后又是移 ...

微信公众号网页开发步骤

微信公众号网页开发步骤相关推荐

最新文章

热门文章