Taro 组件内如何混合微信小程序原生写法组件

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

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

又是趟坑的一天

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

以下也作为开发记录

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

先在 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)