【Day02】0基础微信小程序入门-学习笔记

文章目录

  • 模板与配置
    • 学习目标
    • WXML 模板语法
      • 1.数据绑定（类似于 Vue2 ）
      • 2. 事件绑定
      • 3. 条件渲染
      • 4.列表渲染
    • WXSS模板样式
      • 1. rpx尺寸单位
      • 2.样式导入
      • 3. 全局样式和局部样式
    • 全局配置
      • 1. window
      • 2. tabBar
    • 页面配置
    • 网络数据请求
    • 总结

持续更新~

模板与配置

学习目标

  • 能够使用 WXML模板语法渲染页面结构

  • 能够使用 WXSS 样式美化页面结构

  • 能够使用 app.json 对小程序进行全局性配置

  • 能够使用 page.json 对小程序页面进行个性化配置

  • 能够知道如何发起网络数据请求

WXML 模板语法

1.数据绑定（类似于 Vue2 ）

基本规则：

  • data定义数据

    在页面对应的.js文件中，把数据定义到data对象即可：

    //index.js
Page({
    data:{
        //字符串类型的数据
        info:'init data',
        
        //数组类型的数据
        msgList:[{msg:'hello'},{msg:'world'}]
    }
})

  • 在WXML使用数据。

    把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可，语法格式为：

    <!--index.wxml-->
<view>{{要绑定的数据名称}}</view>

Mustache语法的应用场景:

  • 绑定内容

    //index.js
Page({
    data:{
        //字符串类型的数据
        info:'init data',
    }
})

    <!--index.wxml-->
<view>{{要绑定的数据名称}}</view>

  • 绑定属性

    //index.js
Page({
    data:{
        imgSrc:'http://www.baidu.com'
    }
})

    <!--index.wxml-->
<image src="{{imgSrc}}" mode="widthFix"></image>

  • 运算（三元运算、算数运算等）

    三元：随机生成10以内的数字是否大于等于5，来决定渲染哪一段数字。

    Page({
    data:{
        randomNum:Math.random()*10  //生成10以内的随机数字
    }
})

    <view>{{randomNum >=5?'随机数字大于或等于5':'随机数字小于5'}}</view>

如果想查看当前页面的所有数据，在调试器的AppData中查看

2. 事件绑定

事件是渲染层到逻辑层的通讯方式。

通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。

小程序常用的事件

类型绑定方式事件描述
tapbindtap或bind:tap手中触摸后马上离开，类似于HTML中的click事件
inputbindinput或bind:input文本框的输入事件
changebindchange或bind:change状态改变时触发

当事件回调触发时，会收到一个对象event，详细属性如下：

属性类型说明
typeString事件类型
timeStampInteger页面打开到触发事件所经过的毫秒数。
targetObject触发事件的组件的一些属性值集合。
currentTargetObject当前组件的一些属性值集合
detailObject额外的信息
touchesArray触发事件，当前停留在屏幕中的触摸点信息的数组。
changedTouchesArray触摸事件，当前变化的触摸点信息的数组。

target和currentTarget(少用)的区别:

target是触发该事件的源头组件，而currentTarget则是当前事件所绑定的组件。

举个例子，当我们点击一个内部的按钮时，点击事件以冒泡的方式向外扩散，也会触发外层view的tap事件处理函数。此时对于外层的view来说，e.target指向的是触发事件的源头组件，e.target是内部的按钮组件。e.currentTarget指向的是当前正在触发事件的那个组件，e.currentTarget是当前的view组件。

bindtap的语法格式

  • 通过bindtap，可以为组件绑定tap触摸事件

    <button type="primary" bindtap="btnTapHandler">
    按钮
</button>

  • 在.js文件在定义对应的事件处理函数，事件参数通过形参event（一般简写成e）来接收。

    Page({ 
    btnTapHandler(e){  //按钮事件的tap处理函数
        consle.log(e) //事件参数对象 e
    }
})

为data中的数据赋值，通过调用ths.setData(dataObject)方法，可以给页面data中的数据重新赋值，实例如下：

Page({
  data: {
      count:0
  },
  changeCount(){
    this.setData({
      count:this.data.count + 1
    })
  }
})

<button size="mini" bind:tap="changeCount">count+1:{{count}}</button>

事件传参：

注意：小程序传参比较特殊，不能再绑定事件的同时给事件处理函数传递参数，即bindtap = "btnHandler(123)"这样不可以！！！！

正确用法:给组件提供**data-***自定义属性传参，其中 *代表的是参数的名字，示例代码如下：

<!--info会被解析为参数的名字 ，数值2会被解析为参数的值-->
<button bindtap="btnHandler" data-info="{{2}}">
    事件传参
