微信小程序的基础入门
1.小程序的三个标签四个组成
微信小程序的主要三个标签（组件）：
view text image
1.view容器相当于Html5 中的div，是一个块级容器组件，没有特殊功能，主要用于布局展示，是布局中最基本的UI组件，任何一种复杂的布局都可以通过嵌套view组件，设置相关WXSS实现。支持常用的CSS布局属性，如display、float、position甚至Flex布局等。
2.text文本，主要用于写入文本，text组件内只支持嵌套text，而且在使用过程中出现无法无法换行的情况，通常使用
text{
word-break: keep-all;
word-wrap: break-word;
}
进行换行，使用空格有时也能达到换行的目的。
3.image组件，使用语句src进行导入图片的绝对路径、相对路径或者是网址。
微信小程序的四个组成：
wxml json js wxss
1.wxml
页面的编辑类似于html，是框架设计的一套便签语言。语法为：
<标签名属性名="属性名1"属性名=“属性名2” …>…</标签名>
语言特点：
文本渲染 列表渲染 条件渲染 事件绑定
文本渲染：
< text>{{msg}}</ text>
列表渲染：
data:{ist:[“java”,“python”,“小程序”]}
<view wx:for=”{{list}}" wx:key="{{index}}"> {{item}}</ view>
< view bindtap= “tapHd” data-item= “我喜欢你” >
条件渲染
data:{ isLog:true}
< view wx:for-="{iLog}">欢迎回来主人</ view>
< view wx:else= “{isLog}”>请登录< /view>
事件绑定：
tapHd(e) { //获取事件的参数 let item = e.currentTarget.dataset.item; wx.showT aast(title.item,icon:" none "}) }
navigator 跳转页面携带参数：
基本：<navigator url=">名称</ navigator>
重定向：< navigator url=”open-type= “redirect”
底部栏切换：< navigator url=”open-type= “switchTab”
返回：<navigator open-type=”navigateBack">返回</ navigator>
小程序切换：< navigator target= “miniProgram”open-type =’ navigate”
app-id= “小程序ID” path="" extra-data=""
version= “release”>打开绑定的小程序</ navigator>
2.json
app.json文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
pages:
项目列表处pages文件夹下有几个文件，在app.json中，就写几个文件路径
如：
“pages/test/test”,
“pages/flex/flex”,
“pages/css/css”,
“pages/index/index”
用于首页面的设置。
window：
“window”: {
“backgroundTextStyle”: “light”,
“navigationBarBackgroundColor”: “#7FFFD4”,
“navigationBarTitleText”: “学习小程序”,
“navigationBarTextStyle”: “black”
},
用于小程序的顶部样式。
tabBar：
“tabBar”: {
“selectedColor”: “#01baf2”,
“color”: “#999999”,
“list”: [
{
“pagePath”: “页面地址”,
“text”: “标签名”,
“iconPath”: “图标地址”,
“selectedIconPath”: “选中图标地址”
},
3.JS
JS主要是用来做交互，比如：响应用户的点击、获取用户的位置等等。通过编写 JS 脚本文件来处理用户的操作。
简单来说，WXML决定有什么内容，WXSS决定内容长什么样子，JS呢，决定了页面和用户操作的交互，体验好不好就看JS了。
JS的跳转：
wx.navigateTo({urI})//基本页面
wx.redirectTo({ur})//重定向
wx.switchTab({ur|})//底部栏
wx.navigateBack（）//返回
4.wxss
CSS选择器：
1)后代选择器：
子元素会继承父元素的文字属性
.parent .son{}
class= “parent” class= "son’
2)id选择器:
较为精确
#subtitle { font-size: 12px;}
id=“subtitle”
3)标签选择器:
范围较广
标签名{}: view{};
4)类选择器：
.subtitle { color :red; font-size: 25px; }
class=“subtitle”
5)多类选择器：
合并写法: .orange.bold{}选择的元素同时拥有这两个类
分开写法： .orange{} .bold{} class= “orange bold”
CSS文本属性：
font-size:
字号大小
默认字体16px 大小
单位：em rem px pt
font-weight:
字体粗细
100最细 900 最粗 400正常
font-style:
字体风格
normal 正常
italic 斜体
color:
文本颜色
16进制 #000000 到 #FFFFFF
rgb rgb(0,0,0) 到 rgb(255,255,255)
rgba rgba(0,0,0,0)到 rgba(0,0,0,1)
英文单词 red、blue、green
CSS的单位:
1、rpx 750rpx 等于屏幕的宽 动态的
2、px 像素 你的电脑屏幕宽大概是1920px
3、百分比 默认屏幕的宽100%
段落属性：
line-height:
行间距
定义:line-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px
如：1.5即1.5倍行高
一般情况下，行距比字号大7.8像素左右就可以了。
text-align:
水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：
left：左对齐（默认值）
right：右对齐
center：居中对齐
text-indent:
首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。
如：1em 就是一个字的宽度 如果是汉字的段落， 1em 就是一个汉字的宽度
text-decoration：
文本装饰
underline 下划线
line-through 删除线
overline 上划线
none 无
CSS盒子样式：
border
边框
简写 border：1px solid red;
border-style
边框样式 ：
none
solid 实线
dotted点
dashed 虚线
单独设置：
border-bottom:1px solid red;
border-radius
边框-圆角
2 个值 对角线圆角
4 个值 左上 顺时针
当元素是正方向，设置圆角的值是宽度1半，正好就绘制一个正圆
display布局
block 块元素 垂直排列(换行显示) 宽默认100% 可以设置宽高
inline 行元素 水平排列（行内显示） 宽默认文字内容宽 设置宽高不启用
inline-block 行内块块元素 是块元素，可以水平排列 （行内显示）
box-shadow
盒子阴影
box-shadow: 2px 3px 8px #000000；
表示 x方向移动距离， y方向移动距离， 阴影模糊宽度 颜色 内阴影
padding
内边距
文本（子元素）到边框的距离
padding:10px 四周
padding：10px 20px; 上下内边距10 左右内边距20
padding:10px 20px 30px 40px ; 上 右 下 左
单独设置方向:
padding-left:10px ;
padding-top:20px；
padding-right:30px;
padding-bottom:15px
margin
外边距
边框到别的边框的距离（ 任何元素不管写不写有没有颜色，都是存在边框的）
margin:30px; 四周30
marign:10px 30px 上下10px间距 左右30px
margin:10px 20px 30px 40px 上 右 下 左
块元素居中:
- 元素具有宽度 width:220px;
- 元素左右外边距为自动:
margin-left:auto;
marign-right:auto;
margin:10px auto;
2.表单
表单的双向绑定
input value="{{msg}}" class=“inp” bindinput=“inputHd”
inputHd(e){
this.setData({msg;e.detail.value})
e.detail.value表单的值
list数据添加
< input value=" {msg))" bindconfirm=“confirmHd”>
var list = this. data.list;
list. unshift(this . data . msg);
unshift把数据添加到list数组最前面
this.setData(list})
list数据删除
< text data-index="{indexl}" bindtap=“delHd”>x< /text>
delHd(e){
var index = e.currentTarget.dataset.index;
获取到参数
var list = this.data.list;
获取列表
lit.splice(index,1);
从数组it删除index对应的元素
this.setata(lst})
更新数据
3.flex弹性布局
采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。
任何一个容器都可以指定为 Flex 布局
.box{
display: flex;
}
行内元素也可以使用 Flex 布局
.box{
display: inline-flex;
}
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。
参考：FLEX布局
容器的属性
flex-direction
属性决定主轴的方向（即项目的排列方向）
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4个值:
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
flex-wrap
属性定义，如果一条轴线排不下，如何换行。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
它可能取三个值。
nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。
flex-flow
属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
.box {
flex-flow: < flex-direction> || < flex-wrap>;
}
justify-content
属性定义了项目在主轴上的对齐方式。
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
它可能取5个值，具体对齐方式与轴的方向有关:
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。
align-items
属性定义项目在交叉轴上如何对齐。
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
它可能取5个值。具体的对齐方式与交叉轴的方向有关:
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-content
属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
该属性可能取6个值:
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。
stretch（默认值）：轴线占满整个交叉轴。
order
属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow
属性定义项目的放大比例，默认为0，当有多余的空间放大的倍数0不放大1自动宽，2占用多余空间2倍。
flex-shrink
属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis
自动宽
4.小程序的生命周期
onLoad 页面加载
options页面的参数
传递参数
url:xxxx?name=mumu&age=18
在onLoad里面执行request请求
onShow 页面显示
onReady 页面渲染完毕
onHlde 页面隐藏
onUnload 页面卸载
5.小程序缓存
a. A=>B=>C
i. A切换到8页面, A页面会缓存;
ii.B页面切换到c页面, c页面会缓存;
iii.一共能缓存5层页面;
iv.当执行返回的时候C页面会onUnload销毁 , 8页面执行onShow显示
b.如果用redirect切换 ;A=>B A会直接销毁(不能返回)
6.小程序网络请求
wx.request({
Url:“请求的地址”
success (res ) {
res请求成功后返回的数据
}
})
7.下拉刷新上拉触底
下拉刷新
a.页面的json配置
“enablePullDownRefresh”: true, //允许下拉刷新
b.执行
onPullDownRefresh: function () {
this.getoks();
},
c.停止下拉刷新
wx.stopPullDownRefresh();
上拉触底
onReachBottom: function (){
this.getoks(2);
},
8.数组合并与本地存储
数组合并
A.concat(B)>A+B
B.concat(A)>B+A
本地存储
存
wx.setStorageSync(‘joks’, that.data.joks);
取
wx.getStorageSync(‘joks’)
转载：https://blog.csdn.net/qq_43212366/article/details/106479740