微信小程序+前后端开发学习材料

news2024/11/27 15:44:17

目录结构

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

全局文件

1.app.json 文件

用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。文件内容为一个 JSON 对象。
1.1 page用于指定小程序由哪些页面组成,每一项都对应一个页面的 路径(含文件名) 信息。文件名不需要写文件后缀,框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
在这里插入图片描述
生成:在page下右键新建文件夹,在新建文件夹内新建page文件,此时系统将自动在app.json中生成新配置路径。
删除:在page下删除选中的文件夹后,需要手动在app.json中也删除对应的路径。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这里注意,新建的文件夹和里面的配置文件的命名最好一致。每一个路径后都有逗号,最后一个没有逗号。
1.2 window用于设置小程序的状态栏、导航条、标题、窗口背景色。
在这里插入图片描述
1.3 tabBar如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
其中position设置为top时,即使设置iconPath和selectedIconPath也不会显示。

2.app.wxss 文件

app.wxss 作为全局样式,会作用于当前小程序的所有页面,局部页面样式 page.wxss 仅对当前页面生效。
方法1全局引入,新建common文件夹在内设置common.wxss(在page外部,与app同根)。在common.wxss里设置标签,在app.wxss直接利用@import “”引用。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
方法2:全局,直接在app.wxss中加入,注意加分号;
在这里插入图片描述
方法3:局部,在子page的wxml中新建标签,命名box。
在这里插入图片描述
在子page中的wxss中引入box设置属性。
在这里插入图片描述

组件

1.view

view视图容器
例:
在这里插入图片描述
在wxss中设置样式
在这里插入图片描述

2.text

文本,内联文本只能用 text 组件,不能用 view。
在这里插入图片描述
同样,在wxss中配置样式。
在这里插入图片描述

3.swiper

滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
在这里插入图片描述
显示面板指示点indicator-dots
在这里插入图片描述
在这里插入图片描述

持续更新,未完待续!

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

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

相关文章

计算机基础面试题 |10.精选计算机基础面试题

🤍 前端开发工程师(主业)、技术博主(副业)、已过CET6 🍨 阿珊和她的猫_CSDN个人主页 🕠 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 🍚 蓝桥云课签约作者、已在蓝桥云…

UE相关杂项笔记

1.PAK包解析 UE4如何反向查找Pak里面包含哪些文件 - 哔哩哔哩 CMD控制台命令输入 D:"Epic Games"\UE_5.1\Engine\Binaries\Win64\UnrealPak.exe 包路径 -list *文件夹带空格时 添加“ ”包裹住文件夹名 解包工具路径 UE引擎安装路径\UE_5.1\Engine\Binarie…

sql:定时执行存储过程(嵌套存储过程、使用游标)

BEGINDeclare FormNo nvarchar(20) --单号Declare Type nvarchar(50) --类型Declare PickedQty float -Declare OutQty float Declare 生产量 floatDeclare 已装箱数量 float Declare 已入库数量 floatDeclare 损耗数量 float Declare 退货品出库数量 intdeclare k c…

Mac上修复Gitee报错 Oauth: Access token is expired

一. 背景: 最近在gitee上拉了两次项目,两次使用的邮箱密码不一致(换绑邮箱),第一次在idea中拉取后端项目,第二次在webstorm中拉取前端项目,出现该异常,记录下解决方案 二. 错误回显…

burpsuite模块介绍之项目选项

使用该模块中的功能实现对token的爆破 靶场搭建:phpstudy的安装与靶场搭建 - junlin623 - 博客园 (cnblogs.com) 实现 1)先抓个包 2)设置宏 要实现我们爆破的时候请求的token也跟靶场一样一次一换从而实现爆破,那就需要用到项目选项中的宏(预编译功能)

用 Python 抓取 bilibili 弹幕并分析!

01 实现思路 首先,利用哔哩哔哩的弹幕接口,把数据保存到本地。接着,对数据进行分词。最后,做了评论的可视化。 02 弹幕数据 平常我们在看视频时,弹幕是出现在视频上的。实际上在网页中,弹幕是被隐藏在源代码…

windows+django+nginx部署静态资源文件

平台:windows python:3.10.0 django:4.0.8 nginx:1.24.0 背景 开发阶段采用前后端分离模式,现在要将项目部署到工控机上,把前端项目编译出来的静态文件放到后端项目中进行一体化部署,且不修改…

opencv006 绘制直线、矩形、⚪、椭圆

