1|weekly movie

介紹

創建專案+目錄檔案結構

實作一個單頁面的小程式

或者把樣式寫在wxss中

頁面配置初探

要做出來的效果圖：

怎么動態的改變導航欄的文字？

text,view,image組件

實作UI設計圖中的樣式及布局效果

傳統實作:

但是傳統方式布局目標的實作屬性賦值非常分散；嚴重依賴頁面結構與內容實際大小
如果此時又多個text標簽呢，那個margin-bottom的值就不是那么合適了，要重新寫

彈性盒子：

彈性盒子布局相關的wxss屬性賦值比較統一
彈性盒子布局方式靈活

沒有去計算間隔的大小，實作的是人工布局，比較靈活

讓元素大小適配不同寬度螢屏

.about-banner{
  width:375rpx;
  height: 375rpx;
  border-radius: 50%;
}

新增每周推薦weekly頁并快速除錯

<!--pages/weekly/weekly.wxml-->
<view class="container">
<text>本周推薦</text>
<image src="/images/jf.jpg"></image>
<text>教父</text>
<text>點評：最精彩的劇本，最真實的黑幫電影</text>
</view>

使用navigator組件–從about頁跳到weekly頁

open-type默認值navigate，可回傳的
redirect 不可以回傳的
注意：text標簽只能識別純文本，其他都無效

/* pages/about/about.wxss */
/* .container{
  background-color: #eee;
  height: 100vh;
  text-align: center;
}
text{
display: block;
}
text,image{
  margin-bottom: 40px;
} */
.container{
  background-color: #eee;
  height: 100vh;

  display: flex;
  flex-direction: column;
 
  justify-content: space-around;
   align-items: center;

}
.about-banner{
  width:375rpx;
  height: 375rpx;
  border-radius: 50%;
}
.nav-hover{
  color:red;
}
.nav-default{
  color:green;
}

<!--pages/about/about.wxml-->
<view class="container">
<image class="about-banner"src="/images/simbasong.jpg"></image>
<text style="font-weight:bold;font-size:60rpx;">電影周周看</text>
<view>
<text>我</text>
 <navigator style='display: inline;'  url='/pages/weekly/weekly'  open-type="navigate" class="nav-dafault" hover-class="nav-hover">每周推薦</navigator>
<text>一部好片</text>
</view>



<text>我的wechat是：weixin.com/qxy</text>
<text>this is boiling island</text>
<text>i am  EDA</text>
<text>Welcome our country</text>
</view>

但是結果navigator默認的顏色為綠色顯示了，但是點擊后成沒有出現紅色

因為樣式選擇器的一樣的時候，就越在后面優先級越高
所以上面的hover-default優先級高，所以點擊后還是會顯示綠色而不是紅色
下面把nav-hover放在最后面，最后點擊“每周推薦”字體會變成紅色而且跳入weekly頁面

配置tabbar–對若干一級頁面的入口鏈接

app.json:

{
  "pages":[
    "pages/about/about",
    "pages/weekly/weekly"
   
  ],
  
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
    "color": "#000000",
    "selectedColor": "#66CDAA",
    "borderStyle": "black",
    "backgroundColor": "#F0F8FF",

     "list": [
      {
      "pagePath":  "pages/weekly/weekly",
      "text": "每周推薦",
      "iconPath": "images/tabbar/weekly.png",
      "selectedIconPath": "images/tabbar/weekly-selected.png"
    },
    {
      "pagePath":   "pages/about/about",
      "text": "關于",
      "iconPath": "images/tabbar/about.png",
      "selectedIconPath": "images/tabbar/about-selected.png"
    }
  ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

但是原來的about 頁面的元素點擊無效
解決方法：
改下navigator的open-type為switchTab

配置全域導航欄樣式

資料系結–

也就是每一次需要手動修改WXML的值

在AppData可以看見：

<!--pages/weekly/weekly.wxml-->
<view class="container">
<text>本周推薦</text>
<image src="{{thisWeekMovie.imagePath}}"></image>
<text>{{thisWeekMovie.name}}</text>
<text>{{thisWeekMovie.comment}}</text>
<text>數目為:{{count}}</text>
<text>分數為:{{score}}</text>
<text>{{(score>60)?"及格":"不及格"}}</text>
<text>{{score+count}}</text>
</view>

// pages/weekly/weekly.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    thisWeekMovie:{
      name:"教父",
      comment:"最精彩的劇本，最真實的黑幫電影，",
      imagePath:"/images/icon/jf.jpg"
    },
    count:24,
    score:36
  },

  /**
   * 生命周期函式--監聽頁面加載
   */
  onl oad: function (options) {

  },

  /**
   * 生命周期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函式--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函式--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

weekly.json

{
  "usingComponents": {},
  "navigationBarTitleText": "每周推薦"
}