小程序模板網(wǎng)

小程序入門總結(jié)篇

發(fā)布時間:2018-08-10 10:59 所屬欄目:小程序開發(fā)教程

須知

  • App() 必須在 app.js 中注冊,且不能注冊多個。
  • 編譯后的代碼包大小需小于 1MB ,否則代碼包將上傳失敗。
  • 每個頁面需要手動在 app.json 中進行注冊,否則不能訪問。
  • app.json 中 pages 數(shù)組的第一項代表小程序的初始頁面,小程序中新增/減少頁面,都需要對 pages 數(shù)組進行修改。
  • 直接修改 this.data 無效,無法改變頁面的狀態(tài),還會造成數(shù)據(jù)不一致。
  • 單次設置的數(shù)據(jù)不能超過 1024kB ,請盡量避免一次設置過多的數(shù)據(jù)。
  • 不要嘗試修改頁面棧,會導致路由以及頁面狀態(tài)錯誤。
  • tabBar 只能配置最少2個、最多5個, tab 按數(shù)組的順序排序。
  • 小程序頁面只能同時打開 5 個,如果交互流程較長難以支持。
  • 同時只能存在 5 個 url 請求。
  • 無法跳轉(zhuǎn)小程序以外的 url 。
  • 沒有 cookie 。
  • 沒有開放加載 web 頁面
  • 沒有a標簽鏈接,不可嵌套 iframe
  • 沒有 window 變量,但微信提供了wx全局方法集
  • 事件綁定和條件渲染類似 Angular ,全部寫在 WXML 中

1.1 主體

由 app.js 、 app.json 、 app.wxss 三個文件組成,放在根目錄

  • app.js 根目錄的 app.js 很有用,因為在它內(nèi)部注冊的變量或方法,都是可以被所有頁面獲取到。可以監(jiān)聽并處理小程序的生命周期、聲明全局變量。其余的 .js 文 件可以通過 var app = getApp() 獲取其實例,調(diào)用其中定義的方法和變量,但不可以調(diào)用生命周期的方法
  • app.json 是小程序的全局配置

pages 配置小程序的組成頁面,第一個代表小程序的初始頁面
window  設置小程序的狀態(tài)欄、標題欄、導航條、窗口背景顏色
tabBar  配置小程序tab欄的樣式和對應的頁面
  • app.wxss 是小程序的公共樣式表,可以在其他 .wxss 文件中直接使用

app.json


"pages": [ //設置頁面的路徑
  "pages/index/index", //不需要寫index.wxml,index.js,index,wxss,框架會自動尋找并整合
  "pages/logs/logs"
],
"window": { //設置默認窗口的表現(xiàn)形式
  "navigationBarBackgroundColor": "#ffffff", //頂部導航欄背景色
  "navigationBarTextStyle": "black", //頂部導航文字的顏色 black/white
  "navigationBarTitleText": "微信接口功能演示", //頂部導航的顯示文字
  "backgroundColor": "#eeeeee", //窗口的背景色
  "backgroundTextStyle": "light", //下拉背景字體、loading 圖的樣式,僅支持 dark/light
  "enablePullDownRefresh": "false", //是否支持下拉刷新 ,不支持的話就直接不寫!
  "disableScroll": true, //  設置true不能上下滾動,true/false,注意!只能在 page.json 中有效,無法在 app.json 中設置該項。
},
"tabBar": { //底部tab或者頂部tab的表現(xiàn),是個數(shù)組,最少配置2個,最多5個
  "list": [{ //設置tab的屬性,最少2個,最多5個
    "pagePath": "pages/index/index", //點擊底部 tab 跳轉(zhuǎn)的路徑
    "text": "首頁", //tab 按鈕上的文字
    "iconPath": "../img/a.png", //tab圖片的路徑
    "selectedIconPath": "../img/a.png" //tab 在當前頁,也就是選中狀態(tài)的路徑
  }, {
    "pagePath": "pages/logs/logs",
    "text": "日志"
  }],
  "color": "red", //tab 的字體顏色
  "selectedColor": "#673ab7", //當前頁 tab 的顏色,也就是選中頁的
  "backgroundColor": "#2196f3", //tab 的背景色
  "borderStyle": "white", //邊框的顏色 black/white
  "position": "bottom" //tab處于窗口的位置 top/bottom
  },
