俊忆公 發表於 2021-3-8 00:13:00

微信小程序插件开发 Demo

<h1 id="序言">序言</h1>
<blockquote>
<p>最近需要开发小程序插件,由于很久没有做过小程序有关的项目了对小程序开发过于生疏,以下的 demo 用于熟悉小程序插件开发</p>
</blockquote>
<h1 id="插件开发">插件开发</h1>
<h2 id="演示">演示</h2>
<p><img src="https://cdn.jsdelivr.net/gh/damarkday/pic-upload/img/78.gif" alt="img" loading="lazy"><br>
输出为:<br>
<img src="https://cdn.jsdelivr.net/gh/damarkday/pic-upload/img/79.png" alt="img" loading="lazy"></p>
<h2 id="开发文档">开发文档</h2>
<p>微信小程序插件开发文档可以直接点击 传送门</p>
<h2 id="demo">Demo</h2>
<h3 id="项目目录">项目目录</h3>
<p><img src="https://cdn.jsdelivr.net/gh/damarkday/pic-upload/img/80.png" alt="img" loading="lazy"></p>
<p>项目中包含了两个目录:</p>
<ul>
<li><code>miniprogram</code> 目录:放置的是一个小程序，该小程序是用于调试、测试插件用的。</li>
<li><code>plugin</code> 目录:插件代码的存放目录，用于放置我们开发的插件<br>
前者就跟普通小程序一样，我们可以正常开发，后来用来插件调试、预览和审核，不同的是 app.json 和 project.config.json 里多了一些关于项目插件的配置而已，这些也都是官方帮你完成了，一般也不用配置，当然我们也可以根据自己的实际项目需求做对应的调整~</li>
</ul>
<p><code>plugin</code> 插件文件夹下存放的插件的目录结构大概如下:</p>
<ul>
<li><code>api</code> : 接口插件文件夹，可以存放插件所需的接口</li>
<li><code>components</code> : 插件提供的自定义组件文件夹， 中自定义组件可以有多个</li>
<li><code>index.js</code> : 插件入口文件，可以在这里 export 一些 js 接口，供插件使用者使用</li>
<li><code>plugin.json</code> : 插件的配置文件，主要说明有哪些自定义组件可以供插件外部调用，并标识哪个 js 文件是插件的 js 接口文件，默认的配置形式如下:</li>
</ul>
<pre><code class="language-json">{
    "publicComponents": {
      "list": "components/list/list"
    },
    "main": "index.js"
}
</code></pre>
<p>本次项目参考了其他博主的博客项目,实现一个省市区选择器的插件,并在点击提交按钮的时候把数据提交过去</p>
<h3 id="demo-源码">Demo 源码</h3>
<h4 id="miniprogram-文件">miniprogram 文件</h4>
<h5 id="index-文件夹">index 文件夹</h5>
<p>文件目录为:<br>
index</p>
<ul>
<li>index.js</li>
<li>index.json</li>
<li>index.wxml</li>
<li>index.wxss</li>
</ul>
<p><code>index.js</code></p>
<pre><code class="language-js">const plugin = requirePlugin('picker') // 引入插件,用于调用插件里面的接口
Page({
    data: {
      region: ['广东省', '广州市', '海珠区'],
    },
    submit() {
      console.log(this.data.region)
      console.log(plugin.getPluginInfo())
      console.log(plugin.setPluginInfo('new System'))
      console.log(plugin.getSystemInfo())
    },
    changeEvent(e) {
      console.log(e)
      this.setData({
            region: e.detail.region,
      })
      console.log(plugin.getPluginInfo())
      console.log(plugin.setPluginInfo('new System'))
      console.log(plugin.getSystemInfo())
    },
    onLoad() {
      console.log(plugin)
    },
})
</code></pre>
<p><code>index.json</code></p>
<pre><code class="language-json">{
    "usingComponents": {
      "regionPicker": "plugin://picker/pickerCom"
    }
}
</code></pre>
<p><code>index.wxml</code></p>
<pre><code class="language-xml">&lt;regionPicker region="{{region}}"bindchangeEvent="changeEvent" /&gt;

