微信小程序之注冊(cè)配置

小程序頁(yè)面結(jié)構(gòu)

pages
pages/app.js（小程序注冊(cè)入口）
pages/app.json（小程序路由配置以及app窗口設(shè)置）
pages/app.wxss（小程序公共樣式）
pages/moduleName/moduleName.js（小程序模塊應(yīng)用邏輯，MVC中的Model和Control）
pages/moduleName/moduleName.json（小程序應(yīng)用模塊的窗口配置，會(huì)覆蓋app.json的窗口配置）
pages/moduleName/moduleName.wxml(小程序應(yīng)用模塊頁(yè)面)
pages/moduleName/moduleName.wxss（小程序應(yīng)用模塊樣式）

小程序框架與MVC簡(jiǎn)述

• 小程序框架

  小程序劃分為視圖層（View）和邏輯層（AppService）的兩層框架，并在視圖層和邏輯層之間提供
  數(shù)據(jù)傳輸和事件系統(tǒng)。嚴(yán)格意義上，按照MVC的框架模式而言，小程序的邏輯層包含MVC中的Model以及Controller.

• MVC簡(jiǎn)述

  • View有兩層作用，其一是負(fù)責(zé)從Model層接收、渲染和顯示數(shù)據(jù);其二是負(fù)責(zé)接受和傳遞數(shù)據(jù)到Controller層；
  • Controller也有兩層作用，其一是接收View層抑或是請(qǐng)求URL傳遞的表單數(shù)據(jù)，并對(duì)表單數(shù)據(jù)進(jìn)行控制校驗(yàn)，其二是處理用戶交互體驗(yàn)效果，比如在View進(jìn)行動(dòng)畫(huà)效果設(shè)置、滾動(dòng)加載體驗(yàn)等；
  • Model層,負(fù)責(zé)接受Controller傳輸?shù)臄?shù)據(jù)并對(duì)數(shù)據(jù)進(jìn)行邏輯處理后返回給View層。

• MVC優(yōu)點(diǎn)

  其一，分層的設(shè)計(jì)有助于管理復(fù)雜的應(yīng)用程序，將數(shù)據(jù)邏輯與界面顯示分離，有助于后期針對(duì)相應(yīng)的層級(jí)維護(hù)和管理；
  其二，簡(jiǎn)化分組開(kāi)發(fā)，能夠獨(dú)讓負(fù)責(zé)不同業(yè)務(wù)模塊的開(kāi)發(fā)者進(jìn)行模塊化功能開(kāi)發(fā)，并行推進(jìn)項(xiàng)目進(jìn)度

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

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

  App({
    onLaunch: function() { 
      //小程序生命周期初始化，全局加載(調(diào)用)一次，一般是用于程序啟動(dòng)時(shí)加載應(yīng)用共享資源，
    },
    onShow: function() {
      //當(dāng)小程序啟動(dòng)，或從`后臺(tái)進(jìn)入前臺(tái)顯示`，會(huì)觸發(fā) onShow，監(jiān)聽(tīng)小程序顯示，會(huì)被調(diào)用多次
    },
    onHide: function() {
       //當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)時(shí)，會(huì)觸發(fā)onHide事件，會(huì)被調(diào)用多次
       
    },
    globalData: 'I am global data'
  })  
  

  • 前臺(tái)：指重新打開(kāi)小程序顯示，即從退出當(dāng)前應(yīng)用，用戶又打開(kāi)該應(yīng)用
  • 后臺(tái)：是指退出小程序應(yīng)用（并非完全退出或關(guān)閉），相當(dāng)于按手機(jī)返回鍵退出當(dāng)前應(yīng)用，但是小程序還在所謂的【后臺(tái)】運(yùn)行
  • App() 必須在 app.js 中注冊(cè)，且不能注冊(cè)多個(gè)
  • 不要在定義于 App() 內(nèi)的函數(shù)中調(diào)用 getApp() ，使用 this 就可以拿到 app 實(shí)例
  • 不要在 onLaunch 的時(shí)候調(diào)用 getCurrentPage()，此時(shí) page 還沒(méi)有生成，補(bǔ)：getCurrentPage()已棄用，改用getCurrentPages()
  • 通過(guò) getApp() 獲取實(shí)例之后，不要私自調(diào)用生命周期函數(shù),即onLaunch,onShow,onHide這三個(gè)周期函數(shù),自定義的函數(shù)是不屬于生命周期函數(shù)范圍內(nèi)

