微信小程序（八）

应用弹性盒子布局

　　基于 flexbox layout 的实现

　　　　先变为 flexbox layout

 display: flex;

　　　　从上往下

flex-direction: column;

　　　　均匀分布，居中

justify-content: space-around;

//居中

align-items: center;

-----------------------------------------------------------------------------------

响应式长度单位rpx

　　如何让元素大小适配不同宽度屏幕

　　　　小程序规定所有设备的屏幕宽高均位750rpx

　　苹果6屏幕 px:rpx = 1:2

--------------------------------------------------------------------------------------

公共样式表 app.wxss

　　写全局 wxss

外置weekly页的标题

{

  "navigationBarTitleText":"每周推荐"

}

---------------------------------------------------------------------

使用 navigator 组件

<navigator style="display:inline;" url="...">链接</navigator>

<!-- style="display:inline;" 可疑元素？？？ -->

open-type 属性

open-type='redirect'

<!-- 重定向，不返回 -->

hover-class 属性，级使用时注意之处

　　后定义的会渗出，要注意定义的排序(一个坑)

----------------------------------------------------------------

配置 tabBar

<!-- 用于链接点击，icon也变换的，不然点击链接无法跳转页面 -->

open-type='seitchTab'

----------------------------------------------------------------

配置全局的导航栏样式

　　全局配置 app.json 的"window"属性

<!--app.json-->

"window": {

    "navigationBarBackgroundColor": "#fff",

    "navigationBarTextStyle": "black"

  }

-------------------------------------------------------------------

数据绑定-从视图中抽离出数据

　　基于DOM API手动更新视图的缺点--引入 data binding

　　pageObject 的注册

　　pageObject 的 data 属性

Page({

  data:{

    thisWeekMovie:{

      name:"......",

      comment:"......",

      imges:"/imges/g.jpg"

    }

    s:61

  }

})

　　运算表达式的数据绑定

<!--例-->

<text>{{(s>=60)?"及格":"不及格"}}</text>

　　使用开发者工具查看和修改页面状态数据

　　在小程序框架中，每个页面所需要的各种数据，都是集中在这个页面所注册的页面对象中定义的

巴特西