ps：虽然只分为了四个步骤，但是过程中遇到的坑是真滴多。。。
1、已备案的域名一个（微信只认已备案的域名）
登录微信公众平台---->左边菜单‘公众号设置’---->‘开发设置’----->设置’JS接口安全域名'
2、实现内网穿透(便于本地调试开发)
详见我的另一篇文章：https://www.jianshu.com/p/4c9f295fb84c
3、使用Node.js实现签名(无签名无法使用微信网页提供的接口权限相关功能)
编写后端代码获取签名：https://www.jianshu.com/p/0ff044acd0f1
4、开始前端开发
涉及到微信网页功能的接口都需要通过认证后才能使用
前端项目采用Vue.js开发，在index.html中引入微信jssdk链接：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>wx-webpage</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<!-- 微信开发接口js文件 -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<!-- 移动端调试文件，使用2.5.2以下的版本即可，3.0的版本配置很麻烦 -->
<script src="https://cdn.bootcss.com/vConsole/2.5.2/vconsole.min.js"></script>
</body>
</html>
在App.vue中尝试使用微信网页提供的选择图片功能：
<template>
<div id="app">
<button @click="selectPic">选择图片</button>
</div>
</template>
<script>
export default {
name: 'App',
mounted() {
let url = `https://zhulijun.club/wx/sign`
this.axios(url, { params:{ url: location.href.split('#')[0] } })
.then(({data: { data }}) => {
let {appId, timestamp, nonceStr, signature} = data
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId, // 必填，公众号的唯一标识
timestamp, // 必填，生成签名的时间戳
nonceStr, // 必填，生成签名的随机串
signature,// 必填，签名
jsApiList: ['chooseImage'] // 必填，需要使用的JS接口列表
})
})
},
methods: {
selectPic() {
wx.ready(() => {
wx.chooseImage({
count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
}
})
})
}
},
}
</script>
<style>
#app {
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
开发过程踩到的坑：
1、穿透到本地时，无法访问开发环境的app.js文件，见另一篇文章：https://www.jianshu.com/p/b02fd804c5c4
2、穿透访问报错：Invalid Host/Origin header
解决：在build文件下的webpack.dev.conf.js文件中的devServer字段新增一个属性：
设置disableHostCheck: true：
设置disableHostCheck: true
3、微信网页开发Vue项目启动报错：invalid url domain
invalid url domain
解决：
a.如果是个人账户的appID，则在公众号设置---功能设置---JS接口安全域名， 添加安全域名，一般来说，只留一级域名即可。
js接口安全域名
b.如果用的是微信提供的测试账号appID，则需要在测试账号的页面添加安全域名：
地址：https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index
测试账号
4、调用sdk提示invalid signature无效签名，如果后端调试没有问题的话，就要考虑一下前端的问题，最有可能的地方是前端的项目采用的hash模式，此时传递给后端获取签名的url应为location.href.split('#')[0]
5、调用sdk明明有权限使用却提示 无权限，最有可能的地方是前端的vue项目采用的history模式，应改为hash模式
网友评论