关于微信小程序安装npm的过程,从下载到小程序内部安装完成

1.先从官网下载nodejs 网站为Node.js (nodejs.org),选择左边第一个f80e5646ef6346bc8700372143cce8cc.png2 然后一直next,选默认就行 选择自己喜欢的路径我的是D:\nodejs-v18.12.1

a11564dbffe1449cb688ddd3dd646ba0.png

3 下载完成后,先在安装文件夹中新建两个文件夹

node_cache

node_global

d34dd01b48be45baa39af1d317d3b5bb.png

4 配置一下环境变量,如果不配置好就会导致微信微信小程序里面找不到路径的情况,打开控制面板->系统与安全->系统->高级系统设置->环境变量

 一共要配置三个地方

d5c44b9149cc4d33a9c7a923371debee.png

一个是用户的环境变量,要新建一个NODE_PATH,变量值是你安装的路径

efdf65d7f16e4a81bbc09b38743f3ae4.png

 另外两个在系统变量中的Path中,打开Path,新建以下两个路径(记得改自己的路径,不要复制粘贴我的)

D:\nodejs-v18.12.1\node_global

D:\nodejs-v18.12.1\node_modules

757578b697ae4c32a4529b47cb3281c6.png

确定,离开

5 进入微信小程序(第一次进入最好使用管理员),点击miniprogram 打开调试器的终端,输入 npm -v node -v,显示出来版本,如果没有显示出来版本号,原因就是你环境没有配置好,新建的路径看看和你文件的路径有没有对的上,文件夹有没有创建等。

5180d32e430b4fb08d64c0811fedcf98.png

再输入npm init -y

62b5ded711214d11b5b82fd2adb40410.png

输入npm i @vant/weapp@1.3.3 -S --production 

@1.3.3是版本号,你想要哪个版本就@什么版本,我的是1.3.3,成功后会显示我图上的内容

并且左边会出现一个文件夹,名字默认是node_modules

6ae3d77dc7a940eb997aafbd63a1e4d6.png

 6 点击左上角,工具构建npm(不需要在详情那里点击构建npm,因为现在的版本是默认开启的)

cde1c7f60bd74941bb8c6dedaa25a324.png

 7 这时候可能会弹出一个错误消息,没有找到构建的NPM包,详情如同

a8cdbce7f9b3440f8d468d4c1f9bd9d1.png

 这时候需要我们在project.config.json文件里面的setting加上

 "packNpmManually": true,

    "packNpmRelationList": [

      {

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

        "miniprogramNpmDistDir": "./miniprogram/"

      }

    ]

4bbb7e8b54064436b1a245fe8c6c6514.png

 然后保存编译,成功!!!!

5825ca1e8cfd49e2bee0580aacd7f2c5.png

  • 2
    点赞
  • 33
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
微信小程序中使用 echartsnpm,即使用 npm 安装 echarts,并在小程序中引入使用。 下面是实现的步骤: 1. 在小程序根目录下打开终端,并执行以下命令安装 echartsnpm: ``` npm install echarts -S ``` 2. 安装完成后,在小程序根目录下会生成一个 `node_modules` 文件夹,里面包含了 echarts 的相关文件。 3. 在小程序中的页面文件中,引入 echarts 的相关文件。以一个名为 `echartsDemo` 的页面为例,打开对应的 `echartsDemo.js` 文件,在文件头部添加如下代码: ```javascript import * as echarts from '../../node_modules/echarts/dist/echarts.min.js'; ``` 4. 在页面的 wxml 文件中,添加一个用于渲染图表的 canvas 标签。例如: ```html <canvas id="chart" style="width: 100%; height: 300rpx;"></canvas> ``` 5. 在页面的 js 文件中,使用 `echarts.init()` 方法初始化图表,并在初始化完成后使用相关配置绘制图表。例如: ```javascript Page({ onReady: function () { const chart = echarts.init(this.selectComponent('#chart')); chart.setOption({ // 在这里配置图表的相关选项和数据 }); } }); ``` 6. 至此,你已经成功在小程序中使用 echartsnpm 绘制图表了。 注意:由于小程序限制了部分非官方的第三方库,所以在使用 echartsnpm 之前,需要在微信开发者工具中勾选「使用 npm 模块」的选项,以确保能够正常引入和使用 echartsnpm。 希望以上内容能对你有所帮助!如果还有其他问题,请随时提问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值