使用Uniapp开发小程序,如何引入插件组件!
插件是什么
微信小程序插件是可被添加到小程序内直接使用的功能组件,是对一组JS接口、自定义组件或页面的封装。它不能独立运行,必须嵌入在其他小程序中才能被用户使用,且第三方小程序在使用时无法看到插件的代码。插件适合封装特定功能或服务,供其他小程序调用,以减少重复开发,为用户提供更丰富的服务。例如,支付插件、地图插件等,开发者可像搭积木般组合使用插件,快速构建小程序功能。
我举个例子,比如我小程序对接的是精选本地生活插件点击地址
这里有详细的对接方法,我们进入主题!看看如何引入插件组件到自己小程序,例如这个组件!
原生小程序开发
我们知道原生小程序开发有4个文件,一个wxml wxss js json ,这四个文件每个编译功能不一样!
.js 负责逻辑处理,是小程序的“大脑”。
.json 控制配置,决定页面和应用的外观与行为。
.wxml 构建页面结构,是视觉呈现的基础。
.wxss 定义样式,让页面更美观。
我们如果引入插件组件,原生开发直接就是在json 文件里面配置即可!
下面展示一些 内联代码片
。
// An highlighted block
{"usingComponents": {"hello-component": "plugin://myplugin/hello-component"}
}
uniapp引入插件组件
因为uniapp 开发文件是vue ,属于单文件。但是不是在vue 单文件中引入,而是在pages.json中对应的文件引入,可能我表达有些问题,直接看例子:
在 pages.json 中pages引入插件组件:
下面展示一些 内联代码片
。
// An highlighted block
{"pages": [{"path": "pages/index/index","style": {"navigationbartitletext": "首页","usingComponents": {“hello-component”:”plugin” }}},{"path": "pages/order/order","style": {"navigationbartitletext": "订单"}}]
}
因为我在手机中输入,不能完整复制,见谅!就是用原生开发的配置在uniapp中pages.json中pages里面的style进行配置插件组件即可!然后在页面直接就可以使用啦!