微信小程序组件化开发框架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配置

今天先写到这里吧~