微信小程序(八)

应用弹性盒子布局

  基于 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 属性

  运算表达式的数据绑定

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

 

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

 

微信小程序(八)

上一篇:关于微信创建自定义菜单教训 {“errcode”:"40016"}


下一篇:小程序项目实践总结