美文网首页
微信小程序

微信小程序

作者: Mr_韩 | 来源:发表于2017-02-10 10:28 被阅读0次

    一、目录结构 点击查看

    二、视图与渲染

    三、配置详解 点击查看

    四、微信小程序的生命周期和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 点击查看

    相关文章

      网友评论

          本文标题:微信小程序

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