微信小程序笔记2

2019/04/17

1.第一个界面

<!--index.wxml-->
<view class='main'>
<image src='/images/chimchim.jpg'></image>
<text class='t1'>电影周周看</text>
<view>
<navigator hover-class='nav-hover' style='display:inline;' url='/pages/weekly/weekly' open-type='switchTab'>每周推荐</navigator><text>一部好电影</text>
</view>
<text>我的微博：SUGA‘s Day Ala susu</text>
</view>

open-type=‘redirect’ 在使用了tabbar之后就不能用了
navigator为超链接
hover-class='nav-hover’为鼠标点击链接时的类

/* index.wxss */
image{
  width: 375rpx;
  height: 375rpx;
  border: 3px solid pink;
  border-radius: 50%;
}
.t1{
  font-size: 60rpx;
  font-weight: 800;
}
.nav-hover{
  color: #FF6699;

}

/**app.wxss**/
  .main{
  background:ghostwhite;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}//弹性布局，为第一个与第二个界面共同的style

2.第二个界面

<!-- weekly.wxml -->
<view class='main'>
  <text>本周推荐</text>
  <image src='/images/star.jpg'></image>
  <text>A Star Is Born</text>
  <text>SUGA's 推荐，绝对完美</text>
</view>

image{
  width: 200px;
  height: 300px;
}

3.tabbar的使用

app.json文件内

{
  "pages":[
    "pages/index/index",
    "pages/weekly/weekly"
  ],
  "tabBar":{
    "list":[
      {
        "text":"每周推荐",
        "pagePath":"pages/weekly/weekly",
        "iconPath":"images/流派.png",
        "selectedIconPath":"images/更多.png"
      },
      {
        "text": "关于",
        "pagePath": "pages/index/index",
        "iconPath": "images/我.png",
        "selectedIconPath": "images/云.png"
      }
    ],
    "color": "black",
    "selectedColor": "pink"
  },
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#FF6699",
    "navigationBarTitleText": "YIHUA",
    "navigationBarTextStyle":"white"
  }
}

必须有"pages"才能显示页面
“tabBar”:{ “list”:[ 为底部导航栏

4.配置全局导航栏样式

在app.json中：

 "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#FF6699",
    "navigationBarTitleText": "YIHUA",
    "navigationBarTextStyle":"white"
  }