Uni-app Mini Program App's Road to Advertising Monetization: Mini Program Plug-ins

What is an applet plug-in

The applet plug-in is different from the applet custom component.

Mini Program plug-ins are plug-ins independently developed by third-party plug-in authors in accordance with the various regulations of WeChat and other small program manufacturers, and directly released to the plug-in platform of the Mini Program. The custom component of the Mini Program is to import the component source code of the Mini Program into the project, and then publish it as a whole. Developers can abstract the functional modules in the page into custom components for reuse in different pages; they can also split complex pages into multiple low-coupling modules, which is helpful for code maintenance

During the running period, the applet guides the dynamic network loading plug-in. However, developers cannot obtain the source code of third-party applet plug-ins imported from the outside world.

And there are certain differences in the names in different applets. For example, it is called in the WeChat applet and Alipay applet 插件, and it is called in the Baidu applet 动态库. For convenience, it is collectively referred to as a plug-in below.

reference documents

Introduce plugins in Uni-app

The plug-ins that are allowed to be used in the fields corresponding to each platform in , refer to the development documents of the plug-ins used based on their own configuration Manifest.json

code example

// 微信小程序
"mp-weixin": {
  "plugins": {
    "myPlugin": {
      "version": "1.0.0",
      "provider": "wxidxxxxxxxxxxxxxxxx",
      "export": "index.js"
    }
  }
}

// 支付宝小程序
"mp-alipay": {
  "plugins": {
    "myPlugin": {
      "version": "*",
      "provider": "2019235609092837",
      "export": "index.js"
    }
  }
}

// 百度小程序
"mp-baidu": {
  "dynamicLib": {
    "myPlugin": {
      "provider": "TheUniqueNameOwnedByThisDynamicLib"
    }
  }
}

Notice

HBuilder X 3.2.13+ Support the Export field, that is, the applet is exported to the plug-in. Currently only WeChat Mini Program and Alipay Mini Program support

use in the page

To use the components contained in the plug-in in the page, you need to configure the corresponding platform or under the node of the corresponding page in P , the example is as follows:ages.jsonStyleUsingComponentsUsingSwanComponents

For example, (before the colon ) is the name of the component used in the page." Hello-component": " Plugin://myPlugin/hello-component"KeyHello-component

ValueDivided into three sections, Pluginit is the agreement (in the Baidu applet DynamicLib), MyPluginthe name of the plug-in is the name when the plug-in is introduced, and Hello-component is the name of the component exposed by the plug-in.

// 微信小程序
{
  "path": "pages/index/index",
  "style": {
    "mp-weixin": {
      "usingComponents": {
        "hello-component": "plugin://myPlugin/hello-component"
      }
    }
  }
}

// 支付宝小程序
{
  "path": "pages/index/index",
  "style": {
    "mp-alipay": {
      "usingComponents": {
        "hello-component": "plugin://myPlugin/hello-component"
      }
    }
  }
}

// 百度小程序 注意是 usingSwanComponents 不是 usingComponents（HBuilder 3.1.0+ 可以使写为 usingComponents）
{
  "path": "pages/index/index",
  "style": {
    "mp-baidu": {
      "usingSwanComponents": {
        "my-special-list": "dynamicLib://myDynamicLib/special-list"
      }
    }
  }
}

Introduce the plug-in code package in the subpackage

Because Alipay applets and Baidu applets do not support the introduction of plug-ins in subpackages. In addition, if subcontracting is used in the project, plug-ins cannot be used in the Alipay applet. Therefore, the content in this section is only for WeChat Mini Programs.

If the plug-in is only used in one sub-package (the same plug-in cannot be referenced by multiple sub-packages at the same time), it can be configured in the sub-package separately, so that the plug-in will not be loaded with the main package, and the developer can declare the plug- in Pages.jsonin subPackages

code example

"subPackages": [{
    "root": "pagesA",
    "pages": [{
        "path": "list/list"
    }]
    "plugins": {
        "pluginName": {
            "version": "1.0.0",
            "provider": "wxidxxxxxxxxxxxxxxxx"
        }
    }
}]

Restrictions on using plugins within subpackages

The plug-in can only be used within this subpackage;
The same plugin cannot be referenced by multiple subpackages at the same time;
You cannot directly jump to the plug-in page in the subpackage from the page outside the subpackage. You need to jump to the non-plugin page in the subpackage first, and then jump to the plug-in page in the same subpackage.

possible problems

Some plug-ins may require some permissions to run normally in the program, please refer to the configuration detailsManifest.json in Mp-weixinPermission
The WeChat development tool prompts "The plug-in version does not exist". It may be that the version used in the sample code of the plug-in development document no longer exists. Please change the version where the plug-in is declared.

Uni-app Mini Program App's Road to Advertising Monetization: Mini Program Plug-ins

Guess you like