解决开发uni-app小程序,组件使用小程序插件

578 阅读1分钟

背景:

在开发uni-app小程序时,会遇到在自定义组件使用小程序的插件,但是uni-app和原生的小程序不一样,没有usingComponents入口引入插件,有没有什么办法?

问题产生:

uni-app编译完成后,在小程序打开组件的json文件,发现组件并未被引入:

image.png

但是正常的使用方式为:

image.png

一、页面级别使用

1、如果你的插件实在某个页面去使用,那你可以现在manifest.json中定义好插件

    "mp-weixin": { /* 微信小程序特有相关 */
		"appid": "xxxxxxxxxxxx",  // 小程序appid
		"setting": {
			"urlCheck": false
		},
		"plugins" : {
        "captcha" : {
            "version" : "1.3.11",
            "provider" : "xxxxxxxxxx"  // 插件的appid
        }
    },

2、在pages.json中,定义好你页面的路由时,直接使用usingComponents

{
    "path": "pages/login/login",
    "style": {
            "navigationBarTitleText": "登录",
            "usingComponents": {
                    "captcha": "plugin://captcha/captcha"
            }
    }
},

3、在你的页面中便可以直接去使用该插件了

<captcha></captcha>

二、组件级别使用

1、在你自定义的组件中,去使用插件,并不能向上方那样去使用,你会发现,当你的组件引入到某个页面时,所使用的插件不生效,这时该怎么解决呢,很简单

找到pages.json文件中的 “globalStyle”,全局定义使用插件

"globalStyle": {
    "usingComponents": {
            "captcha": "plugin://captcha/captcha"
    },
},

如何你需要区分媒体平台:

"globalStyle": {
    // #ifdef MP-WEIXIN
    "usingComponents": {
            "captcha": "plugin://captcha/captcha"
    },
    // #endif
},

这样你就可以直接在你自定义的组件中使用该插件了