Wechat applets plug-in

preface

Following the last taught you how to implement the WeChat custom components in the small program already have a period of time (do not understand friend advice to see, because the plugin follows the component to a lot of content), March 13, small program added a little * * “plug-in” function, and a new “snippets” developer tools * * functions, In version 1.9.6 of the applets foundation library, developers are allowed to develop plug-ins and provide plug-ins to other applets at the same time. This will undoubtedly bring good news to developers, because different applets can share code, which will save a lot of development costs

Applets plug-in access

Small application plug-in doesn’t like custom components, convenient can embed in your code, it is need to go to the website open function of the small program plugin to use, detailed access process and document can read the official guide to be plugged in, of course this is not the focus of this article, we this article emphasis is to teach you how to develop a small program WeChat plug-in ~

The specific implementation

Establish a template

To develop a small program plug-in, we need to be fully prepared, we open the developer tool, we follow the normal steps to create a small program project, and select “create plug-in quick start template”, if you do not have an AppID, I suggest to register one on the official website, because the lack of AppID, not only some functions are limited, Also not in the real machine debugging ~

The project structure

Once the plug-in project is created, the developer tool automatically creates a new plug-in project. The structure of the sample project shown on the official website is as follows:

Let’s have a general idea about ~

The project contains two directories:

  • miniprogramDirectory: placed is a small program, the small program is used for debugging, testing plug-ins.
  • pluginDirectory: The directory where the plug-in code is stored for the plug-in we develop

Json and project.config.json have more configuration about the plug-in. These are also completed by the official, and generally do not need to configure. Of course, we can also make corresponding adjustments according to our actual project needs ~

The directory structure of plugins stored in the plugin plugin folder is as follows:

  • api: Interface plug-in folder, which can store the interface required by the plug-in
  • components: a custom component folder provided by the plug-in, in which you can have multiple custom components
  • index.jsThe plugin entry file can be found hereexportSome of thejsInterface for use by plug-in consumers
  • plugin.json: Plug-in configuration file, which describes which custom components can be called by the plug-in and identifies which JS file is the plug-in’s JS interface file. The default configuration format is as follows:
    {
      "publicComponents": {
        "list": "components/list/list"
      },
      "main": "index.js"
    }
Copy the code

The specific implementation

Some of you might wonder, right? Why am I writing this article when I think official is not a ready-made example? Website for example, in my opinion, too simple, not enough to show the usage of the plugin, give an example of a lot of things there is no official involved, just pure data list of rendering, without interaction, it almost doesn’t exist in the actual development, in most cases, we are through plug-ins callbacks to a series of operations, This article is specifically aimed at the pain points of the wechat official website example, to share their implementation process and ideas ~

Ok, as usual, first set a small goal, we want to implement a provincial selector plug-in, and when clicking the submit button to submit the data in the past, the overall effect as shown in the picture below ~

Step1

First, we create a regionPicker folder in the Components component file to develop our regionPicker selector. After we right-click Create Component and name it, the component parts are generated. That is.wxml,.wxss,.json,.js four files, for convenience, we directly use wechat’s own picker implementation ~

The code is as follows:

Structure regionPicker WXML

    <view class='section'>
        <view class="section-title"> </view> <picker mode="region" bindchange="bindRegionChange" value="{{region}}" >
            <view class="picker"> the current selection: {{region [0]}}, {{region [1]}}, {{region [2]}} < / view > < / picker > < / view >Copy the code

Style regionPicker WXSS

    .section{
        padding: 20rpx;
    }
    
    .section-title{
        font-size: 30rpx;
        line-height: 40rpx;
        text-align: center;
        color: # 666;
    }
    
    .picker{
        margin: 20rpx auto;
        text-align: center;
        font-size: 30rpx;
        color: # 666;
    }
Copy the code