"networkTimeout": { //默認都是 60000 秒一分鐘
    "request": 10000, //請求網(wǎng)絡超時時間 10000 秒
    "downloadFile": 10000, //鏈接服務器超時時間 10000 秒
      "uploadFile": "10000", //上傳圖片 10000 秒
    "downloadFile": "10000" //下載圖片超時時間 10000 秒
  },
"debug": true //項目上線后,建議關閉此項,或者不寫此項

1.2 pages

pages 文件夾里是小程序的各個頁面,每個界面一般都由 .wxml 、 .wxss 、 .js 、 .json四個文件組成,四個文件必須是相同的名字和路徑

  • .js 是頁面的腳本代碼,通過 Page() 函數(shù)注冊頁面。可以指定頁面的初始數(shù)據(jù)、生命周期、事件處理等
  • .wxml 是頁面的布局文件,只能使用微信定義的組件
  • .wxss 是樣式表,需要注意
    • 尺寸單位: rpx 可以根據(jù)屏幕的寬帶進行自適應
    • 樣式導入: @import 導入外聯(lián)樣式表,如: @import "test.wxss" ;
    • 定義在 app.wxss 中的全局樣式,作用于每個頁面。定義在 page 的 .wxss 文件只作用于對應的頁面,會覆蓋 app.wxss 中相同的選擇器
  • .json 是頁面的配置文件,只能設置 app.json 中的 window 配置內(nèi)容,會覆蓋 app.json 中 window 的相同配置項,即使不配置任何東西也需要寫 {} ,否則會報錯

1.3 utils

utils 里面包含一些公共的代碼抽取的 js 文件,作為模塊方便使用。模塊通過 module.exports 對外暴露接口

  • 其他地方使用是 var utils = require('../../utils/util.js') 進行引用

二、視圖層 WXML

2.1 數(shù)據(jù)綁定

傳統(tǒng)的視圖和數(shù)據(jù)綁定

那么微信小程序是通過什么方法來管理視圖和對象綁定的呢,狀態(tài)模式-單向數(shù)據(jù)流

數(shù)據(jù)流向是單向的,即視圖變化不會影響對象狀態(tài)


UI

.wxml 中的動態(tài)數(shù)據(jù)都來自 Page 中的 data 。數(shù)據(jù)綁定使用數(shù)據(jù)綁定使用雙大括號將變量包起來,可以作用于內(nèi)容、組件屬性(需要在雙引號之內(nèi))、控制屬性(需要在雙引號之內(nèi))、關鍵字(需要在雙引號之內(nèi))


Page({
    data: {
        message: "Hello",
        id:0,
        status: true
    }
})

<view> {{message}} view>
<view id="item-{{id}}"> view>
<view wx:if="{{status}}"> view>
<view hidden="{{status}}"> checkbox>

還可以進行簡單的運算在大括號里


<view hidden="{{status ? true : false}}"> Hidden view>
<view> {{a + b}} + c view> 
<view wx:if="{{num > 6}}"> view>
<view>{{"hello" + word}}view>

2.2 條件渲染

用 wx:if=”” 來判斷是否渲染代碼塊


<view wx:if="{{status}}"> isShow view>

還可以添加 else 塊


<view wx:if="{{num > 5}}"> A view>
<view wx:elif="{{num > 2}}"> B view>
<view wx:else> C view>

2.3 列表渲染

  • 在組件上使用 wx:for 屬性綁定一個數(shù)組,就可以渲染組件了
  • 默認情況下數(shù)組的當前下標變量名為 index ,當前項的變量名為 item

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
view>

