File Structure
1. root directory
app.js main logic program
app.json configuration file
Need to "pages" attribute to the relative path way of declaration page
{
"pages": [
"pages/about/about",
"pages/weekly/weekly"
],
"sitemapLocation": "sitemap.json"
}
app.wxss main program style
Here all the pages are likely to set some common styles used in class
project.config.json program information
This file is automatically generated by development tools
pages folder
This contains a small program of all pages folder
2. pages page file folder in the folder
Below an example about page
about.js page logic
To create a page object here
Page({})
about.json profile page
Here you can configure information about the page, such as the navigation bar title
{
"navigationBarTitleText": "关于"
}
about.wxml page layout
In a similar syntax html page layout description, attention must have end-marker
sample code:
<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>
about.wxss page styles
Here the style class definitions used pages
sample code:
.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;
}
}