绘制图形是opencv经常使用的操作之一,库中提供了很多有用的接口,今天来学习一下吧! (里面的函数和参数还是有点繁琐的) 最终结果显示 函数介绍 直线 line(img, pt1, pt2, color, thickness, lineType, shift) img: 在…

Python从入门到网络爬虫(内置函数详解)

前言 Python 内置了许多的函数和类型,比如print(),input()等,我们可以直接在程序中使用它们,非常方便,并且它们是Python解释器的底层实现的,所以效率是比一般的自定义函数更有效率。目前共有71个内置函数&…

Java编程中的IO模型详解:BIO,NIO,AIO的区别与实际应用场景分析

IO模型 IO模型就是说用什么样的通道进行数据的发送和接收,Java 共支持3种网络编程IO 模式:BIO,NIO,AIO BIO(Blocking lO) 同步阻塞模型, 一个客户端连接对应一个处理线程 代码示例: package com.tuling.bio; import java.io.…

回归预测 | Matlab实现基于GA-Elman遗传算法优化神经网络多输入单输出回归预测

回归预测 | Matlab实现基于GA-Elman遗传算法优化神经网络多输入单输出回归预测 目录 回归预测 | Matlab实现基于GA-Elman遗传算法优化神经网络多输入单输出回归预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 1.Matlab实现基于GA-Elman遗传算法优化神经网络多输入单输…

内核死锁检测--lockdep(linux3.16)

之前看网上说linux内核自带了死锁检测工具。现在试试使用效果怎么样。感觉确实能够检测到,后面有时间在研究原理把。 死锁检测lockdep实现原理-CSDN博客//这个文章讲了一些检测原理 需要开启如下选项(选项应该是开多了,用最后三个就行&#x…

Linux之IP地址、主机名、域名解析

一、IP地址 可以通过ifconfig命令查看本机的ip地址,如果无法使用ifconfig命令,可以安装 安装:yum -y install net-tools ens33:主网卡,里面的inet就是ip地址 lo:本地回环网卡,127.0.0.1&…

工具网站DefiLlama全攻略:从零学习链上数据使用与发现

DefiLlama 是一个 DeFi(去中心化金融)信息聚合器,其主要功能是提供各种 DeFi 平台的准确、全面数据。DefiLlama 致力于在不受广告或赞助内容影响的情况下为用户提供这些数据,以确保信息内容的透明度和公正性,该平台聚合来自多个区块链的数据,让用户能够全面了解 DeFi 格局…

【React系列】高阶组件

本文来自#React系列教程:https://mp.weixin.qq.com/mp/appmsgalbum?__bizMzg5MDAzNzkwNA&actiongetalbum&album_id1566025152667107329) 一. 高阶组件 1.1. 认识高阶组件 什么是高阶组件呢?相信很多同学都听说过,也用过 高阶函数&…

windows 10 安装wsl ubuntu

1.首先管理员模式打卡powershell,执行 dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart dism.exe /online /enable-feature /featurename:VirtualMachinePlatform /all /norestart 2.执行 wsl --update wsl --…

在k8s集群中部署多nginx-ingress

关于ingress的介绍,前面已经详细讲过了,参考ingress-nginx详解和部署方案。本案例ingress的部署使用deploymentLB的方式。 参考链接: 多个ingress部署 文章目录 1. 下载ingress的文件2. 文件资源分析3. 部署ingress3.1 部署第一套ingress3.1…

Centos7静态网络配置

在vmware中打开, 点击虚拟网络编辑器,修改以下配置 网关IP最后一位固定为2,这个160根据下图中vmnet8的ip地址来的 打开网络控制面板>打开vmnet8查看 接着打开linux,有桌面版的使用桌面版更加方便 箭头这么乱,但是你…

华为欧拉安装部署:Oracle11g

一、环境准备 1、下载安装低版本的libaio包;libaio版本太高,会造成编译错误 查看libaio1库版本不能大于0.3.109 [oracles3 install]$ rpm -qa libaio libaio-0.3.110-12.el8.x86_64# 查看欧拉操作系统版本 [oraclelocalhost bin]$ cat /etc/os-release…

Pytest自动化的坑

1、封装pytest的类型,名称的开头需要使用Test开头命名类,否则会出现运行pytest找不到类的情况 2、函数被pytest.fixtrue装饰之后,就不能再直接引用函数方法,需要把函数名称当作参数传到其他的函数中使用 3、conftest的全局变量名称…