小程序交易保障标展示组件为例

参考uniapp加载插件、微信小程序加载插件

1. manifest.json:

先打开manifest.json文件，然后我们找到"mp-weixin",引入需要使用的插件

"mp-weixin": {
    
    
		/* 微信小程序特有相关 */
		"appid": "",
		"setting": {
    
    
			"urlCheck": false
		},
		"usingComponents": true,
    "plugins": {
    
    
      "shoppingGuarantee": {
    
    
        "version": "latest",
        "provider": "wxd65104595293601e"
      }
    }
	},

2. pages.json

打开pages.json文件，然后再对应的页面配置处添加东西

 {
    
    
          "path": "xxx",
          "name": "xxx",
          "style": {
    
    
          "mp-weixin": {
    
    //微信插件
			  "usingComponents": {
    
    
                "guarantee-bar": "plugin://shoppingGuarantee/guarantee-bar"
              }
			}   
          }
}

3.页面使用

<template>
  <guarantee-bar :pageType="pageType" :goodsName="goodsName" :goodsImg="goodsImg" :align="align" :spaceSize="spaceSize" :goodsPrice="goodsPrice" :bannerStyle="bannerStyle"  />
</template>
<script>
  export default {
      
      
    data(){
      
      
      return {
      
      
        align: 'between',
        spaceSize: 12,
        bannerStyle: {
      
      
          fontSize: 'normal',
          fontOpacity: 'gray',
        },
        pageType: 'goods_detail',
        goodsName: '微信气泡狗零钱包',
        goodsImg: 'https://xxxxx/',
        goodsPrice: '28元'
      }
    }
  }
</script>