微信小程序來了,你準備好了嗎?

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.路由(分兩大類,編程式導航和路由組件)

  • navigateToredirectTo 只能打開非 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屬性
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章