• uni-app


    https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/basic.html(微信小程序官网)

    https://uniapp.dcloud.io/collocation/pages(uniapp官网)

    目录结构:

          project.config.json(可配置app的id;)

           app.wxss(小程序专用文件,全局样式文件)

          

    尺寸计算:

        uni-app定义的基准宽度喂750px;

        若设计稿宽度为640px,元素A在设计稿上的宽度为100px,那么元素A在uni-app里面的宽度应为:750*100/640,结果为:117px;

        若设计稿宽度为375px,元素B在设计稿上的宽度为200px,那么元素B在uni-app里面的宽度应为:750*200/375,结果为:400px;

    导入样式:

    src导入样式,模板,js

    @import ''

    pages.json:

              pages:[//界面配置 (第一项即为入口页)

          {
            "path": "pages/index/index",
            "style": {//单页面样式配置
              "navigationBarTitleText": "uni-app"
            }
          }

        ]     

       "globalStyle": {//全局样式配置
        "navigationBarTextStyle": "black",//导航栏标题颜色,仅支持black/white
        "navigationBarTitleText": "uni-app", //导航栏标题文字内容
        "navigationBarBackgroundColor": "pink",  //导航栏背景颜色
        "backgroundColor": "#F8F8F8" //窗口的背景色(微信小程序)

                   ”navigationStyle“:"default",//导航栏样式,仅支持default/custom
         }

     生命周期:

        应用生命周期:  

          onLaunch:当uni-app初始化完成时触发(全局只触发一次)

          onShow:当uni-app启动,或从后台进入前台显示

           onHide:当uni-app从前台进入后台

            onError:当uni-app报错时触发

            onUniNViewMessage:对nvue页面发送的数据进行监听

        组件生命周期(同vue):

              beforeCreate:在实例初始化之后被调用(数据观测(data observer)和event/watcher事件配置之前被调用)

              created:在实例创建完成后被立即调用。(数据观测 (data observer),property 和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el property 目前尚不可用。)

               beforeMount:在挂载开始之前被调用(相关的render函数首次被调用) (该钩子在服务器端渲染期间不被调用)

               mounted:实例被挂载后调用(不会保证所有的子组件都一起被挂载,不能保证所有视图都渲染完毕再调用

                beforeUpdate:数据更新时被调用,发生在虚拟DOM打补丁之前。

                 updated:由于数据更改导致的虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。

                 activated:被keep-alive(构建组件/动态组件)缓存的组件激活时调用

                 deactivated:被keep-alive(构建组件/动态组件)缓存的组件停用时调用

                 beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用

                  destroyed:实例销毁后调用。该钩子被调用后,对应vue实例的所有指令都被解绑,所有的事件监听器被移除,所有的子实例也都被销毁。

                   errorCaptured:当捕获一个来自子孙组件的错误时被调用。

         页面生命周期(app和小程序常用的):

                    onLoad:监听页面加载,其参数为上个界面传递的数据,参数类型为object(用于页面传参)  

                     onShow:监听页面显示

                     onReady:监听页面初次渲染完成

                     onHide:监听页面隐藏

                     onUnload:监听页面卸载

                      onPullDownRefresh:监听用户下拉动作

                      onReachBottom:页面上啦触底事件的处理函数

                      onShareAppMessage:用户点击右上角分享(微信小程序)

                      onPageScroll:监听页面滚动

                      onTabItemTap:当前是tab页时,点击tab时触发。

    if会根据条件决定是否渲染,hidden会渲染但根据条件决定是否展示。

    class:

    class="{red:isRed}"

    class="[isRed?'red':'blue']"

          

               

        

     
     
     
     
     
     
  • 相关阅读:
    js浅拷贝和深拷贝
    使用slice和concat对数组的深拷贝和浅拷贝
    JS数组常用方法---8、concat方法
    JS数组常用方法---7、join方法
    js中将类数组转换为数组的几种方法
    JS 使用const声明常量的本质(很多人都有误解)
    JS中对象数组按照对象的某个属性进行排序
    vue源码分析参考---2、数据代理
    vue源码分析参考---1、准备工作
    ES6课程---5、形参默认值
  • 原文地址:https://www.cnblogs.com/cxdxm/p/12627356.html
Copyright © 2020-2023  润新知