微信小程序

2017-02-10  本文已影响0人  Mr_韩

一、目录结构 点击查看

二、视图与渲染

三、配置详解 点击查看

四、微信小程序的生命周期和app对象的使用

1、小程序的生命周期
    1.1、onLaunch
    1.2、onShow
        程序切换到前台时执行
    1.3、onHide
        程序切换至后台时执行
        
2、app对象的使用
    2.1、可以在app的文件中,定义全局的属性和方法供给page页中使用。
    
3、页面的生命周期
    3.1、onLoad 页面初始化
    3.2、onShow  页面显示
    3.3、onReady 页面渲染完成 
    3.4、onHide 页面隐藏
    3.5、onUnload 页面关闭
    
4、页面跳转的参数传递
    4.0.1、代码跳转
    wx.navigateTo(){
        url:”页面地址"
    }
    4.0.2、组件跳转
        <navigater url="界面地址">
        <view></view>
        </navigater>
    4.0.3、redirect
    直接替换控制器,卸载前一控制器
    
    4.1、直接在url后面加上?参数,在要跳转的界面unload方法中有一个options的参数用来记录参数,两个以上的参数用&链接

五、UI组件 点击查看

六、布局

一、flex布局
    1、flex容器属性
        1.1、flex-direction 决定元素的排列方向(默认row)
            row -> 横  主轴:从左到右
            column -> 竖  主轴:从上到下
            
        1.2、flex-wrap 决定元素如何换行(排列不下时)
            wrap -> 换行
            nowrap -> 不换行
            wrap-reverse -> 反转
            
        1.3、flex-flow flex-direction和flex-wrap的简写
        
        1.4、justify-content 元素在主轴上的对齐方式
            center -> 居中
            flex-start -> 左对齐
            flex-end -> 右对齐
            space-around -> 每一个元素两边占据的空间相等
            space-between -> 两端对齐
            
        1.5、align-items 元素在交叉轴的对齐方式
            center -> 居中
            flex-start -> 上对齐
            flex-end -> 下对齐
            stretch -> 没有设置高度,默认占满
            baseline -> 以一行文字对齐
            
    2、flex元素属性
        2.1、flex-grow 当有多余空间时,元素的放大比例
        2.2、flex-shrink 当空间不足时,元素的缩小比例
        2.3、flex-basis 元素在主轴上占据的空间
        2.4、flex 是grow、shrink、basis的简写
        2.5、order 定义元素的排列顺序
        2.6、align-self 定义元素自身的对齐方式
        
二、相对定位和绝对定位
    1、相对定位的元素是相对自身进行定位,参照物是自己
        position: relative;
        
    2、绝对定位的元素是相对离它最近的一个已定为的父级元素进行定位
        position: absolute;

七、样式

八、API 点击查看

上一篇下一篇

猜你喜欢

热点阅读