微信小程序学习笔记

一、文件和目录结构介绍

小程序包括:主体文件页面文件
主体文件:
在这里插入图片描述

  1. app.js:小程序入口文件
  2. app.json:小程序的全局配置文件
  3. app.wxss:小程序的全局样式

页面文件:是每个页面所需的文件,小程序页面文件都存放在pages目录下,一个页面一个文件夹

页面文件:
在这里插入图片描述

  1. .js:页面逻辑(必须存在)
  2. .wxml:页面结构(必须存在)
  3. .wxss:页面样式
  4. .json:小页面配置

二、配置文件介绍

1、JSON

JSON是一种轻量级的数据格式,常用于前后端数据的交互,但是小程序中,JSON扮演配置项的角色,用于配置项目或者页面属性和行为

  1. app.json:小程序全局配置文件,用于配置小程序的一些全局属性和页面路由
  2. 页面.json:小程序页面配置文件,也称局部配置文件,用于配置当前页面的窗口样式、页面标题等
  3. project.config.json:小程序项目的配置文件,用于保存项目的一些配置信息和开发者的个人设置
  4. sitemap.json:配置小程序及其页面是否允许被微信索引,提高小程序在搜索引擎搜索到的概率

2、pages

pages用来指定小程序由哪些页面组成,用于让小程序知道由哪些页面组成以及页面定义在哪个目录,每一项都对应一个页面的路径信息

在这里插入图片描述
主义事项:

  1. 页面路由不需要写文件后缀,框架会自动去寻找对应位置的四个文件进行处理
  2. 小程序中新增/减少页面,都需要对pages数组进行修改
  3. 未指定entryPagePath(直接指示小程序首页)时,数组的第一项代表小程序的初始页面(首页)

3、window

用于设置小程序的状态栏、导航条、标题、窗口背景色
在这里插入图片描述
配置项查询链接:

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

在这里插入图片描述

4、tabBar

定义小程序顶部底部tab栏,用以实现页面之间的快速切换,可以通过tabbar配置项指定tab栏的表现,以及tab切换时显示的对应页面
在这里插入图片描述
tabbar配置项:

  1. selectedColor:选中时文字的颜色
  2. color:文字的默认颜色
  3. backgroundColor:当前tab栏的背景色
  4. borderStyle:tab栏上方border是否需要,可选项"white"和"black"
  5. position:tab栏的位置,可选项"top"(tab栏在顶部,此时icon不会显示)
  6. list:tab栏的内容

tabbar配置list的要求:
在这里插入图片描述

5、页面配置

小程序的页面配置也称局部配置,每一个小程序页面也可以使用自己的.json文件对本页面的窗口表现进行配置。
页面配置文件的属性和全局配置文件中的window属性几乎一致,只不过这里不需要额外指定window字段,因此如果出现相同的配置项,页面中的配置项会覆盖全局配置文件中相同的配置项

6、项目配置文件-config.json和配置sass

(1)项目配置文件

在创建项目的时候,每个项目的根目录生成两个config.json文件用于保存开发者在工具上做的个性化配置,例如和编译有关的配置。当重新安装微信开发者工具换电脑工作时,只要载入同一个项目的代码包,开发者工具就会自动恢复到当时开发项目时的个性化配置。

  • project.config.json:项目配置文件,常用来进行配置公共的配置(与最终编译结果有关的设置必须设置到这里)
  • project.private.config.json:项目私有的配置,常用来配置个人的配置
(2)配置sass

与编译结果有关,所以在project.config.json中进行配置
在这里插入图片描述
在这里插入图片描述

7、配置文件-sitemap.json

配置小程序及其页面是否允许被微信索引,提高小程序在微信内部被用户搜索到的概率。
微信现已开放小程序内搜索,开发者可以通过sitemap.json配置来设置小程序页面是否允许微信索引。当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索词条触发改索引时,小程序的页面将可能展示在搜索结果中。
注:

  • 没有sitemap.json则默认所有页面都能被索引
  • {“action”:“allow”,“page”:“*”}是优先级最低的默认规则,未显式指明"disallow"的都默认被索引
    在这里插入图片描述
    在这里插入图片描述

二、小程序的样式和组件

1、组件

在小程序中不能使用HTML标签,也就没有DOM和BOM,CSS也仅仅支持部分选择器。

小程序提供了WXML进行页面结构编写,同时提供了WXSS进行页面的样式编写

  • WXML提供了view、text、image、navigator等标签来构建页面结构,只不过在小程序中将标签称为组件
  • WXSS对CSS扩充和修改,新增了尺寸单位rpx,提供了全局的样式和局部样式,另外需要注意的是WXSS仅支持部分CSS选择器

2、尺寸单位rpx

