对小程序的初了解

news2024/11/17 3:36:01

WXML和HTML的区别

标签名称不同

HTML:div、a、span、img

WXML:view、text、image、navigator

属性节点不同

<a href="#">超链接</a>

<navigator url="/pages/home/home"></navigator>

提供了类似vue的模板语法

数据绑定

列表渲染

条件渲染

WXSS 和 CSS 的区别

新增了 rpx 尺寸单位

提供了全局的样式和局部样式

根目录 app.wxss 会作用于所有小程序

局部页面的 .wxss 样式仅对当前页面生效

wxss仅支持部分css选择器

.class 和 #id

element

并集选择器 和 后代选择器

::after 和 ::before 等伪类选择器

小程序的 .js 文件

app.js

整个小程序项目的入口文件,通过APP函数来启动整个小程序

页面的 .js

页面的入口文件通过 Page() 函数来创建并运行页面

普通的 .js文件

是普通功能模块文件,用于封装公共的函数或属性供页面使用

小程序的组件

视图组件

view:普通视图区域

           类似于HTML 中的div,块级元素

            常用来实现页面的布局效果

scroll-view:可滚动的视图区域

                     常用来实现滚动列表效果

swiper 和 swiper-item:轮播图组件和轮播图item组件

常用的基础内容组件

text:文本组件  类似于span ,行内元素

手机号支持长按选中效果:<text selectable>110</text>

rich-text:富文本组件,支持把HTML字符串渲染成 WXML 结构

<rich-text nodes="<h1 style="color:red;">标题</h1>"></rich-text>
把HTML字符串渲染成对应的UI结构

其他常用组件

button:按钮组件(type="",size="",plain 镂空)

              通过open-type 属性可以调用 微信提供的各种功能(客服、转发、获取用户授权)

image:图片组件

              image组件默认宽度 300px,高度约240px

navigator:导航组件

小程序API的3大分类

事件监听API

特点:

  • 以on开头,用来监听某些事件的触发。
  • wx.onWindowResize 监听窗口尺寸变化的事件

同步API

特点:

  • 以sync结尾的API都是同步API
  • 同步API的执行结果,可以通过函数返回值直接获取,如果执行出错会抛出异常
  • wx.setStorageSync('key','value')  向本地存储中写入内容

异步API

特点:

  • 类似于jquery中$.ajax(options) 函数需通过success、fail、complete接收调用的结果
  • wx.request()发起网络数据请求,通过success回调函数接收数据

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

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

相关文章

RocketMQ阅读源码前的准备

本文将讲解如何在IDEA中导入 RocketMQ 源码&#xff0c;并运行 Broker 和 NameServer&#xff0c;编写一个消息发送与消息消费的示例。 一. 源码导入及调试 1.1 导入源码 RocketMQ 原先是阿里巴巴集团内部的消息中间件&#xff0c;于2016年提交至Apache基金会孵化&#xff0…

文字识别(OCR)专题——基于NCNN轻量级PaddleOCRv4模型C++推理

前言 PaddleOCR 提供了基于深度学习的文本检测、识别和方向检测等功能。其主要推荐的 PP-OCR 算法在国内外的企业开发者中得到广泛应用。在短短的几年时间里&#xff0c;PP-OCR 的累计 Star 数已经超过了32.2k&#xff0c;常常出现在 GitHub Trending 和 Paperswithcode 的日榜…

图像增强与复原、车牌检测与识别,交通最优路径搜索模型,并且基于PyQt完成GUI设计

背景&#xff1a; 综合实训教学大纲 一、实训科目设置&#xff1a; 序号 内容提要 教学 条件 一 图像增强与复原、车牌检测与识别&#xff0c;并且基于PyQt完成GUI设计 计算机、Python软件 二 交通最优路径搜索模型&#xff0c;并且基于PyQt完成GUI设计 计算机、Pytho…

VLAN间路由详细讲解

本次实验拓扑的主要概述以及设计到的相关技术 VLAN技术&#xff1a; VLAN&#xff08;Virtual Local Area Network&#xff09;即虚拟局域网&#xff0c;是将一个物理的LAN在逻辑上划分成多个广播域的通信技术。 每个VLAN是一个广播域&#xff0c;VLAN内的主机间可以直…

opencv阈值处理

阈值处理 二值化 自适应阈值 OTSU二值化

【C++】string类模拟实现过程中值得注意的点

&#x1f440;樊梓慕&#xff1a;个人主页 &#x1f3a5;个人专栏&#xff1a;《C语言》《数据结构》《蓝桥杯试题》《LeetCode刷题笔记》《实训项目》《C》《Linux》 &#x1f31d;每一个不曾起舞的日子&#xff0c;都是对生命的辜负 目录 前言 1.有关const的使用 &#x…

【CANoe】CANoe工具使用-实现CAN通道的收、发、录、回放报文

目录 资源及目标 1. 配置工程 1.1 新建配置工程 1.2 配置两路CANoe虚拟通道 1.3配置CAN通道参数 1.3.1 配置CAN1类型&#xff08;标准CAN或者CANFD&#xff09;&#xff0c;以及波特率&#xff08;CANFD需要配置数据场和仲裁场两个段的波特率&#xff09; 1.3.2配置CAN1…

