我們收到很多微信小程序開發(fā)者的反饋，表示強(qiáng)烈需要 Highcharts 進(jìn)行數(shù)據(jù)展示。但是微信小程序不支持 DOM，并且沒有暴露 SVG 相關(guān)的接口，所以截止到目前，我們無法直接在小程序中使用 Highcharts。

好消息是微信小程序開放了 Web-view 能力，也就是說支持網(wǎng)頁(yè)嵌入。所以目前我們可以以嵌入網(wǎng)頁(yè)的形式來實(shí)現(xiàn)在小程序上用 Highcharts 進(jìn)行數(shù)據(jù)可視化。

簡(jiǎn)單的開發(fā)示例

創(chuàng)建完小程序后，首先我們需要配置域名白名單，也就是嵌入網(wǎng)站所包含的資源的域名列表，配置位置： 【設(shè)置】-【開發(fā)設(shè)置】-【業(yè)務(wù)域名】

接下來就是在小程序頁(yè)面里用 web-view 嵌入網(wǎng)頁(yè)了，例如

<!--index.wxml-->
<view class="container">
  <web-view src="https://www.hcharts.cn/samples/highcharts"></web-view>
</view>

小程序與網(wǎng)頁(yè)數(shù)據(jù)交互

小程序支持通過 postMessage 的形式與網(wǎng)頁(yè)之間進(jìn)行數(shù)據(jù)交互，使用方法是在網(wǎng)頁(yè)中引入 JSSKD 1.3.3 并調(diào)用 postMessage 向小程序發(fā)送消息

<!-- html -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

// javascript
wx.miniProgram.postMessage({ data: 'foo' })
wx.miniProgram.postMessage({ data: {foo: 'bar'} })

小程序中對(duì)應(yīng)的是在 web-view 的 bindmessage 屬性中綁定事件來接受消息

<!-- index.wxml -->
<web-view src="https://mp.weixin.qq.com/" bindmessage="postdata"></web-view>

// index.js
postdata: function(e) {
    console.log(e);
}