微信小程序組件化開發框架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配置

今天先寫到這里吧~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM