Open Main menu

Part 2

by lcm 11 月 21, 2024 0 comment

Part 2

Part 2

P19 数据绑定

数据绑定基本原则

  1. 在页面的.js文件中,数据定义到data中
  2. WXML中使用数据
// 定义数据
page({
    data:{
        info:'hello world' //字符串类型数据
    }
    msgList:[{msg:'hello'},{msg:'world}]
})

Musttache语法(渲染数据)

双括号把变量名包裹起来

<view>{{要绑定的数据名称}}</view>
作用
  • 绑定内容:绑定显示的内容
  • 绑定属性:绑定标签的属性值
  • 运算(三元运算,算术运算)

P20 事件绑定

事件:渲染层到逻辑层的通讯方式。

事件有以下类型

​事件​

事件的回调触发的时候，收到一个事件对象event，它的详细属性如下

​shijianleixing​

target和currentTarget的区别

  • e.target是按钮的内部组件
  • e.currentTarget是当前事件所绑定的组件
例:bindtap属性绑定tap属性事件
// 例
// WXML中绑定tap触摸事件
<botton type="primary" bindtap="shijian">按钮</button>
// .JS文件中定义对应的事件处理函数
page({
    shijian(e){ // e为事件的参数
    // 事件体
    }
})

P21 事件传参与数据同步

在事件处理的函数中为data中的数据重新赋值

this.setData(dataObjet)
↑此方法用与给数据重新赋值

例:

Page({
    data:{
    count:0
    }
})
changeCount(){
    this.setData({
        count:this.data.count + 1
    })
}

事件传参

不能在绑定事件的同时为事件处理函数 传递参数

用 data-* 自定义属性传参 *代表参数名字
例:

<botton bindtap="hanshuchuli" data-info="{{2}}
  • info为 参数的名字
  • 数值2为 参数的值
bindinput语法格式

传入参数.detail.value→变化过后文本框最新的值

// wxml
<input bindinput="shuru"><input>

// .js
shuru(e){
    console.log(e.detail.value)
}
实现文本框和data之间的数据同步
一、定义数据
Page({
    data:{
    info:'hello world'
    }
})
二、渲染结构

关键 :

  • value→默认值
  • bindinput→输入事件
<input value="{{info}}" bindinput="shijianchuli"></input>
三、美化样式
input {
    border:1px soild #eee;
    padding:5px;
    margin:5px;
    border-radius:3px;
}
四、绑定input事件处理函数
shuru(e){
    this.setdata({
    info:e.detail.value
    })
}

P22 条件渲染

wx:if

<view wx:if="{{condition}}">如果condition为true则对这个语句进行渲染</view>

通常\模块用\包裹

<block>
    <view></view>
</block>

hidden

<view hidden="{{condition}}">
// {{condition}}为true时隐藏
// {{condition}}为false时显示

wx:if和hidden的区别:

  • wx:if:通过动态创建/移除的方式,控制元素的显示和隐藏
  • hidden:通过切换样式的display为none

P23 列表渲染

wx:for
循环渲染里面的结构

arr2:['A','B','C','D']
<view wx:for='{{arr2}}'>索引为:{{index}},对应项为:{{item}}</view>

wx:for-index 能更改索引index名
wx:for-item 能更改当前项item名

P24 WXSS模板样式

  • WXSS有大多数CSS所具有的特性,同时多了
    • rpx尺寸单位(统一自适应尺寸单位,默认总宽为750rpx)
    • @import样式导入

P26 外联样式导入

@import "目标WXSS文件地址"

P27-P33 全局与局部

  • 全局样式:app.wxss中的样式为全局样式,作用与每一个界面
  • 局部样式:页面中的.wxss样式为局部样式,作用于当前页面
  • 根据就近原则,局部样式通常会覆盖全局样式

一、全局配置(JSON)

常用配置项:

  • pages:记录小程序所有页面的存放路径
  • window:全局设置小程序窗口的外观
  • tabBar:设置小程序底部的tabBar效果
  • style:是否启用新版的组件样式
导航栏
  • 导航栏标题:app.json->window->navigationBartitleText
  • 导航栏背景色:app.json->window->navigationBarBackgroundColor(只支持十六进制修改)
  • 导航栏标题文本颜色:app.json->window->navigationBarTextStyle
下拉刷新
  • 全局开启下拉刷新:app.json->window->enablePullDownRefresh:true
  • 下拉刷新的窗口背景色:app.json->window->backgroundColor:(十六进制颜色)
  • 下拉刷新时的loading样式:app.json->window->backgroundTextStyle:dark
上拉触底距离
  • app.json->window->onReachBottomDistance:50
tabBar(最少两个最多五个)
  • 底部tabbar
  • 顶部tabBar:只显示文本,不显示icon(图标 )
tabBar的组成部分:
  • backgroundColor:tabBar的背景色
  • selectedIconPath:选中时的图片路径
  • borderStyle:tabBar上边框的颜色
  • iconPath:未选中时的图片路径
  • selectedColor:tab上的文字选中时的颜色
  • color:tab上的文字默认(未选中)颜色
综合配置tabBar
  1. app.json中,与pages,window平级,新增tabBar节点
  2. tabBar节点中新增list数组,数组中存放配置对象
  3. 于list数组中新增每一项的配置对象
    • pagePath:tab页面路径(必填)
    • text:tab上的按钮文字(必填)
    • iconPath:未选中时的图片路径(可选)
    • selectedIconPath:当前tab被选中后的图片路径(可选)
      综合语句案例:
"tabBar":{
    "list":[{
    "pagepath":"页面路径",
    "text":"首页",
    "iconPath":"路径"
    "selectedIconPath":"路径"
    },
    {}
    {}
    {}]
}

二、页面配置

配置项与全局配置文件相似，二者发生冲突时，优先生效页面配置文件

P34-P35 GET和POST请求

数据接口的请求限制：

  1. 只能请求https类型的接口
  2. 必须将接口的域名添加到信任列表
    1. 域名只能使用https协议
    2. 域名不能使用IP地址和localhost
    3. 域名必须经过ICP备案
    4. 服务器域名一个月最多进行5次修改
      wx.request()
  • POST
  • GET
    示例:
wx.request({
    url:'目标接口地址',  // 接口地址
    method:'GET',   //请求方法
    data:{
    name:'zs',
    age:20
    },
    success:(res)=>{  // 箭头函数的传入参数用于接收res
        console(res)
    }
})
Post Views: 2

Write your comment Here