【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触摸事件,当前变化的触摸点信息的数组。

targetcurrentTarget(少用)的区别:

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

举个例子,当我们点击一个内部的按钮时,点击事件以冒泡的方式向外扩散,也会触发外层viewtap事件处理函数。此时对于外层的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:ifwx: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:ifhidden的对比:运行方式不同。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的组件样式。通用的选择器和样式规则

相对于csswxss扩展了两个特性: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个、最多5tab 页签
  • 当渲染顶部 tabBar 时,不显示icon,只显示文本

tabBar的六个组成部分:

在这里插入图片描述

配置tabBar:

app.json文件中配置

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

每个tab项的配置选项

属性类型必填描述
pagePathString页面路径,页面必须在 pages 中预先定义
textStringtab 上显示的文字
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 对小程序页面进行个性化配置
  • 能够知道如何发起网络数据请求
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言从头学25—— exit() 函数及 atexit() 函数

我们在 main 程序里通过 "return 0;" 这个语句来结束整个程序的运行&#xff0c;而在函数(也可以叫子程序)中使用 return 语句结束函数运行并带着返回值 (如有的话) 返回到调用者那里&#xff0c;然后继续运行后边的代码。如果在子程序那里就想结束整个程序的运行&am…

纯血国产的应用开发框架,Solon v2.8.4 发布

Solon 框架&#xff01; Java “纯血国产”应用开发框架。开放原子开源基金会&#xff0c;孵化项目。从零开始构建&#xff08;非 java-ee 架构&#xff09;&#xff0c;有灵活的接口规范与开放生态。 追求&#xff1a; 更快、更小、更简单提倡&#xff1a; 克制、简洁、高效…

easy-es Map类型字段序列化问题:Unexpected character (‘n‘ (code 110)):

