微信小程序

渲染

  1. 文本渲染
{{msg}}
  1. 条件渲染
data:{isLog:ture}
<view wx:if="{{isLog}}"> </view>
<view wx:else="{{isLog}}"> </view>
  1. 列表渲染
data:{list:["java","python","小程序"]}
 <view wx:for="{{list}}" wx:key="{{index}}">{{item}} </view>
 <view bindtap="tapHd" data-item="我"> </view>
  1. 事件绑定
 tapHd(e){
            //获取事件参数
            let item = e.currentTarget.gataset.item;
            wx.showToast({title:item,icon:"none"})
            }

更新视图与数据

  1. 表单双向绑定
<input value="{{msg}}"  bindinput="inputHd">
 inputHd(e){
    this.setData({msg:e.detail.value});  // e.detail.value 就是表单的值
  }
  1. list数据添加
<input value="{{msg}}"  bindconfirm="confirmHD">
  //把msg数据添加到list数据
    var list = this.data.list;
    //获取list数据
    list.unshift(this.data.msg);
  1. 数据删除
 <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})//更新列表
  },

网络请求

  1. 网络请求
 wx.request({
      url: “请求地址”,
      success(res){
            res请求成功返回数据
      }        
 })
  1. 下拉刷新
  • 页面json配置
 "enablePullDownRefresh":true 允许下拉刷新
 "backgroundTextStyle": "dark" 背景文字颜色
  • 执行
 onPullDownRefresh: function () {
             this.getJoks();
        },
  • 停止下拉刷新
   x.stopPullDownRefresh();
  1. 上拉触底
onReachBottom: function () {
    this.getJoks(2);
  },
  1. 数组合并
    A.concat(B)
    A+B
    B.concat(A)
    B+A
  2. 本地存储
 存 wx.setStorageSync('page', that.data.page);
 取 wx.getStorageSync('page');

页面跳转

  1. 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>
  1. 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文本属性和段落属性

  1. font-size :文字大小
  2. font-weight : 文字粗细(100最细、900最粗、400正常)
  3. font-style : italic斜体 normal正常
  4. color :英文单词(red、blue、white…);16进制(#000000黑色、#ffffff白色)
  5. line-height :行高(指第一个行文字的基线与第二行文本的基线距离)
    1.5 1.5倍行高
    32px
  6. text-align :文本对齐方式 left左对齐 right右对齐 center居中对齐
  7. text-indent :首页缩进 2em首行缩进两个字符
  8. text-decoration :文本修饰 (none没有 overline上划线 line-through删除线 underline下划线)

css布局

普通布局

  1. display:
    inline; 行元素,横向显示 默认文字内容宽 设置宽高不启用
    block; 块元素,垂直排列 100% 可设置宽高
    inline-block;行内块元素,可水平排列
  2. border: 1px solid red;
    样式:(none无 solid实线 dotted点 dashed虚线)
    单独设置:border-bottom: 1px solid red;
  3. border-radius: 50px;
    圆角设置:一个值:四个角一致 俩值:对角 四个值:从左上角顺时针
  4. box-shadow: 0px 2px 8px #B9BCBF inset
    盒子阴影:X方向 Y方向 模糊 颜色 内阴影
  5. padding :内边距 文本到边框的距离
    padding:10px; 四周
    padding:10px 20px; 上下10 左右20
    padding:10px 20px 30px 40px; 依次为上 右 下 左
    单独设置方向:padding-left padding-right padding-top padding-bottom
  6. 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弹性布局

  1. 容器:display: flex;
  2. 属性
  3. 布局方向-> flex-direction: row横向 row-reverse横向反 column垂直 column-reverse垂直反
  4. 是否换行-> flex-wrap: nowrap不换 wrap换 wrap-reverse换行反
  5. 主轴对齐方式-> justify-content:flex-start左 center居中 flex-end右对齐 space-around间距等分,两边间距是中间的一半
  6. 辅轴对齐方式-> align-items:stretch拉伸 flex-start顶对齐 center居中 flex-end底对齐
  7. 多轴对齐方式-> align-content:
    flex-start: stretch拉伸 flex-start垂直顶对齐 center垂直居中 flex-end垂直底对齐 space-between中间间距 space-around两头间距是中间间距的一半
  8. 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转换为微信标签

  1. 通过 nodes=“html内容”
  2. wxPrase插件显示

动态设置页面标题

wx.setNavigationBarTitle({
      title:res.data.title,
})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值