使用微信开发者工具新建微信小程序项目：mydemo，不使用云开发，不使用模板，自动生成如下文件：

• 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对象，包含很多属性，详见微信小程序官方文档，开发>框架>小程序配置>全局配置。其中，常用的属性如：

• pages，类型为string[]，必填，每一项对应一个页面的路径信息。
• window，类型为Object，非必填，用来设置全局的窗口样式。
  • navigationBarBackgroundColor，设置导航栏的背景颜色。必须为十六进制颜色。
  • navigationBarTitleText，设置导航栏标题文字。
  • navigationBarTextStyle，设置导航栏标题颜色。仅支持"black"和"white"。
• tabBar，类型为Object，非必填。如果小程序是一个多tab应用，用tarBar来设置tab栏的表现，以及tab切换时显示的对应页面。
• entryPagePath，类型为string，非必填。小程序的默认首页是pages列表的第一项，可以通过entryPagePath修改小程序的默认首页。
• style，类型为string，非必填。微信客户端7.0开始，UI界面进行了大改版。小程序也进行了基础组件的样式升级。"style:"v2"，就可启用新版的组件样式。样式升级涉及的组件有 button、icon、radio、checkbox、switch、slider。问题案例见小程序组件button的样式问题。
• subpackages，类型为Object[]，非必填。启用分包时，用subpackages来设置项目的分包结构。
• preloadRule，类型为Object，非必填。启用分包时，用preloadRule来设置分包预下载的规则。

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;
}

相关链接

小程序：搭建index静态页面