小程序-2(WXML数据模板+WXSS模板样式+网络数据请求)

目录

1.WXML数据模板

数据绑定

事件绑定

小程序中常用的事件

事件对象的属性列表

target和currentTarget的区别

bindtap的语法格式

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

事件传参与数据同步

事件传参

bindinput的语法绑定事件

文本框和data的数据同步

条件渲染

wx:if

结合使用wx:if

hidden

***wx:if和hidden的对比

列表渲染

wx:for

wx:key

2.WXSS模板样式

wxss和css的区别

rpx的实现原理

样式导入

全局样式和局部样式

全局配置

window

tabBar

配置tabBar选项

3.网络数据请求

小程序网络数据请求限制

配置request合法域名

发起GET请求和POST请求

在页面刚加载时请求数据

跳过request合法校验

跨域和Ajax的说明


1.WXML数据模板

数据绑定

数据绑定的规则:在js文件的data中定义数据,在WXML中使用数据

Mustache语法 即用双括号将数据包裹起来 <view>{{要绑定的数据名称}}</view>

Mustache语法主要用于绑定内容、绑定属性和运算(三元运算、算术运算)

进行三元运算时一定要注意书写的格式 randomNum1:Math.random() * 10 中间的空格是不能省略的,这里表示生成的是10以内的随机数

进行算术运算也要注意格式,randomNum2:Math.random().tofixed(2) 表示生成一个带有两位小数的随机数,前面内容写在data中,进行运算时写在WXML中,直接在双括号中进行运算

事件绑定

小程序中常用的事件

tap bindtap或bind:tap 手指触摸后马上离开,类似于click点击事件

input bindinput或bind:input 文本框的输入事件

change bindchange或bind:change 状态改变时触发

事件对象的属性列表

event.type 获得event的事件类型

event.target 触发事件的组件的一些属性值集合

event.detail 额外的信息

target和currentTarget的区别

target是触发该事件的源头组件(本人) ,而currentTarget则是当前事件所绑定的组件(父亲)

例如:在view中放置button,点击按钮时,点击事件以冒泡的方式向外扩散,也会触发view的tap事件处理函数,对于外层组件view来说e.target是内部的按钮组件,而e.currentTarget是当前的view组件

bindtap的语法格式

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

通过调用this.setData({})方法来给数据重新赋值,数据的初赋值要写在data{}中

事件传参与数据同步

事件传参

再给事件命名时,不能直接在名字后面加上属性值,可以再添加一个data-*组件和Mustache组合来传参,其中*指的是参数的名字(起一个名字),Mustache的双花括号中放参数

在js文件中,通过event.target.dataset.参数名来获得参数,注意这里的方法与之前调用的方法是不同的,大的方法是this.setData({}),这个小的是dataset

bindinput的语法绑定事件

在js文件中通过event.detail.value来获取文本框最新的值

效果就是每输入一个值,显示框会把当前文本框的全部内容输出一次

文本框和data的数据同步

可以先给input设置一个value值(文本框的名字)放在Mustache中,在js文件中先在data中给msg初始赋值,之后在函数中使用this.setData方法,调用event.detail.value即可显示当前文本框的全部内容,包括初始赋值和在文本框中直接输入的内容,

可以在wxss中对文本框的样式进行设置

wxml

js

wxss

条件渲染

wx:if

使用wx:if="{{condition}}"来判断是否渲染该代码块,也可以用wx:elif和wx:else来判断,注意书写格式

在下面的案例中,要提前把type的值写在data中,再在wxml中写view时进行判断

结合<block>使用wx:if

使用<block>包裹,可以避免不必要的渲染,提高渲染性

为true时显示元素,为false时隐藏元素

hidden

可以在data中写一个flag,让后在view标签中使用hidden结合Mustache,将flag放进去,条件为true时隐藏,false时显示

***wx:if和hidden的对比

列表渲染

wx:for

该方法可将指定的数组循环渲染,在data中创建一个数组如:array:['苹果','橙子','西瓜'],之后再wxml中写一个view,中间的渲染写法是 索引是:{{index}} 当前项是:{{item}}

wx:key

使用wx:key,即可以根据列表中的某个值去查找对应的想要值,比如可以根据id去输出对应的name值

注意列表的写法,以及key的代码 <view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>

2.WXSS模板样式

wxss和css的区别

rpx的实现原理

将所有的设备屏幕,在宽度上等分为750份,即当前屏幕的总宽度是750rpx

样式导入

可以创建一个新文件夹,在其中创建一个公共的wxss文件,一些公有的属性样式可以写在里面,想用的时候在当前的wxss文件中import一下,如@import"common/common.wxss"

全局样式和局部样式

全局样式是写在app.wxss中的,局部样式写在页面中的.wxss文件中

当二者冲突时,局部样式会覆盖全局样式;当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局的样式

全局配置

window

导航栏背景颜色一般不是文本颜色,以#开头;导航栏标题颜色,黑色或者白色

enablePullDownRefresh 是布尔类型值,表示是否下拉表单,为true

backgroundColor 是下拉表单后,上面的一部分窗口的背景色

backgroundTextStyle 是下拉表单后,上面的一部窗口中会有加载的小圆点,小圆点的颜色只能是dark或者light

onReachBottomDistance 是上拉触底距离,当滚动条距离底部50px时就加载新的数据,在书写的过程中,一般默认是50,后面不需要加单位,一般不建议修改这个值

tabBar

tabBar分为底部和顶部

tabBar中最少2个、最多5个tab标签;当渲染顶部tabBar时,不显示icon图标,只显示文本

同样是在app.json中配置的tabBar,每个tab中必须包含list,而list中又必须包含pagePath和text两个属性

配置tabBar选项

必须要把tabBar的页面放在最前面,否则加载不出来

3.网络数据请求

小程序网络数据请求限制

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

配置request合法域名

发起GET请求和POST请求

调用微信小程序的wx.request()方法,网址、请求方式、发送数据、回调函数

在页面刚加载时请求数据

跳过request合法校验

跨域和Ajax的说明

相关推荐
吴声子夜歌3 天前
小程序——布局示例
小程序
luffy54593 天前
微信小程序页面使用类似filter函数的wxs语法
微信小程序·小程序
Slow菜鸟3 天前
微信小程序开发(二)目录结构完全指南
微信小程序·小程序
小小王app小程序开发3 天前
海外盲盒小程序抽赏玩法分析(附跨境技术落地要点)
小程序
一叶星殇3 天前
微信小程序请求拦截器踩坑:避免重复刷新 token
微信小程序·小程序
hello kitty w3 天前
4. 基本语法
小程序
CHU7290353 天前
探索淘宝扭蛋机小程序:创意互动与趣味体验的融合
小程序
头发还在的女程序员4 天前
【免费下载】企业能源管理系统
小程序·策略模式·能源管理
吴声子夜歌4 天前
小程序——样式与布局
小程序
hello kitty w4 天前
3.小程序方法的封装
javascript·小程序