Mise en œuvre de la page d'accueil de production d'applets WeChat

Cet article présente principalement les informations pertinentes sur la création d'un exemple simple de page d'accueil du mini programme WeChat. Les amis dans le besoin peuvent s'y référer

Un exemple simple de création de page d'accueil de WeChat. mini programme

Rendu d'implémentation :

Tout d'abord, d'un point de vue large, il s'agit de définir les propriétés de la fenêtre

"navigationBarBackgroundColor": "#AFE2E6",//bar背景颜色
"navigationBarTextStyle": "white",//bar字体颜色
"backgroundColor": "white",//背景颜色
"enablePullDownRefresh": "true"//下拉是否刷新

attribut tabBar

Le code complet est le suivant (wxml)

<view>
<navigator url=&#39;/pages/14/1&#39;>
<view class="waylist">
<view class="im im1">1</view>
<view class="way">广从1号线</view>
<view class="ste">市汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url=&#39;/pages/14/2&#39;>
<view class="waylist">
<view class="im im2">2</view>
<view class="way">广从2号线</view>
<view class="ste">芳村汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url=&#39;/pages/14/3&#39;>
<view class="waylist">
<view class="im im3">3</view>
<view class="way">广从3号线</view>
<view class="ste">罗冲围汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/4&#39;>
<view class="waylist">
<view class="im im4">4</view>
<view class="way">广从4快号线</view>
<view class="ste">天河客运站 -从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url=&#39;/pages/14/5&#39;>
<view class="waylist">
<view class="im im4">4</view>
<view class="way">广从4线</view>
<view class="ste">天河客运站 -从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url=&#39;/pages/14/6&#39;>
<view class="waylist">
<view class="im im5">5</view>
<view class="way">广从5号线</view>
<view class="ste">东站汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
<navigator url=&#39;/pages/14/7&#39;>
<view class="waylist">
<view class="im im6">6</view>
<view class="way">广从6号线</view>
<view class="ste">东圃客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/8&#39;>
<view class="waylist">
<view class="im im7">7</view>
<view class="way">广从7号线</view>
<view class="ste">黄埔客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/9&#39;>
<view class="waylist">
<view class="im im8">8</view>
<view class="way">广从8号线</view>
<view class="ste">广园汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/10&#39;>
<view class="waylist">
<view class="im im8">8</view>
<view class="way">广从8快线</view>
<view class="ste">广园汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/11&#39;>
<view class="waylist">
<view class="im im9">9</view>
<view class="way">广从9号线</view>
<view class="ste">滘口汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/12&#39;>
<view class="waylist">
<view class="im im10">10</view>
<view class="way">广从10号线</view>
<view class="ste">越秀南客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/13&#39;>
<view class="waylist">
<view class="im im10">10</view>
<view class="way">广从10快线</view>
<view class="ste">越秀南客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" class="hidden" />
<view class="jian">></view>
</view>
</navigator>
<navigator url=&#39;/pages/14/14&#39;>
<view class="waylist">
<view class="im im11">11</view>
<view class="way">广从11号线</view>
<view class="ste">海珠汽车客运站-从化汽车站</view>
<image src="/assets/images/subway.jpg" style="width:30px; height:30px;" />
</view>
</navigator>
</view>

wxss

.waylist{
display: flex;
border-bottom: 1px solid gray;
font-size: 13px;
}
.waylist view{
height:40px;
line-height: 40px;
}
.waylist .im{
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
color:white;
margin-top: 7.5px;
margin-right: 5px;
border-radius: 50px;
margin-left: 5px;
}
.ste{
color:gray;
text-align: left;
font-size: 12px;
width: 60%;
}
.way{
width: 30%;
}
.jian{
text-align: right;
font-size: 20px;
color:gray;
}
.hidden{
visibility: hidden;
}
image{
margin-top:5px;
}
.im1{
}
.im2{
}
.im3{
}
.im4{
}
.im5{
}
.im6{
}
.im7{
}
.im8{
}
.im9{
}
.im10{
}
.im11{
}

json fichier

{
"navigationBarTitleText": "所有广从线"//bar内容
}

fichier js

Page({
data:{},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
},
})

Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à tout le monde. Utile, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

À propos de choisirImage pour sélectionner des photos ou prendre des photos dans le mini programme WeChat

Modèles personnalisés pour le Mini programme WeChat Introduction aux pop-ups de statut

À propos de la production de la page d'accueil dans le mini programme WeChat

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!