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

news2024/11/13 12:56:39

文章目录

  • 模板与配置
    • 学习目标
    • 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 对小程序页面进行个性化配置
  • 能够知道如何发起网络数据请求
    在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

数据挖掘常见算法(聚类)

数据挖掘常见算法(聚类)

划分方法 K-均值算法(K-means算法) 方法: 首先选择K个随机的点,称为聚类中心.对于数据集中的,每一个数据,按照距离K个中心点的距离,将其与距离最近的中心点关联起来,与同一个中心点关联的所有点聚成一类.计算每一个组的平均值,将改组所关联的中心点移动到平均值的位置重复2~…
阅读更多...
6. Revit API UI: PreviewControl（预览控件）

6. Revit API UI: PreviewControl（预览控件）

6. Revit API UI: PreviewControl&#xff08;预览&#xff09; PreviewControl 有时我们需要一个预览功能&#xff0c;而Revit也提供了一个PreviewControl类来帮助我们实现这个功能。 从类的继承关系来看&#xff0c;PreviewControl就是一个用户自定义控件&#xff0c;它就…
阅读更多...
板凳--------第20章-信号：基本概念1

板凳--------第20章-信号：基本概念1

tlpi_hdr.h头文件使用及设置 liao__ran 于 2020-09-29 15:12:01 发布 阅读量1.6k 收藏 5 点赞数 1 分类专栏&#xff1a; linux系统编程手册 版权 linux系统编程手册 专栏收录该内容 7 篇文章 1 订阅 订阅专栏 使用的头文件&#xff0c;主要如下&#xff1a; ename.c.inc erro…
阅读更多...
【文字+视频教程】在手机上用文生软件平台CodeFlying开发一个整蛊版《Flappy Bird》

【文字+视频教程】在手机上用文生软件平台CodeFlying开发一个整蛊版《Flappy Bird》

前言&#xff1a; 在之前的文章中我们介绍了国内首家文生软件平台码上飞CodeFlying&#xff0c;并且教给了大家如何用它来开发复杂的项目信息管理系统以及恶搞拼图小游戏等。今天就继续给大家带来一起用码上飞开发整蛊版《Flappy Bird》小游戏的教程。 老规矩&#xff0c;咱还…
阅读更多...
024.两两交换链表中的节点，用递归和 while 循环

024.两两交换链表中的节点，用递归和 while 循环

题意 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 难度 中等 示例 输入&#xff1a;head [1,2,3,4] 输出&#xff1a;[…
阅读更多...
嵌入式系统中C/C++有仓颉语言对比分析

嵌入式系统中C/C++有仓颉语言对比分析

大家好，今天给大家分享一下，如何使用仓颉，以及优势在哪里？ 在 2024 年 6 月 21 日的华为开发者大会上，华为不仅官宣了下一代鸿蒙操作系统 HarmonyOS NEXT，而且还正式推出了自研的编程语言 仓颉 ，可谓是赚足了面子，遥遥领先！ 值得一提的是，HarmonyOS NEXT 是华为从内到…
阅读更多...
数据库管理系统(DBMS)

数据库管理系统(DBMS)

一.数据库管理系统 1.简介 数据库管理系统(Database Management System)是一种操纵和管理数据库的大型软件&#xff0c;用于建立、使用和维护数据库&#xff0c;简称DBMS。它对数据库进行统一的管理和控制&#xff0c;以保证数据库的安全性和完整性。用户通过DBMS访问数据库中…
阅读更多...
无线麦克风哪个品牌音质最好，一文告诉你无线领夹麦克风怎么挑选

无线麦克风哪个品牌音质最好，一文告诉你无线领夹麦克风怎么挑选

随着直播带货和个人视频日志&#xff08;Vlog&#xff09;文化的兴起&#xff0c;以及自媒体内容创作的蓬勃发展&#xff0c;我们见证了麦克风行业的迅猛发展。在这一浪潮中&#xff0c;无线领夹麦克风以其无与伦比的便携性和操作效率&#xff0c;迅速赢得了广大视频制作者的喜…
阅读更多...
WPF——属性

WPF——属性

一、属性 类最初只有字段与函数&#xff0c;字段为一个变量&#xff0c;访问权限可以是private&#xff0c;protected&#xff0c;public。而将字段设为private&#xff0c;不方便外界对类数据的操作&#xff0c;但是将字段设为public又怕外界对数据进行非法操作&#xff0c;于…
阅读更多...
【ChatBI】超轻量Python库Vanna快速上手，对接oneapi

【ChatBI】超轻量Python库Vanna快速上手，对接oneapi

oneapi 准备 首先确保你有oneapi &#xff0c;然后申请 kimi的api 需要去Moonshot AI - 开放平台 然后添加一个api key 然后打开oneapi的渠道界面&#xff0c;添加kimi。 然后点击 测试&#xff0c; 如果能生成响应时间&#xff0c;就是配置正确。 然后创建令牌 http:…
阅读更多...
探秘美食新宠：嘴尚绝卤味，口感惊艳你的味蕾！

