小程序笔记

文件结构

1 小程序的初体验

home.wxml

<!-- 1.小程序的数据绑定 -->
<view>hello {{name}}</view>
<view>我的年龄 {{age}}</view>

<!-- 2.列表展示 -->
<view wx:for="{{students}}">{{item.name}}--{{item.age}}</view>
<view>{{students[0].name}}</view>

<!-- 3.事件监听改变data -->
<button size="mini" bindtap="handleSubtraction">-</button>
<view>当前计数：{{counter}}</view>
<view wx:></view>
<button size="mini" bindtap='handleBtnClick'>+</button>

home.js

Page({
  data: {
    name: 'sjx',
    age: '18',
    students: [
      {id: 111, name: 'sjx', age: '19'},
      {id: 111, name: 'sjx', age: '19'},
      {id: 111, name: 'sjx', age: '19'}
    ],
    counter: 0
  },
  handleBtnClick() {
    // this.data.counter++;
    // console.log(this.data.counter)
    this.setData({
      counter: this.data.counter+1
    })
  },
  handleSubtraction() {
    this.setData({
      counter: this.data.counter-1
    })
  }
})

2 小程序的MVVM架构

基于MINA框架，使我们从命令式编程转换为声明式编程（Vue/React/Augular）

数据绑定，DOM监听

3 小程序架构和配置

小程序的很多开发需求被规定在了配置文件中（这样做有利于开发效率，并且可以保证开发出来的小程序某些风格是比较一致的：比如导航栏，页面路由等等）

常见的配置文件

app.json

所有的页面都需要在此注册

4 小程序的双线程模型

5 注册小程序

5.1 小程序启动流程

5.2 判断小程序的进入场景

onShow: function (options) {
    switch(options.scene) {
        case 1001:
            break;
        case 1002:
            break;
    }
},

初始化，执行一次，show，执行多次

onLaunch: function () {
    // 异步调用，数据拿到之后才会执行
    wx.getUserInfo({
        success: function(res) {
            console.log(res)
        }
    })
    setTimeout(function() {
        const err = new Error()
        throw err
        console.log(1)
    }, 3000)
},

app.js

globalData: {
    name: 'sjx',
    age: 18
}

home.js

1
2
3

const app = getApp()
console.log(app.global.name)
console.log(app.global.age)

5.3 获取用户数据

app.js

wx.getUserInfo({
  success: function(res) {
    console.log(res)
  }
})

home.wxml

1 2	<open-data type="userNickName"></open-data> <open-data type="userAvatarUrl"></open-data>

5.4 常用的事件

// 自定义事件
handleViewClick() {
  console.log('哈哈哈被点击了')
},
// 监听页面的滚动
onPageScroll(obj) {
  console.log(obj)
},
// 监听页面滚动到底部
onReachBottom(obj) {
  console.log('页面滚动到底部')
},
// 监听下拉事件
onPullDownRefresh(obj) {
  console.log('下拉刷新事件')
}

6 内置组件

6.1 text组件

用于显示文本，类似span标签，行内元素

<!--pages/text/text.wxml-->
<!-- 1. 基本使用 -->
<text>Hello World\n</text>
<text>你好小程序\n</text>
<!-- 
  2. selectable: true
 -->
<!-- 默认情况下text中的文本不能选中 -->
<text selectable="{{true}}">Hello\n</text>
<text selectable>Hello\n</text>

<!-- 3. space：决定文本空格的大小 -->
<!-- 默认为nbsp -->
<text>Hello World\n</text>
<!-- 中文字符空格一半大小 -->
<text space="ensp">Hello World\n</text>
<!-- 中文字符空格大小 -->
<text space="emsp">Hello World\n</text>
<!-- 检测字体设置的空格大小 -->
<text space="nbsp">Hello World\n</text>

<!-- 4. decode属性：是否解码文本 -->
<text>5 &gt; 3</text>
<text decode>5 &gt; 3</text>

6.2 button组件

button.wxml

<!--pages/button/button.wxml-->
<!-- 1. button的基本使用 -->
<button>按钮</button>

<!-- 2. size属性：mini -->
<button size="mini">按钮</button>
<button size="mini">按钮</button>

<!-- 3. type属性 -->
<button size="mini" type="primary">按钮</button>
<button size="mini" type="default">按钮</button>
<button size="mini" type="warn">按钮</button>

<!-- 4. plain：镂空效果 -->
<button size="mini" plain>按钮</button>

<!-- 5. disable：不可用 -->
<button size="mini" disabled>按钮</button>

<!-- 6. loading加载中 -->
<button size="mini" loading>按钮</button>

<!-- 7. hover-class -->
<button hover-class="pressed">按钮</button>

button.wxss

.pressed {
  background: #f00;
  color: white;
}

6.3 view组件

视图组件（块级元素，独占一行，通常用作容器组件），类似于div