Page({
  data: {
    array: ["AA","BB","CC"]
  }
})

使用 wx:for-item 可以指定數(shù)組當前元素的變量名,使用 wx:for-index 可以指定數(shù)組當前下標的變量名


<view wx:for="{{array}}" wx:for-index="num" wx:for-item="itemName">
  {{num}}: {{itemName}}
view>

2.4 模板template

  • name 定義組件模版的名稱,引用模版的時候使用 is 屬性指定模版的名字, is 可以進行簡單的三目運算,需要傳入模版需要的 data 數(shù)據(jù)。
  • 因為模版擁有自己的作用域,所以只能使用 data 傳入數(shù)據(jù),而不接受雙花括號的寫法

<template name="msgItem">
<view>
<text> {{index}}: {{msg}} text>
<text> Time: {{time}} text>
view>
template>


<template is="msgItem" data="{{...item}}"/>

2.5 公共模塊的引用

  • WXML 提供 import 和 include 兩種文件引用方式。
  • import 有作用域的概念,不能多重引用

<import src="a.wxml"/>


<template name="A">
 <text> A template text>
template>

include 就可以多重引用


<include src="header.wxml"/>
<view> body view>


<view> header view>
<include src="footer.wxml"/>

2.6 事件

  • 名稱以 bind 開頭的事件不阻止冒泡,名稱以 catch 開頭的事件冒泡是阻止的。如 bindTap和 catchTab
  • 在 WXM L 中,可以使用 dataset 定義 data 中的數(shù)據(jù),會通過事件傳遞。它的事件以 data-開頭,多個單詞以 - 鏈接,如 data-a-b

三、生命周期

3.1 App()應用生命周期


onLaunch
onShow
onHide
onShow
onError

前臺、后臺定義: 當用戶點擊左上角關閉,或者按了設備 Home 鍵離開微信,小程序并沒有直接銷毀,而是進入了后臺;當再次進入微信或再次打開小程序,又會從后臺進入前臺


//app.js
App({
  onLaunch: function() { 
      //小程序初始化(全局只觸發(fā)一次)
  },
  onShow: function() {
      //小程序顯示
  },
  onHide: function() {
      //小程序隱藏
  },
  onError: function(msg) {
      //小程序錯誤
  },
})
//其他 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 Object 參數(shù)中,用 this 可以訪問

3.2 Page頁面生命周期

每個頁面也有自己的生命周期

  • 小程序注冊完成后,加載頁面,觸發(fā) onLoad 方法。
  • 頁面載入后觸發(fā) onShow 方法,顯示頁面。
  • 首次顯示頁面,會觸發(fā) onReady 方法,渲染頁面元素和樣式,一個頁面只會調(diào)用一次。
  • 當小程序后臺運行或跳轉(zhuǎn)到其他頁面時,觸發(fā) onHide 方法。
  • 當小程序有后臺進入到前臺運行或重新進入頁面時,觸發(fā) onShow 方法。
  • 當使用重定向方法 wx.redirectTo(OBJECT) 或關閉當前頁返回上一頁 wx.navigateBack() ,觸發(fā) onUnload

//index.js
Page({
  onLoad: function(options) {
    //頁面加載-----(一個頁面只會調(diào)用一次)
  },
  onReady: function() {
    //頁面渲染-----(一個頁面只會調(diào)用一次)
  },
  onShow: function() {
    //頁面顯示-----(每次打開頁面都會調(diào)用一次)
  },
  onHide: function() {
    //頁面隱藏-----(當navigateTo或底部tab切換時調(diào)用)
  },
  onUnload: function() {
    //頁面卸載-----(當redirectTo或navigateBack的時候調(diào)用)
  },
})
//其他 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中,在頁面的函數(shù)中用 this 可以訪問