</button>

再事件处理函数中，通过event.target.dataset.参数名即可获取到具体参数的值，示例代码如下

btnHandler(event){
    //dataset 是一个对象，包含了所有通过data-* 传递过来的参数项
    console.log(event.target.dataset)
    
    //通过dataset可以访问到具体参数的值
    console.log(event.target.dataset.info)
}

bindinput的语法格式

通过input事件，来响应文本框的输入事件

  • 绑定输入事件

    <input bindinput="inputHandler"></input>

  • js文件定义事件处理函数

    inputHandler(e){
	//	e.detail.value是变化后，文本框最新的值
    console.log(e.detail.value)
}

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

步骤：

  • 定义数据

    Page({
	data:{
		msg:"你好"
	}
})

  • 渲染结构

    <input value="{{msg}}" bindinput="iptHandler"></input>

  • 美化样式(css)

    input {
    border:1px solid #eee;
    padding:5px;
    margin:5px;
    border-radius:3px;
}

  • 绑定input事件处理函数

    iptHandler(e){
    this.setData({
		msg:detail.value
    })
}

在这里插入图片描述

3. 条件渲染

wx:if和wx:else:根据condition是否为true来决定是否显示

<view wx:if="{{condition}}">True</view>

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

结合block标签使用wx:if:

如果要一次性控制多个组件的展示与隐藏，可以使用一个block标签将多个组件包装起来，并在block标签上使用 wx:if 控制属性

<block wx:if="{{condition}}">
	<view>view1</view>
    <view>view2</view>
</block>

hidden控制元素显示与隐藏，值为true即隐藏：

<view hidden="{{condition}}">view</view>

wx:if和hidden的对比：运行方式不同。wx:if动态创建和移除元素；hidden切换样式(display:none/block)控制。

频繁显示和隐藏的话建议使用hidden

4.列表渲染

wx:for：根据指定的数组，循环渲染重复的组件结构

<view wx:for={{array}}>
索引值：{{index}} 当前项为：{{item}}
</view>

扩展：

wx:for-index可以指定当前循环项的索引的变量名

wx:for-item可以指定当前项的变量名

wx:key:类似于vue的唯一key，提高渲染的效率

data:{
    userList:[
        {id:001,name:'ru'},
        {id:001,name:'fu'},
        {id:001,name:'ss'}
    ]
}

<view wx:for={{userList}} wx:key="id">{{item.name}}</view>

WXSS模板样式

样式语言的一种，类似于css，用于美化WXML的组件样式。通用的选择器和样式规则

相对于css，wxss扩展了两个特性：rpx尺寸单位、@import样式导入

1. rpx尺寸单位

rpx(responsive pixel)是微信小程序独有的，用来解决屏适配的尺寸单位。

实现原理：不同设备屏幕大小不一，为实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即当前屏幕总宽度为750rpx）。小程序在不同设备运行时，会自动把rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

扩展：rpx和px的单位换算:

iPhone6 建议作为视觉稿的标准

设备rpx换算px（屏幕宽度/750）px换算rpx（750/屏幕宽度）
iPhone51rpx = 0.42px1px = 2.34rpx
iPhone6(建议作为视觉稿的标准)1rpx = 0.5px1px = 2rpx
iPhone6 Plus1rpx = 0.552px1px = 1.81rpx

2.样式导入

使用 WXSS 提供的 @import 语法，可以导入外联的样式表。

@import语法格式: 记得加分号;

/**common.wxss**/
.small-p{
    padding:5px;
}

/**相对路径**/
@import "common.wxss";
.middle-p{
	padding:15px;
}

3. 全局样式和局部样式

全局样式：定义在app.wxss的样式为全局样式，作用于每一个页面。

局部样式：在页面的.wxss文件中定义的样式，只作用于当前页面。

注意：

  • 当局部样式和全局样式冲突时，根据就近原则，局部样式覆盖全局样式。
  • 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式。选择的越详细权重越大。

全局配置

全局配置文件：app.json

常用配置项：

  • pages(页面存放路径)
  • window(窗口外观)
  • tabBar(底部tabBar效果)
  • style(是否启用新版组件样式)

在这里插入图片描述

1. window

window节点常用配置项

属性名类型默认值说明
navigationBarTitleTextString字符串导航栏标题文字内容
navigationBarBackgroundColorHexColor#000000导航栏背景颜色，如 #000000
navigationBarTextStyleStringwhite导航栏标题颜色，仅支持 black/white
backgroundColorHexColor#ffffff窗口的背景色，全局开启下拉刷新功能后，下拉背景的颜色也由此设置。
backgroundTextStyleStringdark下拉 loading 的样式，仅支持 dark/light
enablePulDownRefreshBooleanfalse是否全局开启下拉刷新
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为pX

