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

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

目录：

网页授权
分享
地图

参考文档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=' + redirectUrlreturn 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.031821longitude: '经度', // 经度，浮点数，范围为180 ~ -180。name: '位置名', // 位置名address: '地址详情说明', // 地址详情说明scale: 16, // 地图缩放级别,整形值,范围从1~28。默认为最大})
},

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