为了解决屏幕适配的问题,微信小程序推出了rpx单位
rpx:时下程序新增的自适应单位,他可以根据不同设备的屏幕宽度进行自适应缩放
在这里插入图片描述
在这里插入图片描述
开发建议:

  1. 开发微信小程序时设计师可以用iphone6作为视觉稿的标准,iphone6的设计稿一般是750px
  2. 如果iphone6作为视觉稿的标准量取多少px,直接写多少rpx即可,开发起来更方便,也能够适配屏幕的宽度

3、全局样式和局部样式

全局样式:指在app.wxss中定义的样式规则,作用域每一个页面,例如:设置字号、背景色、宽高等全局样式
局部样式:指在page.wxss中定义的样式规则,只作用在对应的页面,并会覆盖app.wxss中相同的选择器

4、划分页面结构

小程序常用的组件:

  • view组件
  • swiper和swiper-item组件
  • image组件
  • text组件
  • navigator组件
  • scroll-view组件
  • 字体图标

在这里插入图片描述
设置整体页面背景色(设置高优先级)
在这里插入图片描述

5、轮播图区域绘制

在小程序中,提供了swiper和swiper-item组件实现轮播图

  • swiper:滑块视图容器,其中只能放置swiper-item组件
  • swiper-item:只可放置在swiper组件中,宽高自动设置为100%,代表swiper中的每一项

在小程序中,如果需要渲染图片,需要使用image组件,常用的属性有4个:

  • src属性:图片资源地址
  • mode:图片裁剪、缩放的模式
  • show-menu-by-longpress:长按图片显示菜单
  • lazy-load:图片懒加载(滑动到一定区域才会加载图片)

注意事项:

  • image默认具有宽度和高度,宽度是320px高度是240px
  • image组件不给src属性设置图片地址,也占据宽和高

在这里插入图片描述
在这里插入图片描述

6、绘制公司信息区域

在小程序中,如果需要渲染文本,需要使用text组件,常用的属性有2个:

  1. user-select:文本是否可选,用于长按选择文本
  2. space:显示连续空格
    • ensp:显示空格时会按照中文字符空格一半大小显示
    • emsp:显示空格时会按照中文字符空格大小显示空格
    • nbsp:按照字符大小进行展示

注意事项:
3. 除了文本节点以外的其他节点都无法长按选中
4. text组件内只支持text嵌套

在这里插入图片描述
在这里插入图片描述

7、商品导航区域

结合view、image、text的综合案例
在这里插入图片描述
在这里插入图片描述

8、点击商品导航跳转到商品列表

在小程序中,如果需要进行跳转,需要使用navigator组件,常用的属性有2个:

  1. url:当前小程序内的跳转链接
  2. open-type:跳转方式
    • navigate:保留当前页面,跳转到应用内的某个页面。但是不能跳到tabbar页面
    • redirect:关闭当前页面,没有返回上一页的箭头,跳转到应用内的某个页面。但不能跳转到tabbar页面
    • switchTab:跳转到tabBar页面,并关闭其他所有非tabBar页面
    • reLaunch:关闭所有页面,打开到应用内的某个页面
    • navigateBack:关闭当前页面,返回上一页面或前几个页面(搭配delta属性,默认是1,如果想返回几级,就写几)

注意事项:

  • 路径后可以带参数。参数与路径之间使用?分隔,参数键与参数值用=相连,不同参数用&分隔。
    例如:list/?id=10&name=hua,在onLoad(options)生命周期函数中获取传递的参数
  • open-type="switchTab"时不支持传参
    在这里插入图片描述

9、推荐商品区域-滚动效果

在小程序中,如果想实现内容滚动,需要使用scroll-view组件
scroll-view:可滚动视图区域,适用于需要滚动展示内容的场景,用于在小程序中实现类似于网页中的滚动条效果,用户可以直接通过手指滑动或者点击滚动条来滚动内容。2个属性:

  • scroll-x:允许横向滚动
  • scroll-y:允许纵向滚动

水平方向的滚动:
在这里插入图片描述
在这里插入图片描述

垂直方向的滚动:
在这里插入图片描述
在这里插入图片描述

10、推荐商品区域

WXML:

<view class="good-hot"><scroll-view class="scroll-x" scroll-x><view><view class="good-item"><image src="../../assets/floor/1.png" mode=""/><text>鲜花玫瑰</text><text>66</text></view></view><view><view class="good-item"><image src="../../assets/floor/2.png" mode=""/><text>鲜花玫瑰</text><text>77</text></view></view><view><view class="good-item"><image src="../../assets/floor/3.png" mode=""/><text>鲜花玫瑰</text><text>88</text></view></view><view><view class="good-item"><image src="../../assets/floor/4.png" mode=""/><text>鲜花玫瑰</text><text>99</text></view></view><view><view class="good-item"><image src="../../assets/floor/5.png" mode=""/><text>鲜花玫瑰</text><text>100</text></view></view></scroll-view>
</view>

