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

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

下图是微信小程序的目录结构，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组件了！

云开发：微信小程序开发-组件化开发相关推荐

使用uniapp 开发微信小程序map组件在开发过程中遇到的问题
** 使用uniapp 开发微信小程序map组件在开发过程中遇到的问题 [菜鸟记录] ** 发现的问题: 如果给map设置初始化scale的话,手指缩放地图后,点击按钮让地图再次回到和初始化一样的 s ...
从0到一开发微信小程序（2）——开发第一个小程序
文章目录其他相关文章 1.创建项目 2.小程序代码目录介绍 2.1.描述整体的app.* 2.2.描述各自页面的pages下面的目录其他相关文章从0到一开发微信小程序(1)--申请账号并安装开发 ...
【小程序】组件化开发的基本使用(一)
文章目录小程序组件化开发基本使用小程序组件化思想自定义组件的过程组件样式实现细节小程序组件化开发基本使用小程序组件化思想组件插槽定义使用小程序在刚刚推出时是不支持组件化的, 也是为人诟 ...
微信小程序之组件的开发
跟着视频开始小程序的项目的开发,视频中这个小程序已经上线了,可以很好的看着小程序的界面进行开发,昨天看了一下具体的需求,觉得真的细节好多啊,而且其中设计的组件的思想也是很好的,能够很好的实现代码的复用 ...
校园音乐点歌平台的设计与开发微信小程序推荐点歌 java 开发
1. 微信小程序前台展示 (基于协同过滤算法根据用户点歌行为对用户点歌进行推荐) 2 . 使用到的技术框架 Springboot+maven+mybatis+网易云相关API 3. 后台展示项 ...
校园音乐点歌平台的设计与开发微信小程序点歌系统 java 开发
1. 微信小程序前台展示 2 . 使用到的技术框架 Springboot+maven+mybatis+网易云相关API 3. 后台展示项目地址: 项目地址
从0到一开发微信小程序（7）—小程序组件库(提高开发效率)
文章目录其他相关文章 1.组件库 1.1.TDesign 引入TDesign 使用 NPM 修改 app.json 使用组件 TDesign的应用 Rate 评分 Sticky 吸顶容器 Toast ...
从0到一开发微信小程序（6）—小程序常用API
文章目录其他相关文章 1.小程序API 1.1.路由 1.1.1.navigateTo(保留当前页面,跳转到应用内的某个页面,可以带参数) 1.1.2.redirectTo(关闭当前页面,跳转到应用 ...
从0到一开发微信小程序（5）—小程序WXML
文章目录其他相关文章 1.WXML 1.1.事件 1.1.1.系统 1.1.2.分类 1.1.2.1.冒泡事件(bindtap) 1.1.2.2.非冒泡事件(catchtap) 1.1.3.携带参数 ...
从0到一开发微信小程序（1）——申请账号并安装开发环境
文章目录其他相关文章 1.什么是微信小程序? 2.如何申请? 3.开发工具下载其他相关文章从0到一开发微信小程序(1)--申请账号并安装开发环境从0到一开发微信小程序(2)--开发第一个小程序 ...

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

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

云开发：微信小程序开发-组件化开发相关推荐

最新文章

热门文章