微信小程序的基础入门

@微信小程序的入门

微信小程序的基础入门

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 上 右 下 左
块元素居中:

1. 元素具有宽度 width:220px;
2. 元素左右外边距为自动:
   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’)