开发过程中发现 Taro 3.x 还未支持微信小店组件 store-product, 无法在 TSX 内直接使用 <store-product/> 标签

搜了一下,并未有很多例子可供参考,可能微信小程序内嵌入微信小店商品的需求不大...

又是趟坑的一天

拿官方的例子改了后居然成功实现了微信小店商品的嵌入

image

以下也作为开发记录

一、 创建微信小程序原生组件

先在 Taro 项目根目录下 components 内创建微信小程序原生写法的组件, 以 store-product-item 为例

自定义组件文件夹 store-product-item 三个文件如:

store-product-item/
 -- store-product-item.js
 -- store-product-item.json
 -- store-product-item.wxml

store-product-item.wxml 文件原码:

<view>
  <store-product appid="{{appid}}" product-id="{{productId}}" />
</view>

store-product-item.js 文件源码:

Component({
  behaviors: [],
  properties: {
    appid: { // 属性名
      type: String, // 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
      value: '', // 属性初始值(可选),如果未指定则会根据类型选择一个
      observer: function(newVal, oldVal, changedPath) {
         // 属性被改变时执行的函数(可选),也可以写成在methods段中定义的方法名字符串, 如:'_propertyChange'
         // 通常 newVal 就是新设置的数据, oldVal 是旧数据
      }
    },
    productId: String // 简化的定义方式
  },
  data: {}, // 私有数据,可用于模版渲染

  // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
  attached: function(){},
  moved: function(){},
  detached: function(){},

  methods: {
    clickHandler () {
      console.log('clicked')
    }
  }

})

store-product-item.json 文件源码:

{
  "component": true,
  "usingComponents": {
  }
}

以上三个文件的写法就是小程序源生组件的写法,并不需要特殊处理,只是定义了两个参数 appid,productId 需要在使用组件时传入

二、引用微信小程序原生组件

接下来需要在 tsx 文件内引用

以我项目的 page/profile/index 页面的 index.config.ts 配置文件为例

配置 usingComponents 引入 store-product-item 务必确保引入目录正确

index.config.ts 源码是这样的:

export default definePageConfig({
  navigationBarTitleText: '个人主页',
  navigationStyle: 'custom',
  enableShareAppMessage: true,
  enableShareTimeline: true,
  enablePageMeta: true,
  usingComponents: {
    'store-product-item': '../../components/store-product-item/store-product-item'
  }
})

重点是这个:

  usingComponents: {
    'store-product-item': '../../components/store-product-item/store-product-item'
  }

三、在页面中使用

现在在 tsx 内就可以 <store-product-item /> 它正常组件标签使用, 可传入 微信小店的 appid 以及 商品对应的 product-id

const appid = 'xxxx'
  const productId = 'yyyyy'
  return (
        <View>
            {/*@ts-ignore*/}
            <store-product-item product-id={productId} appid={appid} />
          </View>
	)

在 vscode 内可能会报标签没有引入的错误,所以 需要在 上 加上 {/*@ts-ignore*/}


Taro 官方 React 混合使用微信小程序的 demo https://github.com/NervJS/taro-sample-weapp


注:转载请注明出处博客园:王二狗Sheldon池中物 (willian12345@126.com)

