微信小程序之注册配置

小程序页面结构

pages
pages/app.js（小程序注册入口）
pages/app.json（小程序路由配置以及app窗口设置）
pages/app.wxss（小程序公共样式）
pages/moduleName/moduleName.js（小程序模块应用逻辑，MVC中的Model和Control）
pages/moduleName/moduleName.json（小程序应用模块的窗口配置，会覆盖app.json的窗口配置）
pages/moduleName/moduleName.wxml(小程序应用模块页面)
pages/moduleName/moduleName.wxss（小程序应用模块样式）

小程序框架与MVC简述

• 小程序框架

  小程序划分为视图层（View）和逻辑层（AppService）的两层框架，并在视图层和逻辑层之间提供
  数据传输和事件系统。严格意义上，按照MVC的框架模式而言，小程序的逻辑层包含MVC中的Model以及Controller.

• MVC简述

  • View有两层作用，其一是负责从Model层接收、渲染和显示数据;其二是负责接受和传递数据到Controller层；
  • Controller也有两层作用，其一是接收View层抑或是请求URL传递的表单数据，并对表单数据进行控制校验，其二是处理用户交互体验效果，比如在View进行动画效果设置、滚动加载体验等；
  • Model层,负责接受Controller传输的数据并对数据进行逻辑处理后返回给View层。

• MVC优点

  其一，分层的设计有助于管理复杂的应用程序，将数据逻辑与界面显示分离，有助于后期针对相应的层级维护和管理；
  其二，简化分组开发，能够独让负责不同业务模块的开发者进行模块化功能开发，并行推进项目进度

小程序入口文件app.js、app.json以及app.wxss

• app.js,小程序入口配置

  App({
    onLaunch: function() { 
      //小程序生命周期初始化，全局加载(调用)一次，一般是用于程序启动时加载应用共享资源，
    },
    onShow: function() {
      //当小程序启动，或从`后台进入前台显示`，会触发 onShow，监听小程序显示，会被调用多次
    },
    onHide: function() {
       //当小程序从前台进入后台时，会触发onHide事件，会被调用多次
       
    },
    globalData: 'I am global data'
  })  
  

  • 前台：指重新打开小程序显示，即从退出当前应用，用户又打开该应用
  • 后台：是指退出小程序应用（并非完全退出或关闭），相当于按手机返回键退出当前应用，但是小程序还在所谓的【后台】运行
  • App() 必须在 app.js 中注册，且不能注册多个
  • 不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例
  • 不要在 onLaunch 的时候调用 getCurrentPage()，此时 page 还没有生成，补：getCurrentPage()已弃用，改用getCurrentPages()
  • 通过 getApp() 获取实例之后，不要私自调用生命周期函数,即onLaunch,onShow,onHide这三个周期函数,自定义的函数是不属于生命周期函数范围内

• app.json,小程序应用模块的路由配置、窗口以及Tab配置，#仅作为注释说明，实际配置应该去掉

  {
      "pages":[
          "page/index/index", ##page配置的数组的第一项作为小程序的初始页面
          "page/logs/logs"    
      ],  
      
      "window":{
          ## 配置导航条
          "navigationBarBackgroundColor":"#9084cc", ##背景颜色，HexColor类型（16进制颜色值）
          "navigationBarTextStyle":"dark",##标题颜色，仅支持dark/white
          "navigationBarTitleText":"我的订单",##标题内容,String
          
          ## 配置窗口
          "backgroundColor":"#909902",##窗口背景色，HexColor类型
          "backgroundTextStyle":"dark",##下拉背景字体,String,仅支持 dark/light
          
          "enablePullDownRefresh"true，##是否开启下拉刷新
      },
      
      "tabBar":{
          "color":"",             ##tab 上的文字颜色
          "selectedColor":"", ##tab 上的文字选中时的颜色
          "backgroundColor":"",   ##tab 的背景色
          "borderStyle":"",       ##tabbar上边框的颜色， 仅支持 black/white
          
          ##tab 的列表，最少2个、最多5个 tab
          "list":[
              {
                  "pagePath":"",          ##页面路径，必须在 pages 中先定义
                  "text":"",              ##tab 上按钮文字
                  "iconPath":"",          ##图片路径，icon 大小限制为40kb 
                  "selectedIconPath":""  ##选中时的图片路径，icon 大小限制为40kb
              },
          ]
      },
      
      ##时间单位 「毫秒」
      "networkTimeout":{
          "request":3000,        ##   wx.request的超时时间
          "connectSocket":5000, ## wx.connectSocket的超时时间
          "uploadFile":10000, ## wx.uploadFile的超时时间
          "downloadFile":10000  ## wx.downloadFile的超时时间
      },
      
      ##开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 
      "debug":true
  }
  

  • pages是属于Array类型，Array的每一项都是url的字符串，url为相对根目录下的module路径，无需扩展名，框架会自动加载module下的js、wxml、wxss、json文件
  • 配置的pages下的module的js,wxss,json，wxml必须为相同的名称，框架会根据module名称自动加载上述的扩展名文件
  • tab上的list，最少2个、最多5个

• app.wxss

  app.wxss
  /**定义的样式将应用到小程序所有的模块中**/
  view,image,scroll-view,text{
  margin: 0px;
  padding: 0px;
  }
  .headerView{
  width: 100%;
  height: 32px;
  background: floralwhite;
  }
  /**其他样式**/
  .....
  

  • 尺寸单位

    • responsive pixel,即rpx,响应式像素，是一种能够提供各种设备都能阅读的一种设计方法,在微信小程序中，以iphone6作为屏幕标准，1rpx = 0.5px,微信小程序在底层会根据我们设定的px来对屏幕自适应，有助于开发者更集中于开发，应用场景在设置间距、长宽等
    • root em,即rem，是css3新定义的一种长度单位，相对于页面定义的html根元素来调整大小，与em相对父元素调整大小更兼具相对和绝对字体调整大小的优势，在微信小程序中，1rem = 750/20 rpx = 75px，规定标准的iphone6的宽度是20rem，应用场景在于设置字体大小

  • 样式导入

    • 使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束
    • 框架组件上支持使用 style、class 属性来控制组件的样式