uni-app:renderjs
前言
由于app中要使用地图,以前一直用的都是高德地图,在app中是不能操作dom,所以直接用是不可能的,虽然uni-app有地图组件map,但是用着也一直不顺手,最终发现了renderjs,官网提出,在app-vue环境下,视图层由webview渲染,而renderjs
运行在视图层,自然可以操作dom和window。
使用
:prop 传值 :change:prop 监听prop改变
调用改变的方法内有四个参数
newValue:跟新后的数据
oldValue:原先的数据
ownerInstance:通过该函数可以调用内部函数,可以传输数据
instance:当前service层实例
通过 this.$ownerInstance.$vm 获取当前组件的 ComponentDescriptor 实例
-
<template>
-
<view class="content">
-
<!-- #ifdef APP-PLUS || H5 -->
-
<view @click="echarts.onClick" :prop="option" :change:prop="echarts.updateEcharts" id="echarts" class="echarts"></view>
-
<button @click="changeOption">更新数据</button>
-
<!-- #endif -->
-
<!-- #ifndef APP-PLUS || H5 -->
-
<view>非 APP、H5 环境不支持</view>
-
<!-- #endif -->
-
</view>
-
</template>
-
-
<script>
-
export default {
-
data() {
-
return {
-
option: {
-
title: {
-
text: 'ECharts 入门示例'
-
},
-
tooltip: {},
-
legend: {
-
data: ['销量']
-
},
-
xAxis: {
-
data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
-
},
-
yAxis: {},
-
series: [{
-
name: '销量',
-
type: 'bar',
-
data: [5, 20, 36, 10, 10, 20]
-
}]
-
}
-
}
-
},
-
onLoad() {
-
-
},
-
methods: {
-
changeOption() {
-
const data = this.option.series[0].data
-
// 随机更新示例数据
-
data.forEach((item, index) => {
-
data.splice(index, 1, Math.random() * 40)
-
})
-
},
-
onViewClick(options) {
-
console.log(options)
-
}
-
}
-
}
-
</script>
-
-
<script module="echarts" lang="renderjs">
-
let myChart
-
export default {
-
mounted() {
-
if (typeof window.echarts === 'function') {
-
this.initEcharts()
-
} else {
-
// 动态引入较大类库避免影响页面展示
-
const script = document.createElement('script')
-
// view 层的页面运行在 www 根目录,其相对路径相对于 www 计算
-
script.src = 'static/echarts.js'
-
script.onload = this.initEcharts.bind(this)
-
document.head.appendChild(script)
-
}
-
},
-
methods: {
-
initEcharts() {
-
myChart = echarts.init(document.getElementById('echarts'))
-
// 观测更新的数据在 view 层可以直接访问到
-
myChart.setOption(this.option)
-
},
-
updateEcharts(newValue, oldValue, ownerInstance, instance) {
-
// 监听 service 层数据变更
-
myChart.setOption(newValue)
-
},
-
onClick(event, ownerInstance) {
-
// 调用 service 层的方法
-
ownerInstance.callMethod('onViewClick', {
-
test: 'test'
-
})
-
}
-
}
-
}
-
</script>
-
-
<style>
-
.content {
-
display: flex;
-
flex-direction: column;
-
align-items: center;
-
justify-content: center;
-
}
-
-
.echarts {
-
margin-top: 100px;
-
width: 100%;
-
height: 300px;
-
}
-
</style>
注意事项
不可以使用 App、Page 的生命周期
APP 端可以使用 dom、bom API,不可直接访问逻辑层数据,不可以使用 uni 相关接口(如:uni.request)
H5 端逻辑层和视图层实际运行在同一个环境中,相当于使用 mixin 方式,可以直接访问逻辑层数据。所以命名要注意区分
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfkkeci
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24