背景：公司要做一個統計的echarts圖，數據返回為數組，長度大概在5000，直接集成echarts使用，發現dataZoom拖拽卡頓嚴重，（其實主要是數據返回后渲染時間較長，渲染完成還是OK滴），控制臺查看發現應該是微信小程序平臺的性能瓶頸限制，考慮使用web-view突破
由于公司使用的是Taro框架來做小程序的，所以遵循Reac的基本開發規范,原生也是同理，直接上代碼吧
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頁發請求需要小程序的請求頭信息(后臺接口校驗使用，我存在本地，看你喜歡咯)
// 注意中文字符會被編碼，就不用我說了吧，轉碼！！！
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');
// 其他業務邏輯（做的echart圖，就不放了）
</script>
注意：
- 小程序在開發工具上，web-view的h5頁面可以是放在本地服務上的web，頁面內訪問的接口可以是非https非域名的接口（需要設置開發工具不校驗https和域名）
- 在手機調試時，即便打開開發者模式，以上環境，H5頁面內也無法正常訪問接口
- 如果h5頁面部署在本地環境，手機運行到同一wifi環境下，即可正常訪問web，無法訪問接口
- 如果h5頁面部署在外網環境，如果web服務器時http協議，接口是http協議，可以訪問web，無法訪問接口
- 如果h5頁面部署在外網環境，如果web服務器時http協議，接口是https協議，可以訪問web，可以訪問接口
- 如果h5頁面部署在外網環境，如果web服務器時https協議，接口是http協議，可以訪問web，無法訪問接口（web控制臺會報錯，提示不支持調用http協議）
- 如果h5頁面部署在外網環境，如果web服務器時https協議，接口是https協議，可以訪問web，可以訪問接口（完美）
- 正式發布，必須為2中的最后一條規則，且需要配置微信小程序訪問域名白名單：添加H5頁面所在服務器域名及其內訪問的api域名，規則為：https+備案域名
