微信小程序（八）

2023-11-19 09:48:28

应用弹性盒子布局

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

　　运算表达式的数据绑定

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

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

码农公寓