app.js app.wxss app.json pages index index.wxml index.wxss index.js index.json project.config.json project.private.config.json sitemap.json

对以上小程序目录结构进行简单说明，如下。

小程序主体 app.js app.wxss，小程序的公共样式 app.json，小程序的公共配置 小程序页面：index pages/index/index.wxml pages/index/index.wxss，页面自己的样式。页面自己的类样式会覆盖app.wxss中的同名类样式。 pages/index/index.js pages/index/index.json，页面自己的配置。页面自己的配置项会覆盖app.json中相同的配置项。

项目根目录下新增文件夹：static，static下新建子文件夹：images，images下放置静态图片资源，如puppy.jpg。 本次代码变更涉及的文件有：

1. app.json
2. app.wxss
3. pages/index/index.wxml
4. pages/index/index.wxss

app.json

{
          
   
    "pages": [
        "pages/index/index"
    ],
    "window": {
          
   
        "navigationBarBackgroundColor": "#FFA500",
        "navigationBarTitleText": "MyDemo",
        "navigationBarTextStyle": "white"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

app.json对小程序进行全局配置。文件内容是一个JSON对象，包含很多属性，详见。其中，常用的属性如：

app.wxss

page{
          
   
  height: 100%;
}

pages/index/index.wxml

<!--index.wxml-->
<view class="container">
  <view class="userInfo">
    <image src="/static/images/puppy.jpg" class="avatar"></image>
    <view class="nickname">夏天的风</view>
  </view>
  <view class="btnBox">
    <text class="btn">hello world</text>
  </view>
</view>

pages/index/index.wxss

.container{
          
   
  display: flex;
  flex-direction: column;
  align-items: center;
  background:lightgoldenrodyellow;
  padding: 100rpx;
  height: 100%;
}
.userInfo{
          
   
  padding: 20rpx 0;
}
.avatar{
          
   
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
}
.nickname{
          
   
  color: gray;
}
.btnBox{
          
   
  margin: 64rpx;
}
.btn{
          
   
  height: 80rpx;
  line-height: 80rpx;
  padding: 6rpx 8rpx;
  border-radius: 4rpx;
  text-align: center;
  border: 1rpx solid #333;
  font-size: 26rpx;
}

相关链接