微信小程序組件化開發框架WePY入門

WePY項目的建立與使用

• WePY安裝的安裝或者更新都經過npm進行，需提早安裝NPM。

全局安裝WePY或更新WePY命令行工具

npm install wepy-cli -g

這個命令須要注意，最開始我採用這個命令安裝時不成功，沒仔細看轉了一圈覺得安裝成功了呢。以下圖

還檢查了一圈node的版本，npm的安裝版本。

• 重點來了！！ MAC下npm的安裝都須要加sudo才能夠！以下安裝成功！
  

在開發目錄中生成Demo開發項目

• 1.7以後的版本使用 wepy init standard myprojecy ,使用wepy list 查看項目模板。
  

切換到項目目錄，安裝依賴

cd myproject
npm install

對比安裝依賴先後文件變化，安裝以後多了 node_modules文件夾

開啓實時編譯

webpy build --watch

項目建立好以後在微信開發者工具實時預覽和調試項目

• 導入項目
  

與原生項目結構對比

WePY項目的目錄結構

├── 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配置

今天先寫到這裏吧~