基本目录结构
index目录下文件操作步骤
1.针对index.wxml
<!--index.wxml--> <view class="index-container"> <image src="../../image/logo.png"></image> <text class="username">hello,iwen</text> <view class="btn-view"> <text>开启小程序之旅</text> </view> </view>
代码解析：定义容器，容器中包含图片（img）、文字（text）、按钮（通过view+text实现）
2.其次对于index.wxss 进行html页面渲染
/**index.wxss**/ .index-container{ display: flex; flex-direction: column; align-items: center; } .index-container image{ width: 392rpx; height: 96rpx; margin-top: 100px; } .index-container .username{ margin-top: 50px; font-size: 18px; } .index-container .btn-view{ border: 1px solid #109D59; margin-top: 100px; border-radius: 5px; padding: 5px 30px; display: flex; align-content: center; } .index-container .btn-view text{ color: #109D59; font-size: 15px; }
代码解析：1.设置弹性盒子模型+上下分部+盒子左右居中
2.图片的设置需要引入rpx：1rpx=0.5px，因此在原图片px基础上进行倍数操作；调整边缘到顶部距离
3.调整字体边缘到顶部距离；设置文字大小
4.设置view的样式：填充边框、设置到顶部距离、边框四角呈圆弧（margin-radius）、内边距（padding）、定义弹 性盒子使得文本居中（align-content）
5.设置字体大小、颜色
达到的效果如下图1-1
但是，我们可以发现上面的标题栏呈现效果很差，因此可以通过改变index.json中代码进行渲染！
3.index.json中对window的配置
查看api中对于全局配置的描述：
{ "navigationBarBackgroundColor":"#109D59", "navigationBarTextStyle": "white", "navigationBarTitleText": "我的小程序" }
呈现出效果如下图1-2