3.3 應用生命周期影響頁面生命周期

  • 小程序初始化完成后,頁面首次加載觸發(fā) onLoad ,只會觸發(fā)一次。
  • 當小程序進入到后臺,先執(zhí)行頁面 onHide 方法再執(zhí)行應用 onHide 方法。
  • 當小程序從后臺進入到前臺,先執(zhí)行應用 onShow 方法再執(zhí)行頁面 onShow 方法

四、小程序限制

4.1 程序限制

  • 腳本內(nèi)不能使用 window 等對象
  • zepto/jquery 會使用到 window 對象和 document 對象,所以無法使用。
  • 樣式表不支持級聯(lián)選擇器
  • 本地資源無法通過 css 獲取 background-image 可以使用網(wǎng)絡圖片,或者 base64 ,或者使用標簽
  • 不支持 A 標簽,無法打開普通網(wǎng)頁

4.2 數(shù)量限制

  • 底部或頂部可以添加 tab 按鈕區(qū)域 tabBar 是一個數(shù)組,只能配置最少2個、最多5個 tab , tab 按數(shù)組的順序排序。
  • 一個應用同時只能打開5個頁面
  • 小程序的 wx.request 請求最開始最大并發(fā)數(shù)是5個,后來,估計隨著用小程序的越來越多,總之,就是增加到了10個

4.3 大小限制

  • tabBar 上面的按鈕 iconPath 圖片路徑, icon 大小限制為 40kb
  • tabBar 上面的按鈕 selectedIconPath 選中時的圖片路徑, icon 大小限制為 40kb
  • setData 頁面?zhèn)鬟f數(shù)據(jù)單次設置的數(shù)據(jù)不能超過 1024kB
  • setStorage 本地緩存最大為 10MB
  • 小程序源碼打包后的大小限制為 1M

五、路由

  • 微信路由接口有三個,分別是 wx.redirectTo 、 wx.navigateTo 和 wx.switchTab 
    wx.navigateTo 全局最多調(diào)用5次
  • 如果某頁面設置為 tab 頁,則只支持 wx.switchTab ,不支持其他兩種路由方式訪問

5.1 哪些情況會觸發(fā)頁面跳轉(zhuǎn)

  • 小程序啟動,初始化第一個頁面
  • 打開新頁面,調(diào)用 API wx.navigateTo 或使用  組件
  • 頁面重定向,調(diào)用 API wx.redirectTo 或使用  組件
  • 頁面返回,調(diào)用 API wx.navigateBack 或用戶按左上角返回按鈕
  • tarbar 切換

5.2 如何跳轉(zhuǎn)頁面

  • 使用 wx.navigateTo 接口跳轉(zhuǎn),原頁面保留

wx.navigateTo({
  //目的頁面地址
  url: 'pages/logs/index',
  success: function(res){},
  ...
})
  • 使用 wx.redirectTo 接口跳轉(zhuǎn),關閉原頁面,不能返回

wx.redirectTo({
  //目的頁面地址
  url: 'pages/logs/index',
  success: function(res){},
  ...
})

5.3 使用組件


"pages/logs/index" hover-class="navigator-hover">跳轉(zhuǎn)

當該組件添加 redirect 屬性時,等同于 wx.redirectTo 接口;默認 redirect 屬性為 false,等同于 wx.navigateTo 接口

用戶點擊左上角返回按鈕,或調(diào)用 wx.navigateBack 接口返回上一頁


wx.navigateBack({
    delta: 1
})

delta 為1時表示返回上一頁,為2時表示上上一頁,以此類推;如果dalta大于已打開的頁面總數(shù),則返回到首頁。返回后,元界面會銷毀

5.4 頁面跳轉(zhuǎn)傳值


url?key=value&key1=value1

傳遞的參數(shù)沒有被 URIEncode ,傳遞中文沒有亂碼

5.5 如何正確使用頁面跳轉(zhuǎn)

