云开发：微信小程序开发-组件化开发
云开发之：微信小程序组件化开发
下图是微信小程序的目录结构，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
这里面写组件的结构
{{playCount}}
{{playlist.name}}
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中，我们就可以使用
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组件了！