WeX5如何使用和扩展本地插件（Cordova plugin）

优质

小牛编辑

133浏览

2023-12-01

WeX5的混合模式底层基于cordova/phonegap，所以开发本地插件只需要按照相应规范就可以，由于BeX5基于WeX5，所以本文档也适用于BeX5。

一、 如何开发本地插件

请参考：Cordova插件开发

二、 哪里有免费的插件资源

cordova官方插件库：http://plugins.cordova.io/#/

github搜索：https://github.com

baidu、google搜索

三、插件如何安装到WeX5

这里以常用的条形码扫描为例介绍。

1. http://plugins.cordova.io/#/package/com.phonegap.plugins.barcodescanner下载好源代码，并把插件的目录名改为和id相同，这里是com.phonegap.plugins.barcodescanner。id可以打开源代码中的plugin.xml看，根节点plugin的id属性值就是。

2. 把插件目录复制到model/Native/plugins目录下

四、如何使用安装好的插件

要想将插件打包到app我们可以有两种办法：

1.在创建/编辑app的过程中，插件选项勾选自动追加插件，但是该情况必须保证在应用编译资源过程中编译到的UI资源引用了该插件，即在.w界面对应的.js文件中“require”了插件，例如：“require(“cordova!com.phonegap.plugins.barcodescanner”)”

2. 在创建/编辑app过程中，直接在插件列表中找到该插件，手动勾选。

接下来就是调用插件api，在需要使用插件的页面对应的js中，如下代码引用：

require("cordova!com.phonegap.plugins.barcodescanner");

再参考插件的文档，书写对应的js。对于barcodesacnner，代码如下：

cordova.plugins.barcodeScanner.scan(
  function (result) {
    alert("We got a barcode\n" +
    "Result: " + result.text + "\n" +
    "Format: " + result.format + "\n" +
    "Cancelled: " + result.cancelled);
  },
  function (error) {
    alert("Scanning failed: " + error);
  }
);

在.w对应的js中，对于barcodesanner，上面代码一般会写到某个组件的click事件上，而有的插件需要在页面初始化时执行，那可以写到model的onLoad事件中。

五、安装好的插件的App作为模版App

Native/templates/normal/x5-std.apk.t Android不选择增强型浏览器使用的App模版

Native/templates/normal/x5.apk.t Adnroid选择增强型浏览器使用的App模版

Native/templates/normal/x5.ipa.t IOS的App模版

可以把上面步骤四生成的App替换到上面对应位置，例如andoird的就直接用x5.apk.t的名字，那后续不通过服务器打包模式打包也将有上面集成的插件能力。