Real--微信小程序開(kāi)發(fā)之路（一）
|
作者：Real，來(lái)自原文地址
今天來(lái)為大家講講微信小程序，大概講一下在開(kāi)發(fā)小程序時(shí)需要注意的幾個(gè)點(diǎn)。在開(kāi)始之前先了解下微信小程序是個(gè)什么東西吧。
以上是百度百科中對(duì)微信小程序的定義。簡(jiǎn)單來(lái)講，微信小程序是為了優(yōu)化用戶體驗(yàn)，相對(duì)于原生App來(lái)說(shuō)它具有“用完即走，無(wú)需安裝”的優(yōu)點(diǎn)，而相對(duì)于傳統(tǒng)網(wǎng)頁(yè)來(lái)說(shuō)又具有加載速度更快并且更安全的優(yōu)點(diǎn)?？傊救寺?tīng)喜歡小程序的，看好它。 好了，言歸正傳，拿好筆劃重點(diǎn)咯~~~
一、微信小程序?qū)賳蜗蚪壎?，而并非雙向綁定
什么是單向綁定？什么是雙向綁定？ 單向綁定是MVVM框架中的一種數(shù)據(jù)處理模式，它是將Model（也就是數(shù)據(jù)層）中的數(shù)據(jù)綁定到View（也就是表現(xiàn)層），當(dāng)JS中的數(shù)據(jù)發(fā)生改變時(shí)，View也會(huì)相應(yīng)發(fā)生改變。而雙向綁定則更加強(qiáng)大，當(dāng)View中數(shù)據(jù)發(fā)生改變時(shí)，JS中的數(shù)據(jù)也會(huì)響應(yīng)發(fā)生改變，一般是用在表單當(dāng)中。 個(gè)人覺(jué)得微信小程序長(zhǎng)得非常像最近特別火的前端框架Vue.js，Vue小而輕，用起來(lái)特別方便，而且很容易入門，屬雙向綁定。但是小程序雖然表面長(zhǎng)得跟Vue很像，卻只能單向綁定數(shù)據(jù)，Model改變View則跟著改變，View改變Model卻不變。 那問(wèn)題來(lái)了，有時(shí)候表單類控件內(nèi)容發(fā)生改變時(shí)需要在Model中相應(yīng)做出改變時(shí)怎么處理呢？ 這個(gè)其實(shí)也不難，對(duì)小程序開(kāi)發(fā)文檔相對(duì)熟悉的應(yīng)該知道，表單類控件一般都帶有類似bindinput和bindchange之類的事件處理屬性，這樣就可以用這些屬性綁定自定義函數(shù)來(lái)改變Model中的數(shù)據(jù)了。
二、不能通過(guò)this.key=value的方式來(lái)直接改變Model中的內(nèi)容進(jìn)而改變View
這也是小程序與Vue的區(qū)別之一。Vue可以直接通過(guò)this.key=value的方式直接改變View，而小程序只能通過(guò)this.setData({ key: value })的方式來(lái)改變View。但是需要注意的是，小程序當(dāng)中也可以使用this.key=value，但是并不能改變Model，只是在Page對(duì)象中創(chuàng)建一個(gè)新的屬性并賦值而已，一般可以通過(guò)此方式來(lái)實(shí)現(xiàn)Page對(duì)象屬性之間的通信。簡(jiǎn)單舉個(gè)栗子吧~~~
下面將繼續(xù)分享我在開(kāi)發(fā)小程序過(guò)程中所遇到的“坑”。 一、onLaunch方法只能在app.js中的App()中定義 這個(gè)其實(shí)熟悉文檔的話就很好理解了，onLaunch方法只在小程序初始化完成時(shí)觸發(fā)，全局只觸發(fā)一次，所以在頁(yè)面的Page()中寫這玩意兒是無(wú)效的，當(dāng)然也不會(huì)報(bào)錯(cuò)，這才導(dǎo)致新手容易犯錯(cuò)。 二、局部js文件若要調(diào)用app.js中的方法或獲取其中的數(shù)據(jù)，可通過(guò)getApp()的方式來(lái)獲取 首先需要強(qiáng)調(diào)的是，app.js雖然說(shuō)可以定義全局方法或數(shù)據(jù)，但是在局部js文件中卻無(wú)法直接調(diào)用。其次還需注意的是，在app.js中的全局方法必須要在App()中定義，否則無(wú)法在局部調(diào)用。簡(jiǎn)單舉個(gè)栗子吧~~~
//app.js
App({
b(){
console.log("b");
},
globalData:{
ccc: 'ccc'
}
})
function a(){
console.log('a');
}
//pages/test/test.js
var app = getApp();
Page({
data:{},
onLoad:function(options){
// a(); // 報(bào)錯(cuò)
// app.a(); // 報(bào)錯(cuò)
app.b(); // b
console.log(app.globalData.ccc); // ccc
}
})
其實(shí)這樣也不難理解，我們通過(guò)getApp方法可以直接獲取小程序?qū)嵗?，然后就能很開(kāi)心的調(diào)用和獲取App()中定義的方法和數(shù)據(jù)咯~~ 三、若項(xiàng)目中需要使用登錄接口wx.login()，在使用微信開(kāi)發(fā)工具建項(xiàng)目時(shí)須填入AppID
四、支持JSON.stringigy()和JSON.parse()這兩個(gè)方法，但需要注意的是，使用JSON.parse()時(shí)傳入的參數(shù)必須是標(biāo)準(zhǔn)的JSON格式的字符串 剛開(kāi)始以為小程序不支持JSON.parse()方法，因?yàn)樵趯?shí)際用的時(shí)候報(bào)錯(cuò)了，后來(lái)才發(fā)現(xiàn)原來(lái)是自己JS技術(shù)不過(guò)關(guān)。在使用該方法時(shí)，要特別注意傳入的參數(shù)格式，舉個(gè)例子：
// pages/test/test.js
var app = getApp();
Page({
data:{},
onLoad:function(options){
console.log(JSON.stringify({aaa: 111})); // 這個(gè)方法倒是可以傳入普通的JS對(duì)象字面量，返回{"aaa":111}，這是個(gè)字符串
console.log(JSON.parse('{"aaa": 111}')); // 標(biāo)準(zhǔn)的JSON格式的字符串，返回{aaa: 111}，這是個(gè)對(duì)象
// console.log(JSON.parse("{'aaa': 111}")); // 報(bào)錯(cuò)
// console.log(JSON.parse("{aaa: 111}")); // 報(bào)錯(cuò)
}
})
其實(shí)就是考驗(yàn)對(duì)這兩個(gè)JS方法的掌握，跟小程序沒(méi)啥關(guān)系，對(duì)這兩個(gè)方法特別熟悉的可以直接跳過(guò)。 結(jié)后語(yǔ)：其實(shí)不管學(xué)什么，都不能僅僅只停留在理論，否則理論再好你也不一定掌握，學(xué)習(xí)的精髓其實(shí)在于多看、多練和多寫。比如你看完本文，或許你覺(jué)得某個(gè)地方可能不太正確，這時(shí)候你就可以自己寫個(gè)Demo試一試，最后你可能覺(jué)得這個(gè)知識(shí)點(diǎn)很好可又擔(dān)心記不住，這時(shí)候你就應(yīng)該把它寫下來(lái) |
