ホームページはアプリであり、小規模なプログラムでは非常に一般的な要件です。一般的な要件として、この要件の実現を効率的に完了する方法は非常に重要です。では、0から1までの独自のホームページをどのように実装するのか、この記事を参照してください。
実際の効果
滝の流れのレイアウトを実現すると同時に、Doubanの対応するapiのネットワークリクエストを含み、対応するアイテムのデータを取得します。
WXMLレイアウト
ほとんどのレイアウトは比較的一貫しているため、コードの冗長性を減らすためにコンポーネント化されたデザインを採用しました。以下はホームページのxmlレイアウトです。
<!--index.wxml-->
<searchbar isnavigator="{
{true}}"></searchbar>
<!-- 滑动布局 -->
<indexmodule title = "影院热映" items="{
{movies}}"></indexmodule>
<indexmodule title = "近期热门剧情" items="{
{tvhot}}"></indexmodule>
<indexmodule title = "近期热门综艺" items="{
{shows}}"></indexmodule>
<indexmodule title = "畅销图书" items="{
{books}}"></indexmodule>
<indexmodule title = "热门单曲榜" items="{
{music}}"></indexmodule>
Json
コンポーネント化、次にコンポーネントへの依存関係であるjsonを追加する必要があります
{
"usingComponents": {
"searchbar":"/components/searchbar/searchbar",
"star":"/components/star/star",
"indexmodule":"/components/indexmodule/indexmodule"
}
}indexmoduleはホームページのウォーターフォールコンポーネント、starはスコアリングスターのコンポーネント、searchbarは検索ボックスのコンポーネントです。
ここではあまり詳細な説明ではなく、特定の実装を参照してください
https://blog.csdn.net/m0_37218227/article/details/106984839
https://blog.csdn.net/m0_37218227/article/details/107023453
ネットワークリクエスト
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
var that = this;
/**
* 网络请求
*/
// 电影
wx.request({
url: 'https://m.douban.com/rexxar/api/v2/subject_collection/movie_showing/items?count=7',
// data:{
// count:7
// }
success: function(res) {
var movies = res.data.subject_collection_items;
that.setData({
movies: movies
});
}
});
//电视剧
wx.request({
url: 'https://m.douban.com/rexxar/api/v2/subject_collection/tv_hot/items?count=7',
success: function(res) {
var tvhot = res.data.subject_collection_items;
that.setData({
tvhot: tvhot
});
}
});
//综艺
wx.request({
url: 'https://m.douban.com/rexxar/api/v2/subject_collection/tv_variety_show/items?count=7',
success: function(res) {
var shows = res.data.subject_collection_items;
that.setData({
shows: shows
});
}
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})wx.requestをフォローアップして、対応するモジュールのデータを取得するようにネットワークに要求すると、このページは基本的に準備ができています
最後に、ウォーターフォールフローコンポーネントのwxssファイルを見てください。特定のウォーターフォールフローコントロールのレイアウトスタイルを確認できます。
.module-group{
padding: 40rpx;
background-color: #fff;
}
.module-group .module-top{
font-size: 36rpx;
display: flex;
justify-content: space-between;
}
.module-top .module-title{
font-weight: bold;
color: #494949;
}
.module-top .module-more{
font-size: 28rpx;
color: #41be57;
}
.module-scroll-view{
margin-top: 40rpx;
width: 100%;
height: 400rpx;
white-space: nowrap;
}
.item-navigator{
width: 200rpx;
margin-right: 20rpx;
display: inline-block;
}
.item-navigator .item-group{
width: 100%;
}
.item-group .thumbnail-group{
width: 100%;
height: 284rpx;
}
.thumbnail-group .thumbnail{
width: 100%;
height: 100%;
}
.item-group .item-title{
font-size: 28rpx;
text-align: center;
margin-top: 20rpx;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 20rpx;
}
私が好きな友達が好きで、集めて、サポートして、一緒に進歩できることを願っています