公众号网页开发的一些心得

公众号网页开发心得

可能需要的一些资源：

微信公众号开发文档：https://developers.weixin.qq.com/doc/offiaccount/Getting_Started/Overview.html
JS-SDK：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html
接口在线调试：https://mp.weixin.qq.com/debug/
weui预览：https://weui.io/
weui仓库地址：https://github.com/Tencent/weui
weui.js仓库地址：https://github.com/Tencent/weui.js

一、注册公众号

注册地址：https://mp.weixin.qq.com/
分为订阅号和服务号，前者申请简单，后者需要企业信息，前期开发可以申请测试号，申请简单且有大部分接口权限

测试号配置：

接口配置信息 URL

这个只作为微信服务器验证所需网址，此地址需要正确接收微信发送的请求并按照规则返回数据，这个URL可以部署在自己的服务器，没有自己的服务器可以部署在本地，不过这样的话需要进行网络映射，保证外网可以访问本地服务
网络映射推荐花生壳和ngrox，教程自行百度

接口配置信息 Token

随便填写，只需要和验证时Token一致即可

JS接口安全域名

即我们访问微信接口时所在的域名
测试号申请地址：https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

其他问题

1、获取access_token或者请求其他微信接口时跨域？
前端无法直接和微信服务器进行交互，可以让后端来获取所需要的数据，再通过接口传递到前端
2、JS-SDK？
微信JS-SDK是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包。
通过使用微信JS-SDK，网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力，同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力，为微信用户提供更优质的网页体验。
简单的说，就是提供了很多在微信里面可以使用的接口，很好用，唯一的缺点就是官方文档不是很详尽，有些地方存在小坑
3、在哪里查看页面效果？/测试页面在哪里运行？
如果使用了JS-SDK，需要在微信环境下运行，可以使用微信开发者工具在网址栏输入自己的页面地址进行查看。不过我在调试的时候模拟器还在出现了定位不精准的问题。这时可以使用工具右上角预览，扫描二维码在手机上查看。
4、修改了代码但是页面还是没发生变化/功能没出来？
试试工具右上角清理缓存
5、weui和weui.js的引入

// weui
<link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.3/weui.min.css">
// weui.js
&lt;script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.4/weui.min.js"&gt;&lt;/script&gt;

使用文档可以在weui的github里找到
6、图像接口无法上传多张图片？
https://blog.csdn.net/wangliqiang1014/article/details/78071098
7、不想使用微信提供的地图展示接口？/想在页面插入小地图？
微信提供的wx.openLocation接口只能新打开一个页面全屏展示地图，我们可以引入并使用百度地图或者高德地图
我使用的是微信接口获取经纬度，再使用百度提供的接口进行经纬度转化，最后在页面上展示一个小的百度地图
8、怎么使用JS-SDK？
首先要在页面注入配置信息wx.config。这个前端也获取不了，可以让后端拿到之后通过接口传递到前端。
其次是wx.ready。wx.config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
最后是wx.error。wx.config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。

---

最后，这些是我写了一个公众号页面之后总结的一些方法和坑，可能以后还会用到，如果能帮到你那就更好了。很多东西暂时没想起来，想起来的时候再补充。不对的地方希望大家指正，共同进步，谢谢