昨天(20171102)小程序开发团队又失去了夜生活，
发布了振奋人心的新功能，小程序内打开网页。
老大们激动得像个两百斤的孩子，一波唱衰 APP 的浪潮怕是又要沸腾吧。
无论是不是公司要求，这种骚操作必然是需要体验一下的。
再者如果能利用这个新功能实现热更新，省去频繁提交小程序审核的麻烦也是不错的。
所以进行了一次公司官网（包含案例库）的小程序化搬迁，主要罗列一下我的流程和坑眼。
绑定公众号
官方表示：个人类型与海外类型的小程序暂不支持使用。
意味着你绑定的公众号需要公司认证。
否则会报错 {"base_resp":{"ret":-1}}，绑了 AppID 有公众号信息，没绑就没有。
注：记得将基础库版本改为 1.6.4 以上哟。
设置域名白名单
在有公司认证的小程序管理后台中，找到 设置 -> 开发设置 -> 业务域名。
然后就可以添加了，只是有些次数限制，问题不大。
1）每个小程序帐号仅支持配置最多20个域名；
2）每个域名仅支持绑定最多20个小程序；
3）每个小程序一年内最多支持修改域名50次。
访问非白名单域名下的资源或接口，会报 {"base_resp":{"ret":-1}} 错误。
在论坛中看到一些配置文件错误的问题，很偶现，重复操作几次吧。
有大神发现一个应该算是 bug 的情况，
在网页内写 iframe 然后链跨域网页竟然是可行的。
比如以往微信不能打开的淘宝网在非 ios 的小程序中可以被打开。
当 iframe 的链接为非 https 时不会报错，会不显示。
非常重要的 https
网页本身，网页内接口，页面内跳转的链接
以上三者（划重点）都需要 https，且满足域名白名单，
否则也会报 {"base_resp":{"ret":-1}} 错误。
图片等资源的链接和 iframe 一样有些特别，非 https 非白名单也可以显示，不知以后会不会修正这个。
web-view 元素
单个页面中只会有一个 web-view，以先写的显示。
本页不管写了什么内容，web-view 都将全屏，即使有底部菜单。
且层级超高，高过了 canvas 等原生组件。
但比 js 操作的 wx.showLoading 等产生的覆盖要低。
再者，它是设不了样式的，用 boundingClientRect 也得不到宽高，虽然没人会这样搞。
小程序的缓存
如果小程序没有改动，只改动了网页，可能小程序会一直访问未改动前的网页。
所以在网页链接加上一个随机的 search 字符串，可以避免这种问题。
<web-view src="https://xx.com#wechat_redirect?temp={{webId}}"></web-view>
onReady: function() {
this.setData({ webId: Math.random().toString(36).substring(2, 7) });
}
跳转后的网页也会被缓存，这其实就很尴尬了，我也没想到什么比较简单的解决方案。
苹果机无法访问
按照官方文档，需要再 web-view 的链接中加上 #wechat_redirect。
注：hash 要放在 search 前面哟，不然会不显示。这个 HTML 的 hash 规则有点不一样。
小程序跳转
在网页内想改变小程序的链接，是可以的。
现在只开放了 wx.miniProgram.navigateTo 和 wx.miniProgram.navigateBack 两个。
wx.miniProgram.navigateTo({ url: '/pages/index/index' });
注： 网页中需要引入 <script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>。
想想都有点小激动，往后有望使用 wx.miniProgram 让网页就有现在小程序的 API 功能，也就是快捷开发混合应用（当然网页还是得在微信内部，但如果我们假设，以后所有的浏览器都是小程序浏览器呢）
JSSDK
但 wx.miniProgram 并没有开放那么多功能，所以原本 JSSDK 的那套要更佳。
原本的那套嘛，可以单独写新的文章了，还是先看 JS-SDK说明文档 吧，以后我会补一篇。
然而，小程序内网页的 JSSDK 还是有丢丢限制的，
没有分享，支付，界面操作（比如隐藏右上角菜单）。
支付嘛，你觉得可以先 wx.miniProgram.navigateTo 到小程序中，完成了再跳回网页来。
用户授权与身份获取
以前网页直接能进行授权申请，但现在多了个小程序在中间，
等于我得先小程序获得授权拿到身份，再传给网页。
由于我司在这方面可能会带来较大改动，所以有丢丢怀疑这样是否正确，希望大佬们指点。
这方面微信那边应该也会有所调整，期待更新。
小程序的用户授权嘛，主要要用 wx.login 和 wx.getUserInfo 这两个方法，
后端所需要的加密解密什么的我就不知道了，可见 官方文档。
需要的话，可以看看之前项目中实践过的前端 代码
其他
尚未测试的一些方面：
- 请求头的 cookie 是否相同，以处理小程序获得授权是否网页也就有了授权。
- localStorage 能否通用（已测，不能，所以又得考虑数据较大时两者的沟通了）
此功能带来的改变：
- 以前为了弥补小程序入口问题（如朋友圈或推文里的阅读原文），会做网页与小程序分别的两套，现在只需要一套网页版的了
- 例如官网、资讯类等现有网页，转为小程序版非常方便，可以多一个小程序列表的入口
- 网页版也算弥补了交互式 canvas 和超多动画项目的小程序性能不佳的问题吧