SCSS:

.good-hot{font-size:24rpx;background-color: #fff;padding:16rpx;border-radius: 10rpx;.scroll-x{width: 100%;white-space: nowrap; // 不允许元素换行view{margin-right:16rpx;display:inline-block;width:320rpx;height:440rpx;&:last-child{margin-right:0rpx;}.good-item{display:flex;flex-direction: column;justify-content: space-between;image{width: 100%;height: 320rpx;}text{&:nth-of-type(1){font-weight: bold;}}}}}
}

11、字体图标的使用

在项目中使用到的小图标,一般由公司设计师进行设计,设计好以后上传到阿里巴巴矢量图标库,方便程序员来进行使用。
小程序中的字体图标使用方式与Web开发中的使用方式是一样的。

  1. 在阿里巴巴矢量图库中将icon存入项目
    项目设置勾选Based64
    在这里插入图片描述
    在这里插入图片描述

  2. 生成代码
    在这里插入图片描述
    在这里插入图片描述

  3. 复制代码至wxss
    创建一个iconfont文件夹,创建iconfont.scss并将下述代码复制其中
    在这里插入图片描述

  4. 导入
    一定要以分号结尾
    在这里插入图片描述

  5. 字体图标添加
    在这里插入图片描述

12、背景图的使用

在小程序中,我们可以使用background-image属性来设置元素的背景图像
注意事项:

  • 小程序的background-image不支持本地路径,需要使用网络图片,或者base64(不建议使用,太长)或者使用</image>组件

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

抓包之通过wireshark抓ping包

写在前面 本文看下如何抓ping包。 1&#xff1a;正文 因为ping使用的是icmp协议&#xff0c;所以这里我们可以通过过滤icmp协议来进行抓包&#xff1a; 其中对于icmp请求报文状态码是8&#xff0c;如下&#xff1a; 响应状态码是0&#xff1a; 如下图是一个局域网环境中…

大文件分片上传 — nodejs

上传文件路由&#xff1a; var express require(express); var router express.Router(); const multer require(multer); const fs require(fs); const path require(path);// 确保上传目录存在 const uploadDir path.join(__dirname, ../backend/uploads); const temp…

HarmonyOS File和base64字符串转换

1. HarmonyOS File和base64字符串转换 1.1. Base64 1.1.1. Base64认知 Base64 是一种基于64个 ASCII 字符来表示二进制数据的表示方法&#xff0c;这个64个不同的字符为&#xff1a;   &#xff08;1&#xff09;大、小写字母&#xff08;A– Z、a–z&#xff09;。52个  …

【NodeJs】【npm】npm安装electron报错

解决问题 npm安装electron报错一般来说是镜像源的问题。 electron的镜像源与一般的 vue 之类的镜像源地址不一样需要单独配置。 npm读取的全局配置一般是在 C:\Users\{用户}\.npmrc 这个配置文件中。 如果你找不到你的配置文件可以执行如下命令, # 执行后会直接用txt打开你的…

植物small RNA靶基因预测软件,psRobot

psRoto软件安装 网址 http://omicslab.genetics.ac.cn/psRobot/downloads.php下载和安装 wget http://omicslab.genetics.ac.cn/psRobot/program/WebServer/psRobot_v1.2.tar.gz # tar -zxvf psRobot_v1.2.tar.gz # cd psRobot_v1.2 ## ./configure make make installpsRot…

翻译服务器

基于UDP编程博客里的回显服务器代码,翻译服务只需要改process方法即可 所以我们可以创建一个UdpDictServer直接继承UdpEchoServer然后重写process方法 在重写的方法中完成翻译的过程 代码: package network;import java.io.IOException; import java.net.SocketException; …

初等变换 线性代数

初等变换 介绍了三种初等变换的操作。 初等矩阵 初等矩阵是干嘛的呢&#xff1f;实际上初等矩阵就是我们矩阵的初等操作&#xff0c;每一个对矩阵的初等变换操作都相当于乘上一个初等矩阵。 左乘初等矩阵就相当于对行进行初等操作&#xff0c;右乘则相当于对列进行初等操作。…

Java基础 集合框架 队列架构 双端队列 Deque

