uni-app 微信小程序端vue3编译原生模块微信小店组件（store-product）异常

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

uni-app 微信小程序端vue3编译原生模块微信小店组件（store-product）异常

示例代码：

<template>
<view>
<view>{{ state.appid }}</view>
<template v-if="state.appid">
<store-product :appid="state.appid" :product-id="state.p_id" :key="state.appid" />
</template>
</view>
</template>

<script setup>
import { reactive } from 'vue'
const state = reactive({
appid: '123',
p_id: '123'
})
</script>

操作步骤：

<template>
<view>
<view>{{ state.appid }}</view>
<template v-if="state.appid">
<store-product :appid="state.appid" :product-id="state.p_id" :key="state.appid" />
</template>
</view>
</template>

<script setup>
import { reactive } from 'vue'
const state = reactive({
appid: '123',
p_id: '123'
})
</script>

预期结果：

希望编译后为

<view>
<view>{{a}}</view>
<block wx:if="{{b}}">
<store-product wx:if="{{d}}" key="{{c}}" u-i="390a71d8-0" bind:l="{{l}}" appid="{{a}}" product-id="{{b}}"/>
</block>
</view>

实际结果：

<view>
<view>{{a}}</view>
<block wx:if="{{b}}">
<store-product wx:if="{{d}}" key="{{c}}" u-i="390a71d8-0" bind:l="{{l}}" u-p="{{d}}"/>
</block>
</view>

bug描述：

store-product为微信小店原生组件，被uniapp认为是自定义组件导致打包时组件上的属性丢失使微信小店组件无法正常展示

打包前的代码

<template>  
  <view>  
    <view>{{ state.appid }}</view>  
    <template v-if="state.appid">  
      <store-product :appid="state.appid" :product-id="state.p_id" :key="state.appid" />  
    </template>  
  </view>  
</template>  

<script setup>  
import { reactive } from 'vue'  
const state = reactive({  
appid: '123',  
p_id: '123'  
})  
</script>

编译后的小程序wxml的代码

<view>
<view>{{a}}</view>
<block wx:if="{{b}}">
<store-product wx:if="{{d}}" key="{{c}}" u-i="390a71d8-0" bind:l="{{l}}" u-p="{{d}}"/>
</block>
</view>

编译后index.js代码

"use strict";
const common_vendor = require("../../common/vendor.js");
if (!Array) {
const _component_store_product = common_vendor.resolveComponent("store-product");
_component_store_product();
}
const _sfc_main = {
name: "index",
setup(props) {
const state = common_vendor.reactive({
appid: "123",
p_id: "123"
});
return (_ctx, _cache) => {
return common_vendor.e({
a: common_vendor.t(state.appid),
b: state.appid
}, state.appid ? {
c: state.appid,
d: common_vendor.p({
appid: state.appid,  
})  
} : {});
};
};
};
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["__file", "/Users/takechuanmei/Desktop/code/yuelin-strict-selection-mp/src/pages/test/index.vue"]]);
wx.createPage(MiniProgramPage);

Harmonyos Next教程
1 回复

在处理uni-app在微信小程序端使用Vue3编译原生模块（如微信小店组件store-product）时遇到的异常问题，通常需要确保几个关键步骤被正确执行。以下是一个基本的代码案例和配置步骤，以帮助你解决可能遇到的编译或运行时错误。

1. 配置uni-app项目

首先，确保你的manifest.json文件中正确配置了微信小程序的相关信息，特别是appid和设置项。

{
  "mp-weixin": {
    "appid": "your-app-id",
    "setting": {
      "urlCheck": false
    }
  }
}

2. 安装和配置原生模块

对于微信小店的组件，通常你需要确保已经在微信公众平台中添加了相关的小店功能，并且获取了必要的权限和配置。

3. 使用store-product组件

在你的Vue3组件中，你可以尝试直接引入并使用store-product组件。由于uni-app对微信小程序的原生组件支持有限，你可能需要一些特定的配置来确保组件正确渲染。

<template>
  <view>
    <!-- 微信小店商品组件 -->
    <store-product
      product-id="your-product-id"
      bindload="handleLoad"
      binderror="handleError"
    />
  </view>
</template>

<script>
export default {
  methods: {
    handleLoad(e) {
      console.log('商品加载成功', e.detail);
    },
    handleError(e) {
      console.error('商品加载失败', e.detail);
    }
  }
};
</script>

<style scoped>
/* 样式可以根据需要调整 */
</style>

4. 处理可能的编译异常

  • 组件未找到：确保你的项目已经正确配置了微信小店的权限，并且store-product组件的使用符合微信小程序的规范。
  • 样式问题：原生组件的样式可能需要特殊的处理，如使用cover-view和cover-image来替代view和image，以解决层级问题。
  • API调用失败：检查你的API调用是否符合微信小店的API规范，包括参数和调用时机。

5. 调试和测试

使用微信开发者工具进行调试，查看控制台输出，确保没有JavaScript错误或网络请求错误。同时，检查网络请求的响应，确保数据格式和字段符合预期。

如果以上步骤仍然无法解决问题，建议详细查看微信小程序的官方文档，或者向uni-app的社区和官方支持寻求帮助。在实际项目中，根据具体的错误信息和日志进行针对性的排查和修复是关键。

回到顶部