微信小程序开发学习—Day2



在这里插入图片描述


6、WXML 模板语法

6.1、数据绑定

(1) 基本原则
  • 在 data 中定义数据
  • 在 wxml 中使用数据
(2) 在 data 中定义页面的数据

在页面对应的 .js 文件中,把数据定义到 data 对象中即可

代码实现:

// index.js 代码
Page({
/**
   * 页面的初始数据
   */
  data:{
    info :'hello world'
  }
})

<!--index.wxml 代码-->
<view>{{info}}</view>

效果如下:

在这里插入图片描述

(3) Mustache 语法的应用场景
  • 绑定内容(在第(2)部分的代码实现的结果就是绑定内容)

  • 绑定属性

    代码实现:

    Page({
        data:{
            imgSrc :'https://profile-						      avatar.csdnimg.cn/175e7898736246f3a3c5626654317790_ping_love_.jpg!2'
          }
    })
    
    <!--index.wxml-->
    <image src="{{imgSrc}}" mode="widthFix"></image>
    

    效果如下:

在这里插入图片描述

  • 运算(三元运算、算术运算等)

    代码实现:

    Page({
        randomNum: Math.random() *10 ,//生成10以内的随机数
        randomNum1: Math.random().toFixed(2) //生成一个带两位数的随机数
    })
    
    <!--index.wxml-->
    <view>{{randomNum >= 5 ?'随机数字大于5' :'随机数字小于5' }}</view>
    <view>生成100以内的随机数:{{randomNum1*100}}</view>
    

    效果如下:

在这里插入图片描述

6.2、事件绑定

(1) 什么是事件

​ 事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。

(2) 小程序中常用的事件
类型绑定方式事件描述
tapbindtap 或 bind:tap手指触摸后马上离开,类似于 HTML 中的 click 事件
inputbindinput 或 bind:input文本框的输入事件
changebindchange 或 bind:change状态改变的触发
(3) 事件对象的属性列表

当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:

属性类型说明
typeString事件类型
timeStampInteger页面打开到触发事件所经过的毫秒数
targetObject触发事件的组件一些属性值集合
currentTargetObject当前组件的一些属性值集合
detailObject额外的信息
touchesArray触摸事件,当前停留在屏幕前中的触摸点信息的数组
changedTouchesArray触摸事件,当前变化的触摸点信息的数组
(4) target 和 currentTarget 的区别
  • target 时触发该事件的源头组件
  • currentTarget 是当前事件所绑定的组件
(5) bindtap 的语法格式

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

代码实现:

Page({
// 定义按钮事件的处理函数
  btnTapHandle(e) {
    console.log(e);
  }
})

<!--index.wxml-->
<button type="primary" bindtap="btnTapHandle">按钮</button>

效果如下:

在这里插入图片描述

(6) 在事件处理函数中为 data 中的数据赋值

​ 通过调用 this.setData(dataObject) 方法,可以给页面 data中的数据重新赋值。

代码实现:

Page({
  data{
    count: 0
  },
  // +1 按钮点击事件处理函数
  CountChange() {
    this.setData({
      count: this.data.count + 1
    })
  }
})

效果如下:

在这里插入图片描述

(7) 事件传参

可以为组件提供 data-* 自定义属性传参,其中 * 代表的是参数的名字。

<button type="primary" bindtap="btnTap2" data-info="{{2}}">+2</button>

最终:

  • info 会被解析为参数的名字
  • 数值2会被解析为参数的值

在事件处理函数中,通过 event.target.dataset.参数名即可获取具体参数值。

代码实现:

Page({
  data{
    count: 0
  },
  // +2 按钮点击事件处理函数
  btnTap2(e) {
    this.setData({
      count: this.data.count + e.target.dataset.info
    })
  }
})

效果如下:

在这里插入图片描述

(8) bindinput 的语法格式

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

  1. 通过 bindinput,可以为文本框绑定输入事件

    <input type="text" bindinput="inputHandle"></input>
    
  2. 在页面的 .js 文件中定义事件处理函数

    // input 输入框的事件处理函数
    Page({
        inputHandle(e) {
        	console.log(e.detail.value);
    	}
    })
    

效果如下:

在这里插入图片描述

(9) 实现文本框和 data 之间的数据同步

实现步骤:

  • 定义数据

    Page({
      data:{
        msg: '你好,'
      }  
    })
    
  • 渲染结构

    <input value="{{msg}}" type="text" bindinput="inputHandle"></input>
    
  • 美化样式

    input{
      border: 1px solid black;
      margin: 5px;
      padding: 5px;
      border-radius: 3px;
    }
    
  • 绑定 input 事件处理函数

    Page({
        // input 输入框的事件处理函数
      inputHandle(e) {
        this.setData({
          msg: e.detail.value
        })
      }
    })
    
  • 效果如下:

