微信小程序组件

我想在微信小程序的每个功能页面下，都加上统一的电脑端链接，方便用户体验同一功能对应的网页版。 感觉封装成一个组件比较节省代码。

写了这么久小程序，还是第一次自己封装组件，所以记录一下。

我看官方文档介绍的概念非常多，但实际上我的这个功能需求非常简单，只需 5 分钟看完介绍文档就能实现。

组件存放位置

小程序项目根目录，与 pages 平级，新建一个 components 目录。

组件目录结构

> tree components/
components/
└── web_url
    ├── web_url.js
    ├── web_url.json
    ├── web_url.wxml
    └── web_url.wxss

组件 json

{
  "component": true,
  "usingComponents": {}
}⏎

组件 wxml

<view class="wrapper" bindtap="copyUrl">
    <view>电脑端网页版地址：(点击复制链接地址)</view>
    <text>{{ url }}</text>
</view>

组件 js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    url: {
      type: String,  // 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种
      value: 'https://www.sunzhongwei.com'
    },
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    copyUrl: function() {
      wx.setClipboardData({
        data: this.data.url,
        success (res) {
          wx.getClipboardData({
            success (res) {
              console.log(res.data)
            }
          })
        }
      })
    },

  }
})

组件 wxss

.wrapper {
	color: #969799;
	font-size: 0.9em;
	line-height: 1.5em;
	padding: 1rem;
}

在 page 中使用组件

json

{
  "usingComponents": {
    "web_url": "/components/web_url/web_url"
  },
  "navigationBarTitleText": "组件使用 demo"
}

wxml

<web_url url="https://www.sunzhongwei.com/stock-price"></web_url>

微信关注我哦 👍

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊， 查看更多联系方式