插件使用效果图：

学校选择器，起源于我个人开发的项目中的一个实际需求：从列表中选择高校。本质上只是一个选择列表，有很多种呈现方法，而我想让这一环节呈现的更舒适一点（就是带图片咯~），于是开发了这个组件。但我觉得应该有其他开发者会用到同样的需求，那何不分享出来？把它插件化并开源。

一、插件的配置

首先新建一个插件，而不是小程序，如下图。

微信提供的插件模板分为两个模块，一个是miniprogram，是用于模拟业务环境的，你可以在这里模拟下使用插件的小程序业务页面；另一个模块是plugin，这就是插件的实际开发环境了，最新的基础库已经支持插件里面有自定义组件和多个page页面。

改动改动一些模板的变量名，如plugin.json的参数（如要插件的页面、自定义组件等）后，后面就可以开始在plugin里面写插件代码！

{
  "pages": {
    "chooseSchool": "pages/chooseSchool"
  },
  "main": "index.js"
}

在插件的配置方面，官方文档介绍的非常详细，我就不再赘述了：<a href="https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html#%E5%88%9B%E5%BB%BA%E6%8F%92%E4%BB%B6%E9%A1%B9%E7%9B%AE" rel="noopener noreferrer" target="_blank">https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/development.html\#%E5%88%9B%E5%BB%BA%E6%8F%92%E4%BB%B6%E9%A1%B9%E7%9B%AE</a>

二、学校选择器

下面开始写插件的业务代码。

学校选择器主要由三部分组成：一个固定的搜索框、懒加载的列表、搜索失败的提示框。

1、固定的搜索框

  <view class="search_view_fixed">
    <view class="search_view">
      <image class="search_image" src="/images/search.png"></image>
      <input class="search_input" type="text" bindblur="" bindinput="search_school" value="" placeholder="找不到？搜一搜" />
    </view>
  </view>

input配置了bindinput，让每次键入字符时，都将包含该字符的学校名加入渲染的列表里

  /**
   * 搜索学校
   */
  search_school(e){
    var value = e.detail.value
    var schoolList = this.data.schoolList
    var schoolList_now = []
    for(var i = 0; i < schoolList.length; i++){
      if(schoolList[i].name.indexOf(value) != -1){
        schoolList_now.push(schoolList[i])
      }
    }
    this.setData({
      schoolList_now:schoolList_now
    })
  }

2、懒加载的列表

    <block wx:for="{{schoolList_now}}" wx:key="name">
      <view class="school_item" hover-class="hover_item" hover-stay-time="50" catchtap="choose" data-item="{{item}}">
        <image class="school_image" data-index="{{index}}" src="http://www.ming13.cn:5000/schoolImages/{{item.name}}.jpg" lazy-load="true" ></image>
        <view class="school_right_view">
          <view class="school_name">{{item.name}}</view>
          <view class="school_info">
            <view class="school_985" wx:if="{{item.is985}}">985</view>
            <view class="school_211" wx:if="{{item.is211}}">211</view>
          </view>
        </view>
      </view>
    </block>

其中的image配置了lazy-load以允许懒加载，这样可以加快渲染速度。

3.搜索失败的提示框

    <view class="no_tip" wx:if="{{schoolList_now.length == 0}}">
      <view class="no_tip_0">没有搜索到结果</view>
      <view class="no_tip_1">可能是尚未收录该学校</view>
      <view class="no_tip_2">你可以自己输入学校名字</view>
    </view>

配置了wx:if，当待渲染列表长度为0时就渲染出现。

三、插件的调用

如何调用插件呢（这是你必须要告知插件使用者的一件事），微信小程序提供的插件模板已经为你配置好了：你只需要在小程序端的app.json中配置plugin的值如下："choose-school"是插件的名字，provider填写插件的appId，version是版本号（开发时使用的是dev，但正式版需要正式的版本号）

  "plugins": {
    "choose-school": {
      "version": "dev",
      "provider": "wxddd52601ccb94739"
    }
  }

如果插件中还使用了自定义组件，小程序端的对应页面的json中也需要配置对应的usingComponents，我这个插件是没有用到自定义组件的。

