微信小程序开发学习—Day2
文章目录
- 6、WXML 模板语法
- 6.1、数据绑定
- (1) 基本原则
- (2) 在 data 中定义页面的数据
- (3) Mustache 语法的应用场景
- 6.2、事件绑定
- (1) 什么是事件
- (2) 小程序中常用的事件
- (3) 事件对象的属性列表
- (4) target 和 currentTarget 的区别
- (5) bindtap 的语法格式
- (6) 在事件处理函数中为 data 中的数据赋值
- (7) 事件传参
- (8) bindinput 的语法格式
- (9) 实现文本框和 data 之间的数据同步
- 6.3、条件渲染
- (1) wx:if
- (2) 结合 <block> 使用 wx:if
- (3) hidden
- (4) wx:if 与 hidden 的对比
- (5) wx:for
- (6) wx:key 的使用
- 7、WXSS 模板样式
- 7.1、WXSS 和 CSS 的关系
- 7.2、rpx
- (1) 什么是 rpx 尺寸单位
- (2) rpx 的实现原理
- 7.3、样式导入
- (1) 什么是样式导入
- (2) @import 的语法格式
- 7.4、全局样式和局部样式
- (1) 全局样式
- (2) 局部样式
- 7.5、全局配置
- (1) 全局配置文件及常用的配置项
- (2) window
- 8、tabBar
- 8.1、什么是 tarBar
- 8.2、tabBar 的6个组成部分
- 8.3、tabBar节点的配置项
- 8.4、每个 tab 项的配置选项
- 9、页面配置
- 9.1、页面配置文件的作用
- 9.2、页面配置和全局配置的关系
- 9.3、页面配置中常用的配置项
- 10、网络数据请求
- 10.1、小程序中网络数据请求的限制
- 10.2、配置 request 合法域名
- 10.3、发起 GET 请求
- 10.4、发起 POST 请求
- 10.5、在页面刚加载时请求数据
- 10.6、跳过 request 合法域名校检
- 10.7、关于跨域和 Ajax 的说明
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) 小程序中常用的事件
类型 | 绑定方式 | 事件描述 |
---|---|---|
tap | bindtap 或 bind:tap | 手指触摸后马上离开,类似于 HTML 中的 click 事件 |
input | bindinput 或 bind:input | 文本框的输入事件 |
change | bindchange 或 bind:change | 状态改变的触发 |
(3) 事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:
属性 | 类型 | 说明 |
---|---|---|
type | String | 事件类型 |
timeStamp | Integer | 页面打开到触发事件所经过的毫秒数 |
target | Object | 触发事件的组件一些属性值集合 |
currentTarget | Object | 当前组件的一些属性值集合 |
detail | Object | 额外的信息 |
touches | Array | 触摸事件,当前停留在屏幕前中的触摸点信息的数组 |
changedTouches | Array | 触摸事件,当前变化的触摸点信息的数组 |
(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 事件来响应文本框的输入事件,语法格式如下:
通过 bindinput,可以为文本框绑定输入事件
<input type="text" bindinput="inputHandle"></input>
在页面的 .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 的对比
- 运行方式不同
- wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
- hidden 以切换样式的方式(display:none/block;),控制元素的显示与隐藏
- 使用建议
- 频繁切换时,建议使用 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) 全局配置文件及常用的配置项
- pages
- 记录当前小程序所有页面的存放路径
- window
- 全局设置小程序窗口的外观
- tabBar
- 设置小程序底部的 tabBar 效果
- style
- 是否启用新版的组建样式
(2) window
- 小程序窗口的组成部分
了解 window 节点的配置项
属性名 类型 默认值 说明 navigationBarTitleText String 字符串 导航栏标题文字内容 navigationBarBackgroundColor HexColor #000000 导航栏背景颜色 navigationBarTextStyle String white 导航栏标题颜色 backgroundColor HexColor #ffffff 窗口的背景颜色 backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark/light enablePullDownRefresh Boolean false 是否全局开启下拉刷新 onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位为 px 设置导航栏的标题
步骤:app.json➡window➡navigationBarTitleText
代码实现:
效果如下:
设置导航栏的背景颜色
步骤:app.json➡window➡navigationBarBackgroundColor
代码实现:
效果如下:
设置导航栏的标题颜色
步骤:app.json➡window➡navigationBarTextStyle
代码实现:
效果如下:
注意:navigationBarTextStyle 的可选值只有 black 和 white
全局开启下拉新功能
步骤:app.json➡window➡enablePullDownRefresh 的值设为 true
代码实现:
效果如下:
注意:在 app.json 中启用下拉刷新功能,会作用于每个小程序页面!
设置下拉刷新窗口的颜色
步骤:app.json➡window➡backgroundColor。
代码实现:
效果如下:
设置下拉刷新时 loading 的样式
步骤:app.json➡window➡backgroundTextStyle 指定为 dark。
代码实现:
效果如下:
设置上拉触底的距离
步骤:app.json➡window➡为 onReachBottomDistance 设置新的数据
注意:默认距离为50px,如果没有特殊需求,建议使用默认值即可。
8、tabBar
8.1、什么是 tarBar
tabBar 是移动端应用常见的页面效果,与用于实现多页面的快速切换。
小程序通常将其分为:
- 底部 tabBar
- 顶部 tabBar
注意:
- tarBar 中只能配置最少2个,最多5个 tab 页签
- 当渲染顶部 tabBar 时,不显示 icon,只显示文本
8.2、tabBar 的6个组成部分
- backgroundColor:tabBar的背景色
- selectedIconPath:选中时的图片路径
- borderStyle:tabBar上边框的颜色
- iconPath:未选中时的图片路径
- selectedColor:tab上的文字选中时的颜色
- color:tab上文字的默认(未选中)颜色
8.3、tabBar节点的配置项
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
position | String | 否 | bottom | tabBar的位置,仅支持 bottom/top |
borderStyle | String | 否 | black | tabBar 上边框的颜色,仅支持 black/white |
color | HexColor | 否 | tab 上文字的默认(未选中)颜色 | |
selectedColor | HexColor | 否 | tab 上的文字选中时的颜色 | |
backgroundColor | HexColor | 否 | tabBar 的背景颜色 | |
list | Array | 是 | tab 页签的列表 |
8.4、每个 tab 项的配置选项
属性 | 类型 | 必填 | 描述 |
---|---|---|---|
pagePath | String | 是 | 页面路径,页面必须在 pages 中预先定义 |
text | String | 是 | tab 上显示的文字 |
iconPath | String | 否 | 未选中时的图标路径;当 position 为 top 时,不显示 icon |
selectedIconPath | String | 否 | 选中时的图标路径;当position 为 top 时,不显示 icon |
9、页面配置
9.1、页面配置文件的作用
小程序中,每个页面都有自己的 .json 配置文件,用来当前页面的窗口外观、页面效果进行配置。
9.2、页面配置和全局配置的关系
小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现。
注意:当页面配置与配置冲突时,根据就近原则,最终的效果以页面配置为准。
9.3、页面配置中常用的配置项
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色 |
navigationBarTextStyle | String | white | 导航栏标题颜色 |
navigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
backgroundColor | HexColor | #ffffff | 窗口的背景颜色 |
backgroundTextStyle | String | dark | 下拉 loading 的样式,仅支持 dark/light |
enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单位为 px |
10、网络数据请求
10.1、小程序中网络数据请求的限制
- 只能请求 HTTPS 类型的接口
- 必须将接口添加到信任列表中
10.2、配置 request 合法域名
配置步骤:登录微信小程序管理后台➡开发➡开发设置➡服务器域名➡修改 request 合法域名
注意事项:
- 域名只支持 https 协议
- 域名不能使用 IP 地址或 localhost
- 域名必须经过 ICP 备案
- 服务器域名一个月内最多可申请 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 请求”,而是叫做“发起网络请求”。
未完待续……
微信小程序开发学习—Day2相关推荐
- 微信小程序开发学习5(自定义组件)
微信小程序开发学习5(自定义组件) 1.学习目标 能够知道如何自定义小程序组件 能够知道小程序组件中behaviors的作用 能够知道如何安装和配置vant-weapp组件库 能够知道如何使用MobX ...
- 微信小程序开发学习4(视图与逻辑)
微信小程序开发学习4(视图与逻辑) 1.学习目标 能够知道如何实现页面之间的导航跳转 能够知道如何实现下拉刷新效果 能够知道如何实现上拉加载更多效果 能够知道小程序中常用的生命周期函数 2.页面导航 ...
- web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
- 微信小程序开发学习6(基础加强之使用npm包和全局数据共享及分包【Tab底栏案例改进】)
微信小程序开发学习6(基础加强之使用npm包和全局数据共享及分包) 1.使用npm包 小程序对npm包的支持 目前,小程序中已经支持使用p安装第三方包,从而来提高小程序的开发效率.但是,在小程序中使用 ...
- 微信小程序开发学习2(模板与配置)
微信小程序开发学习2(模板与配置) 1.学习目标 能够使用WXML模板语法渲染页面结构 能够使用WXSS样式美化页面结构 能够使用app,json对小程序进行全局性配置 能够使用page.json对小 ...
- bilibili微信小程序开发学习总结
bilibili微信小程序开发学习总结 用来半天学习了微信小程序模仿做了个B站小程序,其实如果有编程基础特别熟悉Vue语法与web的话那小程序基本就是随便玩玩,整体写法与vue一致,页面搭建与web也 ...
- 【微信小程序开发学习篇】
微信小程序开发学习篇 概述 相关信息 笔记制作时间:2022-9-25 参考视频:黑马视频 参考文档:微信小程序官方开发文档 文章目录 微信小程序开发学习篇 概述 相关信息 小程序基础 1.数据绑定与 ...
- 微信小程序开发学习1(小程序的入门知识)
微信小程序开发学习1(小程序的入门知识) 1.制定学习目标: 能够知道如何创建小程序项目 能够清楚小程序项目的基本组成结构 能够知道小程序页面的几个组成部分 能够知道小程序中常见的组件如何使用 能够知 ...
- 微信小程序开发学习笔记一
微信小程序学习笔记(一) 环境使用及创建项目 文件目录设置 JS文件 环境使用及创建项目 环境使用:微信开发者工具 一个微信号只能开发一个微信小程序. 在微信小程序开发手册下载最新版本,学习不要bet ...
最新文章
- 软件测试工程师的职业生涯规划
- php母版页怎么,ASP.NET
- python适配器模式角色_Python设计模式之适配器模式原理与用法详解
- 那些用Go实现的分布式事务框架
- 【词向量】从Word2Vec到Bert,聊聊词向量的前世今生(一)
- 船舶照明行业调研报告 - 市场现状分析与发展前景预测(2021-2027年)
- 《原力计划【第二季】》第 5 周周榜揭晓!!!
- ie浏览器在线使用_关于登录深圳市住房公积金管理中心网站在线办理平台的温馨提示...
- hdu 4781 Beautiful Soup 构造
- atitit.词法分析原理 词法分析器 (Lexer)
- 如何查看自己的qq邮箱服务器地址,怎么看自己设置的qq邮箱帐号
- 河北单招2021计算机类,2021河北省单招十大类专业
- pytorch之transforms
- 计算机组成原理 模拟机,面向计算机组成原理数学的MML模拟器
- 贝叶斯统计在投资决策中的应用
- Macbook Pro(MBP)上固态硬盘SSD,光驱位装HDD
- linux 二次封装 释放,Linux必学的60个命令(二)
- json vue 对象转数组_json 将对象转化成数组第二种方式
- 定时向QQ推送天气消息
- MATLAB课程表分配问题,关于小学课程表安排建议.doc
热门文章
- TouchGFX升级至V4.12,每秒帧数从9帧升级至60帧,同时更新TouchGFX Suite
- hdu 3589 Jacobi symbol (二次剩余勒让德符号)
- Slow HTTP Denial of Service Attack | 如何证明
- 达梦数据库删除表提示锁超时问题
- 赤峰学院没过计算机,2020-2020赤峰学院一流本科专业建设点名单7个(自治区级)...
- 基于java的科研成果管理系统
- 【函数】一篇文章带你看懂控制流、递归、高阶函数
- 2023第十七届证卡票签安全识别技术展览会暨高峰论坛
- tp5+ barcode 生成条形码
- harris角点检测算法实现