小程序-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的说明

相关推荐
小小王app小程序开发10 小时前
淘宝扭蛋机小程序核心玩法拆解与技术运营分析
大数据·小程序
说私域13 小时前
AI智能名片商城小程序数据清洗的持续运营策略与实践研究
大数据·人工智能·小程序·流量运营·私域运营
东东51613 小时前
xxx食堂移动预约点餐系统 (springboot+微信小程序)
spring boot·微信小程序·小程序·毕业设计·个人开发·毕设
CHU72903514 小时前
一番赏盲盒抽卡机小程序:解锁惊喜体验与社交乐趣的多元功能设计
前端·小程序·php
2501_9159184116 小时前
HTTPS 代理失效,启用双向认证(mTLS)的 iOS 应用网络怎么抓包调试
android·网络·ios·小程序·https·uni-app·iphone
数字游民952717 小时前
半年时间大概上了70个web站和小程序,累计提示词超过20w
人工智能·ai·小程序·vibecoding·数字游民9527
说私域17 小时前
微商企业未来迭代的核心方向与多元探索——以链动2+1模式AI智能名片商城小程序为核心支撑
大数据·人工智能·小程序·流量运营·私域运营
276695829218 小时前
美团 小程序 mtgsig
python·小程序·node·js·mtgsig1.2·美团小程序·大众点评小程序
2501_9151063218 小时前
混合应用(Hybrid)安全加固,不依赖源码对成品 IPA 混淆
android·安全·小程序·https·uni-app·iphone·webview
00后程序员张19 小时前
无需越狱,来对 iOS 设备进行调试、管理与分析
android·ios·小程序·https·uni-app·iphone·webview