微信小程序开发基础(02模板与配置)
02 模板与配置
学习目标
能够使用 WXML 模板语法渲染页面结构
能够使用 WXSS 样式美化页面结构
能够使用 app.json 对小程序进行全局性配置
能够使用 page.json 对小程序页面进行个性化配置
能够知道如何发起网络数据请求
WXML 模板语法 - 数据绑定
1. 数据绑定的基本原则
① 在 data 中定义数据
② 在 WXML 中使用数据
2. 在 data 中定义页面的数据
在页面对应的 .js 文件中,把数据定义到 data 对象中即可:
data: {//字符类型的数据info:"init data",//数组类型的数据msgList:[{msg:'hello',msg:'world'}]},
3. Mustache 语法的格式
把data中的数据绑定到页面中渲染,使用 Mustache 语法
(双大括号)将变量包起来即可。语法格式为:
<view>{{ 要绑定的数据 }}</view>
4. Mustache 语法的应用场景
Mustache 语法的主要应用场景如下:
绑定内容
绑定属性
运算(三元运算、算术运算等)
5. 动态绑定内容
页面的数据如下:
<view>{{ info }}</view>
6. 动态绑定属性
页面的数据如下:
data: {//字符类型的数据info:"init data",//数组类型的数据msgList:[{msg:'hello',msg:'world'}],img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"},
<image src="{{img}}"></image>
7. 三元运算
页面的数据如下:
data: {//字符类型的数据info:"init data",//数组类型的数据msgList:[{msg:'hello',msg:'world'}],img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",randomNum:Math.random()+10,//生成10以内的随机数},
<view>{{randomNum >=5? '随机数大于5':'随机数小于5'}}</view>
8. 算数运算
页面的数据如下:
data: {//字符类型的数据info:"init data",//数组类型的数据msgList:[{msg:'hello',msg:'world'}],img:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",randomNum:Math.random()+10,//生成10以内的随机数randomNum2:Math.random().toFixed(2),//生成一个带两位小数的随机数},
<view>生成100以内随机数:{{randomNum2 * 100}}</view>
WXML 模板语法 - 事件绑定
1. 什么是事件
事件是渲染层到逻辑层的通讯方式
。通过事件可以将用户在渲染层产生的行为,反馈到逻辑层进行业务的处理。
2. 小程序中常用的事件
3. 事件对象的属性列表
当事件回调触发的时候,会收到一个事件对象 event,它的详细属性如下表所示:
4. target 和 currentTarget 的区别
target
是触发该事件的源头组件
,而 currentTarget
则是当前事件所绑定的组件
。举例如下:
<view class="out-view" bindtap="outerHandler">
<button type="primary">primary</button>
</view>
点击内部的按钮时,点击事件以冒泡
的方式向外扩散,也会触发外层 view 的 tap 事件处理函数。
此时,对于外层的 view 来说:
e.target
指向的是触发事件的源头组件,因此,e.target
是内部的按钮组件
e.currentTarget
指向的是当前正在触发事件的那个组件,因此,e.currentTarget 是当前的 view 组件
5. bindtap 的语法格式
在小程序中,不存在 HTML 中的 onclick 鼠标点击事件,而是通过tap
事件来响应用户的触摸行为。
① 通过 bindtap
,可以为组件绑定 tap 触摸事件,语法如下:
<button type="primary" bindtap="tapHandler">primary</button>
② 在页面的 .js 文件中定义对应的事件处理函数,事件参数通过形参 event
(一般简写成 e
) 来接收:
Page({tapHandler(e){//按钮的tap事件处理函数console.log(e) //事件参数对象e},})
6. 在事件处理函数中为 data 中的数据赋值
通过调用 this.setData(dataObject)
方法,可以给页面 data 中的数据重新赋值,示例如下:
data: {count:0,},changeCount(){this.setData({count:this.data.count+1})},
7. 事件传参
可以为组件提供 data-\*
自定义属性传参,其中 * 代表的是参数的名字
,示例代码如下: inputHandler(e){ //e.detail.value是变化过后,文本框最新的值 console.log(e.detail.value); },
<button bindtap="btnHandler" data-info="{{2}}">事件传参</button>
最终:
info
会被解析为参数的名字
数值2
会被解析为参数的值
在事件处理函数中,通过 event.target.dataset.
参数名 即可获取到具体参数的值
,示例代码如下:
btnHandler(event){// dataset是一个对象,包含了所有通过 data-* 传递过来的参数项
console.log(event.target.dataset);
//通过dataset可以访问到具体参数的值
console.log(event.target.dataset.info);},
8. bindinput 的语法格式
在小程序中,通过 input
事件来响应文本框的输入事件,语法格式如下:
① 通过 bindinput
,可以为文本框绑定输入事件:
<input bindinput="inputHandler"></input>
② 在页面的 .js 文件中定义事件处理函数:
inputHandler(e){//e.detail.value是变化过后,文本框最新的值
console.log(e.detail.value);},
9. 实现文本框和 data 之间的数据同步
实现步骤:
① 定义数据
② 渲染结构
③ 美化样式
④ 绑定 input 事件处理函数
定义数据:
data: {msg:"你好",},
实现文本框和 data 之间的数据同步
<input value="{{msg}}" bindinput="msghandler"></input>
美化样式:
input {border: 1px solid #eee;padding: 5px;margin: 5px;border-radius: 3px;
}
绑定 input 事件处理函数:
msghandler(e){this.setData({//通过e.deatil.value获取到文本框最新的值msg:e.detail.value,})
WXML 模板语法 - 条件渲染
1. wx:if
在小程序中,使用wx:if="{{condition}}"
来判断是否需要渲染该代码块:
view wx :if="{{condition}} ">True </view>
也可以用 wx:elif
和 wx:else
来添加 else
判断:
<view wx :if="iitype -== 1}}">男</view>
<view wx:elif="iitype === 2}}">女</view>
<view wx:else>保密</view>
2. 结合 使用 wx:if
如果要一次性控制多个组件的展示与隐藏
,可以使用一个\<block>\</block>
标签将多个组件包装起来,并在\<block>
标签上使用wx:if
控制属性,示例如下:
<block wx : if="i{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意:\<block> 并不是一个组件
,它只是一个包裹性质的容器,不会在页面中做任何渲染。
3. hidden
在小程序中,直接使用 hidden="{{ condition }}"
也能控制元素的显示与隐藏:
<view hidden="{{ condition }}">条件为 true隐藏,条件为 false、显示</view>
4. wx:if 与 hidden 的对比
① 运行方式不同
wx:if 以
动态创建和移除元素
的方式,控制元素的展示与隐藏
hidden 以切换样式
的方式(display: none/block;),控制元素的显示与隐藏
② 使用建议
频繁切换
时,建议使用hidden
控制条件复杂时
,建议使用wx:if
搭配wx:elif、wx:else
进行展示与隐藏的切换
WXML 模板语法 - 列表渲染
1. wx:for
通过 wx:for
可以根据指定的数组,循环渲染重复的组件结构,语法示例如下:
<view wx : for="i{array}}">
索引是: {{findex}}当前项是: {{item}}
</view>
默认情况下,当前循环项的索引用index
表示;当前循环项用 item
表示。
2. 手动指定索引和当前项的变量名*
使用
wx:for-index
可以指定当前循环项的索引
的变量名
使用wx:for-item
可以指定当前项
的变量名
<view wx:for="i{array}}" wx:for-index="idx" wx:for-item="itemName">索引是: {{idx}}当前项是:f{itemName}}
</view>
3. wx:key 的使用
类似于 Vue
列表渲染中的 :key
,小程序在实现列表渲染时,也建议为渲染出来的列表项指定唯一的 key
值,
从而提高渲染的效率,示例代码如下:
//data数据
data: {userList: [
{ id: 1,name: '小红'},{ id: 2,name: '小黄'},{ id: 3,name: '小白’}]
}
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
WXSS 模板样式
1. 什么是 WXSS
WXSS (WeiXin Style Sheets)是一套样式语言
,用于美化 WXML 的组件样式,类似于网页开发中的 CSS。
2. WXSS 和 CSS 的关系
WXSS 具有 CSS 大部分特性,同时,WXSS 还对 CSS 进行了扩充以及修改,以适应微信小程序的开发。
与 CSS 相比,WXSS 扩展的特性有:
rpx 尺寸单位
@import 样式导入
WXSS 模板样式 - rpx
1. 什么是 rpx 尺寸单位
rpx(responsive pixel)
是微信小程序独有的,用来解决屏适配的尺寸单位。
2. rpx 的实现原理
rpx 的实现原理非常简单:鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx 把所有设备的屏幕,
在宽度上等分为750
份(即:当前屏幕的总宽度为 750rpx
)。
在较小的设备上,
1rpx
所代表的宽度较小
在较大的设备上,1rpx
所代表的宽度较大
小程序在不同设备上运行的时候,会自动把 rpx 的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配。
3. rpx 与 px 之间的单位换算*
在 iPhone6 上,屏幕宽度为375px
,共有 750
个物理像素,等分为 750rpx
。则:
750rpx = 375px = 750
物理像素
1rpx = 0.5px = 1
物理像素
官方建议:开发微信小程序时,设计师可以用iPhone6
作为视觉稿的标准。
开发举例:在 iPhone6 上如果要绘制宽100px,高20px的盒子,换算成rpx单位,宽高分别为 200rpx 和 40rpx。
WXSS 模板样式 - 样式导入
1. 什么是样式导入
使用 WXSS 提供的 @import
语法,可以导入外联的样式表
2. @import 的语法格式
@import
后跟需要导入的外联样式表的相对路径,用 ; 表示语句结束。示例如下:
@import "common.wxss";
1. 全局样式
定义在 app.wxss
中的样式为全局样式,作用于每一个页面。
2. 局部样式
在页面的 .wxss
文件中定义的样式为局部样式,只作用于当前页面。
注意:
① 当局部样式和全局样式冲突时,根据就近原则
,局部样式会覆盖
全局样式
② 当局部样式的权重大于或等于
全局样式的权重时,才会覆盖全局的样式
全局配置
- 全局配置文件及常用的配置项
小程序根目录下的app.json
文件是小程序的全局配置文件
。常用的配置项如下:
① pages
记录当前小程序所有页面的存放路径
② window
全局设置小程序窗口的外观
③ tabBar
设置小程序底部的 tabBar 效果
④ style
是否启用新版的组件样式
全局配置 - window
1. 小程序窗口的组成部分
2. 了解 window 节点常用的配置项
3. 设置导航栏的标题
设置步骤:app.json -> window -> navigationBarTitleText
需求:把导航栏上的标题,从默认的 “WeiXin”修改为“猿白”,效果如图所示:
4. 设置导航栏的背景色
设置步骤:app.json -> window -> navigationBarBackgroundColor
需求:把导航栏标题的背景色,从默认的 #fff 修改为 #C7EDCC ,效果如图所示:
5. 设置导航栏的标题颜色
设置步骤:app.json -> window -> navigationBarTextStyle
需求:把导航栏上的标题颜色,从默认的 black 修改为 white ,效果如图所示:
注意: navigationBarTextStyle 的可选值只有 black 和 white
6. 全局开启下拉刷新
功能
概念:下拉刷新
是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据
的行为。
设置步骤:app.json -> window -> 把 enablePullDownRefresh 的值设置为 true
注意:在 app.json 中启用下拉刷新功能,会作用于每个小程序页面!
7. 设置下拉刷新时窗口的背景色
当全局开启下拉刷新功能之后,默认的窗口背景为白色。如果自定义下拉刷新窗口背景色,设置步骤为:
app.json -> window -> 为 backgroundColor
指定16进制的颜色值 #efefef。效果如下:
8. 设置下拉刷新时 loading 的样式
当全局开启下拉刷新功能之后,默认窗口的 loading 样式为白色,如果要更改 loading 样式的效果,设置步
骤为 app.json -> window -> 为 backgroundTextStyle 指定 dark 值
。效果如下:
注意: backgroundTextStyle 的可选值只有 light 和 dark
9. 设置上拉触底的距离
概念:上拉触底
是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据
的行为。
设置步骤: app.json -> window -> 为 onReachBottomDistance 设置新的数值
注意:默认距离为50px
,如果没有特殊需求,建议使用默认值即可。
全局配置 - tabBar
1. 什么是 tabBar
tabBar
是移动端应用常见的页面效果,用于实现多页面的快速切换
。小程序中通常将其分为:
底部 tabBar
顶部 tabBar
注意:
tabBar中只能配置最少 2 个、最多 5 个 tab
页签
当渲染顶部 tabBar
时,不显示 icon,只显示文本
2. tabBar 的 6 个组成部分
① backgroundColor
:tabBar 的背景色
② selectedIconPath
:选中时的图片路径
③ borderStyle
:tabBar 上边框的颜色
④ iconPath
:未选中时的图片路径
⑤ selectedColor
:tab 上的文字选中时的颜色
⑥ color
:tab 上文字的默认(未选中)颜色
3. tabBar 节点的配置项
4. 每个 tab 项的配置选项
全局配置 - 案例:配置 tabBar
1.寻找素材
来源:阿里图标
2. 实现步骤
① 拷贝图标资源
② 新建 3 个对应的 tab 页面
③ 配置 tabBar 选项
3. 步骤1 - 拷贝图标资源
① 把资料目录中的 images 文件夹
,拷贝到小程序项目根目录
中
② 将需要用到的小图标分为 2 组,每组两个,其中:
图片名称中包含 -active 的是选中之后的图标
图片名称中不包含 -active 的是默认图标
3. 步骤2 - 新建 3 个对应的 tab 页面
通过app.json
文件的pages
节点,快速新建 2个对应的 tab 页面,示例代码如下:
"pages": ["pages/home/home", "pages/me/me","pages/index/index","pages/logs/logs"],
3. 步骤3 - 配置 tabBar 选项
① 打开 app.json
配置文件,和pages、window
平级,新增tabBar
节点
② tabBar 节点中,新增list
数组,这个数组中存放的,是每个 tab 项的配置对象
③ 在 list 数组中,新增每一个 tab 项的配置对象
。对象中包含的属性如下:
pagePath
指定当前 tab 对应的页面路径【必填
】
text
指定当前 tab 上按钮的文字【必填
】
iconPath
指定当前 tab 未选中时候的图片路径【可选】
selectedIconPath
指定当前 tab 被选中后高亮的图片路径【可选】
4. 完整的配置代码
"tabBar" : {"list": [{"pagePath": "pages/home/home","text":"首页","iconPath" : "/images/tabs/home.png","selectedIconPath": "/images/tabs/home-active.png"},{"pagePath": "pages/me/me","text":"我的","iconPath" : "/images/tabs/me.png","selectedIconPath": "/images/tabs/me-active.png"}]
},
页面配置
1. 页面配置文件的作用
小程序中,每个页面都有自己的 .json
配置文件,用来对当前页面的窗口外观、页面效果等进行配置。
2. 页面配置
和全局配置
的关系
小程序中,app.json 中的 window 节点,可以全局配置
小程序中每个页面的窗口表现
。
如果某些小程序页面想要拥有特殊的窗口表现
,此时,“页面级别的 .json 配置文件
”就可以实现这种需求。
注意:当页面配置与全局配置冲突
时,根据就近原则
,最终的效果以页面配置为准。
3. 页面配置中常用的配置项
网络数据请求
1. 小程序中网络数据请求的限制
出于安全性
方面的考虑,小程序官方对数据接口
的请求做出了如下两个限制:
① 只能请求 HTTPS
类型的接口
② 必须将接口
的域名添加到信任列表
中
2. 配置 request 合法域名
需求描述:假设在自己的微信小程序中,希望请求 https://www.baidu.com/ 域名下的接口
配置步骤:登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改 request 合法域名
注意事项:
① 域名只支持 https 协议
② 域名不能使用 IP 地址或 localhost
③ 域名必须经过 ICP 备案
④ 服务器域名一个月内最多可申请 5 次修改
3. 发起 GET 请求
调用微信小程序提供的 wx.request()
方法,可以发起 GET 数据请求,示例代码如下:
wx.request({url: 'https : //www.xxxxx.cn/api/get',//请求的接口地址,必须基于 https 协议method: 'GET',l/请求的方式
data: {l/发送到服务器的数据
name: 'zs',
age: 22
},
success: (res) =→> {l/请求成功之后的回调函数console.log(res)
}
})
4. 发起 POST 请求
调用微信小程序提供的 wx.request()
方法,可以发起 POST 数据请求,示例代码如下:
wx.request({url: 'https :/ /ww.xxxxxx.cn/api/post',ll请求的接口地址,必须基于 https 协议method: 'POST ',1/请求的方式
data: {1/发送到服务器的数据
name: 'ls ',
gender: '男'},
success: (res) =>{ l/请求成功之后的回调函数console.log(res)
}
}
5. 在页面刚加载时请求数据
在很多情况下,我们需要在页面刚加载的时候,自动请求一些初始化的数据
。此时需要在页面的 onLoad
事件
中调用获取数据的函数,示例代码如下:
5. 跳过 request 合法域名校验
如果后端程序员仅仅提供了 http
协议的接口、暂时没有提供 https 协议的接口
。
此时为了不耽误开发的进度,我们可以在微信开发者工具中,临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书
」选项,跳过 request 合法域名的校验。
6. 关于跨域和 Ajax 的说明
跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域的问题
。
Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做“发起 Ajax 请求”,而是叫做“发起网络数据请求”
。
微信小程序开发基础(02模板与配置)相关推荐
- 微信小程序开发基础教程
文章目录 1.什么叫做微信小程序 2.微信小程序开发功能特点 3.微信小程序开发流程 3.1 微信公众平台注册 3.2 微信开发者工具下载 3.3 微信开发者工具界面上的基本功能介绍 3.3.1 开发 ...
- 微信小程序——开发基础
内容说明:这是微信小程序第一次实验报告 本次实验主要实现了三部分内容:开发环境的搭建,开发工具的安装以及比较数字大小的实验案例.在进行实验的过程中,掌握了以下知识内容: 微信小程序开发环境的搭建 ...
- 微信小程序开发教程:项目二微信小程序开发基础 课后习题
<微信小程序开发教程>主编/黄寿孟 易芳 陶延涛 湖南大学出版社 目录 一.单选题 二.多选题 三.判断题 四.填空题 五.简答题 1.请简单描述页面样式的单位rpx与px的关系. 2.简 ...
- 微信小程序开发基础入门笔记
文章目录 vsc 安装插件(小程序开发助手-微信小程序开发助手) 日常注意: 微信小程序WXS模块的使用 框架 1小程序结构和传统的web结构 2 基本的项目目录 3全局配置app.js 4.运算 = ...
- 【web】微信小程序笔记小结(模板与配置)
来源:黑马程序员前端微信小程序开发教程 目录 I. WXML 模板语法 ① 数据绑定 ※※ 基本原则 ※※ 在 data 中定义数据 ※※ 在 WXML 中使用数据 ※※※※ Mustache 语法的 ...
- 微信小程序开发基础知识1(黑马)
小程序简介 1.小程序与普通网页开发的区别: 1.运行环境不同:网页运行在浏览器中,小程序运行在微信环境中: 2.API不同:由于运行环境不同,小程序无法调用DOM和BOM的API 3.开发模式不同: ...
- 微信小程序开发基础知识2(黑马)
WXML模板语法-数据绑定 1.数据绑定的原则 1.在data中定义数据 2.在WXML中使用数据 2.在data中定义页面的数据 在页面对应的.js文件中,把数据定义到data对象中即可 3.Mus ...
- 微信小程序开发—— 基础知识
一.目录结构 二.配置 一个小程序应用程序会包括最基本的两种配置文件.一种是全局配置文件 app.json 和 页面自己的配置文件 page.json. 配置文件中不能出现注释 2.1 全局配置 ap ...
- 微信小程序开发基础 字体样式和文本样式的设置
微信小程序页面主要有4个页面,分别是: js页面.json页面,wxml页面.wxss页面 他们的功能分别是: js:页面逻辑文件 json:页面配置文件 wxml:页面描述文件 wxss:页面样式表 ...
最新文章
- 1.16 快速排序法(Quicksort)
- Oracle 11g服务端的安装和配置
- Android之利用EventBus进行数据传递
- .net环境下如何使用MySql数据库
- C#不同操作系统下,界面大小不一的原因
- Win7安装Mysql8.0步骤
- Qt实战开发-数字软键盘
- MyBatis【钢镚核恒】
- 商务与经济统计 --假设检验
- 惠普服务器电脑装系统教程,惠普台式电脑装系统步骤
- 2020.08.10多态
- OpenStack安装Placement组件部署(四)
- 认证失败,严重错误:无法连接到服务器
- Eigen: C++开源矩阵计算库
- AJAX_入门经典案例
- Ubuntu20.04安装配置tensorflow2深度学习环境
- VMware虚拟机 Linux 安装与配置网络
- 张小龙2018PRO版微信公开课演讲全文 透露2018微信全新计划
- 巴比特 | 元宇宙每日必读:“元宇宙”炒热了XR赛道,高通试图“赢家通吃”,芯片巨头们的诸神之战开启...
- Java IO流 详解(字节流、字符流、输入流、输出流、刷新)
热门文章
- 「拓数派(OpenPie)2022 发布会实录 」PieCloudDB Database 社区版与商业版产品总览
- 我们距离构建一个逼真的虚拟世界还有多远
- 二维光子晶体带隙绘制程序_平面波展开法(最终版)
- ESXi虚拟机导出为OVF模板
- Honor笔记本 (2018款intel版本)win11升级教程(TPM2.0)
- JS JQuery实现简单的鼠标移动动画效果
- 【GNSS】GREAT多频多系统GREAT-UPD开源代码-第4.1章 代码解读之gnss.h/gnss.cpp
- 多视几何 003 二次曲线
- 零信任的过去、现在和未来
- C/S系统快速开发框架/winform快速开发框架源码(C#+SQL)