uni-app:renderjs

前言

      由于app中要使用地图，以前一直用的都是高德地图，在app中是不能操作dom，所以直接用是不可能的，虽然uni-app有地图组件map，但是用着也一直不顺手，最终发现了renderjs，官网提出，在app-vue环境下，视图层由webview渲染，而renderjs运行在视图层，自然可以操作dom和window。

使用

这里借用官方echarts使用示例

:prop 传值   :change:prop 监听prop改变

调用改变的方法内有四个参数

        newValue：跟新后的数据 

        oldValue：原先的数据

        ownerInstance：通过该函数可以调用内部函数，可以传输数据

         instance：当前service层实例

通过 this.$ownerInstance.$vm  获取当前组件的 ComponentDescriptor 实例

1.  
   <template>
2.  
   <view class="content">
3.  
   <!-- #ifdef APP-PLUS || H5 -->
4.  
   <view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
5.  
   <button @click="changeOption">更新数据</button>
6.  
   <!-- #endif -->
7.  
   <!-- #ifndef APP-PLUS || H5 -->
8.  
   <view>非 APP、H5 环境不支持</view>
9.  
   <!-- #endif -->
10.  
    </view>
11.  
    </template>
12.  
     
13.  
    <script>
14.  
    export default {
15.  
    data() {
16.  
    return {
17.  
    option: {
18.  
    title: {
19.  
    text: 'ECharts 入门示例'
20.  
    },
21.  
    tooltip: {},
22.  
    legend: {
23.  
    data: ['销量']
24.  
    },
25.  
    xAxis: {
26.  
    data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
27.  
    },
28.  
    yAxis: {},
29.  
    series: [{
30.  
    name: '销量',
31.  
    type: 'bar',
32.  
    data: [5, 20, 36, 10, 10, 20]
33.  
    }]
34.  
    }
35.  
    }
36.  
    },
37.  
    onLoad() {
38.  
     
39.  
    },
40.  
    methods: {
41.  
    changeOption() {
42.  
    const data = this.option.series[0].data
43.  
    // 随机更新示例数据
44.  
    data.forEach((item, index) => {
45.  
    data.splice(index, 1, Math.random() * 40)
46.  
    })
47.  
    },
48.  
    onViewClick(options) {
49.  
    console.log(options)
50.  
    }
51.  
    }
52.  
    }
53.  
    </script>
54.  
     
55.  
    <script module="echarts" lang="renderjs">
56.  
    let myChart
57.  
    export default {
58.  
    mounted() {
59.  
    if (typeof window.echarts === 'function') {
60.  
    this.initEcharts()
61.  
    } else {
62.  
    // 动态引入较大类库避免影响页面展示
63.  
    const script = document.createElement('script')
64.  
    // view 层的页面运行在 www 根目录，其相对路径相对于 www 计算
65.  
    script.src = 'static/echarts.js'
66.  
    script.onload = this.initEcharts.bind(this)
67.  
    document.head.appendChild(script)
68.  
    }
69.  
    },
70.  
    methods: {
71.  
    initEcharts() {
72.  
    myChart = echarts.init(document.getElementById('echarts'))
73.  
    // 观测更新的数据在 view 层可以直接访问到
74.  
    myChart.setOption(this.option)
75.  
    },
76.  
    updateEcharts(newValue, oldValue, ownerInstance, instance) {
77.  
    // 监听 service 层数据变更
78.  
    myChart.setOption(newValue)
79.  
    },
80.  
    onClick(event, ownerInstance) {
81.  
    // 调用 service 层的方法
82.  
    ownerInstance.callMethod('onViewClick', {
83.  
    test: 'test'
84.  
    })
85.  
    }
86.  
    }
87.  
    }
88.  
    </script>
89.  
     
90.  
    <style>
91.  
    .content {
92.  
    display: flex;
93.  
    flex-direction: column;
94.  
    align-items: center;
95.  
    justify-content: center;
96.  
    }
97.  
     
98.  
    .echarts {
99.  
    margin-top: 100px;
100.  
     width: 100%;
101.  
     height: 300px;
102.  
     }
103.  
     </style>

注意事项

        不可以使用 App、Page 的生命周期

        APP 端可以使用 dom、bom API，不可直接访问逻辑层数据，不可以使用 uni 相关接口（如：uni.request）

        H5 端逻辑层和视图层实际运行在同一个环境中，相当于使用 mixin 方式，可以直接访问逻辑层数据。所以命名要注意区分

这篇好文章是转载于：学新通技术网