在这里插入图片描述

6.3、条件渲染

(1) wx:if

在小程序中,使用 wx:if=“{{condition}}” 来判断是否需要渲染改代码块

<view wx:if="{{type === 1}}"></view>

也可以用 wx:elif 和 wx:else 来添加 else 判断

<view wx:if="{{type === 1}}"></view>
<view wx:elif="{{type === 2}}"></view>
<view wx:else>保密</view>

效果如下:

在这里插入图片描述

(2) 结合 使用 wx:if

要一次性控制多个组件的展示与隐藏,可以使用一个 标签将多个组件包装起来。

代码实现:

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

效果如下:

在这里插入图片描述

注意:并不是一个组件,它只是一个包裹性的容器,不会在页面中做任何渲染

(3) hidden

在小程序中,直接使用 hidden=“{{condition}}” 也能控制元素的显示和隐藏。

代码实现:

<view hidden="{{flag}}">条件为 true 则隐藏,为 false 隐藏</view>
Page({
    data:{
        flag: true
    }
})

效果如下:

flag为 true 时

在这里插入图片描述

flag为 false 时

在这里插入图片描述

(4) wx:if 与 hidden 的对比
  1. 运行方式不同
    • wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
    • hidden 以切换样式的方式(display:none/block;),控制元素的显示与隐藏
  2. 使用建议
    • 频繁切换时,建议使用 hidden
    • 控制条件时,建议使用 wx:if 搭配 wx:elif、wx:else 进行展示与隐藏的切换
(5) wx:for

通过 wx:for 可以根据指定的数组,循环渲染重复的组件结构。

代码实现:

<!--index.wxml-->
<view wx:for="{{arr1}}">
  索引是:{{index}}, 当前项是:{{item}}
</view>

//index.js
Page({
	data:{
		arr1: ['联想','华硕','惠普']
	}
})

效果如下:

在这里插入图片描述

(6) wx:key 的使用

小程序在实现列表渲染时,建议为渲染出来的列表项指定唯一的key值,从在提高渲染的效率。

代码实现:

// wxml结构
<view wx:for="{{list}}" wx:key="id">
  {{item.name}}
</view>

//js结构
Page({
	list: [
      {id:1,name:'小明'},
      {id:2,name:'小红'},
      {id:3,name:'小黄'}
    ]
})

效果如下:

在这里插入图片描述

7、WXSS 模板样式

7.1、WXSS 和 CSS 的关系

如图所示:

在这里插入图片描述

7.2、rpx

(1) 什么是 rpx 尺寸单位

rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位。

(2) rpx 的实现原理

鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕,在宽度上等分位750分。

  • 在较小的设备上,1rpx 所代表的宽度较小
  • 在较大的设备上,1rpx 所代表的宽度较大

7.3、样式导入

(1) 什么是样式导入

使用 WXSS 提供的 @import 语法,可以导入外联的样式表。

(2) @import 的语法格式

@import + 导入路径 + ;

代码实现:

/* common.wxss */
.userName{
  color: red;
}

/**index.wxss**/
@import "/pages/common/common.wxss";

效果如下:

在这里插入图片描述

7.4、全局样式和局部样式

(1) 全局样式

定义在 app.wxss 中的样式为全局样式,作用于每一个页面。

(2) 局部样式

在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面。

注意:

  • 当局部样式和全局样式冲突时,根据就近原则,局部样式会覆盖全部样式
  • 当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式。

7.5、全局配置

(1) 全局配置文件及常用的配置项
  1. pages
    • 记录当前小程序所有页面的存放路径
  2. window
    • 全局设置小程序窗口的外观
  3. tabBar
    • 设置小程序底部的 tabBar 效果
  4. style
    • 是否启用新版的组建样式
(2) window
  1. 小程序窗口的组成部分

在这里插入图片描述

  1. 了解 window 节点的配置项

    属性名类型默认值说明
    navigationBarTitleTextString字符串导航栏标题文字内容
    navigationBarBackgroundColorHexColor#000000导航栏背景颜色
    navigationBarTextStyleStringwhite导航栏标题颜色
    backgroundColorHexColor#ffffff窗口的背景颜色
    backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark/light
    enablePullDownRefreshBooleanfalse是否全局开启下拉刷新
    onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为 px
  2. 设置导航栏的标题

    步骤:app.json➡window➡navigationBarTitleText

    代码实现:
    在这里插入图片描述

    效果如下:在这里插入图片描述

  3. 设置导航栏的背景颜色

    步骤:app.json➡window➡navigationBarBackgroundColor

    代码实现:
    在这里插入图片描述
    效果如下:

在这里插入图片描述

  1. 设置导航栏的标题颜色

    步骤:app.json➡window➡navigationBarTextStyle

    代码实现:
    在这里插入图片描述

    效果如下:在这里插入图片描述

