微信小程序小学期项目的总结---新手级别

css选择器

标签选择器：标签名{}，view{}，选择的范围比较广，要慎用，**<view class="title">**
类选择器：title{}(比较常用) `<view id="time">`
id选择器：#time{} 比较精确
多类选择器：1.分开-><view class="orange bold"> 要运动，用强壮<Niew>
	    2.合并写法。选择的元素同时 拥有这两个类
后代选择器：parent .son{};子元素会继承父元素的文字属性

css文本属性

文字大小：font-size 
文字粗细：font-weight (100最细,900最粗,400正常)
文字样式：font-style
文字样式：color 16进制 #00000黑色ffff白色

段落属性

行高：line-height 1.5 1.5倍行高
文本对齐方式：text-align-
	         left左对齐 right右对齐 cener居中对齐
首行缩进：text-indent  2em->首行缩进2字符
文本装饰：text-decoration-
		 none没有 overline上划线 line-through删除线 underline下划线

CSS中的单位

rpx：把一个手机的宽度看作为750rpx
px像素：通常电脑的屏幕宽1920
百分比%

小程序模板语法

文本渲染：{{msg}
条件渲染：data:{isLog:true}
		<view w:if="{isLog})">欢迎回来主人</view>
		<view wx:else=" {isLog}">请登录</view>
列表渲染：
	data:(list:"ava","python"," 小程序]}
	<view wx:for="{{list}}" wx:key="{{index}}">{{item}}</view>}
	<view bindtap="tapHd" data item="我喜欢你">
事件绑定:
	tapHd(e){
	//获取事件的参数
	let item = e.currentTarget.dataset.item;
	wx. showToat(title:item,icon:"none"})  }
表单的双向绑定:
	<input value="{{msg}}" bindinput="inputHd" </input>
	inputHd(e){
	this.setData({msg:e.detail.value});
		}

list数据添加

var list = this.data.list;
	list.unshift(this.data.msg);//unshift把数据添加到list数组最前面
 this.setData({list:list,msg:''})

list数据删除

delHd(e){
		var index = e.currentTarget.dataset.index;
		var list = this.data.list;
		list.splice(index,1);//从数组list删除index对应元素
		this.setData({list});//更新数据
},

display：

block块元素->垂直排列，宽默认100%
inline行元素->水平排列，宽默认文字内容宽

boder：

boder-style:none
	solid实线 dotted点 dashed虚线

网络请求

url: 'https://www.520mg.com/mi/list.php,
  	success(res){
    		console.log(res);
    		}

下拉刷新：

json文件内
"enablePullDownRefresh": true, //允许下拉刷新
"backgroundTextStyle":"dark" //背景文字颜色（加载的三个点颜色）
js文件：
//执行刷新函数（自定义的getJoks函数）
onPullDownRefresh: function () {
 this.getJoks();
 },
//停止刷新
wx.stopPullDownRefresh();

上拉触底

//设置type值不同，type===2
onReachBottom: function () {
	this.getJoks(2);
 },

数组合并

A.concat(B)->A+B
B.concat(A)->B+A
if(type===1){
     	 joks = res.data.result.concat(joks);
    	}else{
    	  joks = joks.concat(res.data.result);
  	  }

本地储存

//把数据存储起来
//控制台Storage显示存在Array中，每次编译都会存在
//存
    wx.setStorageSync('joks', that.data.joks);
    wx.setStorageSync('page',that.data.page);
//取
    var joks = wx.getStorageSync('joks') || [];
    var page = wx.getStorageSync('page') || 1;

小程序的页面跳转

  一.navigator标签 
	基本 <navigator url="">名称</navigator>
                重定向<navigator url=""open-type="redirect">名称</navigator>
	底部栏切换<navigator url=""open-type="swtichTab">名称</navigator>
	返回<navigator open-type="navigateBack">返回</navigator>
	小程序切换<navigator open-type="navigateBack">返回</navigator>
 二.js跳转
	基本页面 wx.navigateTo{{url}}	
	重定向 wx.redirectTo{{url}}
	底部栏 wx.swtichTab{{url}}
	返回 wx.navigateBack()
 三.配置
	app.josn配置tabBar {color：颜色
			selecteColoe：选中后文字颜色
			list: {
				  "pagePath": "页面地址",
 				  "text": "标签名",
				  "iconPath": 图标地址",
 				 "selectedIconPath": "选中图标地址"
			  } }

小程序的生命周期

页面加载 onLoad  options页面的参数
页面显示 onShow
页面渲染完毕onReady
页面隐藏 onHide
页面卸载 onUnload

小程序页面的缓存

A->B->C A切换到B页面 A页面会缓存，B切换到C页面 C页面会缓存，总共能缓存5层页面
	当执行返回的时候C页面会执行onUnload销毁，B页面会执行onShow显示
如果是redirect切换 A->B A会直接销毁不能返回

flex弹性布局项目属性

order排序：默认为0，数字越小排列越靠前
flex-grow放大：默认0,当有多余的空间放大的倍数  0: 不放大1：自动宽2：占用多余空间2倍
flex-shrink缩小：默认0,空间不够时缩小比例 1：自动缩小  2：缩小2倍
flex-basis自动宽

页面跳转传参

<navigator url="?id=youid">
        onLoad(options){
		//options.id
	}

条件渲染应用:v-if"{{表达式}}" 表达式为真，则元素渲染，否则隐藏
wx:elif wx:else

定位：

固定定位：
1.参照元素：屏幕的四个角
2.偏移值：left：；bottom： ；偏移参照元素的左下角
             right：；top： ；偏移参照元素的右上角
 绝对：参照点：写过position：relative，absolute，fixed的父元素
 相对：参照点是自己
 概念：把一元素定位到页面中的某个地方
 特点：可能会使多个元素重叠在一起

层级：z-index

1.只对定位元素起效
2.值越大越被显示在最上面

html转换为微信标签：

1.通过<rich-text> nodes="html内容"
2.通过wxPrase插件实现

动态的设置页面的标题

wx.setNavigationBarTitle({
      title: res.data.title,
    })

项目截图