《微信小程序从入门到精通》---笔记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属性…

Gin 学习笔记01-数据返回

Gin 数据返回 1、返回 string 和 json2、返回 xml 和 ymal3、返回html4、重定向 1、返回 string 和 json c.String()c.JSON() package mainimport ("github.com/gin-gonic/gin""net/http" )func getJSON(c *gin.Context) {//c.String(http.StatusOK, &qu…

紧急救援【Dijkstra】

作为一个城市的应急救援队伍的负责人&#xff0c;你有一张特殊的全国地图。在地图上显示有多个分散的城市和一些连接城市的快速道路。每个城市的救援队数量和每一条连接两个城市的快速道路长度都标在地图上。当其他城市有紧急求助电话给你的时候&#xff0c;你的任务是带领你的…

图书管理系统源码,图书管理系统开发,图书借阅系统源码SqlHelper数据库访问操作方法简述

SqlHelper 是封装了数据库操作方法的类库,使用它我们可以链接数据库操作数据库表数据增删改查,其中主要SqlConnection ,ExecuteNonQuery,ExecuteScalar,ExecuteDataTable四个主要方法SqlConnection负责根据访问配置文件web.config中connstr链接数据库字符串去打开数据库,…

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

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

图书管理系统源码,图书管理系统开发,图书借阅系统源码二表字段注释说明

图书管理系统源码数据库表设计说明 数据库名:TuShuManger 用户管理员表 表名:AdminUser 序号 列名 数据类型 长度 小数位 标识 主键 外键 允许空 默认值 说明 1 Id int 4 0 是 是 否 2 username nvarchar 0 0 是 用户名 3 password nvarchar 0 0 是 密码 4 qq nvarchar 0 0…

【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;企业代码、股票代码、年份、股票简称、上市公司前五大供应商的采购额之和占企业当年总采购额的比例、上市公司前五大客…

vue-element-ui学习教程

Vue Element Admin Vue Element Admin

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,按回车,然后也是输入群辉登录的密码。成功之后,显示$ 变成 #号

Kafka(一):在WSL单机搭建Kafka伪集群

目录 1 运行Kafka单实例1.1 Windws1.1.1 安装包下载1.1.2 修改环境变量1.1.3 修改配置文件1.1.4 启动Kafka单机版 1.2 Linux1.2.1 安装包下载1.2.2 创建目录1.2.3 添加环境变量1.2.4 修改配置文件1.2.5 运行Kafka1.2.6 停止Kafka 2 搭建Kafka集群2.1 搭建Zookeeper集群2.2 搭建…

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…

成品日志函数

1、可以选择显示时间、日期时间、不显示时间和日期 2、要养成使用define简化代码和当开关的习惯 #include <iostream> #include <fstream> #include <chrono> #include <ctime> #include <cstdarg> #include <sstream> #include <thr…

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…

Handler系列-怎么实现delay

1.前提 前面说到sendMessage携带的delay会被加上SystemClock.uptimeMillis() &#xff0c;最终赋值给Message的when。 msg.when SystemClock.uptimeMillis() delayMillis; 那么when除了用来在链表里面作为排序依据以外&#xff0c;还在哪里用到了呢&#xff1f; 2.Looper…