微信公众号网页开发步骤

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

大家好,又见面了,我是你们的朋友全栈君。

  1. 在index.html中引入微信公众JDK的js文件

  2. 在vue.config.js中插入configureWebpack: { externals: { wx: 'wx' },即可以全局import wx from 'wx'

  3. 授权有两种方式。一种直接获取,一种弹框授权。
    第一步:用户同意授权,获取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']
  1. 通过config接口注入权限验证配置
wx.config({ 
   
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [] // 必填,需要使用的JS接口列表
});
  1. 通过ready接口处理成功验证
wx.ready(function(){ 
   
  // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
  1. 通过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 = false
      callback && callback(false)
      console.log(e)
    })
  }
}
调用例子
  created() { 
   
    checkWX(['openLocation']) //映入方法后,填入数组
  },
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/134960.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号