使用Wepy创建小程序步骤以及引用Vant-weapp组件库

一。安装Node

在使用wepy之前,首先要有npm,npm是Nodejs下的包管理器,大家可以直接到Node.js官网下载。
安装可以参考我之前的文章:使用nvm管理node安装和使用
安装好后,cmd命令行 npm config list,查看npm配置信息
使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第1张图片

二。安装微信开发框架Wepy

官方安装使用说明:
使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第2张图片

本人安装步骤

npm的包安装bai分为本地安装(local)、全局安装(global)两种
本地安装: npm install xxx 安装到命令行所在目录的node_module目录。
全局安装: npm install xxx -g 默认安装到\AppData\Roaming\npm\node_modules目录。

这里根据node.exe的路径,node_module会安装在node路径下
使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第3张图片

  1. cmd命令行输入 : npm install @wepy/cli@next -g 安装wepy2.0
    使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第4张图片
    使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第5张图片
    安装过程中可能会失败:
    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到自己的项目想要存放的路径,比如:
    在这里插入图片描述

  2. 安装好 wepy后,开始创建项目
    wepy init standard myproject
    代替以前的wepy new myproject
    myproject 可以替换成自己的项目名称
    使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第6张图片
    名词解释:
    ? 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创建小程序步骤以及引用Vant-weapp组件库_第7张图片
    看到 wepy-cli · Generated “road_lamp_applets”. 创建小程序项目成功。
    文件夹项目结构:
    使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第8张图片

  3. 然后需要更新和安装项目依赖,然鹅这一步骤微信文档没有显示:
    cd: myproject 进入刚创建的小程序项目
    更新项目依赖:wepy upgrade
    使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第9张图片
    这个可以安装依赖 npm -install less –save-dev 解决
    安装依赖:npm install
    使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第10张图片
    安装依赖成功后,文件夹新增node_modules文件夹:
    使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第11张图片
    使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第12张图片

  4. 开发实时编译 : wepy build --watch ,编译项目
    使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第13张图片
    编译项目成功后,会产生一个weapp文件夹,这个就是我们编译的产物,接下来我们要使用微信小程序开发工具来运行这个目录下面的内容
    使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第14张图片
    在project.config.json 文件里可以查看到相关信息:
    使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第15张图片

  5. 使用微信开发者工具新建项目,本地开发选择项目根目录(可以选择刚才的项目文件路径myproject,这样好看清整个项目的结构),会自动导入项目配置

使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第16张图片
是因为babel编辑器不支付ES5, 应该将微信开发工具的ES5选项关闭。具体操作如下:
微信开发工具 -> 设置 -> 项目设置 ->
不勾选 “ES6 转 ES5”
不勾选 “上传代码自动样式补全”
不勾选 “代码上传时自动压缩”
勾选 “不校验安全域名、web-view 域名、TLS 版本以及 HTTPS 证书”
使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第17张图片
这个时候小程序其实已经创建好了,可以进行开发了
使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第18张图片

三。使用有赞组件库 vant-weapp

由于我想要使用vant-weapp的前端ui样式,所以需要引用vant,
官方安装提示:Vant Weapp快速上手
使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第19张图片
使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第20张图片

本人安装步骤

  1. npm init -y 初始化npm
    这里一定需要注意:需要先cd进weapp 进入小程序根目录,(这个根目录不是project目录,而是编译后产生的weapp目录),打开cmd,输入:npm init -y (这一个步骤要在安装vant之前),然后再执行安装vant-weapp的命令,否则,之后在微信开发工具里构建npm后提示找不到需要构建的npm。
  2. 通过 npm 安装
    npm i @vant/weapp -S --production
    使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第21张图片
    成功后,可以看到根目录路径weapp下会新增一个node_modules目录,里面有@vant的文件夹
    使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第22张图片
    去项目下的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"
  },
  1. 然后到开发工具里构建npm,还需要设置项目勾选使用npm模块构建成功后会产生miniprograme_npm的文件夹,之后才能访问这里的文件
    使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第23张图片
  2. 测试,引用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"
  }
}

使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第24张图片
5. 结果:成功

使用Wepy创建小程序步骤以及引用Vant-weapp组件库_第25张图片

你可能感兴趣的:(node.js,vue.js)