微信小程序小学期项目的总结---新手级别
css选择器
标签选择器：标签名{}，view{}，选择的范围比较广，要慎用，****
类选择器：title{}(比较常用) ``
id选择器：#time{} 比较精确
多类选择器：1.分开-> 要运动，用强壮
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}
欢迎回来主人
请登录
列表渲染：
data:(list:"ava","python"," 小程序]}
{{item}} }
事件绑定:
tapHd(e){
//获取事件的参数
let item = e.currentTarget.dataset.item;
wx. showToat(title:item,icon:"none"}) }
表单的双向绑定:
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标签
基本 名称
重定向名称
底部栏切换名称
返回返回
小程序切换返回
二.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自动宽
页面跳转传参
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.通过 nodes="html内容"
2.通过wxPrase插件实现
动态的设置页面的标题
wx.setNavigationBarTitle({
title: res.data.title,
})
项目截图
