微信小程序wepy框架學(xué)習(xí)和使用心得詳解
一、微信小程序wepy框架簡(jiǎn)介:
微信小程序WePY框架是騰訊官方推出來(lái)的框架,類(lèi)似的框架還有美團(tuán)的mpvue,京東的Taro等; 目前公司開(kāi)發(fā)小程序主要用到的是微信原生方法和官方的wepy框架; wepy框架在開(kāi)發(fā)過(guò)程中參考了 Vue 等現(xiàn)有框架的一些語(yǔ)法風(fēng)格和功能特性,對(duì)原生小程序的開(kāi)發(fā)模式進(jìn)行了再次封裝,更貼近于 MVVM 架構(gòu)模式, 并支持ES6/7的一些新特性。相對(duì)更容易上手,提高開(kāi)發(fā)效率;
二、WePY項(xiàng)目的創(chuàng)建與目錄結(jié)構(gòu)
WePY的安裝或更新都通過(guò)npm進(jìn)行,全局安裝或更新WePY命令行工具
npm install wepy-cli -g
在開(kāi)發(fā)目錄中生成Demo開(kāi)發(fā)項(xiàng)目
wepy new myproject
切換至項(xiàng)目目錄
cd myproject
安裝依賴
npm install
開(kāi)啟實(shí)時(shí)編譯
wepy build --watch
WePY項(xiàng)目的目錄結(jié)構(gòu)如下
├── dist 小程序運(yùn)行代碼目錄(該目錄由WePY的build指令自動(dòng)編譯生成,請(qǐng)不要直接修改該目錄下的文件) ├── node_modules ├── src 代碼編寫(xiě)的目錄(該目錄為使用WePY后的開(kāi)發(fā)目錄) | ├── components WePY組件目錄(組件不屬于完整頁(yè)面,僅供完整頁(yè)面或其他組件引用) | | ├── com_a.wpy 可復(fù)用的WePY組件a | | └── com_b.wpy 可復(fù)用的WePY組件b | ├── pages WePY頁(yè)面目錄(屬于完整頁(yè)面) | | ├── index.wpy index頁(yè)面(經(jīng)build后,會(huì)在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss文件) | | └── other.wpy other頁(yè)面(經(jīng)build后,會(huì)在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss文件) | └── app.wpy 小程序配置項(xiàng)(全局?jǐn)?shù)據(jù)、樣式、聲明鉤子等;經(jīng)build后,會(huì)在dist目錄下生成app.js、app.json和app.wxss文件) └ ── package.json 項(xiàng)目的package配置
搭建好項(xiàng)目后,IDE需配置代碼高亮,文件后綴為.wpy,可共用Vue的高亮規(guī)則,但需要手動(dòng)設(shè)置,具體配置大家可參考wepy官方文檔
三、wepy使用心得總結(jié):
1.wepy代碼風(fēng)格類(lèi)似Vue,如computed,data,methods等用法差不多,熟悉vue開(kāi)發(fā)的同學(xué)看看文檔可以輕松上手,不過(guò)還是有很多地方寫(xiě)法容易混淆,我工作中遇到的總結(jié)幾個(gè),如列表循環(huán),條件渲染,父子組件值傳遞等,下面舉例說(shuō)明:
1). wepy和vue列表循環(huán)對(duì)比:
// wepy 列表循環(huán),外面可套一層repeat標(biāo)簽,注意和vue寫(xiě)法的區(qū)別 <repeat for="{{list}}" key="index> <view>{{item}}</view> </repeat> // vue 列表循環(huán),外面可套一層template標(biāo)簽 <template v-for="(item,index) in list" :key="index"> // 不推薦key直接用索引index <div>{{item}}<div> </template>
2). wepy和vue條件渲染中,wepy需要加{{}},vue不需要,里面都可以寫(xiě)表達(dá)式進(jìn)行判斷:
<view wx:if="{{show}}"></view> <div v-if="show"></div>
3). 父子組件值傳遞兩者都在子組件中用props接收, props中可以定義能接收的數(shù)據(jù)類(lèi)型,如果不符合會(huì)報(bào)錯(cuò),wepy可以通過(guò)使用.sync修飾符來(lái)達(dá)到父組件數(shù)據(jù)綁定至子組件的效果,也可以通過(guò)設(shè)置子組件props的twoWay:true來(lái)達(dá)到子組件數(shù)據(jù)綁定至父組件的效果。那如果既使用.sync修飾符,同時(shí)子組件props中添加的twoWay: true時(shí),就可以實(shí)現(xiàn)數(shù)據(jù)的雙向綁定了;
// 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 } }; onLoad () { console.log(this.title); // p-title console.log(this.syncTitle); // p-title console.log(this.twoWayTitle); // p-title this.title = 'c-title'; console.log(this.$parent.parentTitle); // p-title. this.twoWayTitle = 'two-way-title'; this.$apply(); console.log(this.$parent.parentTitle); // two-way-title. --- twoWay為true時(shí),子組件props中的屬性值改變時(shí),會(huì)同時(shí)改變父組件對(duì)應(yīng)的值 this.$parent.parentTitle = 'p-title-changed'; this.$parent.$apply(); console.log(this.title); // 'c-title'; console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修飾符的props屬性值,當(dāng)在父組件中改變時(shí),會(huì)同時(shí)改變子組件對(duì)應(yīng)的值。
2.wepy支持自定義組件開(kāi)發(fā),實(shí)現(xiàn)組件復(fù)用,減少代碼冗余,提高開(kāi)發(fā)效率;
3.wepy支持引入npm包,拓展了很多方法;
4.支持Promise,ES2015+特性,如async await 等;
5.支持多種編譯器,Less/Sass/Styus、Babel/Typescript、Pug;
6.支持多種插件處理,文件壓縮,圖片壓縮,內(nèi)容替換等;
7.支持 Sourcemap,ESLint代碼規(guī)范管理等;
8.對(duì)小程序wx.request方法參數(shù)進(jìn)行了修改,返回Promise對(duì)象,優(yōu)化了事件參數(shù)傳遞,具體用法如下:
// wx.request原生代碼: wx.request({ url: 'xxx', success: function (data) { console.log(data); } }); // WePY 使用方式, 需要開(kāi)啟 Promise 支持,參考開(kāi)發(fā)規(guī)范章節(jié) wepy.request('xxxx').then((d) => console.log(d)); // async/await 的使用方式, 需要開(kāi)啟 Promise 和 async/await 支持,參考 WIKI async function request () { let d = await wepy.request('xxxxx'); console.log(d); // 原生的事件傳參方式: <view data-id="{{index}}" data-title="wepy" data-other="otherparams" bindtap="tapName"> Click me! </view> Page({ tapName: function (event) { console.log(event.currentTarget.dataset.id)// output: 1 console.log(event.currentTarget.dataset.title)// output: wepy console.log(event.currentTarget.dataset.other)// output: otherparams } }); // WePY 1.1.8以后的版本,只允許傳string。 <view @tap="tapName({{index}}, 'wepy', 'otherparams')"> Click me! </view> methods: { tapName (id, title, other, event) { console.log(id, title, other)// output: 1, wepy, otherparams } }
四 、最后一點(diǎn)點(diǎn)感悟:
本文總結(jié)的比較淺顯,很多地方說(shuō)的也不是太詳細(xì),如有錯(cuò)誤的地方大家可以批評(píng)指正,歡迎大家留言一起交流探討,堅(jiān)持學(xué)習(xí),不斷探索總結(jié),路漫漫其修遠(yuǎn)兮,吾將上下而求索!
參考資料:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS圖片懶加載技術(shù)實(shí)現(xiàn)過(guò)程解析
這篇文章主要介紹了JS圖片懶加載技術(shù)實(shí)現(xiàn)過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07js實(shí)現(xiàn)固定區(qū)域內(nèi)的不重疊隨機(jī)圓
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)固定區(qū)域內(nèi)的不重疊隨機(jī)圓,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-10-10JS實(shí)現(xiàn)的合并兩個(gè)有序鏈表算法示例
這篇文章主要介紹了JS實(shí)現(xiàn)的合并兩個(gè)有序鏈表算法,結(jié)合實(shí)例形式分析了JavaScript鏈表的定義、節(jié)點(diǎn)插入、刪除、查找等相關(guān)算法實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-02-02bootstrap表格內(nèi)容過(guò)長(zhǎng)時(shí)用省略號(hào)表示的解決方法
這篇文章主要介紹了bootstrap表格內(nèi)容過(guò)長(zhǎng)時(shí)用省略號(hào)表示的解決方法,需要的朋友可以參考下2017-11-11js的隱含參數(shù)(arguments,callee,caller)使用方法
本篇文章只要是對(duì)js的隱含參數(shù)(arguments,callee,caller)使用方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-01-01JavaScript隱式類(lèi)型轉(zhuǎn)換代碼實(shí)例
這篇文章主要介紹了JavaScript隱式類(lèi)型轉(zhuǎn)換代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05