微信小程序之注册配置详解

小程序页面结构

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 还没有生成
  • 通过 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 属性来控制组件的样式