微信小程序

image.png

基礎(chǔ)技術(shù)設(shè)備

image.png

開發(fā)者工具的使用

image.png

框架全局文件

• App.js小程序邏輯
  App.js文件用來(lái)定義全局?jǐn)?shù)據(jù)和 函數(shù)的使用狡恬，它可以指定微信小程序 的生命周期函數(shù)嫉嘀。生命周期函數(shù)可以 理解為微信小程序自己定義的函數(shù)， 如onLaunch（監(jiān)聽小程序初始化）步绸、 onShow（監(jiān)聽小程序顯示）周蹭、onHide（監(jiān)聽小程序隱藏）等慢睡，在不同階段、 不同場(chǎng)景可以使用不同的生命周期函 數(shù)描融。此外铝噩，App.js中還可以定義一些全 局的函數(shù)和數(shù)據(jù)，其他頁(yè)面引用App.js 文件后就可以直接使用全局函數(shù)和數(shù) 據(jù)窿克，如圖所示骏庸。
  

  image.png

• App.json小程序公共設(shè)置

image.png

image.png

• 工具類文件

  在微信小程序框架目錄里有一個(gè)“utils”文件夾毛甲，它用來(lái)存放工具欄的js函數(shù)，如可以放置一些 日期格式化的函數(shù)具被、時(shí)間格式化的函數(shù)等一些常用的函數(shù)玻募。定義完這些函數(shù)后， 要通過(guò)
  module.exports將定義的函數(shù)名稱注冊(cè)進(jìn)來(lái)一姿，在其他的頁(yè)面才可以使用七咧，如圖所示為時(shí)間格式化工 具類文件。
  
  image.png

• 框架頁(yè)面文件結(jié)構(gòu)

  一個(gè)小程序框架頁(yè)面文件由4個(gè)文件組成叮叹，分別是js頁(yè)面邏輯艾栋、wxml頁(yè)面結(jié)構(gòu)、wxss頁(yè)面 樣式表和json頁(yè)面配置蛉顽，如表所示蝗砾。

• image.png

• 框架頁(yè)面文件

微信小程序的框架頁(yè)面文件都是放置在“pages”文 件夾下面的，如圖所示携冤。每個(gè)頁(yè)面都有一個(gè)獨(dú)立的文件夾悼粮，就像日志頁(yè)面的“l(fā)ogs”文件夾， 它的下面放置4個(gè)文件：logs.js可進(jìn)行 業(yè)務(wù)路徑處理噪叙；logs.json是頁(yè)面的配置矮锈，可以覆蓋全局App.json配置；logs.wxml是頁(yè)面結(jié)構(gòu)睁蕾，負(fù)責(zé)渲染頁(yè)面苞笨；logs.wxss是針對(duì)logs.wxml頁(yè)面的樣式文件。

image.png

• 微信小程序注冊(cè)程序應(yīng)用

App.js文件不僅可以定義全局函數(shù)和數(shù)據(jù)子眶，還可以注冊(cè)一個(gè)小程序瀑凝。在App()函數(shù)里可以完 成小程序的注冊(cè)以及指定其生命周期函數(shù)。如表所示為生命周期函數(shù)的定義臭杰。

• image.png

  1. onLaunch生命周期函數(shù)粤咪。它用來(lái)監(jiān)聽小程序初始化，一旦初始化完成渴杆，就會(huì)觸發(fā)該函數(shù)寥枝， 這個(gè)生命周期函數(shù)只會(huì)觸發(fā)一次。

  2. onShow生命周期函數(shù)磁奖。它用來(lái)監(jiān)聽小程序顯示囊拜。微信小程序有前后臺(tái)定義。當(dāng)用戶單擊左上角的“關(guān)閉”按鈕或者按“Home”鍵關(guān)閉或者突然來(lái)電話時(shí)比搭，微信小程序都沒(méi)有銷毀冠跷， 而是進(jìn)入后臺(tái)；當(dāng)再次進(jìn)入微信或者小程序的時(shí)候才會(huì)觸發(fā)onShow生命周期函數(shù)。只要程序啟動(dòng)或者從后臺(tái)進(jìn)入到前臺(tái)都會(huì)觸發(fā)該函數(shù)蜜托。

  3. onHide生命周期函數(shù)抄囚。它用來(lái)監(jiān)聽小程序隱藏，一旦微信小程序從前臺(tái)進(jìn)入到后臺(tái)橄务，就會(huì) 觸發(fā)該函數(shù)幔托。

  4. onError生命周期函數(shù)。它用來(lái)監(jiān)聽小程序腳本或者API是否發(fā)生錯(cuò)誤蜂挪，發(fā)生錯(cuò)誤時(shí)返回錯(cuò) 誤信息柑司。

• 微信小程序頁(yè)面的JS

  在每個(gè)頁(yè)面文件夾里，都有 一個(gè)頁(yè)面對(duì)應(yīng)的js文件锅劝，在這個(gè)文件里的Page()函數(shù)用于注冊(cè)一個(gè)頁(yè)面攒驰。 接受一個(gè)object 參數(shù)，其指定頁(yè)面的初始數(shù)據(jù)故爵、生命周期函數(shù)玻粪、 事件處理函數(shù)等頁(yè)面的所有業(yè)務(wù)邏輯處理都放在這個(gè)文件里。
  object參數(shù)說(shuō)明如表所示诬垂。
  
  image.png