举例子使用：app.json -> window -> navigationBarTitleText，其余的使用同理。

在这里插入图片描述

这些很简单，不详说。

2. tabBar

tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。

注意:

  • tabBar中只能配置最少2个、最多5个tab 页签
  • 当渲染顶部 tabBar 时，不显示icon，只显示文本

tabBar的六个组成部分：

在这里插入图片描述

配置tabBar:

在app.json文件中配置

属性类型必填默认值描述
positionString否bottomtabBar的位置，仅支持 bottom/top
borderStyleString否blacktabBar上边框的颜色，仅支持black/white
colorHexColor否-tab 上文字的默认(未选中)颜色
selectedColorHexColor否-tab 上的文字选中时的颜色
backgroundColorHexColor否-tabBar 的背景色
listArray是-最少2个、最多5个tab

每个tab项的配置选项

属性类型必填描述
pagePathString是页面路径，页面必须在 pages 中预先定义
textString是tab 上显示的文字
iconPathString否未选中时的图标路径;当postion为top时，不显示icon
selectedlconPathString否选中时的图标路径;当postion为top时，不显示icon

简单配置：

 "tabBar": {
    "list": [
      {"pagePath": "pages/list/list","text":"list"},
      {"pagePath": "pages/logs/logs","text":"logs"}
    ]
  },

在这里插入图片描述

注意：只要是tabBar的页面必须往前提，放在pages的头部位置！！！

页面配置

小程序中，每个页面都有自己的 .json 配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

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

小程序中，app.json 中的 window节点，可以全局配置小程序中每个页面的窗口表现。

如果某些小程序页面想要拥有特殊的窗口表现，则使用页面的.json文件

注意: 当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准

页面配置常用配置项：

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000当前页面导航栏背景颜色，如 #000000
navigationBarTextStyleStringwhite当前页面导航栏标题颜色，仅支持 black/white
navigationBarTitleTextString当前页面导航栏标题文字内容
backgroundColorHexColor#ffffff当前页面窗口的背景色
backgroundTextStyleStringdark当前页面下拉 loading 的样式，仅支持 dark/light
enablePullDownRefreshBooleanfalse是否为当前页面开启下拉刷新的效果
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离，单位为 pX

网络数据请求

出于安全性考虑，对数据接口请求做出两个限制

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

在这里插入图片描述

配置request合法域名：

需求描述：在小程序中，希望请求https://www.escook.cn域名下的接口。

配置步骤：登录微信小程序管理后台 - 开发 - 开发设置 - 服务器域名 - 修改request合法域名。

在这里插入图片描述

这样就成功了

在这里插入图片描述

注意事项：

  • 域名只支持 https 协议
  • 域名不能使用IP地址或 localhost
  • 域名必须经过ICP备案（后端）
  • 服务器域名一个月内最多可申请 5 次修改

发起GET请求：

调用微信小程序提供的 wx.request()方法，可以发起 GET 数据请求

wx.request({
    url:'https://www.escook.cn/api/get',
    method:'GET',  //请求方式
    data:{    //发送数据
        name:'ruru',
        age:'18'
    }, 
    success:(res) => {   //请求成功之后的回调函数
        console.log(res)
    }
})

发起POST请求：

调用微信小程序提供的 wx.request()方法，可以发起 POST数据请求

wx.request({
    url:'https://www.escook.cn/api/post',
    method:'POST',  //请求方式
    data:{    //发送数据
        name:'ruru',
        gender:'女'
    }, 
    success:(res) => {   //请求成功之后的回调函数
        console.log(res)
    }
})

在页面刚加载时请求数据

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的onLoad事件中调用获取数据的函数。

onLoad:function(options){
    this.addCount()
}
addCount(){
  ...
}

跳过request合法域名校验(仅限在开发和调试阶段使用！！)：

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https协议的接口。
此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启开发环境不校验请求域名、TLS 版本及 HTTPS 证书，选项，跳过request合法域名的校验。

在这里插入图片描述

小程序中不存在跨域问题和Ajax的喔~

总结

完成学习你需要掌握的是：

  • 能够使用 WXML 模板语法渲染页面结构
  • 能够使用WXSS样式美化页面结构
  • 能够使用 app.json 对小程序进行全局性配置
  • 能够使用 page.json 对小程序页面进行个性化配置
  • 能够知道如何发起网络数据请求
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/740470.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

《第一行代码 第3版》学习笔记——第十一章 网络技术

