微信小程序构建npm步骤

目录

小程序项目环境

一、初始化npm项目

二、安装npm包

三、构建npm

组件测试

小程序项目环境

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

软件：微信开发者工具

版本：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包。这个文件夹中的内容是微信小程序可以直接使用的。

• 执行结果：

  • 

组件测试

1. 在 pages文件夹下创建testPage文件夹

2. 选中 testPage文件夹右键，选择新建page

   

   输入 testPage 创建以下文件

   

   该操作会自动将testPage引入到app.json中

3. 检查 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、运行结果

        点击后