美文网首页
小程序开发知识点总结

小程序开发知识点总结

作者: 此生唯一自传 | 来源:发表于2019-04-22 11:36 被阅读0次

    一、事件

    1.1

    点击事件:tap  长按事件: longtap

    触摸事件:touchstart   touchend   touchmove touchcancel

    注意:touchend是正常触摸完毕后触发,而touchcancel是当触摸还未结束就被其他事件打断(例如突然来电话)则会触发该方法。

    其他事件: submit  input 等等

    1.2 事件绑定

    bindTap与catchTap区别: bindTap会触发冒泡, catchTap则只针对自己的事件

    二、布局

    1 flex布局

    布局转换flex布局方式:  

    display:flex;

    布局转换排列方式(设置主轴/交叉轴):

    flex-direction:row/column   横向/纵向

    当一行排列不下时,过多元素会导致元素变形。决定元素如何换行:

    flex-wrap:nowrap/wrap/wrap-reverse        不换行(默认)/换行/反向换行(改变换行方向)

    简写方式

    flex-flow:row  wrap;    //横向排列且换行

    元素在主轴上的对齐方式:

    justify-content:flex-start/flex-end/center/space-around/space-between;  

    左对齐/右对齐/居中对齐/元素平分主轴长度/元素平分主轴长度且两边对齐

    元素在交叉轴上的对齐方式:

    align-items:flex-start/flex-end/center/stretch/baseline;  

    左对齐/右对齐/居中对齐/元素没有设置高度时自动在交叉轴占据容器高度/以元素内部文字基准线对齐

    有多余空间时,内部元素的放大比例(可作为权重用):

    flex-grow:1  // 默认值0不放大

    当空间不足时,内部元素的缩小比例

    flex-shrink:0   //默认值1等比缩小

    元素在主轴上占据的空间:

    flex-basis:200px;    //这里rpx不会生效必须使用px

    简写:

    flex:1  1  300px;    //grow,shrink,basis的简写

    定义元素的排列顺序

    order:1    //值是权重,越大的在布局时排序越靠前

    定义元素自身的对齐方式:

    align-self:flex-end;  

    三、定位

    相对定位:相对于元素自己的位置,仍占用原来的位置

    绝对定位:相对于已经声明定位的父容器的位置,不占用原来的位置

    item{

          position:relative/absolute;     //相对/绝对定位

          top:50rpx;   //顶部偏移量

          left:50rpx;   //左部偏移量

    }

    四、跳转的五种方式

    1.wx.navigateTo({})

    注意:不能跳转到tabBar页面;带参格式:【路径】?【参数键1】=【参数值】& 【参数键2】=【参数值】

    wx.navigateTo({

        url:'../test/test?id=1&page=4',//跳转页面的路径,可带参数?隔开,不同参数用 & 分隔;相对路径,不需要.wxml后缀

        success:function(){}        //成功后的回调;

        fail:function(){}          //失败后的回调;

        complete:function(){}      //结束后的回调(成功,失败都会执行)

    })

    //传递的参数在接收页面onLoad()函数中得到值:option.【参数名】就可以得到了

    onLoad: function (option) {

        this.setData({

            id:option.id,

    });

    1.1.wx.navigateBack(OBJECT)

    关闭当前页面,返回上一页面或多级页面。 

    可通过 getCurrentPages()) 获取当前的页面栈,决定需要返回几层。

    2.wx.redirectTo(OBJECT)

    关闭(之前的页面是回不去的)当前页面,跳转到非tabBar的某个页面

    注意:不能跳转到tabBar页面;【路径】?【参数键1】=【参数值】& 【参数键2】=【参数值】

    3.wx.reLaunch(OBJECT)

    关闭(之前的页面是回不去的)所有页面,打开到应用内的某个页面。

    注意:【路径】?【参数键1】=【参数值】& 【参数键2】=【参数值】 ;【如果是跳转到tabBar页面,则不能带参数】

    4.wx.switchTab(OBJECT)

    跳转到tabBar的某个页面,并关闭其他所有非 tabBar 页面

    注意:目标页面必须是在:app.json 的 tabBar 中定义的页面;不能带参数

    5.组件

    - url:和上面几种方式的规则一样,当前小程序内的跳转链接 

    - open-type(跳转方式):有效值如下表

    相关文章

      网友评论

          本文标题:小程序开发知识点总结

          本文链接:https://www.haomeiwen.com/subject/zttsgqtx.html