小程序逻辑与界面(快速入门)

逻辑层
界面层

小程序学习笔记

逻辑层

小程序不是运行在浏览器中, 没有BOM和DOM对象

小程序的JS有一些额外的成员
- App 方法用于定义应用程序实例对象
- Page 方法用于定义页面应用程序实例对象
- getApp 方法用来获取全局应用程序对象
- getCurrentPages 方法用来获取当前页面的调用栈 (数组最后一个就是当前页面)
- wx对象用来提供核心API

小程序的JS支持CommomJS规范的

界面层

数据绑定

wxss

<!-- 框架最大的特点就是让开发者按照特定的方式编写代码 -->

<!-- 
数据在哪  (当前页面对象的data属性中) 
绑定到哪  (想绑定到哪里哪里就用{{ }}输出) 
-->

<view class="container">
<!-- 这种{{}}的语法叫mustache -->
<text>{{ message }}</text>
<text>{{ person.Snumber }}</text>
<text>{{ person.Sname }}</text>

<!-- 
  {{ }}语法可以用在:
  类似innerHTML
  元素的属性上
  不能用在标签名和属性名上 
  -->
<view class="ha {{ viewClassName }}"></view>

<!-- 可以直接使用字面量和简单的逻辑运算符 -->
<text>{{ "my name is Stitch" }}</text>
<text>{{ 333 }}</text>
<text>{{ 2+1 }}</text>
<!-- <text>{{ 333 > 33 ? '你死了' : '你活了' }}</text> -->

<!-- 使用{{ }}语法解析就不会误解true/false -->
<checkbox checked="{{ false }}"></checkbox>

</view>

wxss

.sdq{
    display: flex;
    color: #aaa;
}

Page({
  // 为页面提供数据
  // date就是界面与逻辑之间的桥梁
  data: {
    message: "我叫史迪奇",
    person:{
      Sname: "史迪奇",
      Snumber: 626,
    },
    viewClassName: "ha"
  }
})

列表渲染

wxss

<view wx:for="{{ list }}">{{ item.name }}</view>

Page({
  // 为页面提供数据
  // date就是界面与逻辑之间的桥梁
  data: {
        list:[
      {
        name: "sdq",
      },
      {
        name: "sdz",
      }
    ]
  }
})

事件处理

点击事件被点击了返回log这就是事件处理

wxss

<view bindtap="onclick">点我</view>
<input type="text" bindinput="onclick" />

Page({
  onclick:function(){
    console.log('点击了')
  }
})

事件冒泡

冒泡事件: 当一个组件上的事件被触发后, 该事件会向父节点传递
非冒泡事件: 当一个组件上的事件被触发后, 该事件不会向父节点传递

事件传参

就是把事件的参数传递过去

wxss

<button bindtap="Stitch" data-name="史迪奇">点我</button>
<button bindtap="Stitch" data-name-sdz="史迪仔">点我</button>

Page({
  Stitch:function(){
    console.dir(e.target.dataset)
    // 事件处理函数的this指向还是页面对象
    // console.log(this)
  }
})

单个数据流

wxss

小程序 逻辑与界面(快速入门)

逻辑层

界面层

数据绑定

列表渲染

事件处理

事件冒泡

事件传参

单个数据流

小程序逻辑与界面(快速入门)