（一）微信小程序：實現引導頁

基本目錄結構

　　　　　　

 

 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

　　　　　　　

 

 第二節討論：點擊按鈕后實現頁面跳轉~