js regionPicker.js

    Component({
        properties : {
            region : {
                type : Array ,
                value: ['Beijing'.'Beijing'.'Dongcheng District']
            }
        },
        data: {
            
        },
        methods : {
           bindRegionChange(e){
            this.setData({
                region: e.detail.value 
            })
        }
    })
Copy the code

It is basically the same as writing custom components. Data is bound in region field and method declaration is in methods object. For those who are not familiar with writing js files in custom components, Check out the official Component constructor and some of the introduction and understanding from my previous article on custom Component development

Step2

Now that you have implemented a custom component, how can you use it as a plug-in for other applets? You need to configure two places: plugin.json, which declares our plug-in;

plugin.json

    {
      "publicComponents": {
        "regionPicker" : "components/regionPicker/regionPicker"
      },
      "main": "index.js"
    }
Copy the code

The other is to import in the desired page (in this case index. WXML), modify index.json, and import the plugin

index.json

    {
      "usingComponents": {
        "regionPicker" : "plugin://myPlugin/regionPicker"}}Copy the code

Then you can call it from the page

index.wxml

<! RegionPicker /> <button class='submit'> submit < / button >Copy the code

Now you should see something like the image below

Well, everything seems to be working fine. There seems to be nothing wrong with it

How to transfer the data after I switch, how to wear the selected area when I click the submit button, yes, let’s continue to see ~

Step3

First of all, we know from our previous component development experience that we declared region in the Properties field, so of course we can modify it. We also declare a region in the data field in index.js, except that we set the value to region: RegionPicker region=”{{region}}”/> regionPicker region=”{{region}}” Instead, it changed to Guangdong province, Guangzhou city, Haizhu District, which solved the problem of modifying the default value of the plug-in, and then is the callback event!

Regionpicker.js bindRegionChange () {regionPicker.js bindRegionChange () {regionPicker.js bindRegionChange () {regionPicker.js bindRegionChange ();

    bindRegionChange(e){this.setData({region: e.dail.value}); RegionChange(e){this.setData({region: e.dail.value});"changeEvent", { region: this.data.region})
    }
Copy the code

Just call the changeEvent method in index.js.

index.js

    Page({
        data: {
            region: ['Guangdong'.'Guangzhou'.'Pearl Zone']},submit(){
            console.log(this.data.region)
        },
        changeEvent(e){
            console.log(e)
            this.setData({
                region : e.detail.region
            })
        },
        onLoad() {}})Copy the code

This way, each time the region is selected, we can get the data we want via e.tailor via callback

So far, there is no problem with the data transfer of the plug-in. Let’s think about what we have not used, the API interface of the plug-in, ok, we will see how to use this

Step4

Now that we know that the API folder is used to define the interface of the plug-in, we can define the following methods:

api.js

    letsystemInfo = null; // Get plug-in informationfunction getPluginInfo() {
        return {
            name : 'regionPicker' ,
            version : '1.0.0' ,
            date : '2018-04-14'}} // Set device informationfunction setSystemInfo(value){ systemInfo = value; } // Get device informationfunction getSystemInfo() {return systemInfo;
    }
    
    module.exports = {
        getPluginInfo ,
        getSystemInfo ,
        setSystemInfo
    }
Copy the code

Exports then expose the desired interface

Remember our plugin entry file index.js, now it comes in handy. We added our API. Js to the index.js file, so that we can do something with the plugin when it loads.

    var api = require('./api/api.js'Wx.getsysteminfo ({success:function(res) {// save data api.setSystemInfo({model: res.model, system: res.system})},}) module.exports = {getPluginInfo: api.getPluginInfo , getSystemInfo: api.getSystemInfo }Copy the code

This exports two methods, getPluginInfo and getSystemInfo, which expose aspects that are used outside plug-ins to provide interfaces to plug-in callers

Step5

Once we introduce the plug-in, how do we call the plug-in’s interface?

In fact, we simply need to import the plugin in the corresponding JS file (in this case index.js) via var plugin = requirePlugin(“myPlugin”) to get the corresponding interface.

Now when we print the plugin on the onLoad page, the console outputs the following:

Plugins are the same interface that we exported through exports in index.js

The following information is displayed:

Interface data can also be perfectly retrieved, awesome ~

conclusion

How, is not the small program plug-in development have a new understanding! In fact is not as complicated as I thought, it is with the custom component development there are a lot of similarities, I believe now that you have basic get small program plug-in development skills, has not learned the junior refueling ah, search, get started quickly, to develop more commonly used plug-in, convenient after their reference ~ in the small program

Ahem, as for me.

By the way, the code has been hosted on Github, if you need to download ~