微信程序教程—-学堂在线

Enough, dom limit exceeded, you don’t do stupid things, do you?

html <div>  ==wxml <view>

弹性盒子布局

简单 :http://zh.learnlayout.com/flexbox.html

进阶 :https://bocoup.com/blog/dive-into-flexbox

  1. 从上往下
  2. 相对均匀布局
  3. 水平居中
  4. 基于flewbox layout
目标:每个元素独占一行,从上往下素材均匀(间隔)布置,水平方向居中,传统布局缺点

弹性盒子布局:整体控制 view

  • display:flex

display属性—->

  • 修改主轴方向为从上往下flex-direction

 

  • 间隔均等:
  • 水平居中:

让元素大小适配不同大小屏幕—-响应式长度单位rpx(相对当前屏幕大小)

 

  • 希望宽高均为屏幕高度一半
    • 别用绝对宽度,不好自适应

增加多个页面

  • 新增页面
  • 快速调试新页面
  • 学习使用公共样式表app.wxss
  • 配置页面标题
  • 全局样式表app.wxss

使用navigator组件跳转页面

  • 从about跳转至weekly界面
  • open-type属性
  • hover-class属性及使用注意之处
    • text的元素内容只能包含纯文本,内嵌<navigator>没有用,会被忽略。使用分拆(拆分开)

      open-type=’redirect’不可返回,默认值为navigator,左上角有返回按钮
    • 属性冲突,谁定义后,谁胜出
    • navigator–>开发文档

给小程序配置标签栏:tabBar

  • 若干一级页面的入口链接
  • 全局配置app.json

数据处理

数据缓存

数据绑定

 

Js