小程序WebView实践记录

前言

小程序不能使用WebView一直是很大的痛点，终于在11月3日，开通了WebView支持的能力，于是开始了我的爬坑之旅。

文档

web-view

业务域名

在配置业务域名的时候，下载了校验文件，也放置在了网站根目录，校验码已经可以访问，但是审核验证一直不通，如下图所示：

0.png

0.jpeg

通过各种方式测试，猜测其验证的内部机制。

1. 通过域名访问，获取到服务器ip地址
2. 通过ip下载校验文件，比对校验
3. 提交业务域名

因此，如果通过rancher等动态分配ip的docker化服务器，上述流程走不通的。
解决办法：固定IP

WebView开发环境调试

现在已经可以通过小程序工具勾选web-view开发调试选项解决

之前解决思路

准备工具： charles

1. 开启charles -> proxy settings -> 设置proxy（比如：127.0.0.1:8888）
2. 微信开发工具 -> 设置 -> 代理设置 -> 手动设置代理为(127.0.0.1:8888)
3. 本地启动一个https服务器，可以用webpack devserver实现

devServer: {
    hot: true,
    https: true,
    contentBase: path.resolve(root, 'dist'),
    publicPath: '/',
    port: 8080,
    proxy: {   //此处用来转发webview中网络请求，解决跨域问题
      '/api': {
        target: 'https://api.example.com',   
        changeOrigin: true,
      }
    },
    historyApiFallback: true,
    disableHostCheck: true
  }

4. charles把安全的业务域名，映射到本地

1. charles -> mapRemote  https://m.example.com:443  到 https://m.example.com:8080
2. 修改本地host    127.0.0.1  m.example.com