SpringBoot 集成 ChatGPT,实战附源码

1 前言 在本文中&#xff0c;我们将探索在 Spring Boot 应用程序中调用 OpenAI ChatGPT API 的过程。我们的目标是开发一个 Spring Boot 应用程序&#xff0c;能够利用 OpenAI ChatGPT API 生成对给定提示的响应。 您可能熟悉 ChatGPT 中的术语“提示”。在 ChatGPT 或类似语…

接口自动化测试思路和实战之模块化测试脚本框架

模块化测试脚本框架 需要创建独立的可描述的模块、程序片断以及待测试应用程序的脚本。这些小脚本进行组合&#xff0c;就能组成用来独立运行特定的测试的测试用例脚本。 场景一: 开发把 access_token接口地址由/cgi-bin/token 改为/cgi-bin/get_token或者修改参数等 》开发把…

原生video设置控制面板controls显示哪些控件

之前我们学习了如何使用原生video播放视频 今天来一个进阶版的——设置控制面板controls显示哪些控件 先看一下当我们使用原生video时&#xff0c;controls属性为true时&#xff0c;相关代码如下&#xff1a; 正常的控制面板默认显示的控件有&#xff1a;播放、时间线、音量调…

如何本地搭建个人hMailServer邮件服务并实现远程发送邮件

文章目录 前言1. 安装hMailServer2. 设置hMailServer3. 客户端安装添加账号4. 测试发送邮件5. 安装cpolar6. 创建公网地址7. 测试远程发送邮件8. 固定连接公网地址9. 测试固定远程地址发送邮件 前言 hMailServer 是一个邮件服务器,通过它我们可以搭建自己的邮件服务,通过cpola…

使用 mtcnn 和 facenet 进行人脸识别

一、前言 人脸识别目前有比较多的应用了&#xff0c;比如门禁系统&#xff0c;手机的人脸解锁等等&#xff0c;今天&#xff0c;我们也来实现一个简单的人脸识别。 二、思维导图 三、详细步骤 3.1 准备 3.1.1 facenet 权重文件下载 下载地址&#xff1a;https://drive.goo…

Elasticsearch:么是向量嵌入?

向量嵌入定义 向量嵌入 (vector embeddings) 是一种将单词、句子和其他数据转换为捕获其含义和关系的数字的方法。 它们将不同的数据类型表示为多维空间中的点&#xff0c;其中相似的数据点更紧密地聚集在一起。 这些数字表示可以帮助机器更有效地理解和处理这些数据。 单词和…

vue循环v-for遍历图表

循环遍历图表 index.vue主页面 <view v-if"powerPage"><view v-for"(item, index) in powerDetailsData.addMap" :key"index"><PowerEChartsCity:echartData"powerDetailsData.addMap[index]"></PowerEChartsC…

Linux Spug自动化运维平台本地部署与公网远程访问

文章目录 前言1. Docker安装Spug2 . 本地访问测试3. Linux 安装cpolar4. 配置Spug公网访问地址5. 公网远程访问Spug管理界面6. 固定Spug公网地址 前言 Spug 面向中小型企业设计的轻量级无 Agent 的自动化运维平台&#xff0c;整合了主机管理、主机批量执行、主机在线终端、文件…

mac安装elasticsearch

下载地址&#xff1a; Past Releases of Elastic Stack Software | Elastic https://www.elastic.co/cn/downloads/past-releases#elasticsearch 选择7.10版本 进入es bin目录下执行启动命令 ./elasticsearch 会报错 ./elasticsearch-env: line 126: syntax error near u…

Deckerfile

1.简介 dockerfile 是 docker 镜像构建文件。包含用于构建 docker 镜像的指令和配置。通过Dockerfile可以自动化地构建Docker镜像&#xff0c;实现快速、一致和可重复的部署。是由一条条构建镜像所需的指令和参数构成的脚本。指令按照从上到下&#xff0c;顺序执行&#xff0c…

flutter 自定义TabBar 【top 0 级别】

flutter 自定义TabBar 【top 0 级别】 前言一、基础widget二、tab 标签三、barView总结 前言 在日常开发中&#xff0c;tab 标签选项&#xff0c;是一个我们特别常用的一个组件了&#xff0c;往往我们在一个项目中&#xff0c;有很多地方会使用到它&#xff0c;每次单独去写&am…

20、Resnet 为什么这么重要

&#xff08;本文已加入“计算机视觉入门与调优”专栏&#xff0c;点击专栏查看更多文章信息&#xff09; resnet 这一网络的重要性&#xff0c;上一节大概介绍了一下&#xff0c;可以从以下两个方面来有所体现&#xff1a;第一是 resnet 广泛的作为其他神经网络的 back bone&…

L1-012:计算指数

⭐题目描述⭐ 真的没骗你&#xff0c;这道才是简单题 —— 对任意给定的不超过 10 的正整数 n&#xff0c;要求你输出 2n。不难吧&#xff1f; 输入格式&#xff1a; 输入在一行中给出一个不超过 10 的正整数 n。 输出格式&#xff1a; 在一行中按照格式 2^n 计算结果 输出 2n…