微信小程序-2 - 技术栈

数据绑定

index.js

javascript 复制代码

Page({
  data: {
    info: 'hello world',
    randomNumber: Math.random() * 10,
    imgSrc:'http://www.itheima.com/images/logo.png'
  }
})

index.wxml

html 复制代码

<view>{{ info }}</view>

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

<image src="{{ imgSrc }}" mode="widthFix"/>

事件绑定

常用的事件

类型	绑定方式	事件描述
tap	bindtap 或 bind:tap	手指触摸后马上离开，类似于 HTML 中的 click 事件
input	bindinput 或 bind:input	文本框的输入事件
change	bindchange 或 bind:change	状态改变时触发

事件对象的属性

event.target 可简写为 e.target

属性	类型	说明
type	String	事件类型
timeStamp	Integer	页面打开到触发事件所经过的毫秒数
target	Object	触发事件的组件的一些属性值集合
currentTarget	Object	当前组件的一些属性值集合
detail	Object	额外的信息
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	Array	触摸事件，当前变化的触摸点信息的数组

bindtap

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

无参：

index.wxml

html 复制代码

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

index.js

javascript 复制代码

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

含参：

index.wxml

html 复制代码

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

index.js

javascript 复制代码

Page({

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

  // 页面的初始数据
  data: {
    count: 0,
    addNum: 10
  }
})

bindinput

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

index.wxml

html 复制代码

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

index.js

javascript 复制代码

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

  inputHandler(e) {
    // e.detail.value 是变化过后，文本框最新的值
    this.setData({
      content: e.detail.value
    }) 
  }
})

条件渲染

普通渲染

index.js

javascript 复制代码

Page({
  data:{
    type: 1
  }
})

index.wxml

html 复制代码

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

批量渲染

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

写如下代码：

html 复制代码

<block wx:if="{{ true }}">
  <view>one</view>
  <view>two</view>
</block>

最终展示的结果是：

html 复制代码

  <view>one</view>
  <view>two</view>

hidden

index.js

javascript 复制代码

Page({
  data:{
    flag: true
  }
})

index.wxml

html 复制代码

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

循环渲染

默认情况：

index.js

javascript 复制代码

Page({
  data:{
    arr: ['华为', '小米', '苹果', 'OPPO']
  }
})

index.wxml

html 复制代码

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

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

html 复制代码

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

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

index.js

javascript 复制代码

Page({
  data:{
    userList: [
      {id: 1 ,name: '小明'},
      {id: 2 ,name: '小化'},
      {id: 3 ,name: '小工'}
      ]
  },
})

index.wxml
<view wx:for="{{ userList }}" wx:key="id"> {{ item.name }} </view>

WXSS

屏幕适配

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

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

样式导入

@import "/xxx.wxss"

window 配置

小程序窗口的组成部分

window 节点配置项

设置导航栏的标题：

app.json -> window -> navigationBarTitleText
设置导航栏的背景色

app.json -> window -> navigationBarBackgroundColor

注意：颜色值只能接受6位16进制数，例如：#5a6b7c
设置导航栏的标题颜色

app.json -> window -> navigationBarTextStyle

下拉刷新

app.json -> window -> enablePullDownRefresh

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

下拉刷新时的窗口背景色

app.json -> window -> backgroundColor

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

下拉刷新时的loading样式

app.json -> window -> backgroundTestStyle

设置上拉触底的距离

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

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

app.json -> window -> onReachBottomDistance

tabBar 配置

基本介绍

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

小程序中通常将其分为：

底部 tabBar
顶部 tabBar

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

组成部分

tabBar 节点的配置项

app.json

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"
}

list 中 tab 项

app.json

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"
}

页面配置

index.json

{
"usingComponents": {},
"navigationBarBackgroundColor": "#00b261",
"backgroundTextStyle": "light"
...
}

网络数据请求

请求限制

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

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

配置请求合法域名

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

注意事项：

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

跳过限制

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

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

发起数据请求

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

index.wxml

html 复制代码

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

index.js

javascript 复制代码

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 事件中调用获取数据的函数

javascript 复制代码

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()
  },
})