前言

小程序不能使用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