微信小程序笔记总结
渲染
- 文本渲染
{{msg}}
- 条件渲染
data:{isLog:ture}
<view wx:if="{{isLog}}"> </view>
<view wx:else="{{isLog}}"> </view>
- 列表渲染
data:{list:["java","python","小程序"]}
<view wx:for="{{list}}" wx:key="{{index}}">{{item}} </view>
<view bindtap="tapHd" data-item="我"> </view>
- 事件绑定
tapHd(e){
//获取事件参数
let item = e.currentTarget.gataset.item;
wx.showToast({title:item,icon:"none"})
}
更新视图与数据
- 表单双向绑定
<input value="{{msg}}" bindinput="inputHd">
inputHd(e){
this.setData({msg:e.detail.value}); // e.detail.value 就是表单的值
}
- list数据添加
<input value="{{msg}}" bindconfirm="confirmHD">
//把msg数据添加到list数据
var list = this.data.list;
//获取list数据
list.unshift(this.data.msg);
- 数据删除
<text bindtap="deleteHD" data-index="{{index}}">*</text>
deleteHD(e){
var index=e.currentTarget.dataset.index;//获取事件参数index值
var list = this.data.list;//获取list数据
list.splice(index,1);//从index删除一个
this.setData({list})//更新列表
},
网络请求
- 网络请求
wx.request({
url: “请求地址”,
success(res){
res请求成功返回数据
}
})
- 下拉刷新
- 页面json配置
"enablePullDownRefresh":true 允许下拉刷新
"backgroundTextStyle": "dark" 背景文字颜色
- 执行
onPullDownRefresh: function () {
this.getJoks();
},
- 停止下拉刷新
x.stopPullDownRefresh();
- 上拉触底
onReachBottom: function () {
this.getJoks(2);
},
- 数组合并
A.concat(B)
A+B
B.concat(A)
B+A - 本地存储
存 wx.setStorageSync('page', that.data.page);
取 wx.getStorageSync('page');
页面跳转
- navigator 标签:
- 基本
<navigator url="/pages/ / ">名称</navigator>
- 重定向
<navigator url="/pages/ / " open-type="redirect"> </navigator>
- 底部栏切换
<navigator url="/pages/ / " open-type="switchTab"></navigator>
- 返回
<navigator open-type= " navigateBack" > </navigator>
- 小程序切换
<navigator open-type= " navigateBack" > </navigator>
- js跳转:
- 基本页面
Wwx.navigateT{ur})
- 重定向
Wx.redirectTo((url))
- 底部栏
Wx.switchTab({url})
- 返回
Wx.navigiateBack(url))
配置
"selectedColor": "#01baf2", 颜色
"color": *999999",文字颜色
"list": [{}]
list最少2个 ,最多5个
list:{
"pagePath": "pages/index/index",
"text": "标签名"
"iconPath": "/images/t1.png".
"selectedIconPath": "/images/t1-h.png"
}
3.页面跳转传参
<navigator url="xxxx?id=youid ">
onLoad(options){
//option.id 就是传递过来的参数
}
生命周期
- onLoad页面加载:options页面的参数
传递参数:url:/ / ?name=mumu&age=18 执行request请求 - onShow页面显示
- onReady页面渲染完毕
- onHlde页面隐藏
- onUnlod页面卸载
页面缓存
- A-》B-》C A切换到B页面 A页面会缓存 B切换到C页面 C页面会缓存 总共能缓存5层页面
当执行返回的时候 C页面会onUnlod 销毁 B页面会执行 onShow页面显示 - 如果是用redirect切换 A-》B A会直接销毁(不能返回)
CSS
单位:
rpx(把一个手机的宽度看作750rpx)
px(通常电脑的屏幕宽1920)
百分比
css选择器
-
标签选择器
- 标签名{} 选择范围广要慎用 类选择器
- .title{} 比较常用
<view class="title"></view>
-
id选择器
- #title{} 比较精确
<view id="title"></view>
-
多类选择器
-
分开
.title{}
.time{}
合并
.time.title{} 选择的元素同时拥有这两个类
<view class="time title"></view>
-
后代选择器
- .parent .son{} 子元素会继承父元素的文字属性
<view class="parent"><text class="son"></text></view>
-
标签选择器
- 标签名{} 选择范围广要慎用
<view id="time title"></view>
css文本属性和段落属性
- font-size :文字大小
- font-weight : 文字粗细(100最细、900最粗、400正常)
- font-style : italic斜体 normal正常
- color :英文单词(red、blue、white…);16进制(#000000黑色、#ffffff白色)
- line-height :行高(指第一个行文字的基线与第二行文本的基线距离)
1.5 1.5倍行高
32px - text-align :文本对齐方式 left左对齐 right右对齐 center居中对齐
- text-indent :首页缩进 2em首行缩进两个字符
- text-decoration :文本修饰 (none没有 overline上划线 line-through删除线 underline下划线)
css布局
普通布局
- display:
inline; 行元素,横向显示 默认文字内容宽 设置宽高不启用
block; 块元素,垂直排列 100% 可设置宽高
inline-block;行内块元素,可水平排列 - border: 1px solid red;
样式:(none无 solid实线 dotted点 dashed虚线)
单独设置:border-bottom: 1px solid red; - border-radius: 50px;
圆角设置:一个值:四个角一致 俩值:对角 四个值:从左上角顺时针 - box-shadow: 0px 2px 8px #B9BCBF inset
盒子阴影:X方向 Y方向 模糊 颜色 内阴影 - padding :内边距 文本到边框的距离
padding:10px; 四周
padding:10px 20px; 上下10 左右20
padding:10px 20px 30px 40px; 依次为上 右 下 左
单独设置方向:padding-left padding-right padding-top padding-bottom - margin :外边距 边框到别的边框的的距离
margin:10px; 四周
margin:10px 20px; 上下10 左右20
margin:10px 20px 30px 40px; 依次为上 右 下 左
块元素居中:
<1>.元素具有宽度:width:100px;
<2>.元素左右外边距为自动:margin-left:auto; margin-right:auto; margin:10px auto;
flex弹性布局
- 容器:display: flex;
- 属性:
- 布局方向-> flex-direction: row横向 row-reverse横向反 column垂直 column-reverse垂直反
- 是否换行-> flex-wrap: nowrap不换 wrap换 wrap-reverse换行反
- 主轴对齐方式-> justify-content:flex-start左 center居中 flex-end右对齐 space-around间距等分,两边间距是中间的一半
- 辅轴对齐方式-> align-items:stretch拉伸 flex-start顶对齐 center居中 flex-end底对齐
- 多轴对齐方式-> align-content:
flex-start: stretch拉伸 flex-start垂直顶对齐 center垂直居中 flex-end垂直底对齐 space-between中间间距 space-around两头间距是中间间距的一半 - flex弹性布局项目属性:
- 排序order : 默认为0 数字越小排列越靠前
- 放大flex-grow : 默认为0 当有多余的空间放大的倍数 0不放大、1自动宽,2占用多于空间的2倍
- 缩小flex-shrink : 注意结合flex-wrap:no-wrap; 默认0、1自动缩小、2缩小两倍
- 基础宽flex-basis : 放大缩小前设置元素的宽
定位
概念:把一个元素定位到页面的某个地方
特点:可能会使多个元素重叠到一起
- 固定定位:参照元素:屏幕四个角
偏移值:
left:50rpx; bottom:50rpx偏移参照元素的左下角
right:50rpx; top:50rpx偏移参照元素的右上角 - 绝对定位:参照点:写过的position:relactive,absolute,fixed的父辈元素
- 相对定位:参照点是自己
条件渲染应用
v-if="{{表达式}}" 如果表达式为真,则当前元素渲染,否则隐藏
wx:elif
wx:else
层级:z-index
只有定位元素起效;值有越大,越被显示在最上面
html转换为微信标签
- 通过 nodes=“html内容”
- wxPrase插件显示
动态设置页面标题
wx.setNavigationBarTitle({
title:res.data.title,
})