小程序开发学习记录——WXML模板语法、WXSS模板样式、全局配置、页面配置、网络数据请求

WXML与事件处理：从基础到高级应用
原创 已于 2022-05-16 15:26:08 修改 · 273 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信小程序 #学习 #小程序

于 2022-05-16 15:23:57 首次发布
本文详细解析了WXML模板语法、数据绑定和事件绑定，介绍了target与currentTarget的区别，展示了bindtap和bindinput的用法，并探讨了文本同步与条件渲染技巧。此外，还涵盖了列表渲染、wxss样式、rpx单位，以及小程序开发的最佳实践和网络请求配置。

WXML模板语法

数据绑定在这里插入图片描述

事件绑定

在这里插入图片描述

事件对象的属性列表

在这里插入图片描述

target和currentTarget的区别

bindtap语法格式

在这里插入图片描述
在这里插入图片描述

事件传参

不能在绑定事件的同时为事件处理函数传递参数（区别于Vue）
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

bindinput语法格式

在这里插入图片描述

实现文本框和data之间的数据同步

条件渲染

wx:if

在这里插入图片描述
差值表达式里面是ture就展示 是false就不展示
需要注意 wx:else不需要加入任何判断条件 就是最后一种情况

结合block使用wx：if

在这里插入图片描述
如果用view包裹一个view——渲染出不必要的结点了
在这里插入图片描述

hidden

在这里插入图片描述

wx:if与hidden的对比

在这里插入图片描述

列表渲染

wx:for

在这里插入图片描述

手动指定索引和当前项的变量名（了解）

在这里插入图片描述

wx:key的使用

在这里插入图片描述

WXSS模板样式

wxss和css的关系

在这里插入图片描述

rpx尺寸单位

在这里插入图片描述
在这里插入图片描述
官方建议：在开发小程序的时候 设计师可以用iPhone6作为视觉稿的标准

样式导入

@import

@import后面要跟需要导入的外联样式表的相对路径 用；表示语句结束
在这里插入图片描述

全局样式和局部样式

定义在app.wxss里面的样式是全局样式 会作用于每一个页面
写在“页面.wxss”里面的样式是局部样式 只会作用于当前页面
在这里插入图片描述

全局配置

全局配置文件及常用的配置项

在这里插入图片描述
在这里插入图片描述

window节点常用的配置项

在这里插入图片描述

导航栏

在这里插入图片描述

全局开启下拉刷新功能

在这里插入图片描述

设置下拉刷新窗口的背景色

在这里插入图片描述

设置下拉刷新的loading样式

在这里插入图片描述

设置上拉触底的距离

在这里插入图片描述

tabBar

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

页面配置

页面配置和全局配置的关系

在这里插入图片描述

页面配置常用配置项（跟全局配置一样）

在这里插入图片描述
下拉刷新的时候基本是在具体页面进行设计的 不需要进行全局的配置

网络数据请求

小程序中网络数据请求的限制

在这里插入图片描述

配置合法域名

在这里插入图片描述

发起get请求

在这里插入图片描述

发起post请求

在这里插入图片描述

在页面加载的时候请求数据

在这里插入图片描述
在这里插入图片描述

跳过request合法域名校验

在这里插入图片描述

关于跨域和Ajax的说明

在这里插入图片描述

