《微信小程序从入门到精通》---笔记1

小程序,我又来学习啦!请多关照~


项目驱动

  • 小程序开发建议使用flex布局
  • 在小程序中,页面渲染和业务逻辑是分开的,分别运行在不同的线程中。
  • Mini Program于2017年1月7号正式上线
  • 小程序的有点:跨平台、开发门槛低、开发周期短、开发成本低

在这里插入图片描述

在这里插入图片描述

  • 开发小程序前,需要注册一个小程序号(不然受限)
    注册小程序链接

< hr >:一条分割线


对于 HTML,您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。 当显示页面时,浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格
  • rpx(responsive pixel),可以根据屏幕宽度进行自适应,规定屏幕宽度为750rpx
  • 原理:会根据rpx,自动转成px(像素)

相当于,不管屏幕多大,都分为750分,按照UI给的图,直接写就行,不需要适配屏幕了。貌似比较高级


第二章:flex布局

由于VSCode已经集成了emmet功能,因此,直接输入html:5,即可生成需要的基础信息。

在这里插入图片描述

display: flex

引用:display: flex

flex-direction

flex-direction,决定了main axis的方向,有4个值:
row(默认)、row-revers、column、column-revers
左右、右左、上下、下上

justify-content

justify-content,决定了flex items在main axis上的对齐方式

上面flex-direction决定了方向,justify-content决定了在方向上的对齐方式

在这里插入图片描述

在这里插入图片描述

  • space-between:左右对齐,中间等距分割
  • space-evenly:间距都一样
  • space-around:中间间距一样,左右间隔是中间间距的1/2

space-开头的,中间间距都相等

主轴,交叉轴:

主轴(main axis),可能是左->右,右->左,上->下,下->上
而交叉轴(cross axis),只有两个方向:从左到右、从上到下

align-items

align-items:定义flex子项在flex容器的交叉轴上的对齐方式。

align-items: flex-end;
align-items: 属性,确定交叉轴
flex-end:属性值,确定交叉轴的具体方向

flex-wrap

flex-wrap决定了flex container是单行还是多行

  • nowrap,默认:单行
  • wrap:多行
flex-flow

flex-flow是flex-direction || flex-wrap的简写

比如:flex-flow: column wrap 等价于
flex-direction: column
flex-wrap: wrap

align-content

align-content,决定了多行flex items在 交叉轴(cross axis) 上的对齐方式,用法与justify-content类似
align-content: flex-start;解决换行中间有间距的问题~

在这里插入图片描述

order

order决定了flex items的排布顺序
可以设置任意整数(正整数、负整数、0),值越小就越排在前面
默认值是0

在这里插入图片描述

align-self

flex items可以通过align-self覆盖flex container设置的align-items

flex-grow

flex-grow决定了flex items如何扩展
可以设置任意的非负数字(正小数、正整数、0),默认值是0
当flex container在main axis方向上有剩余size的时候,flex-grow属性才会有效

在这里插入图片描述
设置后,变化:
在这里插入图片描述
如果加起来的值,大于1,则按比例
如果假期俩的值,小于1,则按自己宽度乘以小数

flex-shrink

flex-shrink决定了flex items如何收缩
可以设置任意的非负数字(正小数、正整数、0),默认值是0
当flex items在main axis方向上超过了flex container的size,flex-shrink属性才会有效

在这里插入图片描述
整体宽度500,而每个item宽度是100,但是却能整体展示下,那么整体每个item就被压缩了

每个flex item收缩的size为:
flex items超出flex container的size * 收缩比例/所有 flex items的收缩比例之和

收缩比例 = flex-shrink * flex item的base size
base size 就是 flex item放入flex container之前的size

flex items收缩后的最终size不能小于 min-width\min-height

flex-basis

flex-basis用来设置flex items在main axis方向上的base size
auto默认值
contain,根据内容决定宽高

flex布局下,flex-basis的优先级比width高

max-xx|min-xxx > flex-basis > width|height > contain的size

flex

flex是 flex-grow flex-shrink? || flex -basis的简写
flex-shrink?的意思是,flex-shrink可有可无


