Estructura de archivos
1. directorio raíz
app.js programa lógico principal
archivo de configuración app.json
Necesidad de "páginas" atributo de la ruta relativa modo de página de declaración
{
"pages": [
"pages/about/about",
"pages/weekly/weekly"
],
"sitemapLocation": "sitemap.json"
}
app.wxss estilo principal del programa
Aquí todas las páginas son propensos a establecer algunos estilos comunes que se utilizan en clase
información del programa project.config.json
Este archivo es generado automáticamente por las herramientas de desarrollo
carpeta de páginas
Este contiene un pequeño programa de toda la carpeta de páginas
2. Páginas carpeta de archivo de página en la carpeta
A continuación un ejemplo relacionado con la página
la lógica de la página about.js
Para crear un objeto de página aquí
Page({})
Página de perfil about.json
Aquí puede configurar información sobre la página, como el título de la barra de navegación
{
"navigationBarTitleText": "关于"
}
diseño de página about.wxml
En una sintaxis HTML de descripción de página diseño similar, la atención debe tener-marcador de fin
código de ejemplo:
<view class="container">
<image src="/images/profile.JPG" class="icon"></image>
<text class="title">电影周周看</text>
<view>
<navigator url="/pages/weekly/weekly" style="display: inline;" class="nav-text" hover-class="nav-hover" open-type="navigate">
每日推荐
</navigator>
<text class="subtitle">一部好电影</text>
</view>
<text class="subtitle">我的微博：Luke玄</text>
</view>
estilos de página about.wxss
A continuación las definiciones de clase de estilo utilizan páginas
de código de ejemplo:
.container{
background-color: #eee;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.icon{
width: 375rpx;
height: 375rpx;
border-radius: 50%;
}
.title{
font-size: 60rpx;
font-weight: bold;
}
.subtitle{
font-size: 30rpx;
font-weight: lighter;
}
.nav-text{
color: lightblue;
.nav-hover{
color: grey;
}
}