微信小程序——初始化(一)引入组件库

时间:2024-03-23 08:13:39

初始化

1.第一步:创建项目

打开微信开发者工具,按照需求选择目录,输入申请的AppID,之后新建
微信小程序——初始化(一)引入组件库

2.第二步:npm初始化package.json文件夹

微信小程序——初始化(一)引入组件库
如果该项目中没有package.json文件,可以npm init -y自动生成一个。
如果没有package.json文件夹,什么东西都没有办法安装成功哦~

3.第三步:按需引入想要引入的组件库

开发时,我想要使用vant组件库,根据官网提示,在小程序中安vant组件库
npm i @vant/weapp -S --production
安装后会生成一个node_modules文件夹
微信小程序——初始化(一)引入组件库

4. 第四步:本地设置

在详情下面的本地设置中,勾选使用npm模块
微信小程序——初始化(一)引入组件库

5.第五步:构建npm

在工具下面点击npm构建生成miniprogram_npm文件夹

微信小程序——初始化(一)引入组件库

6.第六步:修改app.json

将 app.json 中的 “style”: “v2” 去除,小程序的新版基础组件强行加上了许多样式,难以去除,不关闭将造成部分组件样式混乱。

*报错问题:当我引入vant,构建npm,修改app.json后报错 VM176:1 miniprogram_npm/@vant/weapp/calendar/index.json: [“usingComponents”][“van-toast”]: “…/toast/index” 未找到

我这面重新构建一下npm,关闭项目重启后就解决了

7.第七步:按需使用组件库

如果你想要使用button这个组件,可以在app.json中引入该组件

微信小程序——初始化(一)引入组件库
之后在某个页面中使用
微信小程序——初始化(一)引入组件库
编译后,我们可以看到
微信小程序——初始化(一)引入组件库

留存记录,也希望可以帮助到你,加油,又是努力的一天~