使用uniapp开发微信小程序调用插件的配置指南

admin

首先我们需要在manifest.json的源码视图中找到微信小程序的特有配置，如下代码：

1. /* 小程序特有相关 */
   
2.     "mp-weixin" : {
   
3.         "appid" : "wxappid",
   
4.         "setting" : {
   
5.             "urlCheck" : false,
   
6.             "es6" : true,
   
7.             "postcss" : true,
   
8.             "minified" : true
   
9.         },
   
10.         "usingComponents" : true,
    
11.         "permission" : {
    
12.             "scope.userLocation" : {
    
13.                 "desc" : "您的位置将用于更好的为您提供服务"
    
14.             }
    
15.         },
    
16.         "requiredPrivateInfos" : [ "chooseLocation" ],
    
17.         "lazyCodeLoading" : "requiredComponents",
    
18.                 "plugins" : {
    
19.                         "fshows-cash-plugin" : {
    
20.                                 "version": "1.0.7",
    
21.                                 "provider": "wx21efb7c54d4729d6"
    
22.                         }
    
23.                 }
    
24.     },

复制代码

这里我引入的是付呗支付插件，代码如下：

1. "plugins" : {
   
2.                         "fshows-cash-plugin" : {
   
3.                                 "version": "1.0.7",
   
4.                                 "provider": "wx21efb7c54d4729d6"
   
5.                         }
   
6.                 }

复制代码

然后我们在相关的页面使用付呗支付插件，比如在order.vue页面使用，我们需要先在pages.json中找到这个页面的配置，并添加引用付呗组件，代码如下：

1. {
   
2.                         "path": "pages/business/order",
   
3.                         "style": {
   
4.                                 "navigationBarTitleText": "业务登记",
   
5.                                 "h5": {
   
6.                                         "titleNView": false
   
7.                                 },
   
8.                                 "mp-weixin": {
   
9.                                         "usingComponents": {
   
10.                                                 "fs-cash-item": "plugin://fshows-cash-plugin/fs-cash-item"
    
11.                                         }
    
12.                                 }
    
13.                         }
    
14.                 },

复制代码

然后在order.vue页面写付呗组件，代码如下：

1. <!-- #ifdef MP-WEIXIN -->
   
2.                 <fs-cash-item :orderSn="orderSn" @paySucceed="onPaySucceed" @payFail="onPayFail" />
   
3.                 <!-- #endif -->

复制代码

接口返回的orderSn动态赋值。