第三章:

H5开发中,都是div,而微信开发中,都是view(这个比较好)

在小程序中,view的背景图片(background-image)不能直接使用本地图片,最好使用远端图片地址(也可以使用base64编码转换一下,不推荐)

或者直接使用image标签

设置view的高度为height: 80rpx;,如果想让文字的高度上下居中,则设置line-height: 80rpx;即可

习惯:

  • JS字符串使用单引号
  • HTML属性值使用双引号

页面看着还不错

	/* 主轴上的对齐方式 */justify-content: center;/* 交叉轴上的对齐方式 */align-items: center;

2023年11月24日,暂停小程序开发学习
转安卓开发学习

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

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

相关文章

VS2022的props配置

最近在点云处理项目过程中&#xff0c;使用了PCL库&#xff0c;遇到了需要在多个vs工程中导入相同库的问题。每次新建项目都要配置很多include文件路径&#xff0c;导入一堆.lib文件&#xff0c;非常头疼&#xff0c;可以通过props属性表来解决这个问题。 一、什么是props属性…

电机应用-直流有刷电机多环控制实现

目录 直流有刷电机多环控制实现 硬件设计 直流电机三环&#xff08;速度环、电流环、位置环&#xff09;串级PID控制-位置式PID 编程要点 配置ADC可读取电流值 配置基本定时器6产生定时中断读取当前电路中驱动电机的电流值并执行PID运算 配置定时器1输出PWM控制电机 配…

【Mybatis】基础增删改查

一.创建SpringBoot项目 创建新项目需要添加的依赖 当然如果是以前的项目也可以直接在pom.xml文件中添加依赖: MySQL Driver依赖 <dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</…

基于vue+element-plus+echarts编写动态绘图页面

我们都知道网页的echarts可以画图&#xff0c;但是很多情况下都需要编码实现绘图逻辑&#xff0c;如果有一个前端页面可以让我输入数据然后动态生成图表的话那么该多好&#xff0c;其实这个需求不难实现&#xff0c;先看效果。 整体页面分为左右两个部分&#xff0c;其中左边的…

Node.js入门指南(二)

目录 http模块 创建http服务端 浏览器查看 HTTP 报文 获取 HTTP 请求报文 设置响应报文 网页资源的基本加载过程 静态资源服务 hello,大家好&#xff01;上一篇文章我们对Node.js进行了初步的了解&#xff0c;并介绍了Node.js的Buffer、fs模块以及path模块。这一篇文章主…

计算机毕业设计 基于SpringBoot的物业管理系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

2001-2022年上市公-供应链话语权测算数据(原始数据+处理代码Stata do文档+结果)

2001-2022年上市公-供应链话语权测算数据&#xff08;原始数据处理代码Stata do文档结果&#xff09; 1、时间&#xff1a;2001-2022年 2、指标&#xff1a;企业代码、股票代码、年份、股票简称、上市公司前五大供应商的采购额之和占企业当年总采购额的比例、上市公司前五大客…

C语言猜素数(ZZULIOJ1292:猜素数)

题目描述 Lx给Xp出了一道难题&#xff0c;随便在0和1000000之间抽出两个数&#xff0c;估计在这两个数之间的素数的个数&#xff0c;如果猜测的结果和正确结果一样&#xff0c;Xp就可以得到Lx的一件礼物&#xff0c;你能猜对吗&#xff1f;编程实现一下吧&#xff01; 输入&…

​root账号登录群晖NAS教程​

用WinSCPPuTTY以root账号登录群晖NAS保姆教程用WinSCPPuTTY可SecureCRT 以root账号登录群晖NAS 1、先用自己的用户名 密码登陆。 2、切换到root权限 输入sudo -i,按回车,然后也是输入群辉登录的密码。成功之后,显示$ 变成 #号

Python基于jieba+wordcloud实现文本分词、词频统计、条形图绘制及不同主题的词云图绘制

