微信小程序-2

数据绑定

• index.js

Page({
  data: {
    info: 'hello world',
    randomNumber: Math.random() * 10,
    imgSrc:'http://www.itheima.com/images/logo.png'
  }
})
1
2
3
4
5
6
7

• index.wxml

<view>{{ info }}view>

<view>{{ randomNumber >= 5 ? '随机数大于等于5' : '随机数小于5' }}view>

<image src="{{ imgSrc }}" mode="widthFix"/>
1
2
3
4
5

事件绑定

常用的事件

事件对象的属性

event.target 可简写为 e.target

bindtap

在小程序中，不存在 HTML 中的 onclick 鼠标点击事件，而是通过 tap 事件来响应用户的触摸行为

无参：

• index.wxml

<button type="primary" bindtap="btnTapHandler">按钮button>
1

• index.js

Page({
  // 定义按钮的事件处理函数
  btnTapHandler(e) {  // 按钮的 tap 事件处理函数
    console.log(e);   // 事件参数对象 e
  }
})
1
2
3
4
5
6

含参：

• index.wxml

<view>{{ count }}view>
<button type="primary" bindtap="CountChange" data-info="{{ addNum }}">+10button>
1
2

• index.js

Page({

  // 点击按钮后事件处理函数
  CountChange(e) {     // 事件参数对象 e
    this.setData({
      count: this.data.count + e.target.dataset.myinfo
    });
  },

  // 页面的初始数据
  data: {
    count: 0,
    addNum: 10
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

bindinput

在小程序中，通过 input 事件来响应文本框的输入事件，语法格式如下：

• index.wxml

<input type="text" value="{{ content }}" bindinput="inputHandler" />
<view>您输入的内容是：{{ content }}view>
1
2

• index.js

Page({
  data:{
    content: ''
  },

  inputHandler(e) {
    // e.detail.value 是变化过后，文本框最新的值
    this.setData({
      content: e.detail.value
    }) 
  }
})
1
2
3
4
5
6
7
8
9
10
11
12

条件渲染

普通渲染

• index.js

Page({
  data:{
    type: 1
  }
})
1
2
3
4
5

• index.wxml

<view wx:if="{{ type === 1 }}">男view>
<view wx:elif="{{ type === 0 }}">女view>
<view wx:else> 未填写 view>
1
2
3

批量渲染

如果要一次性控制多个组件的展示与隐藏，可以使用一个标签将多个组件包装起来，并在标签上使用 wx:if 控制属性，如下所示：（注意：并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染）

• 写如下代码：

<block wx:if="{{ true }}">
  <view>oneview>
  <view>twoview>
block>
1
2
3
4

• 最终展示的结果是：

  <view>oneview>
  <view>twoview>
1
2

hidden

• index.js

Page({
  data:{
    flag: true
  }
})
1
2
3
4
5

• index.wxml

<view hidden="{{ flag }}">条件为true的时候，隐藏元素，否则显示view>
1

循环渲染

默认情况：

• index.js

Page({
  data:{
    arr: ['华为', '小米', '苹果', 'OPPO']
  }
})
1
2
3
4
5

• index.wxml

<view wx:for="{{ arr }}">
  索引：{{ index }}，每一项：{{ item }}
view>
1
2
3

手动指定索引和当前项的变量名：

<view wx:for="{{ arr }}" wx:for-index="idx" wx:for-item="itemName">
  索引：{{ idx }}，每一项：{{ itemName }}
view>
1
2
3

类似于 Vue 列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key 值，从而提高渲染的效率：

• index.js

Page({
  data:{
    userList: [
      {id: 1 ,name: '小明'},
      {id: 2 ,name: '小化'},
      {id: 3 ,name: '小工'}
      ]
  },
})
1
2
3
4
5
6
7
8
9

• index.wxml

  {{ item.name }}

1
2
3

WXSS

屏幕适配

rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，在宽度上等分为 750 份

小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配

样式导入

@import “/xxx.wxss”
1

window 配置

小程序窗口的组成部分

window 节点配置项

• 设置导航栏的标题：

app.json -> window -> navigationBarTitleText
1

• 设置导航栏的背景色

app.json -> window -> navigationBarBackgroundColor

注意：颜色值只能接受6位16进制数，例如：#5a6b7c
1
2
3

• 设置导航栏的标题颜色

app.json -> window -> navigationBarTextStyle
1

下拉刷新

app.json -> window -> enablePullDownRefresh

注意：在 app.json 中启用下拉刷新功能，会作用于每个小程序页面
1
2
3

下拉刷新时的窗口背景色

app.json -> window -> backgroundColor

注意：指定16进制的颜色值 #efefef
1
2
3

下拉刷新时的loading样式

app.json -> window -> backgroundTestStyle
1

设置上拉触底的距离

概念：上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为

注意：默认距离为 50 px，如果没有特殊需求，建议使用默认值即可

app.json -> window -> onReachBottomDistance
1

tabBar 配置

基本介绍

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。

小程序中通常将其分为：

• 底部 tabBar
• 顶部 tabBar

注意：tabBar 中只能配置最少2个、最多 5 个 tab 页签，当渲染顶部 tabBar 时，不显示 icon，只显示文本

组成部分

tabBar 节点的配置项

• app.json

{
  "pages": [
    "pages/index/index",
    "pages/me/me"
  ],
  
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "WeChat",
    "navigationBarBackgroundColor": "#ffffff"
  },
  
  "tabBar": {
  	"list": [
  		{...},
        {...},
    ],
    "position": "top"
  }
  
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

list 中 tab 项

• app.json

{
  "pages": [
    "pages/index/index",
    "pages/me/me"
  ],
  
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "WeChat",
    "navigationBarBackgroundColor": "#ffffff"
  },
  
  "tabBar": {
  	"list": [
  		{
  			"pagePath": "pages/index/index",
  			"text": "首页"
  		},
        {
  			"pagePath": "pages/me/me",
  			"text": "我的"
  		}
    ],
    "position": "top"
  }
  
  "style": "v2",
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

页面配置

• index.json

{
  "usingComponents": {},
  "navigationBarBackgroundColor": "#00b261",
  "backgroundTextStyle": "light"
  ...
}
1
2
3
4
5
6

网络数据请求

请求限制

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

• 只能请求 HTTPS 类型的接口
• 必须将接口的域名添加到信任列表中

配置请求合法域名

配置步骤：登录微信小程序管理后台 => 开发 => 开发设置 => 服务器域名 => 修改 request 合法域名

注意事项：

• 域名只支持 https 协议
• 域名不能使用 IP 地址 或 localhost
• 域名必须经过 ICP 备案
• 服务器域名一个月内最多可申请 5 次修改

跳过限制

跳过 request 合法域名校验，如果后端程序员仅仅提供了 http 协议的接口，暂时没有提供 https 协议的接口，此时为了不耽误开发的进度，我们可以在微信开发者工具中（详情 => 本地设置），临时开启 开发环境不校验请求域名、TLS版本及HTTPS证书 选项，从而跳过 request 合法域名的校验。

注意：跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！

发起数据请求

调用微信小程序提供的 wx.request() 方法，可以发起数据请求，如下所示：

• index.wxml

<button bindtap="getInfo">发起GET请求button>
<button bindtap="postInfo">发起POST请求button>
1
2

• index.js

Page({
  // 发起GET数据请求
  getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/get',   // 请求的接口地址，必须基于 https 协议
      method: 'GET',      // 请求的方式
      data:{              // 发送到服务器的数据
        name: 'zs',
        age: 20
      },
      success: (res) => {   // 请求成功之后的回调函数
        console.log(res.data)
      }
    })
  },
  // 发起POST请求
  postInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method: "POST",
      data: {
        name: 'ls',
        age: 33
      },
      success: (res) => {
        console.log(res.data);
      }
    })
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

页面刚加载时请求数据

我们需要在页面刚加载的时候，自动请求一些初始化的数据，此时需要在页面的 onLoad 事件中调用获取数据的函数

Page({

  // 发起GET数据请求
  getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/get',   // 请求的接口地址，必须基于 https 协议
      method: 'GET',      // 请求的方式
      data:{              // 发送到服务器的数据
        name: 'zs',
        age: 20
      },
      success: (res) => {   // 请求成功之后的回调函数
        console.log(res.data)
      }
    })
  },
  
  // 发起POST请求
  postInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method: "POST",
      data: {
        name: 'ls',
        age: 33
      },
      success: (res) => {
        console.log(res.data);
      }
    })
  },
  
  // 声明周期函数——监听页面加载
  onload: function (options) {
    this.getInfo()
    this.postInfo()
  },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38