背景：公司要做一個(gè)統(tǒng)計(jì)的echarts圖痛单，數(shù)據(jù)返回為數(shù)組痒玩，長(zhǎng)度大概在5000，直接集成echarts使用帮辟，發(fā)現(xiàn)dataZoom拖拽卡頓嚴(yán)重，（其實(shí)主要是數(shù)據(jù)返回后渲染時(shí)間較長(zhǎng)灵疮，渲染完成還是OK滴）织阅，控制臺(tái)查看發(fā)現(xiàn)應(yīng)該是微信小程序平臺(tái)的性能瓶頸限制，考慮使用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頁(yè)發(fā)請(qǐng)求需要小程序的請(qǐng)求頭信息(后臺(tái)接口校驗(yàn)使用，我存在本地蒿赢，看你喜歡咯)
// 注意中文字符會(huì)被編碼润樱，就不用我說了吧，轉(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頁(yè)面
// 主要代碼
<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>
注意：
- 小程序在開發(fā)工具上店展，web-view的h5頁(yè)面可以是放在本地服務(wù)上的web养篓，頁(yè)面內(nèi)訪問的接口可以是非https非域名的接口（需要設(shè)置開發(fā)工具不校驗(yàn)https和域名）
- 在手機(jī)調(diào)試時(shí)，即便打開開發(fā)者模式赂蕴，以上環(huán)境柳弄，H5頁(yè)面內(nèi)也無法正常訪問接口
- 如果h5頁(yè)面部署在本地環(huán)境，手機(jī)運(yùn)行到同一wifi環(huán)境下概说，即可正常訪問web碧注，無法訪問接口
- 如果h5頁(yè)面部署在外網(wǎng)環(huán)境，如果web服務(wù)器時(shí)http協(xié)議糖赔，接口是http協(xié)議萍丐，可以訪問web，無法訪問接口
- 如果h5頁(yè)面部署在外網(wǎng)環(huán)境放典，如果web服務(wù)器時(shí)http協(xié)議逝变，接口是https協(xié)議，可以訪問web刻撒，可以訪問接口
- 如果h5頁(yè)面部署在外網(wǎng)環(huán)境骨田，如果web服務(wù)器時(shí)https協(xié)議，接口是http協(xié)議声怔，可以訪問web态贤，無法訪問接口（web控制臺(tái)會(huì)報(bào)錯(cuò)，提示不支持調(diào)用http協(xié)議）
- 如果h5頁(yè)面部署在外網(wǎng)環(huán)境醋火，如果web服務(wù)器時(shí)https協(xié)議悠汽，接口是https協(xié)議，可以訪問web芥驳，可以訪問接口（完美）
- 正式發(fā)布柿冲，必須為2中的最后一條規(guī)則，且需要配置微信小程序訪問域名白名單：添加H5頁(yè)面所在服務(wù)器域名及其內(nèi)訪問的api域名兆旬，規(guī)則為：https+備案域名