探秘美食新宠：嘴尚绝卤味，口感惊艳你的味蕾！

在繁华的都市中&#xff0c;一道独特的卤味小吃悄然走红&#xff0c;它就是“嘴尚绝卤味”。今天&#xff0c;就让我们一起走进这家卤味店&#xff0c;探寻那令人回味无穷的口感秘密。 一、初识嘴尚绝卤味 “嘴尚绝”这个名字&#xff0c;一听就让人联想到美食的极致诱惑。店内…
阅读更多...
从零开始构建CNN模型

从零开始构建CNN模型

猫狗分类问题——从零开始构建CNN 我们将使用相同的体系结构&#xff0c;并进行一些小的更改&#xff0c;如下所示。 第一个线性层的输入尺寸发生变化&#xff0c;因为猫和狗的图像尺寸是(256,256)。添加了另一个线性层来为模型学习提供更多的灵活性。 让我们来看看实现网络架…
阅读更多...
卷积的通俗解释

卷积的通俗解释

以时间和空间两个维度分别理解卷积&#xff0c;先用文字来描述&#xff1a; 时间上&#xff0c;任何当前信号状态都是迄至当前所有信号状态的叠加&#xff1b;时间上&#xff0c;任何当前记忆状态都是迄至当前所有记忆状态的叠加&#xff1b;空间上&#xff0c;任何位置状态都…
阅读更多...
如何将视频里的语音转成文字？5种方法轻松解决

如何将视频里的语音转成文字？5种方法轻松解决

这个信息爆炸的时代&#xff0c;视频内容如同潮水般涌来&#xff0c;而我们经常需要从这些海量的视频资源中提取关键信息。无论是为了学习、工作还是娱乐&#xff0c;将视频里的语音转换成文字都是一种高效的方法。这不仅可以帮助我们更好地理解内容&#xff0c;还能方便我们进…
阅读更多...
【自然语言处理系列】Python 字符串操作技巧：清理、替换与合并

【自然语言处理系列】Python 字符串操作技巧：清理、替换与合并

在编写Python程序时&#xff0c;字符串处理是一项常见的任务。了解如何有效地清理、修改和合并字符串对于数据预处理、文本分析和日常编程都至关重要。本文将引导您通过一系列实用的示例来掌握Python中字符串的核心操作&#xff0c;包括去除不需要的空格和特殊字符、替换文本中…
阅读更多...
轻松搞定数据可视化配色，这份指南助你一臂之力！

轻松搞定数据可视化配色，这份指南助你一臂之力！

配色是数据可视化图表的主要因素。一组合适的配色可以表达数据的重点和趋势&#xff0c;而不良的配色会削弱可视化表达的有效性。在本文中&#xff0c;我将梳理数据可视化中使用的配色板类型&#xff0c;通过案例揭示数据可视化配色技巧&#xff0c;并介绍可生成配色板的插件&a…
阅读更多...
手撕RPC——前言

手撕RPC——前言

手撕RPC——前言 一、RPC是什么&#xff1f;二、为什么会出现RPC三、RPC的原理3.1 RPC是如何做到透明化远程服务调用&#xff1f;3.2 如何实现传输消息的编解码&#xff1f; 一、RPC是什么&#xff1f; RPC&#xff08;Remote Procedure Call&#xff0c;远程过程调用&#xff…
阅读更多...
Python笔记 文件的读取操作

Python笔记 文件的读取操作

1.open()打开函数 再Python&#xff0c;使用open函数&#xff0c;可以打开一个已经存在的文件&#xff0c;或者创建一个新文件&#xff0c;语法如下 open(name,mode,encoding) name:是要打开的文件名的字符串&#xff08;可以包含文件所在的具体路径&#xff09; mode&…
阅读更多...
[FreeRTOS 基础知识] 信号量 概念

[FreeRTOS 基础知识] 信号量 概念

文章目录 信号量定义信号量特性 信号量定义 信号量是一个抽象的数据类型&#xff0c;通常包含一个整数值以及一个等待该值变为正数的任务列表&#xff08;也称为等待队列&#xff09;。信号量的整数值代表了系统中某种资源的可用数量。 在操作系统中信号量用于控制对共享资源访…
阅读更多...
【Solr 学习笔记】Solr 源码启动教程

【Solr 学习笔记】Solr 源码启动教程

Solr 源码启动教程 本教程记录了如何通过 IDEA 启动并调试 Solr 源码&#xff0c;从 Solr9 开始 Solr 项目已由 ant 方式改成了 gradle 构建方式&#xff0c;本教程将以 Solr 9 为例进行演示&#xff0c;IDE 选择使用 IntelliJ IDEA。 Solr github 地址&#xff1a;https://gi…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023