文章目录
一、环境配置
1、安装node
- node官网 https://nodejs.org/en/ or http://nodejs.cn/
查看node版本号: node -v
查看npm版本号:npm -v
2、设置淘宝源
- npm install -g cnpm --registry=https://registry.npm.taobao.org
3、小程序开发必备
4、安装vscode
- vscode官网
- 安装完了后,给vscode安装插件,可参考 打造自己的vs code
必要插件,有关wepy的插件建议做wepy项目的时候安装,不做wepy项目时可卸掉
- 简体中文 Chinese (Simplified) Language Pack for Visual Studio Code
- Beautify
- wepy snippets
- Vetur-wepy
- minapp
- wpy-beautify
- Easy Sass (编写sass文件保存自动生成css文件,自选)
- Easy Less(编写less文件保存自动生成css文件,自选)
备注说明:vscode,不同的插件会影响你编码时给你提示的快捷生成标签的模型和js方法。所以当你不打算用wepy框架开发,而是用其他框架开发的时候,建议将在vscode中将有关wepy的插件卸载掉
5、使用说明
- 开发的时候在vscode进行开发,在vscode运行代码
- 代码运行后,在微信开发者工具,导入项目,然后查看项目运行结果(微信开发者工具不能读取和编辑wpy文件)
- 小程序运行是,勾选不校验某些选项,(不勾选的话会运行报错)
- 使用npm 安装插件太慢的话,用cnpm替代npm会快很多
- 假如用的是mac,命令不通时,试试sudo+命令
- 假如明明项目在vscode运行正常,但页面在微信开发者工具就是不出来的情况,可以试试删掉dist、node_modules文件,重新执行npm install 命令,再运行
二、开始搭建
1、前期初始化项目
- 说明:wepy版本以1.7版本的为主 使用教程 https://wepyjs.github.io/wepy-docs/1.x/#/
- 我的电脑是mac,所以有的命令前面有sudo,非mac系统,在运行命令时可去掉sudo
全局安装wepy-cli脚手架
sudo npm install wepy-cli -g
在一个空目录,初始化myproject项目,myproject是项目名称
sudo wepy init standard myproject
切换至项目目录
cd myproject
安装依赖
sudo npm install
开启实时编译,运行
sudo npm run dev
报错记录(踩坑说明)
本地如果已经运行了一个wepy项目时,在别的地方重新初始化一个wepy项目是会报各种错的。解决办法就是,停止运行本地项目,再初始化别的项目
2、安装scss(可不装)
wepy默认已经安装了less,习惯scss来写的话,可自行安装scss插件,
或者报了以下错误,也需要自行安装scss
[WARNING] 找不到编译器:wepy-compiler-sass。
[Error] 未发现相关 sass 编译器配置,请检查wepy.config.js文件。
//安装sass
npm i node-sass
//安装wepy-compiler-sass插件
npm install wepy-compiler-sass --save-dev
//配置wepy.config.js
module.exports = {
"co