Skip to content

vue3 项目中微信小程序调用 wxs 方法无法传入响应式变量作为参数 #4633

Open
@obhasqr

Description

@obhasqr

问题描述

vue3项目在模板中调用 wxs 写的方法运行到微信小程序时传入的参数变成 undefined,运行到 h5 正常。
用 hbuilderx 新建了空白 demo 测试了三种情况:

  1. 使用 v-for 遍历响应式数组并把 item 传入 wxs 方法
    微信小程序 wxs 方法使用参数时对象属性为 undefined
  2. 直接传入响应式对象变量给 wxs 方法
    微信小程序不会调用 wxs 方法
  3. 调用方法时直接传入对象
    都可以正常工作

以下是 demo 代码

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title" v-for="(item, index) in users" :key="index">reacitve array: {{ wxs.formatInfo(item) }}</text>
            <text class="title">reacitve object: {{ wxs.formatInfo(user) }}</text>
            <text class="title">object: {{ wxs.formatInfo({ name: 'Test5', age: '18' }) }}</text>
        </view>
    </view>
</template>

<script module="wxs" lang="wxs">
var formatInfo = function (info) {
    console.log('formatInfo: ' + info + ', name: ' + info.name + ', age: ' + info.age)
    return '我是 ' + info.name + ", 今年 " + info.age
}

module.exports = {
    formatInfo: formatInfo
}
</script>

<script>
export default {
    data() {
        return {
            title: 'Hello',
            users: [
                {
                    name: 'Test',
                    age: '18'
                },
                {
                    name: 'Test2',
                    age: '19'
                },
                {
                    name: 'Test3',
                    age: '20'
                }
            ],
            user: {
                name: 'Test4',
                age: '18'
            }
        }
    },
    onLoad() {},
    methods: {}
}
</script>

复现步骤

  1. 写一个带参 wxs 方法
  2. 在模板中调用时传入响应式变量
  3. 运行到小程序

预期结果

微信小程序可以正常使用 wxs 方法

实际结果

微信小程序不能正常调用 wxs 方法
image
log
image

h5可以正常运行
image
log
image

系统信息:

  • 发行平台: 微信小程序、H5平台
  • 操作系统 : Microsoft Windows [Version 10.0.22631.2861]
  • HBuilderX版本: 3.98
  • 设备信息: WeChatLib: 3.1.5

补充信息

demo 是用 hbuilderx 创建的默认模板 vue3 项目

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions