html5 微信网页开发 微信h5页面开发

H5微信网页开发总结（网页授权，JS-SDK分享、地图）

目录：

1. 网页授权
2. 分享
3. 地图

参考文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

一：网页授权

目的：通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。
本地测试准备：
1、注册一个测试号并登录，微信平台接口测试帐号申请，本地测试配置如图 2、微信授权可以根据你需要获取的基本信息分为两种情况：弹出授权页面和静默，(静默授权不弹出授权页面，直接跳转，只能获取用户openid。)
3、网页授权回调域名可以是本项目域名，也可以是一个中间页(另一个项目的域名，专门做为授权中间页)原因，若本地测试，回调域名可为本地ip。代码示例中写了两种情况

链接中参数说明

代码如下：

router.beforeEach((to, from, next) => {
  var ua = navigator.userAgent.toLowerCase()
  var isWeixin = ua.indexOf('micromessenger') !== -1
  // 判断是不是在微信中打开（可不做判断，用户无法在浏览器打开，只能在微信中浏览项目）
    if (isWeixin) {
      if (!store.state.openId && !getParams('code')) {
        const redirectUrl = encodeURIComponent(window.location.href)
        // 直接在本项目打开此链接
        // window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=测试号或者生产版公众号的appid&redirect_uri=' + redirectUrl + '&state=WX&response_type=code&scope=snsapi_base&connect_redirect=1#wechat_redirect'
        //通过中间页打开
        window.location.href = '中间页的域名（本地调试可以运行该项目，填写本地ip+端口）/author（后面是路由）?source=' + redirectUrl
        return false
      } else if (!store.state.openId && getParams('code')) {
        console.log('有code')
        const data = {
          code: getParams('code')
        }
        axios({
          method: 'get',
          url: '/apis/userapi/auth/getWechatBaseBySocial',
          params: data
        }).then(function (res) {
          console.log(res)
          setToken('openId', res.data.data.openid)
          store.commit('setOpenId', res.data.data.openid)
          next()
        }).catch(() => {
          next()
        })
      } else {
        next()
      }
  }
})

中间页代码（/author页面）

<template>
  <div>
  </div>
</template>

<script>
<template>
  <div>
  </div>
</template>

<script>
export default {
  name: 'author',
  created () {
    // 判断从别的地方跳转过来是什么参数
    // code 不存在
    if (!this.GetUrlParame('code')) {
      // 生产版：该项目线上域名
      const redirectUri = encodeURIComponent('http://www.xxxx.cn/author?source=' + this.GetUrlParame('source'))
      // 本地测试
      // const redirectUri = encodeURIComponent('http://10.1.18.131:8080/author?source=' + this.GetUrlParame('source') + '&path=' + this.GetUrlParame('path'))
      window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=xxxx&redirect_uri=' + redirectUri + '&state=WX&response_type=code&scope=snsapi_base&connect_redirect=1#wechat_redirect'
    } else {
      // code 存在时，跳转到相应的域名
      console.log(this.GetUrlParame('source') + '?code=' + this.GetUrlParame('code'))
      window.location.href = this.GetUrlParame('source') + '?code=' + this.GetUrlParame('code')
    }
  },
  methods: {
    GetUrlParame (name) {
      /* eslint-disable */
      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ''])[1].replace(/\+/g, '%20')) || null
      /* eslint-enable */
    }
  }
}
</script>

<style>
</style>

用中间页作为回调域名的原因：

一个后台的网页授权域名只能填写两个，若有多个项目（不同域名）都需要网页授权，便不能满足，因此可以用一个中间页，其他项目需要可在该工程下重新创建一个页面作为中间页。

测试号相关配置

修改JS接口安全域名

修改授权回调域名（本地ip或线上测试域名）

二：微信分享

步骤一：绑定域名 先登录微信平台进入设置”的“功能设置”里填写“JS接口安全域名”。（同上图操作）

步骤二：下载

npm install weixin-js-sdk --save

步骤三：在需要调用接口的页面引入

var wx = require('weixin-js-sdk')

具体操作：
通过config接口注入权限验证配置（签名通过后台接口获取，jsApiList为你所需要的使用的接口，例如分享或者地图）

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

例

// onready 对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
wx.ready(function () { 
// 需在用户可能点击分享按钮前就先调用
wx.updateAppMessageShareData({ 
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接，该链接域名或路径必须与当前页面对应的JS安全域名一致
    imgUrl: '', // 分享图标
    success: function () {
      // 设置成功
    }
  })
})

注：

三：地图

前三步操作同分享，通过config接口注入权限验证配置同上（jsApiList添加上openLocation）

mapClick() {
   wx.openLocation({
      latitude: '纬度', // 纬度，浮点数，范围为90 ~ -90 22.534171,114.031821
      longitude: '经度', // 经度，浮点数，范围为180 ~ -180。
      name: '位置名', // 位置名
      address: '地址详情说明', // 地址详情说明
      scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大
    })
},

如果遇到什么问题欢迎留言评论交流
留下你的小心心吧~~ (＾－＾)V