微信小程序构建npm步骤

最新推荐文章于 2025-09-28 21:47:01 发布

原创最新推荐文章于 2025-09-28 21:47:01 发布 · 4.5k 阅读

26 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #npm #notepad++

微信小程序专栏收录该内容

1 篇文章

订阅专栏

小程序项目环境

一般情况下，项目环境应该是通用的，没啥事儿。万一有啥情况，环境也是一个解决思路

软件：微信开发者工具

版本：1.06.2409140 win32-x64

调试基础库：3.6.5

微信小程序模板：JS-模板

终端方面：

第一种：这里使用没问题
第二种：外部终端窗口

一、初始化npm项目

创建 package.json 文件，通过 npm init -y

操作：这个命令用于快速初始化一个新的npm项目， -y 参数表示使用默认设置自动填充package.json 文件，而不需要手动输入信息。

结果：在项目根目录下生成一个package.json文件，该文件包含了项目的元信息和依赖关系等。
操作如下：
- 可以看到目录中生成了package.json，并且具备一些默认值

二、安装npm包

npm intall xxxxx

操作：这个命令用于安装指定的npm包（xxxxx代表包的名称）。如果包已经存在于npm仓库中，npm将会下载并安装它及其依赖。

结果：在项目根目录下生成一个node_modules文件夹，其中包含了安装的npm包及其依赖。同时，package.json文件中的dependencies字段会更新，以记录安装的包及其版本。

通过 npm install weui-miniprogram ，引入 weui-miniprogram 微信原生组件库。

可以看到生成了以下内容

node_modules ，weui-miniprogram

package-lock.json

三、构建npm

构建 npm，通过 左上角[工具/构建npm]

操作：在微信开发者工具中，点击菜单栏的“工具”选项，然后选择“构建npm”。这个操作是针对微信小程序项目的，它会自动处理node_modules文件夹中的npm包，并将它们转换为小程序可以识别的格式。

结果：在项目根目录下生成一个 miniprogram_npm 文件夹，其中包含了转换后的npm包。这个文件夹中的内容是微信小程序可以直接使用的。

执行结果：

组件测试

在 pages文件夹下创建testPage文件夹
选中 testPage文件夹右键，选择新建page

输入 testPage 创建以下文件

该操作会自动将testPage引入到app.json中
检查 app.json 文件中，是否引入了 testPage（以防万一）

测试使用 weui-miniprogram 组件库，以 弹窗 为例

一定要注意路径问题

1、首先在 app.wxss 中引入该组件库

/**app.wxss**/
@import './miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

2、在要使用组件的页面文件夹中xxxx.json添加以下内容。这里是testPage.json。

{
  "navigationBarTitleText": "弹窗测试页",
  "usingComponents": {
    "mp-dialog": "../../miniprogram_npm/weui-miniprogram/dialog/dialog"
  }
}

3、在对应页面的xxxx.wxml中，添加该组件。这里是testPage.wxml

<view>
  <button bind:tap="toShow">弹窗测试</button>
</view>
<!--下面这个是测试组件-->
<mp-dialog title="test" show="{{tShow}}" bindbuttontap="tapDialogButton" 
    buttons="{{buttons}}">
  <view>弹窗测试组件</view>
</mp-dialog>

4、在对应页面的xxxx.js中，添加对应的内容。这里是testPage.js

// pages/testPage/testPage.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    buttons: [{text: '取消'}, {text: '确认'}],
    tShow: false
  },
  // 按钮操作方法
  toShow: function () {
    this.setData({
      tShow: true
    });
  },
  // 窗口响应方法
  tapDialogButton(e) {
    const {index} = e.detail; // 获取点击的按钮索引  
    if (index === 0) {
      // 点击取消按钮，返回上一页  
      wx.navigateBack();
    } else if (index === 1) {
      // 点击确认按钮，关闭弹窗  
      this.setData({
        tShow: false
      });
    }
  }
})

5、显示样式xxxx.wxss，这里是testPage.wxss(可选)

/**testPage.wxss**/
button {
  background-color: cornflowerblue;
  color:cornsilk;
}

6、运行结果

点击后