小程序端（也就是插件的使用者）该如何进入插件页面呢？进入插件有两种方法，一种是wxml中的navigator组件，模板中自带，你只需要改动一下跳转的路径即可，如下图：

<navigator id="nav" url="plugin://choose-school/chooseSchool">
  Go to Plugin page
</navigator>

另一种方法是使用wx.navigateTo，我比较推荐这一种方法，因为我是用这种方法才能拿到回传。如下所示，你只要把navigateTo绑定在任意一个组件的事件上就行，它需要配置两个参数，url需要按插件的规则配置：plugin: // + 插件名 + 插件页面。events需要配置acceptDataFromOpenedPage这个参数以获取返回值。

    wx.navigateTo({
      url: 'plugin://choose-school/chooseSchool',
      events: {
        // 监听返回数据
        acceptDataFromOpenedPage: function(res) {
          console.log('回调成功：',res)
          that.setData({
            school:res.data
          })
        },
      },
    })

到这一步，插件的调用就结束了，下面是获取它的返回值。

四、插件的返回

当插件的业务逻辑和调用都准备就绪时，这个时候最关键的一步来了，小程序调用你的插件后，总是要获取返回值的，那如何传递这个值呢？

微信官方给我们提供了EventChannel这个路由方法，它是页面间事件通信通道。我们在插件页面的学校view上绑定一个点击事件choose，点击后获取该学校的数据并返回给上一个页面，如下图所示：

  choose(e){
    var item = e.currentTarget.dataset.item
    var school = this.data.school
    school.name = item.name
    school.is985 = item.is985
    school.is211 = item.is211
    this.setData({
      school:school
    })
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: school});
    wx.navigateBack({
      delta: 1,
    })
  },

想要将值返回，就新建一个通信信道eventChannel，并且用它发射（emit）一次数据给小程序端开放的信道监控事件acceptDataFromOpenedPage，并把数据school作为data的值传入。然后再调用navigateBack返回小程序端，传值完毕。

五、本插件的实机调用

11.8号我的插件就通过审核啦，我用另一款我已上线的小程序作为例子，给大家分享一下如何调用“学校选择器”。

第一步：登录小程序后台——设置——第三方设置

第二步：点击添加插件，搜索“高校选择器”，点击添加，即可发送申请

第三步：等待申请审核通过（是我审核，如果我没有及时通过，你可以直接私信我）

第四步：点击“详情”——开发文档，查看插件的使用说明

第五步：插件申请通过后，在小程序app.json里面如下配置：（version需要填写1.0.1）（provider一定是填我的插件id：wxddd52601ccb94739，不是小程序的appId），插件名字写“choose-school”（我甚至忘了是在哪里设置这个名字的，以至于我都改不了）

"plugins": {
  "choose-school": {
    "version": "1.0.1",
    "provider": "wxddd52601ccb94739"
  }
},

第六步：打开开发者工具的详情，查看插件信息里是否有“高校选择器”，如果没有就重启一下开发者工具

第七步：在任意地方绑定如图函数，函数触发后就会跳转到插件，选择学校后数据可回调到res里。

wx.navigateTo({
  url: 'plugin://choose-school/chooseSchool',
  events: {
    // 监听返回数据
    acceptDataFromOpenedPage: function(res) {
      console.log('回调成功：',res)
    },
  },
})

第八步：测试是否能拿到回调。

第九步：上线使用~，有任何建议都可以在任何联系到我的地方反馈，我会及时回复！

六、项目源码

组件的源码放在了Gitee上，欢迎下载。

https://gitee.com/cao-mengliang98/school/tree/master

七、其他

如果你想用自己的呈现方式，甚至不使用在微信小程序上，你可以通过这个url来获得学校的logo：<a href="http://www.ming13.cn:5000/schoolImages/" rel="noopener noreferrer" style="color: rgb(16, 174, 255);" target="_blank">http://www.ming13.cn:5000/schoolImages/</a><span style="color: rgb(16, 174, 255);">学校的名字.jpg</span> 不要漏掉.jpg，这是我个人的服务器，个人开发者可以直接使用。以及从源码仓库中获取学校名单.xlxs<span style="font-size: 16px;">。</span>

（logo和名字均暂时只有985211高校，后续会补充完整国内高校）