微信小程序來了，你準備好了嗎？

 

1.小程序是基於webView的開發

2.小程序的服務器域名必定要支持https

3.單個小程序最多不能超過2MB,小程序能夠分包，最多分4個包，因此說小長鬚最大不超過8MB

4.目錄結構

app.js           js邏輯代碼

app.json       配置文件

app.wxss      樣式文件

app.wxml      結構文件

5.onLaunch   生命週期鉤子

6.window用來配置全局的特性

7.navigationBarTextStyle    文本顏色    只有黑色和白色

8.安卓手機設置中的開發者選項，顯示佈局邊界，能夠查看應用是原生的仍是webView

9."enablePullDownRefresh":true    開啓下拉刷新

10.borderStyle    tabbar上邊框的顏色， 僅支持 black / white

position     tabBar的位置，僅支持 bottom / top

其中 list 接受一個數組，只能配置最少2個、最多5個 tab。tab 按數組的順序排序，每一個項都是一個對象

iconPath    圖片路徑，icon 大小限制爲40kb，建議尺寸爲 81px * 81px，不支持網絡圖片。

當 postion 爲 top 時，不顯示 icon。

selectedIconPath   選中時的圖片路徑，icon 大小限制爲40kb，建議尺寸爲 81px * 81px，不支持網絡圖片。
當 postion 爲 top 時，不顯示 icon。

11."debug":true    顯示生命週期調用日誌

12.註冊程序

onLaunch         生命週期回調—監聽小程序初始化    小程序初始化完成時（全局只觸發一次）

onShow            生命週期回調—監聽小程序顯示       小程序啓動，或從後臺進入前臺顯示時
onHide             生命週期回調—監聽小程序隱藏        小程序從前臺進入後臺時

App中既能夠定義方法，又能夠定義屬性

13.小插曲

vue實例中不能夠隨便定義函數，在methods裏面能夠

react中能夠隨便定義

14.註冊頁面

onLoad                       生命週期回調—監聽頁面加載

onReady                     生命週期回調—監聽頁面初次渲染完成

onPullDownRefresh    監聽用戶下拉動做

onReachBottom          頁面上拉觸底事件的處理函數

onShareAppMessage  用戶點擊右上角轉發

onPageScroll              頁面滾動觸發事件的處理函數

onTabItemTap(Object)       點擊 tab 時觸發

15.點擊事件   bindtap

    修改值       this.setData

16.路由（分兩大類，編程式導航和路由組件）

• navigateTo, redirectTo 只能打開非 tabBar 頁面。
• switchTab 只能打開 tabBar 頁面。

有tabBar時

wx.switchTab({

    url: '/pages/index/index',

})

無tabBar時

wx.navigateTo({

   url: '/pages/index/index',

}) 

此方法會在路由棧中保存一條記錄

wx.redirectTo({

   url: '/pages/index/index',

})

此方法不會在路由棧中保存一條記錄

返回操做

back () {

   wx.navigateBack({

 

  })

}

relaunch   從新加載

<navigator open-type='navigateTo' url='/pages/index/index'>

   <button bindtap="handleBtnTap">

      click

   </button>

</navigator>

路由傳參&&接受參數

 

 

 

 

 

 

17.模塊化

方式一：

定義並暴露模塊    module.exports = 'hello'

引用模塊              const m1 = require('../cookbook/views/m1.js')

Page({

   onReady() {

      console.log(m1)

   }

})

方式二：

定義並暴露模塊     export default 'hello world'

引用模塊               import m1 from '../cookbook/views/m1.js'

Page({

   onReady() {

      console.log(m1)

   }

})

18.增長了npm的支持

loadsh   underscore

19.API(API文檔)

20.視圖層（wxml+wxss）

循環

 

 

方式一

 

 

 

 

 

方式二

 

wx:if的使用

 

 

 

hidden的使用

 

 

 

21.模板(template)

模板template必須有一個name屬性

 

 

 

 

 

22.