双端队列 Deque Deque 方法简介Deque 核心特点Deque实现类 ArrayDequeArrayDeque 构造方法ArrayDeque 的数据结构及实现原理ArrayDeque 方法介绍ArrayDeque 核心特性ArrayDeque 总结ArrayDeque 使用样例代码 Deque实现类 LinkedListDeque实现类 ConcurrentLinkedDeque (非阻塞线…

【Spring】——事务、整合、注解

目录 一.Spring与mybatis的整合 1.配置文件 ​编辑2. 二.事务 1.事务属性 2.传播属性 3.异常属性 4.常见配置 三.注解 1.什么是注解 2.Autowired 1.用户自定义注解 ​编辑​编辑2.JDK类型注入value 3.Bean 1.对象的创建 2.对象创建次数 3.Bean注解的注入 1.自…

Linux 离线下安装gcc、g++

描述 离线时编译Redis、nginx等编译包&#xff0c;需要gcc安装包&#xff0c;评论提醒我 上传补充 操作 1、进入gcc目录&#xff0c;并执行安装命令 rpm -ivh *.rpm --nodeps --force查看版本 gcc -v2、进入gcc-c目录&#xff0c;并执行安装 rpm -ivh *.rpm --nodeps --f…

融智学定律3:流动创造价值仅当跨域协同

关键公式意义&#xff1a; 人流方程中的 α/β 反映城市吸引力不对称性 物流优化中的 η 实现时间价值货币化 金流模型的 σ(⋅) 捕捉市场情绪突变点 信息熵的 ∥gi​−gj​∥ 度量知识势差驱动 当五流在黎曼流形上满足 ∇_μ​T^μν0&#xff08;能量动量守恒&#xff09…

趣味数据结构之——数组

你们一定都听说过它的故事…… 是的没错&#xff0c;就是一个萝卜一个坑。ಥ◡ಥ 想象一下数组就是那个坑&#xff0c;那么定义数组就是在挖坑。 元素就是萝卜。 坑就在那里(地上)&#xff0c;整整齐齐地排在那里。 于是数组最重要的一个特性就显现出来了——随机存取。还…

PR-2025《Scaled Robust Linear Embedding with Adaptive Neighbors Preserving》

核心思想分析 这篇论文的核心思想在于解决线性嵌入&#xff08;linear embedding&#xff09;与非线性流形结构之间的不匹配问题。传统方法通过保留样本点间的亲和关系来提取数据的本质结构&#xff0c;但这种方法在某些情况下无法有效捕捉到数据的全局或局部特性。此外&#…

Redis-渐进式遍历

之前使用的keys查找key,一次获取到了所有的key,当key较多时,这个操作就有可能造成Redis服务器阻塞.特别是keys *操作. 于是可以通过渐进式遍历,每次获取部分key,通过多次遍历,既查询到了所有的key,又不会卡死服务器. 渐进式遍历不是通过一个命令获取到所有元素的,而是由一组命…

ISP Pipeline(3):Lens Shading Correction 镜头阴影校正

上一篇文章讲的是&#xff1a;ISP Pipeline&#xff08;2&#xff09;&#xff1a; Black Level Compensation:ISP Pipeline&#xff08;2&#xff09;&#xff1a;Black Level Compensation 黑电平补偿-CSDN博客 视频&#xff1a;(4) Lens Shading Correction | Image Signal…

什么是WebAssembly(WASM)

WebAssembly&#xff08;WASM&#xff09; 是一种高性能的低级编程语言字节码格式&#xff0c;可在网页和非网页环境中运行&#xff0c;支持多语言编译&#xff0c;运行速度接近原生代码。它在区块链中的作用是&#xff1a;作为智能合约的执行引擎&#xff0c;被多条非以太坊链…

【C++】inline的作用

一、inline的作用 1.1函数内联 作用​&#xff1a;建议编译器将函数调用替换为函数体代码&#xff0c;减少函数调用的开销&#xff08;压栈/跳转&#xff09;。​注意​&#xff1a;这只是对编译器的建议&#xff0c;编译器可能忽略&#xff08;如函数体过大或递归&#xff0…

代码随想录|图论|04广度优先搜索理论基础

广搜的使用场景 广搜的搜索方式就适合于解决两个点之间的最短路径问题。 因为广搜是从起点出发&#xff0c;以起始点为中心一圈一圈进行搜索&#xff0c;一旦遇到终点&#xff0c;记录之前走过的节点就是一条最短路。 当然&#xff0c;也有一些问题是广搜 和 深搜都可以解决…

Xposed框架深度解析:Android系统级Hook实战指南

引言:Android系统定制化的革命性突破 在移动安全研究和系统优化领域,传统的APP修改方案面临​​三重技术瓶颈​​: ​​逆向工程壁垒​​:APK重打包方案需处理签名校验、代码混淆等防护,平均耗时增加200%​​兼容性挑战​​:Android碎片化导致设备适配率不足65%​​功能…

大模型在通讯网络中的系统性应用架构

一、网络架构智能化重构​​ ​​1.1 空天地一体化组网优化​​ 智能拓扑动态调整​​&#xff1a;大模型通过分析卫星轨道数据、地面基站负载及用户分布&#xff0c;实时优化天地一体化网络拓扑。例如&#xff0c;在用户密集区域&#xff08;如城市中心&#xff09;自动增强低…