注意:navigationBarTextStyle 的可选值只有 black 和 white

  1. 全局开启下拉新功能

    步骤:app.json➡window➡enablePullDownRefresh 的值设为 true

    代码实现:
    在这里插入图片描述

    效果如下:
    在这里插入图片描述

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

  2. 设置下拉刷新窗口的颜色

    步骤:app.json➡window➡backgroundColor。

    代码实现:
    在这里插入图片描述

    效果如下:
    在这里插入图片描述

  3. 设置下拉刷新时 loading 的样式

    步骤:app.json➡window➡backgroundTextStyle 指定为 dark。

    代码实现:
    在这里插入图片描述

    效果如下:
    在这里插入图片描述

  4. 设置上拉触底的距离

    步骤:app.json➡window➡为 onReachBottomDistance 设置新的数据

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

8、tabBar

8.1、什么是 tarBar

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

小程序通常将其分为:

  • 底部 tabBar

在这里插入图片描述

  • 顶部 tabBar

在这里插入图片描述

注意:

  1. tarBar 中只能配置最少2个,最多5个 tab 页签
  2. 当渲染顶部 tabBar 时,不显示 icon,只显示文本

8.2、tabBar 的6个组成部分

在这里插入图片描述

  1. backgroundColor:tabBar的背景色
  2. selectedIconPath:选中时的图片路径
  3. borderStyle:tabBar上边框的颜色
  4. iconPath:未选中时的图片路径
  5. selectedColor:tab上的文字选中时的颜色
  6. color:tab上文字的默认(未选中)颜色

8.3、tabBar节点的配置项

属性类型必填默认值描述
positionStringbottomtabBar的位置,仅支持 bottom/top
borderStyleStringblacktabBar 上边框的颜色,仅支持 black/white
colorHexColortab 上文字的默认(未选中)颜色
selectedColorHexColortab 上的文字选中时的颜色
backgroundColorHexColortabBar 的背景颜色
listArraytab 页签的列表

8.4、每个 tab 项的配置选项

属性类型必填描述
pagePathString页面路径,页面必须在 pages 中预先定义
textStringtab 上显示的文字
iconPathString未选中时的图标路径;当 position 为 top 时,不显示 icon
selectedIconPathString选中时的图标路径;当position 为 top 时,不显示 icon

9、页面配置

9.1、页面配置文件的作用

小程序中,每个页面都有自己的 .json 配置文件,用来当前页面的窗口外观、页面效果进行配置。

9.2、页面配置和全局配置的关系

小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现。

注意:当页面配置与配置冲突时,根据就近原则,最终的效果以页面配置为准。

9.3、页面配置中常用的配置项

属性名类型默认值说明
navigationBarBackgroundColorHexColor#000000导航栏背景颜色
navigationBarTextStyleStringwhite导航栏标题颜色
navigationBarTitleTextString字符串导航栏标题文字内容
backgroundColorHexColor#ffffff窗口的背景颜色
backgroundTextStyleStringdark下拉 loading 的样式,仅支持 dark/light
enablePullDownRefreshBooleanfalse是否全局开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为 px

10、网络数据请求

10.1、小程序中网络数据请求的限制

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

在这里插入图片描述

10.2、配置 request 合法域名

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

在这里插入图片描述

注意事项:

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

10.3、发起 GET 请求

调用为小程序提供的 wx.request() 方法,可以发起 GET 数据请求。

代码实现:

 //发起GET请求
  getInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/get',
      method: 'GET',
      data: {
        name: 'zs',
        age: '20'
      },
      success: (res) => {
        console.log(res.data);
      }
    })
  }

效果如下:

在这里插入图片描述

10.4、发起 POST 请求

调用微信小程序提供的 wx.request() 方法,可以发起 POST 数据请求。

代码实现:

//发起POST请求
  postInfo() {
    wx.request({
      url: 'https://www.escook.cn/api/post',
      method: 'POST',
      data: {
        name: 'ls',
        age: '22'
      },
      success: (res) => {
        console.log(res.data);
      }
    })
  }

效果如下:

在这里插入图片描述

10.5、在页面刚加载时请求数据

在页面的 onLoad 事件中调用获取数据的函数。

代码实现:

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getInfo()
    this.postInfo()
  }

效果如下:

在这里插入图片描述

10.6、跳过 request 合法域名校检

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口

此时为了不耽误开发的进度,我们可以微信开发者工具中,临时开启『开发环境不校验请求域名、TLS 版本及 HTTPS 证书』选项,跳过 request 合法域名的校验。

在这里插入图片描述

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

10.7、关于跨域和 Ajax 的说明

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以程序中不存在跨域的问题

Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象,由于小程序宿主环境是微信客户端,所以小程序中不能叫做“发起 Ajax 请求”,而是叫做“发起网络请求”。

未完待续……

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值