posted @ 2024-12-10 17:03 池中物王二狗 阅读(208) 评论(2) 推荐(0) 编辑
摘要: 偶然发现微信小程序的 video 无法像 Image 对象那样设置 mode='widthFix' 实现宽度100% 高度自适应 尝试了各种网上的方案都不可行。 要实现高度自适应需要2个条件: 知道视频的真实宽,高 设置 css 的 aspect-ratio 与 height 在小程序内上传视频 调 阅读全文
posted @ 2024-10-31 12:42 池中物王二狗 阅读(336) 评论(0) 推荐(0) 编辑
摘要: PixiJS源码分析系列:第四章 响应 Pointer 交互事件(上篇) 响应 Pointer 交互事件(上篇) 上一章我们分析了 sprite 在 canvasRenderer 上的渲染,那么接下来得看看交互上最重要的事件系统了 最简单的 demo 还是用一个最简单的 demo 演示 example/sprite-pointerdown.html 为 sprite 添加 阅读全文
posted @ 2024-08-02 14:22 池中物王二狗 阅读(260) 评论(0) 推荐(0) 编辑
摘要: PixiJS源码分析系列:第三章 使用 canvas 作为渲染器 使用 canvasRenderer 渲染 上一章分析了一下 Sprite 在默认 webgl 渲染器上的渲染,这章让我们把目光聚集到 canvasRenderer 上 使用 canvas 渲染器渲染图片的 demo 要使用 canvas 作为渲染器,我们需要引用 pixi-legacy.js /bu 阅读全文
posted @ 2024-07-26 15:02 池中物王二狗 阅读(274) 评论(0) 推荐(0) 编辑
摘要: PixiJS源码分析系列:第二章 渲染在哪里开始? 第二章 渲染在哪里开始? 牢记,按第一章介绍的 npm start 启动本地调式环境才可进行调式 如果是 example 文件夹内的例子还需要 serve . 开启本地静态服务器 上一章介绍了 PixiJS 源码调式环境的安装,以及基本的调试方法。本章要研究一下它是如何渲染的 渲染大致步骤: 注册渲 阅读全文
posted @ 2024-07-17 15:19 池中物王二狗 阅读(268) 评论(0) 推荐(0) 编辑
摘要: PixiJS源码分析系列: 第一章 从最简单的例子入手 从最简单的例子入手分析 PixiJS 源码 我一般是以使用角度作为切入点查看分析源码,例子中用到什么类,什么方法,再入源码。 高屋建瓴的角度咱也做不到啊,毕竟水平有限 pixijs 的源码之前折腾了半天都运行不起来,文档也没有明确说明如何调式 我在 github 上看到过也有歪果仁在问如何本地调式最 阅读全文
posted @ 2024-07-12 15:43 池中物王二狗 阅读(382) 评论(0) 推荐(2) 编辑
摘要: 开发过程遇到一个问题 异步去一个 cdn 上请求一个自定义 JSON 格式的文件报了一个 preflight 错误 has been blocked by CORS policy: Response to preflight request doesn't pass access control c 阅读全文
posted @ 2024-06-22 17:48 池中物王二狗 阅读(1101) 评论(0) 推荐(0) 编辑
摘要: 如何应用 matrix3d 映射变幻 如何应用 matrix3d 映射变幻 先上 demo 记得是在 2015 看到过的一个 html5 演示效果, 很惊艳 当时没明白如何实现,现在我会了,做一个类似的: 又弄了一个拖动的 demo 我数学真的很差 “你好老师!学这个矩阵具体有什么用?” 老师喝着水貌似想了一会儿回答:“考试用”.. 这 阅读全文
posted @ 2024-06-20 17:14 池中物王二狗 阅读(145) 评论(0) 推荐(1) 编辑
摘要: Web Audio API 第6章  高级主题 高级主题 这一章涵盖了非常重要的主题,但比本书的其他部分稍微复杂一些。 我们会深入对声音添加音效,完全不通过任何音频缓冲来计算合成音效, 模拟不同声音环境的效果,还有关于空 3D 空间音频。 重要理论:双二阶滤波器 一个滤波可以增强或减弱声音频谱的某些部分。 直观地,在频域上它可以被表示为一个图表被 阅读全文
posted @ 2024-04-30 15:41 池中物王二狗 阅读(378) 评论(0) 推荐(2) 编辑
摘要: Web Audio API 第5章  音频的分析与可视化 到目前为止,我们仅讨论了音频的合成与处理,但这仅是 Web Audio API 提供的一半功能。另一半功能则是音频的分析,它播放起来应该是什么样子的。它最典型的例子就是音频可视化,但其实有更多的其它应用场景,包括声调检测,节减检测,语音识别等,这些已大大超出本书范围。 对于游戏或交互式应用开发者来说 阅读全文
posted @ 2024-04-18 17:08 池中物王二狗 阅读(630) 评论(0) 推荐(3) 编辑
转载入注明博客园 王二狗Sheldon Email: willian12345@126.com https://github.com/willian12345
点击右上角即可分享
微信分享提示