wepy公共樣式_像vue一樣開發微信小程式之wepy架構

一，wepy的安裝

1，全局安裝wepy   =>   npm i wepy-cli -g

2，建立項目project(項目名稱) => wepy new project

3，啟動項目 => wepy build --watch

二，生成的項目結構├── dist 微信開發者工具指定的目錄(該目錄由WePY的build指令自動編譯生成，請不要直接修改該目錄下的檔案)

├── node_modules

├── src                    代碼編寫的目錄(該目錄為使用WePY後的開發目錄)

|  ├── components        WePY元件目錄(元件不屬于完整頁面，僅供完整頁面或其他元件引用)

|  |  ├── com_a.wpy      可複用的WePY元件a

|  |  └── com_b.wpy      可複用的WePY元件b

|  ├── pages              WePY頁面目錄(屬于完整頁面)

|  |  ├── index.wpy      index頁面(經build後，會在dist目錄下的pages目錄生成index.js、index.json、index.wxml和index.wxss檔案)

|  |  └── other.wpy      other頁面(經build後，會在dist目錄下的pages目錄生成other.js、other.json、other.wxml和other.wxss檔案)

|  └── app.wpy            小程式配置項(全局資料、樣式、聲明鈎子等；經build後，會在dist目錄下生成app.js、app.json和app.wxss檔案)

└── package.json          項目的package配置

這時啟動的項目還需要安裝  “babel-preset-es2015“和 “babel-preset-stage-1”，

檔案wepy.config.js主要配置如下：babel: {

sourceMap: true,

presets: [

'es2015',

'stage-1'

],

plugins: [

'transform-decorators-legacy',

'transform-export-extensions',

'syntax-export-extensions'

]

三，解決小程式接口回調黑洞

用es7中的async和await來解決層層回調，讓異步函數當成同步函數來處理，來，上代碼

通過傳回一個promise，例子為選擇檔案接口的回調：getFilePath(){

return new Promise((resolve, reject) => {

wx.chooseImage({

count: 9,

sizeType: ['original', 'compressed'],

sourceType: ['album', 'camera'],

success: function (res) {

resolve(res)

},

fail: function(res){

reject()

}

})

})

},

通過async和await來擷取傳回資料async addFile(){

let resData = await req.getFilePath();

}

await必須在async下執行。對于es7的await和async不了解的看下邊這個連結

四，wepy文法的使用

首先.wpy檔案結構類似于vue,但又不同于vue

.wpy檔案結構

1，事件綁定：@tap="function"; function寫在methods方法集合中，

2，對于data中的變量可以通過this.a=1;來指派用this.$apply();方法來告知這個變量發生變化。

3，監聽watch,變量發生變化就會觸發這個變量函數watch(){

變量(newValue,oldValue){

}

}

4，元件的拆分：

子元件：主要是接受參數作為資料傳遞

props={

data:Object

}

父元件：

import Child from '../

components /child'

components

= {

child:Child

}

importwepyfrom'wepy';//引入List、Panel和Counter元件importListfrom'../components/list';importPanelfrom'../components/panel';importCounterfrom'../components/counter';exportdefaultclassIndexextendswepy.page{//頁面配置config={"navigationBarTitleText":"test"};//聲明頁面中将要使用到的元件components={panel:Panel,counter1:Counter,counter2:Counter,list:List};//可用于頁面模闆中綁定的資料data={myNum:50,syncNum:100,items:[1,2,3,4]}}

5，父子元件的通信

父 --->子，用同元件之間的方法就可以，父元件裡調用子元件的方法funthis.$invoke('child','fun');          //切記帶引号

子 ---->父，首先先看子元件的方法child:觸發父元件的fun,data為傳遞的參數，也可不寫；

this.$emit('fun',data)；

parent:父元件裡的方法寫在events中：

events = {

fun: da => {

//dosomething

}

}

當在fun中運用回調時，這樣寫：events = {

fun: async  da => {

//dosomething

let resData = await aa();

}

}

進行傳參時請慎用data,可能會報一些 意想不到的錯誤。

6，循環标簽

{{item.aa}}

7,對于get請求wepy.request('xxxxx').then((d)  =>  console.log(d) )

五， 小程式中遇到的一些問題

1,關于路由的使用

有的時候路由必須 嵌套上一層才能被使用，比如：/pages/detail/detail

2，路由傳參在onLoad()函數周期中進行擷取onLoad(option){

let  a = option.b;

}

3，對于使用者拒絕授權的優雅處理。

4，對于全局變量的存儲，存在app.wpy中的globalData對象中，就可以全局擷取到，在頁面page中使用this.$parent.globalData.aa    //擷取aa

5，對于授權和校驗使用者登入在app.wpy中的onLaunch()函數周期中進行處理

wepy架構開發的小程式項目暫時先整理這麼多，遇到新的問題再進行更新，不足的地方還需指正。