微信小程序:3.页面开发

页面配置

注意

1.不需要添加window作为父级

窗口表现

"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "第二个页面","backgroundColor": "#ffffff","backgroundTextStyle": "light","enablePullDownRefresh": true,"onReachBottomDistance": 50,

组件配置

"usingComponents": {},

示例

{"navigationBarBackgroundColor": "#ffffff","navigationBarTextStyle": "black","navigationBarTitleText": "第二个页面","backgroundColor": "#ffffff","backgroundTextStyle": "light","enablePullDownRefresh": true,"onReachBottomDistance": 50,"usingComponents": {},"style":"v2"
}          

WXSS概述

简介

WXSS(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式

特性【相比于css

1.新增了尺寸单位rpx:可以根据屏幕宽度进行自适应,规定屏幕宽为750rpx

2.样式导入:使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束

内联样式

1.class:静态样式,用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。 <view class="normal_view" />

2.style:接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进style中,以免影响渲染速度。 <view style="color:{{color}};" />

选择器

.class:选择所有拥有 class="intro" 的组件

#id:选择拥有 id="firstname" 的组件

element:选择所有 view 组件

element, element:如view, checkbox,选择所有文档的view组件和所有的checkbox组件

::after:如view::after,在 view 组件后边插入内容

::before:如view::before,在 view 组件前边插入内容

样式导入示例

 /** 1.common.wxss编写样式 **/.small-p {padding:5px;
}
/** 2.app.wxss导入样式 **/
@import "common.wxss";
.middle-p {padding:15px;
}

 

data

简介

data是页面第一次渲染使用的初始数据,data中的数据可以是字符串/数字/布尔值/对象/数组,

并且必须可以转成JSON格式,便于用setData进行修改

setData()修改数据

setData函数:将data中的数据进行修改并发送到视图层

1.仅支持JSON格式,一个setData的数据不能超过1024kB

2.不能改为undefined类型数据,因为可能遗留潜在的问题

3.直接修改this.data.xx而不调用this.setData()是无法改变页面的状态的,还会造成数据不一致

示例

<text>{{ hello }}</text>
<text>{{ num }}</text>
<text>{{ user.name }}</text>
<text>{{ names[1] }}</text>
Page({data:{message:"",//空字符串hello:"hello",//字符串num:10,//数字flag:true,//布尔值user:{name:"iwen",age:20},//对象names:["iwen","ime","frank"]//数组},onLoad(options) {console.log(this.data.hello)//调用data中的数据,用this.data.xxthis.setData({//使用setData函数修改数据,里面的{}必须是JSON格式数据num:20,flag:false,'user.name':'小明',names:["name1","name2"]})}
})          

 

生命周期函数

onLoad(options) {//onLoad:监听页面加载console.log("页面加载");
},
onShow() {//监听页面显示console.log("页面显示");
},
onReady() {//监听页面初次渲染完成console.log("页面初次渲染完成");
},
onHide() {//监听页面隐藏console.log("页面隐藏");
},
onUnload() {//监听页面卸载console.log("页面卸载");
}

数据绑定

简介

数据绑定使用 Mustache 语法(双大括号)将变量包起来

文本绑定

<view> {{ message }} </view>
//js中data定义数据
message: 'Hello MINA!'

属性绑定

1.基本属性

<view id="item-{{id}}"></view>
//js中data定义数据
id: 0

2.控制属性

<view wx:if="{{condition}}"></view>//js中data定义数据condition: true

渲染控制

条件渲染

hidden

<view flag="{{ hidden }}">果子熟了</view>
Page({data: {flag:false} })

wx:if

<view wx:if="{{ flag }}">我是孙悟空</view>
Page({data: {flag:false} })

wx:else

<view wx:if="{{ flag }}">我是孙悟空</view>
<view wx:else="{{ flag }}">我是六耳猕猴</view>
Page({data: {flag:false} })

wx:elif

<view wx:if="{{length === 1}}"> 1 </view>
<view wx:elif="{{length === 2}}"> 2 </view>
<view wx:else>未知</view>
Page({data: {length:1} })

wx:if和hidden的区别

1.hidden组件始终会被渲染,只是简单的基于CSS控制显示与隐藏

2.wx:if的条件值切换时,有一个局部渲染的过程,如果在初始渲染条件为false则框架什么也不做,在条件第一次变成真的时候才开始局部渲染。

建议:如果需要频繁切换的情景下,用hidden更好,如果在运行时条件不大可能改变则wx:if较好

列表渲染

简介

1.默认数组的当前项的下标变量名默认为index,数组当前项的变量名默认为item

2.使用wx:for-item可以指定数组当前元素的变量名【不要有-】

3.使用wx:for-index可以指定数组当前下标的变量名

4.渲染动态数据时,需要带上wx:key

示例

<view wx:for="{{ newsList }}" wx:for-item="item" wx:for-index="id" wx:key="id">{{ id }}-{{ item.id }}-{{ item.name }}</view>
newsList: [{
"id": 1,
"name": "news1"
},
{
"id": 2,
"name": "news2"
}],

方法事件

简介

事件是视图层到逻辑层的通讯方式,可以将用户的行为反馈到逻辑层进行处理

事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数

事件对象可以携带额外信息,如 id, dataset, touches

事件分类

1.冒泡事件(bind):当一个组件上的事件被触发后,该事件会向父节点传递

2.非冒泡事件(catch):当一个组件上的事件被触发后,该事件不会向父节点传递

事件类型

通过bind和catch与下面的类型组合产生不同类型的事件,如bindtap=bind+tap

tap 手指触摸后马上离开

touchstart 手指触摸动作开始

touchmove 手指触摸后移动

touchcancel 手指触摸动作被打断,如来电提醒,弹窗

touchend 手指触摸动作结束

longpress 手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 1.5.0

longtap 手指触摸后,超过350ms再离开(推荐使用longpress事件代替)

transitionend 会在 WXSS transition 或 wx.createAnimation 动画结束后触发

animationstart 会在一个 WXSS animation 动画开始时触发

animationiteration 会在一个 WXSS animation 一次迭代结束时触发

animationend 会在一个 WXSS animation 动画完成时触发

touchforcechange 在支持 3D Touch 的 iPhone 设备,重按时会触发

携带参数

1.currentTarget携带参数

2.mark携带参数

基本使用

<button type="primary" bindtap="tapName"> Click me! </button>
<view bindtap="tapName"> Click me! </view>
// pages/event/event.js
Page({
tapName(){
console.log("点击");
}
})

Event对象

Event对象的属性介绍:

type【String】:事件类型

timeStamp【Integer】:事件生成时的时间戳

target【Object】:触发事件的组件的一些属性值集合

currentTarget【Object】:当前组件的一些属性值集合

mark【Object】:事件标记数据

detail【Object】:额外的信息

touches【Array】:触摸事件,当前停留在屏幕中的触摸点信息的数组

changedTouches【Array】:触摸事件,当前变化的触摸点信息的数组

<button type="primary" bindtap="tapName"> Click me! </button>
<view bindtap="tapName"> Click me! </view>
Page({
tapName(e){
console.log(e);
}
})

冒泡事件(bind)

<view bindtap="bindParentHandle"><button type="primary" bindtap="bindChildHandle">冒泡事件</button>
</view>
Page({//当一个组件上的事件被触发后,该事件会向父节点传递
bindParentHandle(){console.log("父级事件");},
bindChildHandle(){console.log("子级事件");}
})

非冒泡事件(catch)

<view catchtap="catchParentHandle">//当一个组件上的事件被触发后,该事件不会向父节点传递<button type="primary" catchtap="catchChildHandle">非冒泡事件</button>
</view>
Page({
catchParentHandle(){console.log("非冒泡父级事件");},
catchChildHandle(){console.log("非冒泡子级事件");}
})

currentTarget携带参数

在wxml中添加数据的时候,必须在自定义属性前添加data-*【data-后面的字符串不分大小写,一律识别为小写】

<view data-id="1001" bindtap="bindViewTap"> 携带参数</view>
Page({
bindViewTap(e){
console.log(e.currentTarget.dataset.id);
}
})

mark携带参数

可以使用mark来识别具体触发事件的 target 节点。此外,mark还可以用于承载一些自定义数据(类似于 dataset )。

当事件触发时,事件冒泡路径上所有的 mark 会被合并,并返回给事件回调函数。(即使事件不是冒泡事件,也会 mark 。)

<view mark:parentMark="父级" bindtap="bindMarkTap"><button type="primary" mark:childMark="子级" bindtap="bindButtonTap">按钮</button>
</view>
Page({
bindMarkTap(e){
console.log(e.mark);
},
bindButtonTap(e){
console.log(e.mark);
}
})

模块化

简介

我们可以使用module.exports导出,并且使用require导入

导出

 hello.js
const num = 10;
function hello(){return "hello"}
// module.exports.num = num;
// module.exports.hello = hello;
module.exports = {num,hello}

导入

// index.js
const { num,hello } = require("./modules/hello.js")
Page({
onLoad(options) {
console.log(num);
console.log(hello());
}
})

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

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

相关文章

求职学习day5

安排明天hr面 投一下平安可能。 hr面准备&#xff0c;复习java核心技术&#xff0c;复习java项目。 正视自己&#xff0c;调整心态。 也是很早接触了javaguide但是没有持续学习&#xff0c;项目介绍 | JavaGuide&#xff0c;面试前复习一下感觉还是很有收获的。 还有一些…

studio编译报错java.lang.NullPointerException

安卓studio编译报错&#xff0c;这个是一个新建的项目就报错&#xff0c;原因是 implementation androidx.appcompat:appcompat:1.7.0版本太高&#xff0c;修改后版本 implementation androidx.appcompat:appcompat:1.4.0&#xff0c; 编译又报错 18 issues were found wh…

【MQTT(3)】开发一个客户端,QT-Android安卓手机版本

手机版本更加方便 生成安卓库 参考了这个代码 在编译Mosquitto以支持安卓平台时&#xff0c;主要涉及到使用Android NDK&#xff08;Native Development Kit&#xff09;进行交叉编译。环境的准备参考之前的博客【QT开发&#xff08;17&#xff09;】2023-QT 5.14.2实现Andr…

视频联网共享平台LntonCVS视频监控汇聚平台视频云解决方案

LntonCVS流媒体平台是一款遵循国家GB28181标准协议的先进视频监控与云服务平台。该平台设计独特&#xff0c;能够同时接入并处理多路设备的视频流&#xff0c;支持包括RTSP、RTMP、FLV、HLS、WebRTC在内的多种视频流格式的分发。其功能丰富多样&#xff0c;涵盖了视频直播监控、…

我国化工园区产业耦合发展的四种典型模式

化工园区产业耦合发展是石化化工行业走新型工业化道路&#xff0c;协同推进降碳、减污、扩绿、增长的必然要求&#xff0c;是行业实现高质量发展的必由之路。目前&#xff0c;我国化工园区产业耦合发展正处于探索阶段&#xff0c;赛迪研究院通过对石油化工、煤化工、盐化工和精…

进程与线程(一)进程相关

目录 一. 概念二 . 组成进程控制块程序段数据段 三. 特征四. 进程的状态与转换五. 进程控制进程创建进程终止进程阻塞与进程唤醒进程切换 六. 进程通信共享存储消息传递管道通信 一. 概念 多道程序环境下&#xff0c;允许多个程序并发执行&#xff0c;此时它们将失去封闭性&…

Linux-交换空间(Swap)管理

引入概念 在计算机中&#xff0c;硬盘的容量一般比内存大&#xff0c;内存&#xff08;4GB 8GB 16GB 32GB 64GB…&#xff09;&#xff0c;硬盘&#xff08;512GB 1T 2T…&#xff09;。 冯诺依曼的现代计算机结构体系里面的存储器就是内存 内存是一种易失性存储器&#xff0c…

白骑士的C++教学实战项目篇 4.3 多线程网络服务器

系列目录 上一篇&#xff1a;白骑士的C教学实战项目篇 4.2 学生成绩管理系统 在这一节中&#xff0c;我们将实现一个多线程网络服务器项目&#xff0c;通过该项目&#xff0c;我们将学习套接字编程的基础知识以及如何使用多线程处理并发连接。此外&#xff0c;我们还将实现一个…

路由数据获取及封装方法

数据库设计 自联表 定义tree字段 public class LabelValue{public int label { get; set; }public string? value { get; set; }public List<LabelValue> children { get; set; }}获取路由方法 public Response<object> getMenuList() {Response<object>…

利用patch-package补丁,解决H5预览PDF时电子签章不显示问题

利用patch-package补丁&#xff0c;解决H5预览PDF时电子签章不显示问题 一、问题描述 在生产环境中&#xff0c;遇到了一个紧急的技术问题&#xff1a;用户在移动端H5页面上查看电子票时&#xff0c;PDF文件预览功能正常&#xff0c;但其中的电子签章未能正常显示。这一问题直…

Linux网络——TcpServer

一、UDP 与 TCP 在现实生活中&#xff0c;Udp 类似于发传单&#xff0c;Tcp 类似于邮局的挂号信服务。 1.1 UDP&#xff08;用户数据报协议&#xff09; 无连接&#xff1a;发放传单时&#xff0c;你不需要提前和接受传单的人建立联系&#xff0c;直接把传单发出去。不可靠&…

0718vscode问答

终于来到 qt # Question 多态 # Answer 多态是面向对象编程中的一个重要概念&#xff0c;指的是同一个接口可以有多种不同的实现方式。多态性允许我们使用一个统一的接口来处理不同类型的对象&#xff0c;从而提高代码的灵活性和可扩展性。 在Java中&#xff0c;多态可以通过以…

处理.git文件夹过大出现臃肿问题

1、问题背景 在软件开发过程中&#xff0c;版本控制是一个至关重要的环节。Git 作为一种流行的分布式版本控制系统&#xff0c;被广泛应用于各种项目中。然而&#xff0c;近期我们发现在进行项目发版时&#xff0c;Git 克隆项目的时间显著增加&#xff0c;严重影响了发版的效率…

stm32入门-----EXTI外部中断(下——实践篇)

目录 前言 一、硬件介绍 1.对射红外线传感器 2.旋转编码器 二、EXTI外部中断C编程 1.开启RCC时钟 2.配置GPIOK口初始化 3.配置AFIO 4.配置EXIT 5.配置NVIC 三、EXIT外部中断项目实操 1.对射红外传感器计数 2.选择编码器计数 前言 本期接着上一期的内容继续学习stm3…

DHCP中继实验

一、什么是DHCP中继? 1、使得一个DHCP服务器同时为多个网段服务称为DHCP中继技术。 2、配置DHCP中继的网络设备可以在不同网段上从DHCP总服务器获取IP地址分配给下面的各个主机。 3、路由器和交换机都可充当中继。DHCP中继在两个网段间代理客户端和服务器请求,中继服务器需要…

SEO需要了解的8大html标签

做SEO久了就会发现SEO不是一项单一的技术&#xff0c;它需要你懂得很多东西&#xff0c;绝不是文章外链那么简单&#xff0c;至少你要懂得基本的标html标签。 1、title标签 标题是搜索引擎重要的参考标签&#xff0c;占有举足轻重的权重。建议不要在标题标签出现过多的关键词…

postman双击打不开的解决方案

postman双击打不开的解决方案 深入再深入 于 2022-05-09 15:45:56 发布 阅读量3.1k 收藏 2 点赞数 4 文章标签&#xff1a; postman 版权 右键属性 安装路径 更新版本 回滚 问题排查 关键词由CSDN通过智能技术生成 解决方案&#xff1a; 右键-属性&#xff0c;复制安装路…

Git 代码管理面试59题(一)

1. 简述Github和Gitlab的区别&#xff1f; 参考回答&#xff1a; Github是一个基于git实现在线代码托管的仓库&#xff0c;向互联网开放&#xff0c;企业版要收钱。gitlab类似 github&#xff0c;一般用于在企业内搭建git私服&#xff0c;要自己搭环境。GitHub如果使用私有仓…

【数据集处理工具】根据COCO数据集的json标注文件实现训练与图像的文件划分

根据COCO数据集的json标注文件实现训练与图像的文件划分 一、适用场景&#xff1a;二、COCO数据集简介&#xff1a;三、场景细化&#xff1a;四、代码优势&#xff1a;五、代码 一、适用场景&#xff1a; 适用于一个常见的计算机视觉项目应用场景&#xff0c;特别是当涉及到使…

【漏洞复现】泛微e-cology9 WorkflowServiceXml SQL注入漏洞

文章目录 前言漏洞描述影响范围 漏洞复现nuclei脚本 安全修复 前言 泛微协同管理应用平台e-cology是一套兼具企业信息门户、知识文档管理、工作流程管理、人力资源管理、客户关系管理、项目管理、财务管理、资产管理、供应链管理、数据中心功能的企业大型协同管理平台。 漏洞…