文档
1:安装node
端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,WePY借鉴了Vue.js(后文简称Vue)的语法风格和功能特性,vue的运行是要依赖于node的npm的管理工具来实现,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。
![5640239-f49d5024e96b3fe7.png](https://upload-images.jianshu.io/upload_images/5640239-f49d5024e96b3fe7.png)
安装成功之后显示如下,查看版本,安装成功。
![5640239-b9aff0f1769bf687.png](https://upload-images.jianshu.io/upload_images/5640239-b9aff0f1769bf687.png)
2:安装全局淘宝npm镜像
进入D盘(当然可以根据你自己的选择来安装路径)全局安装镜像。由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.
淘宝的cnpm命令管理工具可以代替默认的npm管理工具。
输入命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
安装成功之后显示如下,查看版本,安装成功。
![5640239-75d9e0497af049ef.png](https://upload-images.jianshu.io/upload_images/5640239-75d9e0497af049ef.png)
3:全局安装或更新WePY命令行工具
npm install wepy-cli -g
![5640239-307487e888883879.png](https://upload-images.jianshu.io/upload_images/5640239-307487e888883879.png)
4:初始化一个项目myproject
注意版本,因为我的版本是1.7.3的
1.7.0之后的版本使用 wepy init standard myproject 初始化项目
wepy init standard myproject
暂时可以一路回车,后续如果遇到要做具体的项目的时候,可以根据项目需要填写。
![5640239-f2fced40c5e0e25a.png](https://upload-images.jianshu.io/upload_images/5640239-f2fced40c5e0e25a.png)
打开d盘,可以看见初始化的项目
![5640239-cf477e9c5f958672.png](https://upload-images.jianshu.io/upload_images/5640239-cf477e9c5f958672.png)
目录结构
├── 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配置
5:进入myproject
cd myproject
6:安装依赖
在新建的项目里面安装需要的依赖包
npm install
![5640239-9895ffbcf9b557a9.png](https://upload-images.jianshu.io/upload_images/5640239-9895ffbcf9b557a9.png)
安装完成之后可以看见,文件里面多出了两个依赖文件
![5640239-69528dd33f0c30d2.png](https://upload-images.jianshu.io/upload_images/5640239-69528dd33f0c30d2.png)
7:进行实时编译
wepy build --watch
![5640239-bcfec167790602ad.png](https://upload-images.jianshu.io/upload_images/5640239-bcfec167790602ad.png)
8:在微信开发者工具打开
可以看到,刚才创建的项目
![5640239-655765fcb1a34aac.png](https://upload-images.jianshu.io/upload_images/5640239-655765fcb1a34aac.png)
注意:因为小程序开发工具对wepy文件不太友好,无法直接在开发者工具里面打开,所以要另外选择编辑器编写代码,开发者工具可进行调试和查看效果
![5640239-cd01cd59e989a0fb.png](https://upload-images.jianshu.io/upload_images/5640239-cd01cd59e989a0fb.png)
ps:简书写文章的一个缺陷,就是有时候在上传markdown图片的过程中不能继续使用键盘,等图片上传好之后才可以,不然通篇文章都会消失,进入顶部重新编辑,遇到过两三次,编辑好的文章就这样消失了,头疼,只好又开始重新写一遍,权当是加深印象咯。
原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1
90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,对于博客上面有不会的问题,可以加入qq技术交流群聊:473819131。