uni-app 使用vue3打包安卓app时 renderJS 获取不到上面js参数 h5可以

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app 使用vue3打包安卓app时 renderJS 获取不到上面js参数 h5可以

开发环境 版本号 项目创建方式
Windows windows10 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.6.7

手机系统：Android

手机系统版本号：Android 11

手机厂商：OPPO

手机机型：realme

页面类型：vue

vue版本：vue3

打包方式：云端

示例代码：

<script>
const start = 'static/ITkoala-amap/start.png'  

export default {
data() {
return {
markerList: [],
dataIndex: ''
}
},
mounted() {
this.$nextTick(() => {
// this.getMapData()
this.getMapData()
})
},
methods: {
// 模拟从后台获取地图数据
getMapData() {
this.markerList = [
{
lat: 39.908775,
lng: 116.406315,
icon: start
},
{
lat: 39.973253,
lng: 116.473195,
icon: start
},
{
lat: 39.953253,
lng: 116.453195,
icon: start
}
]
},
//地图点击回调事件
onViewClick(params) {
this.dataIndex = params.dataIndex
}
}
}

</script>

<script module="amap" lang="renderjs">
import config from '@/components/ITkoala-amap/config.js'  

const selectedStart = 'static/ITkoala-amap/selectedStart.png' //选中的图片  

export default {
data() {
return {
map: null,
ownerInstanceObj: null //service层对象
}
},
mounted() {
if (typeof window.AMap === 'function') {
this.initAmap()
} else {
// 动态引入较大类库避免影响页面展示
const script = document.createElement('script')
script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=' + config.WEBAK
script.onload = this.initAmap.bind(this)
document.head.appendChild(script)
}
},
methods: {
initAmap() {
this.map = new AMap.Map('amap', {
resizeEnable: true,
center: [116.397428, 39.90923],
layers: [ //使用多个图层
// new AMap.TileLayer.Satellite() //使用卫星图
],
zooms: [4, 18], //设置地图级别范围
zoom: 10,
mapStyle:'amap://styles/darkblue'
})

this.initMarkers()  
},
//初始化标记点  
initMarkers() {  
let prevMarker = null  
let prevIcon = null  
this.markerList.forEach((item, index) => {  

if(!!item.icon){  
//添加点标记  
let marker = new AMap.Marker({  
position: new AMap.LngLat(item.lng, item.lat),  
offset: new AMap.Pixel(-13, -30),  
icon: item.icon  
})  

marker.on('click', (e) => {  
if(prevMarker){  
prevMarker.setIcon(prevIcon)  
}  
prevIcon = item.icon  
prevMarker = marker  
marker.setIcon(selectedStart)  
this.dataIndex = index  
this.onClick(this.ownerInstanceObj)  
})  

this.map.add(marker)  
}  

})  
},
updateEcharts(newValue, oldValue, ownerInstance, instance) {  
// 监听 service 层数据变更  
this.ownerInstanceObj = ownerInstance  
this.initMarkers()  
},
onClick(ownerInstance) {  
// 调用 service 层的方法  
ownerInstance.callMethod('onViewClick', {  
dataIndex: this.dataIndex  
})  
}
}
}
</script>

操作步骤：

  • renderJS 中拿不到js中的markerList参数

预期结果：

  • renderJS 可拿到js中的参数

实际结果：

  • renderJS 中拿不到js中的markerList参数

bug描述：

  • 使用vue3打包安卓app时 renderJS 获取不到上面js参数 h5可以

Harmonyos Next教程
8 回复

未复现此问题，请提供最小化可复现示例（上传附件）【bug优先处理规则】https://ask.dcloud.net.cn/article/38139


<template> <tm-button label="点击" [@click](/user/click)="amap.abc()"></tm-button> </template> <script module="amap" lang="renderjs"> export default { methods:{ abc() { console.log(1111) } } } </script>

大佬看一下 h5没问题 App就不行 vue3的运行环境

回复 6***@qq.com: 请提供最小化可直接运行复现示例（上传附件）

<template> <tm-button label="点击" [@click](/user/click)="amap.abc()"></tm-button> </template> <script module="amap" lang="renderjs"> export default { methods:{ abc() { console.log(1111) } } } </script> <style> </style>

解决了么

请问解决了？

在uni-app中使用Vue 3打包安卓APP时，如果遇到renderJS无法获取到上层JS参数的问题，这通常与平台差异、环境配置或数据传递机制有关。renderJS在H5环境中能够正常工作，但在原生环境中（如安卓APP）可能会因为渲染环境和权限限制导致数据传递受阻。

以下是一个基本的示例，展示了如何在uni-app中使用Vue 3和renderJS，并尝试解决数据传递问题。请注意，由于具体环境差异，以下代码可能需要根据实际情况进行调整。

Vue 3 + Uni-app 示例

1. 页面模板（pages/index/index.vue）

<template>
  <view>
    <button @click="sendDataToRenderJS">Send Data to RenderJS</button>
    <web-view id="render-js-view"></web-view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const renderJSView = ref(null);

const sendDataToRenderJS = () => {
  const data = { message: 'Hello from Vue 3!' };
  if (renderJSView.value && renderJSView.value.postMessage) {
    renderJSView.value.postMessage(data);
  }
};

onMounted(() => {
  // Assuming you have a way to initialize and get the renderJSView element
  // This might involve a custom component or a direct manipulation of the DOM
  // For simplicity, let's assume we have a reference to it
  const script = document.createElement('script');
  script.src = '/path/to/your/render-js-script.js'; // Adjust path accordingly
  script.onload = () => {
    // Initialize renderJS communication if needed
    // e.g., setting up event listeners for postMessage
    if (renderJSView.value) {
      renderJSView.value.addEventListener('message', (event) => {
        console.log('Message from RenderJS:', event.data);
      });
    }
  };
  document.head.appendChild(script);
});
</script>

2. RenderJS 脚本（static/js/render-js-script.js）

// This script will run in the context of the web-view
window.addEventListener('message', (event) => {
  console.log('Received message from Vue 3:', event.data);
  
  // Do something with the data
  // e.g., update the DOM or send a response back
  const response = { received: true, timestamp: new Date().toISOString() };
  window.parent.postMessage(response, '*');
});

注意

  • 上述代码是一个简化的示例，实际项目中可能需要更复杂的初始化和通信逻辑。
  • 确保web-view组件正确加载并初始化。
  • 在原生环境中，web-view可能不支持所有标准的Web API，因此需要根据具体平台文档进行调整。
  • 如果renderJS无法直接访问上层JS变量，考虑使用全局状态管理（如Vuex）或事件总线进行跨组件通信。
  • 调试时，利用控制台日志和开发者工具检查数据传递和事件触发情况。
回到顶部