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

Cet article présente principalement la production de la page d'accueil de l'applet WeChat, y compris les informations associées (téléchargement du code source) La page d'accueil est implémentée ici, qui sera utilisée lors du démarrage de la création d'applications. Les amis qui en ont besoin peuvent s'y référer

Page d'accueil du mini programme WeChat :

Jetons un coup d'œil au rendu final :

Ouvrez d'abord l'outil de développement et créez un projet à démarrage rapide, c'est simple Modifiez-le.

• Renommer le dossier Index pour accueillir

• Changer le bonjour tout le monde en bas Ajouter une couleur d'arrière-plan à un style de type bouton ;

•  ; Modifier le style supérieur

Implémentation du bouton :

bienvenue.wxml

 <view class="usermotto">
 <text class="btn">开启小程序之旅</text>
 </view>

welcome.wxss

.usermotto {
 margin-top: 200px;
 border: 1px solid #405f80;
 width: 200rpx;
 height: 80rpx;
 text-align: center;
 border-radius: 5px;
}
.btn{
 font-size: 22rpx;
 font-family: MicroSoft Yahei;
 font-weight: bold;
 line-height: 80rpx;
}

Couleur de fond Paramètres :

Remarque : La définition de la largeur et de la hauteur à 100 % dans la vue la plus externe et l'ajout d'une couleur d'arrière-plan ne sont pas valides. Parce que WeChat utilise par défaut une couche de pages à l'extérieur.

Vous devez donc écrire comme ceci :

page{
 height: 100%;
 background: #b3d4db;
}

Principaux paramètres :

app.jason

{
 "pages":[
 "pages/welcome/welcome"

 ],
 "window":{
 "backgroundTextStyle":"light",
 "navigationBarBackgroundColor": "#b3d4db",
 "navigationBarTitleText": "欢迎",
 "navigationBarTextStyle":"black"
 }
}

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment implémenter une barre de progression circulaire en temps réel dans l'applet WeChat

L'applet WeChat surveille le glissement des gestes Implémentation du changement de page

Développement de l'applet WeChat exécutant l'applet 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!