《第一行代码 第3版》学习笔记——第十一章 网络技术

1 webview用法 class MainActivity : ComponentActivity() {SuppressLint("SetJavaScriptEnabled")override fun onCreate(savedInstanceState: Bundle?) {super.onCreate(savedInstanceState)setContent {NetWorkDemoTheme {// A surface container using the bac…
阅读更多...
GandCrab5.2勒索病毒复现

GandCrab5.2勒索病毒复现

GandCrab第一代勒索病毒首次出现于2018年1月&#xff0c;后面经历了五个大版本的更新迭代&#xff0c;该系列病毒特征是采用RSAAES加密算法&#xff0c;从算法上分析解密难度较大&#xff0c;会将系统中的大部分文件加密为随机后缀名的文件&#xff0c;然后对用户进行勒索。本实…
阅读更多...
国内邮件推送如何避免拦截？内容优化技巧？

国内邮件推送如何避免拦截？内容优化技巧？

国内邮件推送的平台怎么选择&#xff1f;如何提高邮件推送效果&#xff1f; 邮件营销是企业与客户沟通的重要方式&#xff0c;但在国内邮件推送过程中&#xff0c;邮件被拦截的问题屡见不鲜。为了确保邮件能够顺利送达目标用户&#xff0c;AokSend将探讨一些有效的策略&#x…
阅读更多...
【亲测好用】神级PSAI插件大揭秘：三款创成式修图神器，让你解放双手

【亲测好用】神级PSAI插件大揭秘：三款创成式修图神器，让你解放双手

PsBeta被停用后&#xff0c;小编一直想找到能够平替PsBeta创成式填充功能的插件。 功夫不负有心&#xff0c;终于被我找到啦&#xff0c;现在就给大家揭秘这三款宝藏修图神器&#xff0c;希望能够帮到大家。 1.插件名称&#xff1a;Starai 无需科学上网&#xff0c;还自带提示…
阅读更多...
wireshark常用过滤命令

wireshark常用过滤命令

wireshark常用过滤命令 wireshark抓包介绍单机单点&#xff1a;单机多点&#xff1a;双机并行&#xff1a; wireshark界面认识默认布局调整布局(常用)显示FCS错误 wireshark常见列Time回包数据报对应网络模型 wireshark基本操作结束抓包再次开始抓包 **wireshark常用过滤命令**…
阅读更多...
乐鑫云方案研讨会回顾｜ESP RainMaker® 引领创业潮，赋能科创企业

乐鑫云方案研讨会回顾｜ESP RainMaker® 引领创业潮，赋能科创企业

近日&#xff0c;乐鑫信息科技 (688018.SH) ESP RainMaker 云生态方案线下研讨会和技术沙龙在深圳成功举办&#xff0c;吸引了众多来自照明电工、新能源、安防、宠物等垂类领域的客户与合作伙伴。活动现场&#xff0c;与会嘉宾围绕产品研发、测试认证、品牌构建、跨境电商等多维…
阅读更多...
揭秘循环购：消费即收益，如何助力商家月销百万？

揭秘循环购：消费即收益，如何助力商家月销百万？

大家好&#xff0c;我是吴军&#xff0c;今天要和大家分享一种颠覆性的商业模式——循环购。你是否听说过“消费1000送2000”这样的促销活动&#xff1f;是不是觉得太不可思议&#xff0c;商家岂不是在“送钱”&#xff1f;别急&#xff0c;让我为你揭开这背后的秘密。 循环购&…
阅读更多...
ARM day1总结

ARM day1总结

思维导图
阅读更多...
路由器ARP和ARP-proxy(华为)

路由器ARP和ARP-proxy(华为)

#交换设备 路由器ARP和ARP-proxy(华为) 当一个广播域中的主机想要访问另外一个广播域的主机时&#xff0c;会广播ARP报文&#xff0c;询问目标IP地址所对应的MAC地址&#xff0c;默认情况下&#xff0c;arp记录是设备自动生成的&#xff0c;但是这样会容易受到ARP欺骗攻击&am…
阅读更多...
基础入门篇 | YOLOv10 项目【训练】【验证】【推理】最简单教程 | YOLOv10必看 | 最新更新，直接打印 FPS，mAP50，75，95

基础入门篇 | YOLOv10 项目【训练】【验证】【推理】最简单教程 | YOLOv10必看 | 最新更新，直接打印 FPS，mAP50，75，95

文章目录 训练 --train.py推理 --detect.py验证 --val.py不训练，只查看模型结构/参数量/计算量 --test.pyYOLOv10 是基于 YOLOv8 项目的改进版本，目前已经被 YOLOv8 项目合并，所以两个算法使用方法完全一致~ 今天我给大家展示一种非常方便的使用过程，包含【训练】【验证】…
阅读更多...
盘立方期货Kdj幅图指标公式源码

盘立方期货Kdj幅图指标公式源码

盘立方期货Kdj幅图指标公式源码&#xff1a; N:250; WR1:100-100*(HHV(HIGH,N)-CLOSE)/(HHV(HIGH,N)-LLV(LOW,N)),DOT,COLORLIGHTGREEN; EW:EMA(WR1,5); STICKLINE(WR1<20,WR1,20,1,0),COLORYELLOW; STICKLINE(WR1>80,WR1,80,1,0),COLORYELLOW; RSV:(CLOSE-LLV(LOW…
阅读更多...
2024CICE电博会·以“链主”企业为核心，推动产业链协同发展

2024CICE电博会·以“链主”企业为核心，推动产业链协同发展

随着全球科技日新月异的发展&#xff0c;消费电子产业已成为推动经济增长、改善人民生活的重要力量。中国国际消费电子博览会&#xff08;简称CICE电博会&#xff09;自2001年创办以来&#xff0c;已经走过了二十余个春秋&#xff0c;凭借其独特的地理位置优势、专业的组织策划…
阅读更多...
MAC Address

MAC Address

文章目录 1. 前言2. MAC Address2.1 MAC 地址格式2.2 Locally Administered MAC Address2.3 MAC 单播 和 多播 3. 参考资料 1. 前言 限于作者能力水平&#xff0c;本文可能存在谬误&#xff0c;因此而给读者带来的损失&#xff0c;作者不做任何承诺。 2. MAC Address 2.1 MA…
阅读更多...
《2024云安全资源池 能力指南》

《2024云安全资源池 能力指南》

《2024云安全资源池 能力指南》这份报告不仅梳理了云安全资源池的发展历程,还深入探讨了其在当前云计算环境下的重要性和必要性。报告详细分析了云安全资源池的市场需求、技术架构、关键技术以及行业应用案例,为政企用户提供了全面的云安全解决方案。通过资料收集、问卷调研、企…
阅读更多...
0624_ARM1

0624_ARM1

思维导图&#xff1a;
阅读更多...
揭秘红酒酿造魔法：看葡萄如何华丽变身酿成

揭秘红酒酿造魔法：看葡萄如何华丽变身酿成

红酒&#xff0c;这一液体中的诗篇&#xff0c;从葡萄园中的翠绿到酒窖里的深沉&#xff0c;每一滴都蕴含着大自然的恩赐与酿酒师的智慧。今天&#xff0c;就让我们一起揭开红酒酿造的神秘面纱&#xff0c;探寻从葡萄到佳酿的魔法之旅&#xff0c;并特别聚焦在备受赞誉的雷盛红…
阅读更多...
java安全必学之Javassist 学习

java安全必学之Javassist 学习

Javassist 学习 环境搭建 这个非常简单&#xff0c;只需要你自己加一个依赖 <!-- https://mvnrepository.com/artifact/javassist/javassist --><dependency><groupId>javassist</groupId><artifactId>javassist</artifactId><versi…
阅读更多...
光伏能源圈

光伏能源圈

2021年&#xff0c;新型电力系统之下&#xff0c;中国已形成了两网五大六小的电力新格局&#xff1a; 两大电网&#xff1a;国家电网、南方电网 五大电力央企&#xff1a;国家能源投资集团、中国华能集团、中国华电集团、中国大唐集团、国家电力投资集团。 六小豪门&#xf…
阅读更多...
使用Leaflet和瓦片地图实现离线地图的技术指南

使用Leaflet和瓦片地图实现离线地图的技术指南

引言 在现代的Web应用中&#xff0c;地图服务扮演着越来越重要的角色。然而&#xff0c;在一些特殊环境下&#xff0c;如偏远地区或网络环境不稳定的情况下&#xff0c;依赖在线地图服务可能会受到限制。因此&#xff0c;实现离线地图功能成为了一个重要的需求。本文将介绍如何…
阅读更多...
MoonBit 周报 Vol.46：支持32位无符号整数！

MoonBit 周报 Vol.46：支持32位无符号整数！

MoonBit 更新 支持了 32 位无符号整数 let num 100U // 32位无符号整数的字面量需要后缀U在 wasm 后端导出返回值类型为 Unit 的函数时&#xff0c;之前导出函数的类型中会有 (result i32)&#xff0c;现在 MoonBit 编译器会自动生成一个没有返回值 wrapper 函数&#xff0c…
阅读更多...
最新文章

Copyright @ 2022~2023