基于后端云微信小程序開發(fā)教程

關(guān)于bmob小程序開發(fā)文檔詳細(xì)簡練，主要是縮短了開發(fā)周期，不過對于復(fù)雜的項(xiàng)目，還是推薦使用自己服務(wù)器。

下面分點(diǎn)分享下小程序的開發(fā)過程中的關(guān)鍵點(diǎn)及感受，說明：

小程序標(biāo)簽統(tǒng)稱組件，Html標(biāo)簽統(tǒng)稱元素。

部分內(nèi)容會(huì)與vuejs及jQuery作對比

使用iconfont字體圖標(biāo)

新建項(xiàng)目并添加圖標(biāo)

定義通用icon樣式，定義偽元素

.icon{

display: inline-block;

font-family: \'iconfont\';

}

.icon-home::before{

content: \\e600;

}

小程序事件綁定及處理器

小程序并沒有類似vuejs的v-model進(jìn)行雙向綁定，使用bindinput類似jQuery監(jiān)聽input事件在事件處理器中更新數(shù)據(jù)，通過event對象e.data.value即可獲得input的值。

bindSearchInput(e) {

this.setData({ searchTxt: e.detail.value

})

}

小程序中的事件處理器并不能像vue一樣傳入?yún)?shù)，因?yàn)槭录幚砥髦挥幸粋€(gè)默認(rèn)的參數(shù)event對象，在for循環(huán)的組件中如果要想獲取元素綁定的id，可以通過和jQuery相同的方式綁定data屬性。

獲取id：

//事件處理函數(shù)
navigateToDetail: function (e) {
const id = e.currentTarget.dataset.id;
}

阻止事件冒泡

bindtap、bindlongtap、bindtouchstart、bindtouchmove、bindtouchend、bindtouchcancle

setData

小程序的視圖更新需要調(diào)用setData修改綁定數(shù)據(jù)，直接對數(shù)據(jù)進(jìn)行修改是不會(huì)觸發(fā)視圖層更新的。setData接受一個(gè)對象，為需要添加或修改的屬性。屬性名有點(diǎn)特殊，[]中的值會(huì)被識別為變量，因此如果要對對象數(shù)組中的某個(gè)屬性進(jìn)行修改，只能預(yù)先拼接好屬性名。 錯(cuò)誤做法：

// 視圖不更新
this.data.searchSongs[index].love_flag\': 2
// SyntaxError: unknown: Unexpected token
this.setData({
\'searchSongs[\' + index + \'].love_flag\': 2
})

正確做法：

setSongFlag(e) {
// 注意setData屬性名[]中的非整數(shù)值會(huì)被識別為變量
let key = \'searchSongs[\' + index + \'].love_flag\'
this.setData({
[key]: 2
})

關(guān)于image組件

小程序wxss的background-image及image組件都不支持本地url 在H5的開發(fā)中，通常我們會(huì)將頁面一些不需要根據(jù)容器大小來選擇顯示方式的圖片使用img標(biāo)簽，需要一些特殊顯示方式的使用background。但小程序只需要image組件便可。它提供的mode屬性和背景定義圖片及img元素控制圖片顯示方式對比

其他的top、bottom、right、left等不縮放圖片調(diào)整位置的屬性與background-position作用相同，img元素則只能通過定位控制。

小程序API異步方案

如果沒有強(qiáng)迫癥，小程序API使用默認(rèn)回調(diào)的方式即可；另外由于小程序只支持es6，不支持async及await，也可以將API封裝成promise的方式。

function promisify(fn) {
return function (obj = {}) {
return new Promise((resolve, reject) => {
obj.success = function (res) {
resolve(res)
}

obj.fail = function (res) {
reject(res)
}

fn(obj)//執(zhí)行函數(shù)，obj為傳入函數(shù)的參數(shù)
})
}
}
module.exports = {
promisify: promisify
}

使用：

const promisify = require(\'./promisify.js\')
const request = promisify(wx.request);

request({
url: \'some URL\'
method: \'GET\',
}).then(res => {
console.log(res)
}

小程序問題

調(diào)試器沒有css快捷提示功能和顏色面板，影響布局及顏色調(diào)整效率（隨性派）

無法引入第三方j(luò)s庫

內(nèi)置組件單調(diào)，沒有考慮字體數(shù)量比較多時(shí)的自適應(yīng)情況

不支持跳轉(zhuǎn)外部鏈接

背景圖片或者image組件不能用本地圖片

關(guān)于小程序?qū)彴l(fā)布或更新

小程序上線需要經(jīng)過審核、發(fā)布兩個(gè)過程。 審核通過后有全量更新、或者分階段發(fā)布，小程序才會(huì)更新，首次發(fā)布沒有選項(xiàng)。

全量發(fā)布：即時(shí)向全量微信用戶發(fā)布新版小程序。 分階段發(fā)布：新版小程序?qū)⒃?5天內(nèi)以開發(fā)者自定義比例，向微信用戶發(fā)布更新 詳情見知乎： 發(fā)布小程序時(shí)選擇全量發(fā)布和分階段發(fā)布是什么意思？

不得不說小程序?qū)徍怂俣仁欠浅？斓?，即便是個(gè)人申請（相比以企業(yè)賬號申請會(huì)有應(yīng)用服務(wù)類型限制），通常小程序沒有涉及政策不允許的內(nèi)容或者超過小程序允許的應(yīng)用服務(wù)類型，都是可以順利通過，初次體驗(yàn)，即便在國慶期間，也是有工作團(tuán)隊(duì)進(jìn)行審核，審核時(shí)間通常在幾小時(shí)內(nèi)。

總結(jié)

在開發(fā)這個(gè)小程序時(shí)，微信小程序只支持頁面級開發(fā)，如今小程序已支持組件開發(fā)和插件開發(fā)。組件的結(jié)構(gòu)和頁面并無區(qū)別，自定義組件可以引入其他的組件。

推薦閱讀： 微信小程序開發(fā)教程 微信小程序