一。安装Node
在使用wepy之前,首先要有npm,npm是Nodejs下的包管理器,大家可以直接到Node.js官网下载。
安装可以参考我之前的文章:使用nvm管理node安装和使用
安装好后,cmd命令行 npm config list,查看npm配置信息
二。安装微信开发框架Wepy
官方安装使用说明:
本人安装步骤
npm的包安装bai分为本地安装(local)、全局安装(global)两种
本地安装: npm install xxx 安装到命令行所在目录的node_module目录。
全局安装: npm install xxx -g 默认安装到\AppData\Roaming\npm\node_modules目录。
这里根据node.exe的路径,node_module会安装在node路径下
-
cmd命令行输入 : npm install @wepy/cli@next -g 安装wepy2.0
安装过程中可能会失败:
downloading template wepy-cli · Failed to download repo standard: connect ETIMEDOUT 151.101.108.133:443
修改镜像源为淘宝
命令:npm config set registry http://registry.npm.taobao.org
镜像列表
1.淘宝镜像:http://registry.npm.taobao.org
2.官方地址:https://registry.npmjs.org/
之后cd到自己的项目想要存放的路径,比如:
-
安装好 wepy后,开始创建项目
wepy init standard myproject
代替以前的wepy new myproject
myproject 可以替换成自己的项目名称
名词解释:
? Project name my_pry 项目名称(显示在微信小程序开发工具上面的,不能大写)
? AppId touristappid 我们是demo,直接使用 游客id 即可,正式的项目需要输入微信小程序对应的appid,
? Project description A WePY project 这里你可以输入关于项目的简介
? Author 1lin24 <1lin24@****.com> 这里写的是项目的信息
? Use ESLint to lint your code? Yes 是否将ESLit加入到项目中,ESLit是一个代码格式化检查工具,用于规范代码的书写
? Use Redux in your project? Yes 是否将Redux加入到项目中,Redux是一个系统状态管理工具
? Use web transform feature in your project? Yes这个我就不知道,谁知道评论指点一下,谢谢了
看到 wepy-cli · Generated “road_lamp_applets”. 创建小程序项目成功。
文件夹项目结构:
-
然后需要更新和安装项目依赖,然鹅这一步骤微信文档没有显示:
cd: myproject 进入刚创建的小程序项目
更新项目依赖:wepy upgrade
这个可以安装依赖 npm -install less –save-dev 解决
安装依赖:npm install
安装依赖成功后,文件夹新增node_modules文件夹:
-
开发实时编译 : wepy build --watch ,编译项目
编译项目成功后,会产生一个weapp文件夹,这个就是我们编译的产物,接下来我们要使用微信小程序开发工具来运行这个目录下面的内容
在project.config.json 文件里可以查看到相关信息:
-
使用微信开发者工具新建项目,本地开发选择项目根目录(可以选择刚才的项目文件路径myproject,这样好看清整个项目的结构),会自动导入项目配置
是因为babel编辑器不支付ES5, 应该将微信开发工具的ES5选项关闭。具体操作如下:
微信开发工具 -> 设置 -> 项目设置 ->
不勾选 “ES6 转 ES5”
不勾选 “上传代码自动样式补全”
不勾选 “代码上传时自动压缩”
勾选 “不校验安全域名、web-view 域名、TLS 版本以及 HTTPS 证书”
这个时候小程序其实已经创建好了,可以进行开发了
三。使用有赞组件库 vant-weapp
由于我想要使用vant-weapp的前端ui样式,所以需要引用vant,
官方安装提示:Vant Weapp快速上手
本人安装步骤
- npm init -y 初始化npm
这里一定需要注意:需要先cd进weapp 进入小程序根目录,(这个根目录不是project目录,而是编译后产生的weapp目录),打开cmd,输入:npm init -y (这一个步骤要在安装vant之前),然后再执行安装vant-weapp的命令,否则,之后在微信开发工具里构建npm后提示找不到需要构建的npm。 - 通过 npm 安装
npm i @vant/weapp -S --production
成功后,可以看到根目录路径weapp下会新增一个node_modules目录,里面有@vant的文件夹
去项目下的package.json下看是否有了vant字段,有就代表下载成功:
"dependencies": {
"@vant/weapp": "^1.3.3",
"@wepy/core": "^2.0.0-alpha.16",
"@wepy/redux": "^2.0.1",
"miniprogram-slide-view": "0.0.3",
"redux": "^4.0.1",
"redux-actions": "^2.6.5",
"redux-promise": "^0.6.0"
},
- 然后到开发工具里构建npm,还需要设置项目勾选使用npm模块构建成功后会产生miniprograme_npm的文件夹,之后才能访问这里的文件
- 测试,引用vant按钮组件
index.wxml文件使用:
<panel bind_init="__initComponent">
<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
</panel>
index.json文件配置:因为版本不一样,和安装的方式不一样,引用的路径都不同,要注意
{
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
}
5. 结果:成功