背景：公司要做一個(gè)統(tǒng)計(jì)的echarts圖，數(shù)據(jù)返回為數(shù)組，長度大概在5000，直接集成echarts使用，發(fā)現(xiàn)dataZoom拖拽卡頓嚴(yán)重，（其實(shí)主要是數(shù)據(jù)返回后渲染時(shí)間較長，渲染完成還是OK滴），控制臺查看發(fā)現(xiàn)應(yīng)該是微信小程序平臺的性能瓶頸限制，考慮使用web-view突破

由于公司使用的是Taro框架來做小程序的，所以遵循Reac的基本開發(fā)規(guī)范,原生也是同理，直接上代碼吧

HistoryLine組件

import Taro, { Component } from '@tarojs/taro'
// 引入 WebView 組件（原生一致）
import { WebView } from '@tarojs/components'

class HistoryLine extends Component {
  config = {
    navigationBarTitleText: "歷史曲線",
    pageOrientation: 'landscape',
  };

  render () {
      // 路由傳參
    const { params: { equipmentGroupAttrName, groupId } } = this.$router;
      // 在web頁發(fā)請求需要小程序的請求頭信息(后臺接口校驗(yàn)使用，我存在本地，看你喜歡咯)
      // 注意中文字符會被編碼，就不用我說了吧，轉(zhuǎn)碼！！！
    console.log(`https://xxx.com/area-simple.html?equipmentGroupAttrName=${encodeURI(equipmentGroupAttrName)}&groupId=${groupId}`)
    // console.log(`http://192.168.1.136:5500/area-simple.html?equipmentGroupAttrName=${encodeURI(equipmentGroupAttrName)}&groupId=${groupId}`)
    return (
      <WebView src={`https://xxx.com/area-simple.html?equipmentGroupAttrName=${equipmentGroupAttrName}&groupId=${groupId}`}  />
      // <WebView src={`http://192.168.1.136:5500/area-simple.html?equipmentGroupAttrName=${equipmentGroupAttrName}&groupId=${groupId}`}  />
    )
  }
}
export default HistoryLine;

H5頁面

// 主要代碼
<div class="lineChart" id="container"></div>
    <script type="text/javascript">
    // 獲取傳參
      function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i = 0; i < vars.length; i++) {
          var pair = vars[i].split("=");
          if (pair[0] == variable) {
            return pair[1];
          }
        }
        return false;
      }

      console.log(window.location);
      // 中文反編碼
        var equipmentGroupAttrName = decodeURI(getQueryVariable('equipmentGroupAttrName'));
        var groupId = getQueryVariable('groupId');
    // 其他業(yè)務(wù)邏輯（做的echart圖，就不放了）
    </script>

注意：

1. 小程序在開發(fā)工具上，web-view的h5頁面可以是放在本地服務(wù)上的web，頁面內(nèi)訪問的接口可以是非https非域名的接口（需要設(shè)置開發(fā)工具不校驗(yàn)https和域名）
2. 在手機(jī)調(diào)試時(shí)，即便打開開發(fā)者模式，以上環(huán)境，H5頁面內(nèi)也無法正常訪問接口
   • 如果h5頁面部署在本地環(huán)境，手機(jī)運(yùn)行到同一wifi環(huán)境下，即可正常訪問web，無法訪問接口
   • 如果h5頁面部署在外網(wǎng)環(huán)境，如果web服務(wù)器時(shí)http協(xié)議，接口是http協(xié)議，可以訪問web，無法訪問接口
   • 如果h5頁面部署在外網(wǎng)環(huán)境，如果web服務(wù)器時(shí)http協(xié)議，接口是https協(xié)議，可以訪問web，可以訪問接口
   • 如果h5頁面部署在外網(wǎng)環(huán)境，如果web服務(wù)器時(shí)https協(xié)議，接口是http協(xié)議，可以訪問web，無法訪問接口（web控制臺會報(bào)錯(cuò)，提示不支持調(diào)用http協(xié)議）
   • 如果h5頁面部署在外網(wǎng)環(huán)境，如果web服務(wù)器時(shí)https協(xié)議，接口是https協(xié)議，可以訪問web，可以訪問接口（完美）
3. 正式發(fā)布，必須為2中的最后一條規(guī)則，且需要配置微信小程序訪問域名白名單：添加H5頁面所在服務(wù)器域名及其內(nèi)訪問的api域名，規(guī)則為：https+備案域名