小程序
如何去寫小程序：
- 原生的小程序
- 騰訊的wepy框架
- 美團(tuán)的mpvue框架
- 京東的taro框架
- h5適配移動(dòng)端
小程序里的幾個(gè)重要概念
- 應(yīng)用程序：每個(gè)應(yīng)用都有一個(gè)App()函數(shù)來(lái)注冊(cè)一個(gè)小程序旅掂，負(fù)責(zé)整個(gè)應(yīng)用的生命周期
- 頁(yè)面：Page()函數(shù)用來(lái)注冊(cè)一個(gè)頁(yè)面沛硅，其中主要用來(lái)管理頁(yè)面的生命周期跋选，數(shù)據(jù)以及處理函數(shù)。(重點(diǎn))
使用vue寫小程序
由于小程序的一些缺陷扑眉，比如不能組件化和不能使用第三方庫(kù)的原因市場(chǎng)上出來(lái)了一寫框架來(lái)編寫小程序。這些框架基于通過編譯和運(yùn)行時(shí)來(lái)將代碼轉(zhuǎn)義成小程序可識(shí)別的代碼秉撇。
wepy框架
使用wepy框架你需要哪些技能灵迫？
- vue的基礎(chǔ)知識(shí)
- 原生小程序的api和組件
- wepy的一些語(yǔ)法規(guī)則
編譯過程
如何寫一個(gè)wepy的頁(yè)面
<script>
import wepy from 'wepy';
export default class Page extends wepy.page {
config = {};
components = {};
data = {};
methods = {};
events = {};
onLoad() {};
// Other properties
}
</script>
<template>
<view>
</view>
</template>
<style lang="less">
/** less **/
</style>
如何寫一個(gè)組件
<template>
<view>
</view>
</template>
<script>
import wepy from 'wepy';
export default class Component extends wepy.component {
components = {};
data = {};
methods = {};
events = {};
}
</script>
<style lang="less">
/** less **/
</style>
組件中處了不需要config配置以及頁(yè)面特有的生命周期函數(shù)之外，其他屬性大致相同蚕愤。
組件的引用
<template>
<child1></child1>
<child2></child2>
</template>
<script>
import wepy from 'wepy';
import Child from '../components/child';
export default class Index extends wepy.page {
components = {
child1: Child
child2: Child
};
}
</script>
組件之間的頁(yè)面?zhèn)髦?/p>
- 靜態(tài)傳值
靜態(tài)傳值只能傳遞常量數(shù)據(jù)答恶，只能傳遞字符串類型的數(shù)據(jù)
<child title="mytitle"></child>
// child.wpy
props = {
title: String
};
onLoad () {
console.log(this.title); // mytitle
}
- 動(dòng)態(tài)傳值
// parent.wpy
<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>
data = {
parentTitle: 'p-title'
};
// child.wpy
props = {
// 靜態(tài)傳值
title: String,
// 父向子單向動(dòng)態(tài)傳值
syncTitle: {
type: String,
default: 'null'
},
twoWayTitle: {
type: String,
default: 'nothing',
twoWay: true
}
};
}
使用slot插槽
組件
<view class="panel">
<slot name="title">默認(rèn)標(biāo)題</slot>
<slot name="content">默認(rèn)內(nèi)容</slot>
</view>
page
<panel>
<view slot="title">新的標(biāo)題</view>
<view slot="content">
<text>新的內(nèi)容</text>
</view>
</panel>
mpvue框架
和wepy框架類可以參考官方文檔
使用react寫小程序
taro是由京東開源的一個(gè)多端開發(fā)解決方案，寫一處代碼通過Taro編譯工具將代碼分別編譯出可以在不同端運(yùn)行的代碼萍诱。采用與React一致的組件化思想悬嗓，組件生命周期與react保持一致，也支持JSX語(yǔ)法裕坊。
幾個(gè)優(yōu)點(diǎn)：
- 支持第三方
- 支持ES規(guī)范
- 代碼提示很好包竹，好的太多了
- 支持使用redux,
- 小程序的一些Api的優(yōu)化
- 使用CSS預(yù)編譯器
- 代碼報(bào)錯(cuò)很友好，寫代碼體驗(yàn)增加了很多
一些缺點(diǎn)：
- 不支持使用this.props.children這個(gè)特性
- 不能使用無(wú)狀態(tài)組件
- 不支持通過props傳入組件
- 不能再JSX參數(shù)中使用匿名函數(shù)
以上的缺點(diǎn)中都能在你編寫代碼的時(shí)候進(jìn)行一個(gè)提示碍庵，所以編寫代碼簡(jiǎn)直體驗(yàn)好的不要不要的映企。
函數(shù)防抖的應(yīng)用
函數(shù)防抖debounce利用閉包的特性和函數(shù)的延遲執(zhí)行來(lái)防止函數(shù)在一段時(shí)間內(nèi)的多次調(diào)用。
簡(jiǎn)單的實(shí)現(xiàn)：
function debounce(fn, time) {
let last = null
return function () {
const ctx = this
const args = arguments
clearTimeout(last)
last = setTimeout(() => {
fn.apply(ctx, args)
}, time)
}
}
具體應(yīng)用:
- input輸入框的onChange事件
- 模糊搜索的公司名稱
使用異步函數(shù)
wepy.showLoading({title: '加載中', mask: true, success: function() {
console.log('dddd')
}})
setTimeout(() => {
wx.hideLoading()
}, 200);
上面的代碼中success回調(diào)并不會(huì)被執(zhí)行静浴，目前代碼中的使用的都是同步函數(shù)堰氓，或者使用async 和 await來(lái)編寫同步代碼∑幌恚可以使用wx.**的方式來(lái)代替双絮。