&lt;button class='submit' bindtap="submit"&gt;提交&lt;/button&gt;
</code></pre>
<p><code>index.wxss</code><br>
(无代码)</p>
<p><code>app.json</code></p>
<pre><code class="language-json">{
    "pages": ["pages/index/index"],
    "plugins": {
      // 插件名称
      "picker": {
            "version": "dev", // 开发版本
            "provider": "插件的识别id" // 插件的识别id
      }
    },
    "sitemapLocation": "sitemap.json"
}
</code></pre>
<h4 id="plugin-文件">plugin 文件</h4>
<h5 id="api">api</h5>
<p><code>api.js</code></p>
<pre><code class="language-js">let systemInfo = null
// 获取插件信息
function getPluginInfo() {
    return {
      name: 'regionPicker',
      version: '1.0.0',
      date: '2018-04-14',
    }
}
//设置设备信息
function setSystemInfo(value) {
    systemInfo = value
}
//获取设备信息
function getSystemInfo() {
    return systemInfo
}

//设置系统信息
function setPluginInfo(value) {
    return value
}
module.exports = {
    getPluginInfo,
    getSystemInfo,
    setSystemInfo,
    setPluginInfo,
}
</code></pre>
<h5 id="components-文件">components 文件</h5>
<p>本次的插件自定义组件名称设置为 <code>picker</code>,<br>
文件目录为:<br>
components</p>
<ul>
<li>picker.js</li>
<li>picker.json</li>
<li>picker.wxml</li>
<li>picker.wxss</li>
</ul>
<p><code>picker.js</code>文件源码</p>
<pre><code class="language-js">Component({
    properties: {
      region: {
            type: Array,
            value: ['北京市', '北京市', '东城区'],
      },
    },
    data: {},
    methods: {
      bindRegionChange(e) {
            this.setData({
                region: e.detail.value,
            })
            // 触发回调
            this.triggerEvent('changeEvent', { region: this.data.region })
      },
    },
})
</code></pre>
<p><code>picker.json</code>文件源码</p>
<pre><code class="language-json">{
    "component": true,
    "usingComponents": {}
}
</code></pre>
<p><code>picker.wxml</code>文件源码</p>
<pre><code class="language-xml">&lt;view class='section'&gt;
&lt;view class="section-title"&gt;省市区选择器&lt;/view&gt;
&lt;picker mode="region" bindchange="bindRegionChange" value="{{region}}"&gt;
    &lt;view class="picker"&gt;
      当前选择：{{region}}，{{region}}，{{region}}
    &lt;/view&gt;
&lt;/picker&gt;
&lt;/view&gt;
</code></pre>
<p><code>picker.wxss</code>文件源码</p>
<pre><code class="language-css">.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;
}
</code></pre>
<h5 id="indexjs">index.js</h5>
<p>代码为</p>
<pre><code class="language-js">var api = require('./api/api.js')

// 获取设备信息
wx.getSystemInfo({
    success: function (res) {
      // 存数据
      api.setSystemInfo({
            model: res.model,
            system: res.system,
      })
    },
})

module.exports = {
    // 暴露接口,让使用插件的可以调用接口
    getPluginInfo: api.getPluginInfo,
    getSystemInfo: api.getSystemInfo,
    setPluginInfo: api.setPluginInfo,
}
</code></pre>
<h5 id="pluginjson">plugin.json</h5>
<p>代码为</p>
<pre><code class="language-json">{
    "publicComponents": {
      "pickerCom": "components/picker"
    },
    "pages": {},
    "main": "index.js"
}
</code></pre>
<h1 id="最后">最后</h1>
<p>十分感谢原博主,本博客参考的文献的地址为:</p>
<ul>
<li>手把手教你开发微信小程序中的插件</li>
<li>开发插件|微信开发文档</li>
</ul><br><br>
来源：https://www.cnblogs.com/GoodMemoryBlog/p/14497567.html
頁: [1]
查看完整版本: 微信小程序插件开发 Demo