Data IndexName("demo") public class EasyEsDemo {IndexIdprivate String id;private String name;private int age;// 这个Map字段因为NameFilter过滤器&#xff0c;导致fastjson序列化后为{null:"value"}这种形式&#xff0c;insert报错private Map<…

gateway整合sentinel限流

官方文档&#xff1a;https://github.com/alibaba/Sentinel/wiki/%E7%BD%91%E5%85%B3%E9%99%90%E6%B5%81 从 1.6.0 版本开始&#xff0c;Sentinel 提供了 Spring Cloud Gateway 的适配模块&#xff0c;可以提供两种资源维度的限流&#xff1a; route 维度&#xff1a;即在 Spr…

【第28章】Vue实战篇之用户重置密码

文章目录 前言一、调用接口二、重置密码三、界面展示总结 前言 这里我们来通过调用后端接口来完成密码重置功能并且修改成功清除缓存重新登录。 一、调用接口 export const userResetPasswordService (data)>{return request.patch(/user/updatePwd, data) }二、重置密码…

【数据结构与算法】详解循环队列:基于数组实现高效存储与访问

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《数据结构与算法》 期待您的关注 ​ 目录 一、引言 &#x1f343;队列的概念 &#x1f343;循环队列的概念 &#x1f343;为什…

DIY灯光特效:霓虹灯动画制作教程

下面我们根据这张霓虹灯案例,教大家如何用智能动物霓虹灯闪烁的效果,大家可以根据思路,实现自己想要的动效效果,一起动手来做吧。 即时设计-可实时协作的专业 UI 设计工具 设置背景 新建画板尺寸为:800PX^600PX,设置背景色#120527。 绘制主题 输入自己喜欢文案,轮廓化,具体…

网络基础-协议

一、ARP 通过IP得到Mac 首先会查看缓存的arp表中是否有相应的IP和Mac对应关系&#xff0c;如果有直接进行包封装。如果没有则进行广播当对应的地址就收到广播包后会根据arp中的源地址进行单播返回相应的IP和Mac对应关系。 arp -a 查看现有的arp缓存 二、RARP反向地址解析 通过…

好公司也需要在好的价格买入

在《战胜华尔街》的第七章&#xff0c;林奇先生还进一步支出在合适的价格买入的重要性。他指出“那些股价线上涨幅度超过了收益线的股票&#xff0c;一般要么是横盘整理&#xff0c;要么是股价回调到与其盈利水平比较相当的合理价位。”因此&#xff0c;“在大牛市中&#xff0…

酒店多商户版微信小程序源码

一站式预订新体验 一、引言&#xff1a;打破传统&#xff0c;开启智能预订新时代 在数字化浪潮的推动下&#xff0c;传统的酒店预订方式已经逐渐无法满足现代人的需求。为此&#xff0c;一款集众多酒店商户于一体的“酒店多商户版小程序”应运而生&#xff0c;以其便捷、智能…

江门电子行业实施MES系统前后对比

在江门电子行业实施MES系统之前和之后的对比可以涉及以下几个方面&#xff1a; 生产效率提升&#xff1a;实施MES系统后&#xff0c;江门电子行业可以实现生产过程的实时监控和优化&#xff0c;减少生产中的浪费和停机时间&#xff0c;提高生产效率。 质量控制改善&#xff1a;…

【机器学习】机器学习重要方法——深度学习:理论、算法与实践

文章目录 引言第一章 深度学习的基本概念1.1 什么是深度学习1.2 深度学习的历史发展1.3 深度学习的关键组成部分 第二章 深度学习的核心算法2.1 反向传播算法2.2 卷积神经网络&#xff08;CNN&#xff09;2.3 循环神经网络&#xff08;RNN&#xff09; 第三章 深度学习的应用实…

webworker 入门教程

参考&#xff08;阮一峰的网络日志&#xff09;&#xff1a;https://www.ruanyifeng.com/blog/2018/07/web-worker.html Web Worker 的作用&#xff1a; 就是为 JavaScript 创造多线程环境&#xff0c;允许主线程创建 Worker 子线程&#xff0c;将一些任务分配给后者运行。在主…

解释一下在React中,什么是“渲染Props”模式,以及它与使用Hooks之前的状态管理有何不同?

在React中&#xff0c;"渲染Props"模式是一种组件设计模式&#xff0c;它通过将一个函数作为prop传递给组件&#xff0c;允许父组件定义子组件的渲染逻辑。这种模式使得组件更加灵活和可复用&#xff0c;因为它们可以接受一个渲染函数来决定如何渲染自己。 渲染Prop…

简单分享Python语言(发现其实并不难)

一. Python基础 Python是一种解释型语言&#xff0c;这意味着开发者可以在代码被编写后立即执行它们&#xff0c;而无需编译。Python的基本语法简单明了&#xff0c;以下是一些基础知识点&#xff1a; 变量和数据类型&#xff1a;Python支持多种数据类型&#xff0c;包括整型&…

Python教程:深入理解Python中的__init__()方法

在Python中&#xff0c;__init__()方法是一个特殊的方法&#xff0c;它在创建类的实例时自动调用。这个方法通常用于初始化实例的状态。本文将详细介绍__init__()方法的工作原理、使用场景以及如何有效地使用它。 1. __init__()方法的基础 1.1 什么是__init__()方法&#xff1f…

视频监控解决方案:视频平台升级技术方案(下)

目录 1 项目概况 2 项目需求 2.1 视频感知资源扩充 2.2 视频支撑能力升级 2.3 视频应用能力升级 3 技术设计方案 3.1系统总体架构 3.2视频感知资源扩充设计 3.3 视频支撑能力升级设计 3.4 视频应用能力升级设计 3.4.1视频资源目录管理 3.4.2标签管理 3.4.3设备智能…

KEIL使用小工具

怎样把数组数据导出&#xff1a; KeiL 调试时保存watchwindow的参数变量到文件 KeiL 调试时保存watchwindow的参数变量到文件_keil持续记录变量值到文件-CSDN博客

MySQL----undo log回滚日志原理、流程以及与redo log比较

回滚日志 回滚日志&#xff0c;保存了事务发生之前的数据的一个版本&#xff0c;用于事务执行时的回滚操作&#xff0c;同时也是实现多版本并发控制&#xff08;MVCC&#xff09;下读操作的关键技术。 如何理解Undo Log 事务需要保证原子性&#xff0c;也就是事务中的操作要…

常用框架-Spring MVC

常用框架-Spring MVC 1、什么是Spring MVC?2、Spring MVC有哪些优点?3、Spring MVC的主要组件有哪些?4、DispatcherServlet是什么?5、Spring MVC框架的控制器是什么?6、Spring MVC的控制器是不是单例模式?7、控制器默认以单例模式创建会带来什么问题?怎么解决?8、描述下…