• 生命周期函數(shù)

  1. onLoad頁(yè)面加載劲室。一個(gè)頁(yè)面只會(huì)調(diào)用一次，接收頁(yè)面參數(shù)可以獲取 wx.navigateTo和wx.redirectTo及<navigator/>中的query结窘。

  2. onShow頁(yè)面顯示很洋。每次打開頁(yè)面都會(huì)調(diào)用一次

  3. onReady頁(yè)面初次渲染完成。一個(gè)頁(yè)面只會(huì)調(diào)用一次隧枫，代表頁(yè)面已經(jīng)準(zhǔn)備妥當(dāng)喉磁，可以和視 圖層進(jìn)行交互，對(duì)界面的設(shè)置如wx.setNavigationBarTitle請(qǐng)?jiān)趏nReady之后設(shè)置官脓。

  4. onHide頁(yè)面隱藏协怒。當(dāng)navigateTo或底部Tab切換時(shí)調(diào)用。

  5. onUnload頁(yè)面卸載卑笨。當(dāng)redirectTo或navigateBack時(shí)調(diào)用孕暇。

• 頁(yè)面相關(guān)事件處理函數(shù)

  1. onPullDownRefresh下拉刷新。監(jiān)聽用戶下拉刷新事件赤兴，需要在config的window選項(xiàng)中開 啟enablePullDownRefresh妖滔。當(dāng)處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當(dāng) 前頁(yè)面的下拉刷新桶良。

  2.onShareAppMessage用戶分享座舍。只有定義了此事件處理函數(shù)，右上角菜單才會(huì)顯示“分 享”按鈕艺普，用戶單擊“分享”按鈕的時(shí)候會(huì)調(diào)用簸州，此事件需要 return 一個(gè) Object，用于 自定義分享內(nèi)容歧譬。分享參數(shù)說(shuō)明如表所示岸浑。

image.png

• 頁(yè)面路由管理

  1. 微信小程序的頁(yè)面路由都是有微信小程序框架來(lái)管理的，路由的觸發(fā)方式及頁(yè)面生命周期 函數(shù)如表所示瑰步。

image.png

• 自定義函數(shù)

  1. 除了初始化數(shù)據(jù)和生命周期函 數(shù)矢洲，Page 中還可以定義一些特殊 的函數(shù)：事件處理函數(shù)。在渲染層 可以在組件中加入事件綁定缩焦，當(dāng)達(dá)到觸發(fā)事件時(shí)读虏，就會(huì)執(zhí)行 Page 中 定義的事件處理函數(shù)。

  //寫在wxml
  <view bindtap=”clickMe”> click me </view>
  

  //寫在wxjs
    Page({
        clickMe: function() {  console.log(‘view tap’) }
    })
  

• 微信小程序頁(yè)面綁定數(shù)據(jù)

  1. WXML頁(yè)面里的動(dòng)態(tài)數(shù)據(jù)都是來(lái)自js 文件Page的data袁滥，數(shù)據(jù)綁定就是通過(guò)雙大 括號(hào)（{{}}）將變量包起來(lái)盖桥，在WXML頁(yè)面 里將數(shù)據(jù)值顯示出來(lái)。

   //在 index.wxml寫
    <view> {{ message }} </view>
  

   //在 index.js 寫
  Page({
     data: {
          message: ‘Hello MINA!’
     } 
  })
  

• 組件屬性綁定

  1.組件屬性綁定是將data里的數(shù)據(jù)綁定 到微信小程序的組件上题翻。

  //在 index.wxml寫
  <view id="item-{{id}}"> </view>
  

   //在 index.js 寫
  Page({
    data: { 
       id: 0
    }
  })
  

• 控制屬性綁定

  1. 控制屬性綁定用來(lái)進(jìn)行if語(yǔ)句條件判斷揩徊，如果滿足條件，則執(zhí)行嵌赠，否則 不執(zhí)行塑荒，示例代碼如下。

  //在 index.wxml寫
  <view wx:if="{{condition}}"> </view>
  

   //在 index.js 寫
  Page({
    data: {  
        condition: true
    }
  })
  

• wx:for 列表渲染組件

  1. 在組件上使用wx:for控制屬性綁 定一個(gè)數(shù)組姜挺，即可使用數(shù)組中的各項(xiàng) 數(shù)據(jù)重復(fù)渲染該組件齿税。默認(rèn)數(shù)組當(dāng)前 項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng) 前項(xiàng)的變量名默認(rèn)為item炊豪，示例代碼 如下凌箕。

  //在 index.wxml寫
  <view wx:for="{{array}}">
     {{index}}: {{item.message}}
  </view>
  

   //在 index.js 寫
  Page({
    data: {  
        array: [
            {
            message: ‘foo’,
            } ,
            {
              message: ‘bar’
            }
        ]
    }
  })
  

• 定義模板

  1. 在<template/>內(nèi)定義代碼片段， 使用name屬性作為模板的名字词渤，示 例代碼如下陌知。

  //在 index.wxml寫
   <template name=”msgItem”>
       <view>
           <text> {{index}}: {{msg}} </text>
           <text> Time: {{time}} </text>
       </view>
   </template>
  

• 使用模板

  1.在WXML文件里，使用is屬性掖肋， 聲明需要使用的模板仆葡，然后將模板 所需要的data傳入，示例代碼如下志笼。

  //在 index.wxml寫
  <import src=”item.wxml”/>
  <template is=”msgItem” data=”{{item}}”/> 
  

   //在 index.js 寫
  Page({
    data: {
      item: {  
          index: 0,
          msg: ’this is a template’,  time: '2016-09-15'
      }
    }
  })
  

• include引用

  1.include可以將目標(biāo)文件除了<template/>之外的整個(gè)代碼引入沿盅，相當(dāng)于是復(fù)制到include位置， 示例代碼如下纫溃。

  //在 index.wxml寫
    <!-- index.wxml -->
   <include src=”header.wxml”/>
   <view> body </view>
   <include src=”footer.wxml”/>
  
  

    <!-- header.wxml -->
    <view> header </view>
  

    <!-- footer.wxml -->
    <view> footer </view>