官方規(guī)定小程序最多只能有五個頁面同時存在,意思是在不關閉頁面的情況,最多新開五個頁面,頁面深度為5

  • 對于可逆操作,使用 wx.navigateTo ,比如從首頁跳轉(zhuǎn)到二級頁面,從二級頁面返回是不需要重新渲染首頁
  • 對于不可逆操作,使用 wx.redirectTo ,比如用戶登錄成功后,關閉登錄頁面,不能返回到登錄界面。
  • 對于一些介紹性等不常用頁面 wx.redirectTo 或 wx.navigatrBack
  • 不要在首頁使用 wx.redirectTo ,這樣會導致應用無法返回首頁

5.6 頁面棧


getCurrentPages()

使用wx.navigateTo每新開一個頁面,頁面棧大小加1,直到頁面棧大小為5為止

使用wx.navigateTo重復打開界面

假如使用wx.navigateTo從四級頁面跳轉(zhuǎn)到二級頁面,此時會在頁面棧頂添加一個與二級頁面初始狀態(tài)一樣的界面,但兩個頁面狀態(tài)是獨立的。頁面棧大小會加1,如果頁面棧大小為5,則wx.navigateTo無效

使用wx.redirectTo重定向

假如使用wx.redirectTo從四級頁面重定向到二級頁面,此時會將關閉四級頁面,并使用二級頁面替換四級頁面,但兩個頁面狀態(tài)是獨立的。此時的頁面棧大小不變,請注意和使用wx.navigateTo的區(qū)別

使用wx.navigateBack返回

總結(jié)


wx.navigateTo
wx.redirectTo
wx.navigateBack

六、數(shù)據(jù)通信

6.1 頁面之間的通信


app.globalData
wx.setStorageSync
url

// A頁面-傳遞數(shù)據(jù)

// 需要注意的是,wx.switchTab 中的 url 不能傳參數(shù)。
wx.navigateTo({
   url:'../pageD/pageD?name=raymond&gender=male'
})

// B頁面-接收數(shù)據(jù)//

//通過onLoad的option...

Page({
onLoad: function(option){
 console.log(option.name +'is'+ option.gender)// raymond is male
  this.setData({option: option })
}})

6.2 參數(shù)傳遞

6.2.1 小程序傳遞參數(shù)的方式

1、通過在 App.js 中設置全局變量

通常把不會更改的數(shù)據(jù)放在 app.js 的 Data 中,在各個頁面中都可以通過 APP 實例獲取 Data 數(shù)據(jù)


var app = getApp();
var data = app.data;

2、通過拼接 URL 直接傳遞

wx.navigateTo({}) 中 URL 攜帶參數(shù)


wx.navigateTo({
  url: 'test?id=1'
});

在wxml中使用 navigator 跳轉(zhuǎn)url傳遞參數(shù)

代碼如下,將要傳遞到另一個頁面的字符串testId的值賦值到url中


class="test-item" url="../../pages/test/test?testId={{testData.testId}}">navigator>

在 js 頁面中 onLoad 方法中接收


Page({
  onLoad: function(options) {
      var testId = options.testId
      console.log(testId)
  }
})

navigator 跳轉(zhuǎn) url 傳遞數(shù)組

如果一個頁面要將一個數(shù)組,如相冊列表傳遞到另一個頁面


class="test-item" url="../../pages/test/test?albumList={{testData.albumList}}">navigator>

傳遞到js后從 options 中得到的是個字符串,每個圖片的url通過’,’分隔,所以此時還需要對其進行處理,重新組裝為數(shù)組


Page({
    data: {
         // 相冊列表數(shù)據(jù)
        albumList: [],
    },    
    onLoad: function (options) {
        var that = this;

        that.setData({
            albumList: options.albumList.split(",")
        });
    }
})

3、在wxml中綁定事件后,通過 data-hi="參數(shù)" 的方式傳遞

這種方式一般是在wxml中綁定事件,同時設置需要傳遞的數(shù)據(jù),如果需要傳遞多個,可以寫多個 data-[參數(shù)] 的方式進行傳遞


<view bindtap="clickMe" data-testId={{testId}}">
    ...
view>