目录 序言&#xff1a;第三方库及所需材料函数模块介绍分词词频统计条形图绘制词云绘制主函数 效果预览全部代码 序言&#xff1a;第三方库及所需材料 编程语言&#xff1a;Python3.9。 编程环境&#xff1a;Anaconda3&#xff0c;Spyder5。 使用到的主要第三方库&#xff1a;…

计算机中由于找不到vcruntime140.dll无法继续执行代码无法打开软件怎么解决分享

关于如何解决vcruntime140.dll无法继续执行代码的6个教程。在这个科技日新月异的时代&#xff0c;电脑已经是我们日常和工作中必不可少的电子产品&#xff0c;然后我们在使用过程中经常会遇到不一样的问题&#xff0c;比如vcruntime140.dll文件丢失&#xff0c;那么vcruntime14…

Java特殊文件

Properties 读取数据 package com.itheima.d1;import java.io.FileNotFoundException; import java.io.FileReader; import java.nio.charset.StandardCharsets; import java.util.Properties; import java.util.Set;public class Test1 {public static void main(String[] arg…

吴恩达《机器学习》10-4-10-5:诊断偏差和方差、正则化和偏差/方差

一、诊断偏差和方差 在机器学习中&#xff0c;诊断偏差和方差是改进模型性能的关键步骤。通过了解这两个概念&#xff0c;能够判断算法的问题究竟是欠拟合还是过拟合&#xff0c;从而有针对性地调整模型。 1. 概念理解 偏差&#xff08;Bias&#xff09;&#xff1a; 表示模…

Oracle 最终抛弃了 Sun !

随着 Solaris 团队的彻底完蛋&#xff0c;看起来 Sun 微系统公司最终连块骨头都没剩下。 来自前 Sun 社区的消息表明&#xff0c;一月份的传闻&#xff08;Oracle 裁员 450 人&#xff09;成为了现实&#xff0c;上周五&#xff0c;Oracle 裁掉了 Solaris 和 SPARC 团队的核心员…

5.7 Windows驱动开发:取进程模块函数地址

在笔者上一篇文章《内核取应用层模块基地址》中简单为大家介绍了如何通过遍历PLIST_ENTRY32链表的方式获取到32位应用程序中特定模块的基地址&#xff0c;由于是入门系列所以并没有封装实现太过于通用的获取函数&#xff0c;本章将继续延申这个话题&#xff0c;并依次实现通用版…

Debian 11.3 ARM64 安装中文语言包

文章目录 Debian 介绍1、执行命令2、语言选择3、修改设置 Debian 介绍 Debian是一种自由开源的操作系统&#xff0c;被广泛用于服务器、个人计算机和嵌入式设备。它是由全球志愿者组成的开发团队开发和维护的&#xff0c;以稳定性、安全性和自由性而闻名。 以下是一些关于Deb…

分块矩阵知识点整理:

1.分块方法&#xff1a;横竖线不能拐弯&#xff0c;思想为将矩阵分块看作向量计算 2.标准型 不一定是方的 特殊性&#xff1a;经过分块后会出现单位矩阵和0矩阵 3.分块矩阵的运算: 1.加减乘的运算与向量运算相同 4.分块矩阵求转置&#xff1a; 1.将子块看作普通元素求转置 2…

2017年4月10日 Go生态洞察:开发者体验工作组介绍

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

计算机应用基础_错题集_PPT演示文稿_操作题_计算机多媒体技术操作题_文字处理操作题---网络教育统考工作笔记007

PPT演示文稿操作题 提示:PPT部分操作题 将第2~第4张幻灯片背景效果设为渐变预置的“雨后初晴”效果(2)设置幻灯片放映方式

HTTP/2:多路复用、服务器推送和首部压缩的革命

&#x1f90d; 前端开发工程师&#xff08;主业&#xff09;、技术博主&#xff08;副业&#xff09;、已过CET6 &#x1f368; 阿珊和她的猫_CSDN个人主页 &#x1f560; 牛客高级专题作者、在牛客打造高质量专栏《前端面试必备》 &#x1f35a; 蓝桥云课签约作者、已在蓝桥云…