uni-app 引用 微信小程序原生自定义组件

参考官方文档:https://uniapp.dcloud.io/frame?id=小程序自定义组件支持

1、创建存放组件的目录,目录名字根据官网定义是 wxcomponents,自己随便取不生效。且需要与pages同级,组件里文件的命名为index,如下:
┌─wxcomponents                  // 微信小程序自定义组件存放目录
│   └──loanTrial                // 微信小程序自定义组件
│        ├─index.js
│        ├─index.wxml
│        ├─index.json
│        └─index.wxss
├─pages
│  └─index
│        └─index.vue
│  └─detail
│        └─detail.vue
├─static
├─main.js
├─App.vue
├─manifest.json
└─pages.json
2、在 pages.json 对应页面的 style -> usingComponents 引入组件。比如我想在detail.vue中引入该组件
//package.json
{
  "path": "pages/detail/detail",
  "style": {
      "navigationBarTitleText": "详情",
      "usingComponents":{
        "loan-trial": "/wxcomponents/loanTrial/index"
      }
   }
},
3、页面中直接使用
// detail.vue
<template>
  <view>
    <loan-trial :carPrice="loadTrialPrice"></loan-trial>
  </view>
</template>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容