云开发：微信小程序开发-组件化开发

yorkmass☭

于 2020-01-07 20:12:08 发布

阅读量523

点赞数

分类专栏：云开发文章标签：组件云开发微信小程序模块

本文链接：https://blog.csdn.net/qq_36949176/article/details/103880817

版权

云开发专栏收录该内容

1 篇文章 0 订阅

订阅专栏

云开发之：微信小程序组件化开发

下图是微信小程序的目录结构，components文件夹主要存放组件的代码

我们在components目录下新建一个playlist组件（是一个文件夹，结构和小程序页面一样）

playlist.js

其中properties的参数，playlist用来接收传入的一个对象

// components/playlist/playlist.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    playlist:{
      type:Object
    }
  },
  
  observers:{
    ['playlist.playCount'](count){
      this.setData({
        playCount: this._tranNumber(count, 2)
      })
    }

  },

  /**
   * 组件的初始数据
   */
  data: {
    playCount:'',
  },

  /**
   * 组件的方法列表
   */
  methods: {
    _tranNumber(num,point){
      let numStr=num.toString().split('.')[0]
      if(numStr.length<6){
        return numStr
      }else if(numStr.length>=6 && numStr.length<=8){
        let decimal=numStr.substring(numStr.length-4,numStr.length-4+point)
        return parseFloat(parseInt(num/10000)+'.'+decimal)+'万'
      }
      else if(numStr.length>8){
        let decimal = numStr.substring(numStr.length - 8, numStr.length - 8 + point)
        return parseFloat(parseInt(num / 100000000) + '.' + decimal) + '亿'
      }
    }
  }
})

playlist.json

我们需要把组件设置为true

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

playlist.wxml

这里面写组件的结构

<!--components/playlist/playlist.wxml-->
<view class="playlist-container">
<image src="{{playlist.picUrl}}" class="playlist-img"></image>
<view class="playlist-playcount">
<image src="/images/comp/earphone.png" class="playlist-countimg"></image>
<text>{{playCount}}</text>
</view>
<view class="playlist-name">{{playlist.name}}</view>
</view>

playlist.wxss

这里面写相关的样式

/* components/playlist/playlist.wxss */
.playlist-container{
  width: 220rpx;
  position: relative;
  padding-bottom: 20rpx;
}
.playlist-img{
  width: 100%;
  height: 220rpx;
  border-radius: 6rpx;
}
.playlist-playcount{
  font-size: 25rpx;
  color: #fff;
  text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
  position: absolute;
  right: 10rpx;
  top:4rpx;
  padding-left: 26rpx;
  display: inline-block;
  text-align: middle;
}
.playlist-countimg{
  width: 15px;
  height: 15px;
  margin-right: 5px;
}
.playlist-name{
  font-size: 26rpx;
  line-height: 1.2;
  padding: 2px 0 0 6px; 
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  text-overflow: ellipsis;
}

写好之后，我们就可以在小程序页面（pages）引入我们写好的这个组件

在pages目录下的playlist.json文件中，我们要引入组件的路径

{
  "usingComponents": {
    "x-playlist":"/components/playlist/playlist"
  }
}

在playlist.wxml中，我们就可以使用<x-playlist>标签引用组件

<!--miniprogram/pages/playlist/playlist.wxml-->
<swiper indicator-dots="true" autoplay="true" interval="2000" duration="1000">
<block wx:for="{{swiperImgUrls}}" wx:key="url">
<swiper-item>
<image src="{{item.url}}" mode="widthFix" class="img" bind:tap="jump"></image>
</swiper-item>
</block>
</swiper> 

<view class="playlist-container">
  <block wx:for="{{playlist}}" wx:key="picUrl">
    <x-playlist playlist="{{item}}" bind:tap="jump"></x-playlist>
  </block>
</view>

playlist.js

这里面包含相关的数据信息

// miniprogram/pages/playlist/playlist.js
Page({

  /**
   * 页面的初始数据
   */
  
  data: {
    openid:'',
    swiperImgUrls:[{
      url:'https://cn.bing.com/th?id=OIP.J7C76dlRHqMy_l_TGNIb0QHaEK&pid=Api&rs=1'
    },
    {
      url: 'https://cn.bing.com/th?id=OIP.cp5Jujcc4CL4Wh-4jangqwHaEK&pid=Api&rs=1'
    },
    {
      url: 'https://cn.bing.com/th?id=OIP.o0M1u4Znrnj2MQf0m9A9TAHaEK&pid=Api&rs=1'
    }],
    playlist:[
      {
        playCount:200000000,
        name:'yaoyi is very handsome and smart',
        picUrl:'https://cn.bing.com/th?id=OIP.Qz9nEqNOQ73HWNBIF5FDTgHaHa&pid=Api&rs=1'
      },
      {
        playCount: 2555008400,
        name: 'she is clever but she don not love her',
        picUrl: 'https://cn.bing.com/th?id=OIP.TYmT9lvbezQ9hspnOYaIGQAAAA&pid=Api&rs=1'
      },
      {
        playCount: 23244300,
        name: 'everyone has her dream',
        picUrl: 'https://cn.bing.com/th?id=OIP.zhvykjGi-XOzifCtwcsU2wAAAA&pid=Api&rs=1'
      },
      {
        playCount: 121225400,
        name: 'you say say with me say that yorkmass is very wonderful',
        picUrl: 'https://cn.bing.com/th?id=OIP.EilG3DsOAJL2mcBff-E-8wAAAA&pid=Api&rs=1'
      },
      {
        playCount: 145250400,
        name: 'what a pity you see see yourself',
        picUrl: 'https://cn.bing.com/th?id=OIP.CpJBaT7j9_GJKsJ5cXb67gAAAA&pid=Api&rs=1'
      }
      ,
      {
        playCount: 50400,
        name: 'what a pity you see see yourself',
        picUrl: 'http://img.wowoqq.com/allimg/180129/1-1P12Z62159-51.jpg'
      }
    ]

  },
  jump(){
    wx.navigateTo({
      url: '/pages/demo/demo',
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.cloud.callFunction({
      name:'login'
    }).then((res)=>{
      this.setData({
        openid:res.result.openid
      })
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return{
      title:openid+'沙雕的日常',
      path:'/pages/blogs'

    }

  }
})

这样，我们就能很好的在pages中的playlist界面使用playlist组件了！