zoukankan      html  css  js  c++  java
  • 什么是小程序?===全局配置

    小程序: 一种新的应用形态

      一种不要安装下载即可使用的应用

      触手可及:

        通过扫一扫,或者搜索,或者通过公众好跳转。

      用完即走:

        用户不关心是否安装太多应用的问题,应用无处不在,随时可用,无需安装,也无需卸载。

    <!-- rpx: 微信把每个手机屏幕的宽度为750px -->

    <!-- iphone 6  375px    750rpx=375px   1rpx=0.5px -->  

    flexbox布局弹性盒模型

      1 display

      flex-direction     排布的方向  row(横向)      column(纵向)

      <view id="container">

        <view class=“cubic”></view>

        <view class=“cubic”></view>

        <view class=“cubic”></view>

        <view class=“cubic”></view>

      </view>

      flex布局详见  https://www.runoob.com/w3cnote/flex-grammar.html

      #container{

        100%;

        height: 700rpx;

        background:#ddd;

        display:flex;

        flex-direction: row;      主轴为水平方向,起点在左端。

        /*flex-dorection: column;*/    主轴为垂直方向,起点在上沿

     

        just-ify-content: flex-start;    :左对齐

        just-ify-content:flex-end;      右对齐

        just-ify-content: center;       居中

        just-ify-content: space-between;   两端对齐,项目之间的间隔都相等。

        just-ify-content: space-around;    每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。

        align-items: flex-start;   交叉轴的起点对齐

        align-items: flex-end;    交叉轴的终点对齐

        align-items: center ;   交叉轴的中点对齐   

        align-items: baseline;    项目的第一行文字的基线对齐

        align-items: stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。

      }

      .cubic{

        100rpx;

        height:100rpx;

        background:#fff;

      }  

    项目的配置  -- Pages

    {

      “pages”: [

        "page/index/index",

        “page/page02/page02” 

      ],

      "window":{

        "navigationBarBackgroundColor": "#000000",       导航栏背景颜色,如 #000000

        "navigationBarTextStyle": white,                            导航栏标题颜色,仅支持 black / white

        "navigationBarTitleText": "我的标题",      导航栏标题文字内容

        "navigationStyle": default,          导航栏样式,仅支持以下值:default 默认样式,custom 自定义导航栏,只保留右上角胶囊按钮

        "backgroundColor": "#fff",           窗口的背景色

        "backgroundTextStyle": drak,         下拉 loading 的样式,仅支持 dark / light

        "backgroundColorTop": "#ffffff",        顶部窗口的背景色,仅 iOS 支持

        "backgroundColorBottom": "#ffffff",      底部窗口的背景色,仅 iOS 支持

        "enablePullDownRefresh": false,       是否全局开启下拉刷新。

        "onReachBottomDistance": 50        页面上拉触底事件触发时距页面底部距离,单位为px。 

      },

      "tarBar":{

        “color”:             //tab 上的文字默认颜色

        “selectColor”:          //tab 上的文字选中时的颜色

        “backgroundColor”         //tab 的背景色

        ”borderStyle“:           //tabbar上边框的颜色, 仅支持 black / white

        "position":           //tabBar的位置,仅支持 bottom / top  

        “list": [              //tab 的列表,详见 list 属性说明,最少2个、最多5个 tab

          {

            ”pagePath”: “page/index/index”,      //页面路径,必须在 pages 中先定义

            "text": "首页",              //tab 上按钮文        

            "iconPath":               //图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion 为 top 时,不显示 icon。

            "selectedIconPath":           //选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。当 postion 为 top 时,不显示 icon。  

          },

          {

            ”pagePath”: “page/index/index”,

            "text": "首页"

          }

        ]

      },

      "networkTimeout": {         //各类网络请求的超时时间,单位均为毫秒。

        "request": 60000,        //wx.request 的超时时间,单位毫秒。

        "connectSocket": 60000,      // wx.connectSocket 的超时时间,单位毫秒。

        “uploadFile”: 60000,       //wx.uploadFile 的超时时间,单位毫秒。

        "downloadFile": 600000      //wx.downloadFile 的超时时间,单位毫秒。

      },

      "debug": true

      // 避坑提示:pages里面,第一个是缺省启动页面,这个约定俗称,无法通过其他方法控制

      //  避坑提示:在tarBar上没有涉及的页面,tarbar不显示。

    }

    //页面配置

    {

        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "微信接口功能演示",
        "backgroundColor": "#eeeeee",
        "backgroundTextStyle": "light",
      "disableScroll":false            //设置为 true 则页面整体不能上下滚动;只在页面配置中有效,无法在 app.json 中设置该项
      "onReachBottomDistance": 50,        页面上拉触底事件触发时距页面底部距离,单位为px。
      "enablePullDownRefresh": false,      //是否全局开启下拉刷新
    }

    onPullDownRefresh()

      监听用户下拉刷新事件。

      • 需要在app.jsonwindow选项中或页面配置中开启enablePullDownRefresh
      • 可以通过wx.startPullDownRefresh触发下拉刷新,调用后触发下拉刷新动画,效果与用户手动下拉刷新一致。
      • 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。

    onReachBottom()

      监听用户上拉触底事件。

      • 可以在app.jsonwindow选项中或页面配置中设置触发距离onReachBottomDistance
      • 在触发距离内滑动期间,本事件只会被触发一次。

    onPageScroll(Object)

      监听用户滑动页面事件。

    nShareAppMessage(Object)

      监听用户点击页面内转发按钮(<button> 组件 open-type="share")或右上角菜单“转发”按钮的行为,并自定义转发内容。

      注意:只有定义了此事件处理函数,右上角菜单才会显示“转发”按钮

      

  • 相关阅读:
    健康检查详解:机制、配置、对比、实操
    制作自签名证书
    常用的UML建模
    UML建模更好的表达产品逻辑
    常用的UML建模
    UML建模图实战笔记
    领域驱动设计学习之路—DDD的原则与实践
    DDD领域驱动设计理论篇
    WAN、LAN、WLAN三种网口的区别
    新生代Eden与两个Survivor区的解释
  • 原文地址:https://www.cnblogs.com/sklhtml/p/9687083.html
Copyright © 2011-2022 走看看