记录一波微信网页开发的流程（一）

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链接：

在App.vue中尝试使用微信网页提供的选择图片功能：

开发过程踩到的坑：

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模式