【Kevin Learn 小程序】--＞view

效果图

属性

参考：view

实例

1. app.js

//app.js
App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  },
  globalData: {
    hasLogin: false
  }
})

2. app.json

{
  "pages": [
    "pages/view/view"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

3. view.wxml

  view 组件
  
    
    
  

4. view.wxss

/* pages/view/view.wxss */
.view-parent-container{
  width: 300rpx;
  height: 300rpx;
  background: yellowgreen;
}
.hover-parent-container{
  background: #fff
}
.view-container {
  width: 200rpx;
  height: 200rpx;
  background: chocolate;
  color: #fff;
  text-align: center;
  line-height: 200rpx
}
.hover-container {
  background: rgba(0, 0, 0, 0.7)
}