在微信小程序里引入Vant Weapp组件库详细步骤

1. 新建一个文件夹。

在微信小程序里引入Vant Weapp组件库详细步骤_第1张图片

2. 使用微信开发者工具 选择一个模板(这里以javaScript 基础模板 为例)

在微信小程序里引入Vant Weapp组件库详细步骤_第2张图片

 选择完模板之后如下:

在微信小程序里引入Vant Weapp组件库详细步骤_第3张图片

 

2. 右键打开终端:按如下步骤执行命令。

① npm init

解释:执行 npm init 需要在当前文件夹下的DOS窗口执行或者VS code里面的Open in Integrated Terminal

在微信小程序里引入Vant Weapp组件库详细步骤_第4张图片

执行npm  init。

注意:项目名称不能有大写字母最好以下划线或者中划线分割。

在微信小程序里引入Vant Weapp组件库详细步骤_第5张图片

上面的主要就是:配置一些项目信息,如果不知道怎么填的话,一路回车就行了。

package name: 项目名字
version: 版本号
description: 项目的描述
entry point: 项目的入口文件(一般你要用那个js文件作为node服务,就填写那个文件)
test command: 项目启动的时候要用什么命令来执行脚本文件(默认为node app.js)
git repository: 填写git的仓库地址(不想上传到仓库就可以不用填)
keywirds: 项目关键字(没啥用)
author: 作者名字
license: 发行项目需要的证书

 执行完成后会生成了一个package.json的文件

在微信小程序里引入Vant Weapp组件库详细步骤_第6张图片

 ②执行 npm install --production

在微信小程序里引入Vant Weapp组件库详细步骤_第7张图片

 生成了一个package-lock.json的文件

在微信小程序里引入Vant Weapp组件库详细步骤_第8张图片

 

 ③ 安装 Vant Weapp 组件库:npm i @vant/weapp -S --production

在微信小程序里引入Vant Weapp组件库详细步骤_第9张图片

 生成了一个 node_modules依赖包。

在微信小程序里引入Vant Weapp组件库详细步骤_第10张图片

④在微信开发者工具上面,点击构建npm

在微信小程序里引入Vant Weapp组件库详细步骤_第11张图片

 显示如下说明构建成功。

在微信小程序里引入Vant Weapp组件库详细步骤_第12张图片

 ⑤以前要手动构建npm模块,现在不需要了。直接npm  install 即可。

在微信小程序里引入Vant Weapp组件库详细步骤_第13张图片

 以前:

在微信小程序里引入Vant Weapp组件库详细步骤_第14张图片

 

点击构建 npm 后,查看是否有 miniprogram_npm文件,有说明构建无误。

在微信小程序里引入Vant Weapp组件库详细步骤_第15张图片

 如果构建报错,可以根据报错内容修改 或者 再构建一次。

⑥将app.josn文件中的  "style":"v2"  给删除。

在微信小程序里引入Vant Weapp组件库详细步骤_第16张图片

去除,是因为小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

⑦ 修改 project.config.json文件。

在微信小程序里引入Vant Weapp组件库详细步骤_第17张图片

 "setting"对象中:

  "packNpmManually" 由fasle改为true,

  "packNpmRelationList"数组里面添加一个对象:

   {

        "packageJsonPath": "./package.json",

        "miniprogramNpmDistDir": "./miniprogram"

    }

⑧点击上面编译没有报错就说明以上步骤都是成功的。

在微信小程序里引入Vant Weapp组件库详细步骤_第18张图片

 可以选择二维码预览,或者 自动预览。

这里可以修改一些标题信息。

在微信小程序里引入Vant Weapp组件库详细步骤_第19张图片

详细介绍请查看官方文档:页面配置 | 微信开放文档

 

可能出现的报错问题:

1. Page "pages/Index/Index" has not been registered yet.

这是因为在当前那个文件下的.js文件中Page()上面的代码由错误,导致js不能正常运行,就会模拟器中就会出现空白现象。

在微信小程序里引入Vant Weapp组件库详细步骤_第20张图片

原理:微信小程序.wxml页面与.js文件是密切相关的,wxml页面的显示又与js文件的Page()密不可分,所以Page()前面的代码出错,导致Page()未执行,那肯定会抛页面未注册的提示,并且wxml页面也呈空白没有任何显示。

解决办法:直接把Page()上面的代码删除或者改正确即可,解决问题。

2. [渲染层网络层错误] Failed to load local image resource 。

这种错误是渲染路径出错导致的错误。

说简单点大多数都是图片的路径不对导致的。

解决办法:仔细检查一下图片的地址即可。

3. [ app.json 文件内容错误] app.json: app.json 未找到。

这种错误一般都是入口目录错误。

解决办法:在project.config.json 文件里面加上"miniprogramRoot": "miniprogram/" 即可。

                  还需要重启微信开发者工具。

在微信小程序里引入Vant Weapp组件库详细步骤_第21张图片

 

4. 没有找到可以构建的NPM包,请确认需要参与…       问题如下

在微信小程序里引入Vant Weapp组件库详细步骤_第22张图片

 解决办法:

        找到根目录下的 project.config.json 文件修改 packNpmManually ,packNpmRelationList

       按步骤⑦来即可。

在微信小程序里引入Vant Weapp组件库详细步骤_第23张图片

5.发生错误,Error …\package.json 未找到

在微信小程序里引入Vant Weapp组件库详细步骤_第24张图片

 解决办法:打开终端 输入命令 npm init ,并一路回车 最后输入 yes 回车。

6. 发生错误,Error …\miniprogram 未找到。

原因:project.config.json 中 对 miniprogramNpmDistDir 中的 值没有找到。

解决办法:

     1.点击小程序结构目录 点击右键选择在 资源管理器中显示。

     2.回到根目录下 与 project.config.json 同级 新建文件夹 miniprogram。

     3. 并调整层级关系 ,调整后的结构如下 一定要此结构。

在微信小程序里引入Vant Weapp组件库详细步骤_第25张图片

 在微信小程序里引入Vant Weapp组件库详细步骤_第26张图片

假如package.json文件没找到,也要根据层级来调整位置。

⑨ 引入 vant 组件库内容。

以button按钮为例:

步骤一:只需要在app.josn中引入 全局都可以使用。

或者

步骤二:在wxml对应的json文件中配置即可。

在微信小程序里引入Vant Weapp组件库详细步骤_第27张图片

 

在app.json中引入

在微信小程序里引入Vant Weapp组件库详细步骤_第28张图片

 在在wxml对应的json文件中引入

在微信小程序里引入Vant Weapp组件库详细步骤_第29张图片

 

效果:

在微信小程序里引入Vant Weapp组件库详细步骤_第30张图片

 

你可能感兴趣的:(小程序,微信小程序,小程序)