• app.json,小程序應(yīng)用模塊的路由配置、窗口以及Tab配置，#僅作為注釋說(shuō)明，實(shí)際配置應(yīng)該去掉

  {
      "pages":[
          "page/index/index", ##page配置的數(shù)組的第一項(xiàng)作為小程序的初始頁(yè)面
          "page/logs/logs"    
      ],  
      
      "window":{
          ## 配置導(dǎo)航條
          "navigationBarBackgroundColor":"#9084cc", ##背景顏色，HexColor類型（16進(jìn)制顏色值）
          "navigationBarTextStyle":"dark",##標(biāo)題顏色，僅支持dark/white
          "navigationBarTitleText":"我的訂單",##標(biāo)題內(nèi)容,String
          
          ## 配置窗口
          "backgroundColor":"#909902",##窗口背景色，HexColor類型
          "backgroundTextStyle":"dark",##下拉背景字體,String,僅支持 dark/light
          
          "enablePullDownRefresh"true，##是否開(kāi)啟下拉刷新
      },
      
      "tabBar":{
          "color":"",             ##tab 上的文字顏色
          "selectedColor":"", ##tab 上的文字選中時(shí)的顏色
          "backgroundColor":"",   ##tab 的背景色
          "borderStyle":"",       ##tabbar上邊框的顏色， 僅支持 black/white
          
          ##tab 的列表，最少2個(gè)、最多5個(gè) tab
          "list":[
              {
                  "pagePath":"",          ##頁(yè)面路徑，必須在 pages 中先定義
                  "text":"",              ##tab 上按鈕文字
                  "iconPath":"",          ##圖片路徑，icon 大小限制為40kb 
                  "selectedIconPath":""  ##選中時(shí)的圖片路徑，icon 大小限制為40kb
              },
          ]
      },
      
      ##時(shí)間單位 「毫秒」
      "networkTimeout":{
          "request":3000,        ##   wx.request的超時(shí)時(shí)間
          "connectSocket":5000, ## wx.connectSocket的超時(shí)時(shí)間
          "uploadFile":10000, ## wx.uploadFile的超時(shí)時(shí)間
          "downloadFile":10000  ## wx.downloadFile的超時(shí)時(shí)間
      },
      
      ##開(kāi)發(fā)者工具的控制臺(tái)面板，調(diào)試信息以 info 的形式給出，其信息有Page的注冊(cè)，頁(yè)面路由，數(shù)據(jù)更新，事件觸發(fā) 
      "debug":true
  }
  

  • pages是屬于Array類型，Array的每一項(xiàng)都是url的字符串，url為相對(duì)根目錄下的module路徑，無(wú)需擴(kuò)展名，框架會(huì)自動(dòng)加載module下的js、wxml、wxss、json文件
  • 配置的pages下的module的js,wxss,json，wxml必須為相同的名稱，框架會(huì)根據(jù)module名稱自動(dòng)加載上述的擴(kuò)展名文件
  • tab上的list，最少2個(gè)、最多5個(gè)

• app.wxss

  app.wxss
  /**定義的樣式將應(yīng)用到小程序所有的模塊中**/
  view,image,scroll-view,text{
  margin: 0px;
  padding: 0px;
  }
  .headerView{
  width: 100%;
  height: 32px;
  background: floralwhite;
  }
  /**其他樣式**/
  .....
  

  • 尺寸單位

    • responsive pixel,即rpx,響應(yīng)式像素，是一種能夠提供各種設(shè)備都能閱讀的一種設(shè)計(jì)方法,在微信小程序中，以iphone6作為屏幕標(biāo)準(zhǔn)，1rpx = 0.5px,微信小程序在底層會(huì)根據(jù)我們?cè)O(shè)定的px來(lái)對(duì)屏幕自適應(yīng)，有助于開(kāi)發(fā)者更集中于開(kāi)發(fā)，應(yīng)用場(chǎng)景在設(shè)置間距、長(zhǎng)寬等
    • root em,即rem，是css3新定義的一種長(zhǎng)度單位，相對(duì)于頁(yè)面定義的html根元素來(lái)調(diào)整大小，與em相對(duì)父元素調(diào)整大小更兼具相對(duì)和絕對(duì)字體調(diào)整大小的優(yōu)勢(shì)，在微信小程序中，1rem = 750/20 rpx = 75px，規(guī)定標(biāo)準(zhǔn)的iphone6的寬度是20rem，應(yīng)用場(chǎng)景在于設(shè)置字體大小

  • 樣式導(dǎo)入

    • 使用@import語(yǔ)句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用;表示語(yǔ)句結(jié)束
    • 框架組件上支持使用 style、class 屬性來(lái)控制組件的樣式