Using Highcharts in WeChat Mini Programs

We have received feedback from many WeChat Mini Program developers that Highcharts is strongly needed for data presentation. But the WeChat applet does not support DOM and does not expose SVG related interfaces, so as of now, we cannot use Highcharts directly in the applet.

The good news is that the WeChat applet has opened the Web-view capability, which means that it supports web page embedding. So at present, we can use Highcharts for data visualization on small programs in the form of embedding web pages.

Simple development example

After creating the applet, first we need to configure the domain name whitelist, which is the list of domain names embedded in the resources contained in the website. The configuration location is: [Settings] - [Development Settings] - [Business Domain Names]

web-view The next step is to use embedded web pages in the applet page , for example

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

Mini Program and Webpage Data Interaction

The applet supports data interaction with the web page in the form of postMessage. The method is to introduce JSSKD 1.3.3 into the webpage and call postMessage to send a message to the applet

<!-- html -->
<scripttype="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'} })

The corresponding in the applet is to bind the event in web-view the attribute of to receive the messagebindmessage

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

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

更多详情请参考： web-view