【微信小程序开发】入门Day2 —— 从视图逻辑到配置请求全方位解析
2303_76696898的博客
10-01 1631
本文详细介绍了微信小程序开发中的多个关键要点，包括 WXML 模板语法、WXSS 模板样式、配置文件、网络数据请求、页面导航、页面事件、生命周期以及 WXS 脚本。
我的微信小程序模板库，包含多个小程序使用例子miniProgram-tmp-master.zip
09-25
我的微信小程序模板库，包含多个小程序使用例子miniProgram-tmp-master.zip
【小程序】小程序学习02
云里有只猫的博客
02-06 498
02-wxss wxss和css WXSS具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。 与CSS相比，WXSS扩展的特性有： rpx尺寸单位 @import样式导入 rpx rpx（responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。 实现原理 rpx的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即：当前屏幕的总宽度为750rpx）。 在较小的设备上，1
小程序-模板与配置-WXSS模板样式
m0_62962469的博客
02-05 561
rpx的实现原理非常简单：鉴于不同设备的屏幕大小不同，为了实现屏幕的自动适配，rpx吧所有设备的屏幕在宽度上等分为750份（即当前屏幕宽度为750rpx）。WXSS（wei xin style sheets）是一套样式语言，用于美化WXML的模板样式，类似于网页开发中的CSS。小程序在不同设备上运行的时候，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面。当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。
【微信小程序】WXSS模板样式
hacker707的博客
10-22 1586
微信小程序之WXSS模板样式，持续更新【微信小程序】系列专栏
微信小程序_4,WXSS模板样式
没得简介
06-19 493
WXSS(WeiXin Style Sheets)是一套样式语言,用于美化WXML的组件样式,类似于网页开发中的cssWXSS具有CSS大部分特性,同时WXSS还对CSS进行了扩充以及修改,以适应微信小程序的开发,与CSS相比,WXSS扩展的特性有:rpx的实现原理非常简单,鉴于不同设备屏幕的大小不同,为了实现屏幕的自动适配,rpx把所有的设备的屏幕,在宽度上等分为750份(即:当前屏幕的总宽度为750rpx)小程序在不同蛇摆上运行的时候,会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配
小程序-2（WXML数据模板+WXSS模板样式+网络数据请求）
最新发布
2301_80486133的博客
07-16 1751
{{要绑定的数据名称}}
小程序精选源码——商城模板.rar
06-10
【小程序精选源码——商城模板】是一份专为学习和参考设计的小程序开发资源，它包含了一套完整的商城模板，适合那些希望深入了解小程序开发、尤其是电商应用开发的开发者。小程序作为移动互联网时代的一种轻量级应用...
电影商城微信小程序模板学习参考
“电影商城微信小程序模板”，表明整个项目被打包成单一目录，内部应包含标准的小程序项目结构，例如app.js（全局逻辑）、app.json（全局配置）、app.wxss（全局样式）、pages目录（存放各个页面）、images资源...
新闻列表微信小程序页面模板源码下载
首先，在技术架构方面，该模板遵循了微信小程序的标准项目结构，通常包括app.js（全局逻辑）、app.json（全局配置）、app.wxss（全局样式）以及pages目录下的各个页面文件夹（如index、list、detail等）。...
微信小程序前端H5页面模板源码
对于初学者而言，此类模板是学习微信小程序开发流程、理解页面生命周期（onLoad、onShow、onReady 等）、掌握 WXML 数据绑定机制（如 {{ }} 插值、wx:for 循环、wx:if 条件渲染）的理想范例。 此外，“源码”属性...
WXML模板语法——数据绑定、事件绑定、条件渲染、列表渲染
m0_61631823的博客
03-19 1059
一、数据绑定 1.Mustanche语法的格式 应用场景： ①绑定内容：<view>{{变量}}</view> ②绑定属性： <image src="{{imgSrc}}"></image> Page({ data: { imgSrc:"https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" }, }) ③三元运算
微信小程序之WXSS模板样式、页面配置（.json）和网络数据请求
哥的时代，为你保驾护航
01-23 3166
一、WXSS 模板样式1、什么是 WXSS2、WXSS 和 CSS 的关系二、WXSS 模板样式 - rpx1、什么是 rpx 尺寸单位2、rpx 的实现原理3、rpx 与 px 之间的单位换算*三 、WXSS 模板样式 - 样式导入1、什么是样式导入2、@import 的语法格式四、WXSS 模板样式 - 全局样式和局部样式1、全局样式2、局部样式五、页面配置1、页面配置文件的作用2、页面配置和全局配置的关系3、页面配置中常用的配置项。
微信小程序开发之WXSS模板样式与WXS脚本语言
人生处处是围城，一切都是最好的安排！
07-21 2866
wxss样式语法，包括rpx尺寸单位，样式导入，全局与局部样式，常用的样式属性，包括尺寸、边框、边距、文本、颜色等等；wxs脚本语言，定义与使用内联式与外联式的wxs脚本
【微信小程序】WXSS模板样式 —— 页面配置
JPengp的博客
08-31 3253
黑马前端小程序学习笔记 —— 样式导入、全局样式、局部样式、全局配置小程序外观、当前页面配置小程序外观
微信小程序学习day02-WXSS 模板样式
qq_52031408的博客
04-30 1509
微信小程序学习day02-WXSS 模板样式
WXSS
热门推荐
齐枫的博客
09-23 1万+
WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。 WXSS 用来决定 WXML 的组件应该怎么显示。 为了适应广大的前端开发者，WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改。 与 CSS 相比，WXSS 扩展的特性有： 尺寸单位 样式导入 尺寸单位 rp
小程序wxss公用模板
yiting123456789的博客
12-02 3713
text,view,swiper,icon, button,checkbox-group,checkbox, input,label,picker,radio-group,radio,slider,switch,textarea, navigator,image,video,audio,map{ box-sizing: border-box; }page{ background-co
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值