0530-3433334

网站建设 APP开发 小程序

知识

分享你我感悟

您当前位置>首页 >> 知识 >> 小程序

2018.3.13微信小程序插件重大功能更新!

发表时间:2023-08-31 08:09:52

文章来源:炫佑科技

浏览次数:142

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

2018.3.13微信小程序插件重大功能更新!

昨天(2018年3月13日),微信小程序发布重大功能更新,支持插件的使用和开发。 我个人预测,不出2个月,优质服务的插件将会如雨后春笋般涌现。

在这篇文章中2018.3.13微信小程序插件重大功能更新!,我将带您学习如何从零开始开发和使用插件。 文章分为3章:

注:为了保存文字内容,我将“微信小程序插件”简称为“插件”。

什么是微信小程序插件?

插件是由js和自定义组件封装的一组代码库。 插件不能单独使用或预览。 它们必须嵌入到其他小程序应用中才能使用。 和NPM的依赖、Maven的依赖库是一样的。

不过插件与NPM、Maven依赖管理的区别在于:

因此,我认为:未来插件应该被第三方封装为服务,而不仅仅是代码库。

如何开发微信小程序插件?

下载*新的微信小程序开发工具(必须是1.02.以上版本),打开开发工具,进入小程序项目,我们会看到“代码片段”标签,如下图:

点击右下角“创建”按钮,创建插件,如下图:

插件的AppId与之前微信小程序的AppId相同。 需要在微信开发后台新建一个微信小程序插件:



微信小程序插件的名称也必须是唯一的。 申请完成后,即可获取插件的AppId。

填写名称和插件AppID后,进入小程序项目,如下图:

项目的代码目录结构如下:

├──

│ ├── app.js

│ ├── app.json

│ └── 页数

├──

│ ├── API

│ ├──

│ ├──index.js

│ └── .json

└── ..json

在..json文件中我们看到代码如下:

{
    "miniprogramRoot": "./miniprogram",
    "pluginRoot": "./plugin",
    "compileType": "plugin",
    "setting": {
        "newFeature": true
    },
    "appid": ".....",
    "projectname": "videoPlayer",
    "condition": {}
}

/.json文件中,代码如下:

{
  "publicComponents": {
    "hgPlayer": "components/player/player"
  },
  "main": "index.js"
}

在/index.js文件中,代码如下:

var data = require('./api/data.js')
module.exports = {
  getData: data.getData,
  setData: data.setData
}

外部抛出接口在/index.js中定义。 小程序使用该插件时,只能使用该插件提供的这两个接口。 小程序无法使用插件的其他接口(或方法)。

完成上述配置后,就可以开始在/中编写组件代码了。 比如我写了我的播放器组件,代码如下:

.js:

Component({
  data: {
    myData:[]
  }
})

.wxml:


  

值得一提的是:

编写组件就是调用()来定义组件代码,这和App()、Page()是一样的。

该组件可以调用的微信API是有限的。 例如,无法调用wx.login()来获取用户信息。 具体限制是:

代码写完后,注意/.json文件中的配置:

{
  "publicComponents": {
    "hgPlayer": "components/player/player"
  },
  "main": "index.js"
}

表示使用该插件的小程序可以使用该组件。 该组件对应的代码为“//”

配置好后,我就可以将插件代码上传到腾讯服务器,进入微信小程序开发后台提交审核了。 腾讯审核通过后,第三方小程序就可以使用我们编写的插件了。

如何使用第三方插件

使用第三方插件之前,需要进入微信小程序开发后台,将插件添加到第三方服务中:

填写第三方插件的AppId,点击添加按钮,对方账号的小程序插件 > 应用管理中就会出现你的应用,如下图:

需要第三方同意您的申请后,您就可以开始使用第三方插件了。

使用第三方插件时,我们需要配置自己小程序的app.json,如下:

{
  "pages": [
    "pages/index/index"
  ],
  "plugins": {
    "myPlugin": {
      "version": "dev",
      "provider": "填写申请通过的插件AppId"
    },
    "plugin1": {
      "version": "dev",
      "provider": "填写申请通过的插件AppId"
    },
     "plugin2": {
      "version": "dev",
      "provider": "填写申请通过的插件AppId"
    }
    ...
  }
}

:要使用的已配置第三方插件列表。

配置完插件列表后,由于每个插件可能有多个组件,所以我们需要定义每个页面要使用的组件。 例如,要在index.js中使用该组件,需要在index.json中进行如下配置:

{
  "usingComponents": {
    "player": "plugin://myPlugin/hgPlayer"
  }
}

“”:“:///”的含义是:使用本页面的插件组件,本页面的别名是: 。

配置好index.json后,可以直接在index.wxml中使用,例如:


    

跟进

到目前为止微信小程序开发免费视频教程,我们已经介绍了:

这个怎么样? 小程序的开发和使用够简单吗? 你能完全理解并上手吗? 你还有别的问题吗? 欢迎留言与我交流。

海哥是一位IT科学家、技术架构师、开源爱好者。 他的开源软件:Jboot被评选为开源中文社区“*受欢迎的开源中文软件”。 我喜欢科技产品,研究新技术。 我擅长将晦涩的技术简单化并愿意分享。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等

相关案例查看更多