在js頁面中自定義方法clickMe中接收


Page({
    clickMe: function(event) {
        var testId = event.currentTarget.dataset.testid;
        wx.navigateTo({
            url: '../../pages/test/test'
        })
    }
})

wxml中配置data-albumlist傳遞數(shù)組


<view bindtap="clickMe" data-albumlist={{testData.albumList}}">
    
view>

在js頁面中自定義方法clickMe中接收

Page({
    clickMe: function(event) {
        var albumList = event.currentTarget.dataset.albumlist.split(",");
        wx.navigateTo({
            url: '../../pages/test/test'
        })
    }
})

4、通過數(shù)據(jù)緩存存儲再獲取

wx.setStorageSync(KEY,DATA) 存儲數(shù)據(jù)


try {
  wx.setStorageSync('key', 'value')
} catch (e) {    
}

wx.getStorageSync(KEY) 獲取數(shù)據(jù)


try {
  var value = wx.getStorageSync('key')
  if (value) {
    // Do something with return value
  }
} catch (e) {
   // Do something when catch error
}
或
wx.getStorage({
  key: 'key',
  success: function(res) {
     console.log(res.data)
  }
})

七、疑問匯總

為什么腳本內(nèi)不能使用window等對象

  • 頁面的腳本邏輯是在 JsCore 中運行,JsCore是一個沒有窗口對象的環(huán)境,所以不能在腳本中使用 window ,也無法在腳本中操作組件

為什么 zepto/jquery 無法使用

  • zepto/jquery 會使用到 window 對象和 document 對象,所以無法使用

wx.navigateTo無法打開頁面

  • 一個應用同時只能打開5個頁面,當已經(jīng)打開了5個頁面之后, wx.navigateTo 不能正常打開新頁面。請避免多層級的交互方式,或者使用 wx.redirectTo

樣式表不支持級聯(lián)選擇器

  • WXSS 支持以 . 開始的類選擇器

本地資源無法通過 css 獲取

  • background-image :可以使用網(wǎng)絡圖片,或者 base64 ,或者使用  標簽

如何修改窗口的背景色

  • 使用 page 標簽選擇器,可以修改頂層節(jié)點的樣式

page { 
  display: block; 
  min-height: 100%; 
  background-color: red;
}

為什么上傳不成功

  • 為了提升體驗流暢度,編譯后的代碼包大小需小于 1MB ,大于 1MB 的代碼包將上傳失敗

HTTPS 請求不成功

  • tls 僅支持 1.2 及以上版本

微信小程序支持fetch或者promise嗎?

  • promise 工具目前不支持, fetch 客戶端不支持 工具下個版本保持統(tǒng)一

wx.request的POST方法的參數(shù)傳輸服務器接收不到的bug

  • wx.request post 的 content-type 默認為 ‘application/json '
  • 如果服務器沒有用到 json 解釋的話,可以把 content-type 設置回 urlencoded

wx.request({
....
method: "POST",
header: {
"content-type": "application/x-www-form-urlencoded"
},
...
})

wx.uploadFile在手機上返回http碼403

  • 安卓的微信升級到6.5.2及其以上版本

小程序SVG支持嗎?

  • image 的src放遠程svg可以, background-image 里也可以

ipad不能使用小程序?

  • 暫時不支持ipad打開小程序

請問小程序頁內(nèi)支持長按保存圖片或分享圖片嗎?

  • 目前沒有這個功能

微信小程序不支持cookie

  • 使用 Reids 存儲 session

有些手機不支持Object.assign方法,如果使用了該方法會出現(xiàn)莫名其妙的報錯(并不會提示Object.assign is not function,而是導致調(diào)用了Object.assign方法的方法不能被調(diào)用)!

直接寫一個合并對象的方法


function assignObject(o, n) {
    for (var p in n) {
        if (n.hasOwnProperty(p) && (!o.hasOwnProperty(p)))
            o[p] = n[p];
    }
}


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24702.html 復制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