小程序如何构建npm和从0开始引入和使用weui.io

jianghuxiaobing

已于 2025-02-22 18:34:12 修改

阅读量377

点赞数 5

CC 4.0 BY-SA版权

文章标签：小程序

于 2025-02-21 22:27:45 首次发布

本文链接：https://blog.youkuaiyun.com/jianghuxiaobing/article/details/145786604

完成工具->构建npm的配置

1、在项目根目录新建package.json文件，文件内容如下：
{
“dependencies” :{}
}
2、在根目录下新建node_modules文件夹，建成后目录结构如下：
在这里插入图片描述

3、在project.config.json文件中修改参数，具体修改参数如下：
3.1修改setting中的packNpmManually为true。
3.2修改packNpmRelationList为[{ “packageJsonPath”: “./package.json”,
“miniprogramNpmDistDir”: “./” }]
具体如下：

"setting": {
    "urlCheck": true,
    "es6": true,
    "enhance": true,
    "postcss": true,
    "preloadBackgroundData": false,
    "minified": true,
    "newFeature": true,
    "coverView": true,
    "nodeModules": false,
    "autoAudits": false,
    "showShadowRootInWxmlPanel": true,
    "scopeDataCheck": false,
    "uglifyFileName": false,
    "checkInvalidKey": true,
    "checkSiteMap": true,
    "uploadWithSourceMap": true,
    "compileHotReLoad": false,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },
    "enableEngineNative": false,
    "useIsolateContext": true,
    "useCompilerModule": true,
    "userConfirmedUseCompilerModuleSwitch": false,
    "userConfirmedBundleSwitch": false,
    "packNpmManually": true,
    "minifyWXSS": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  },

完成以上修改后可以构建npm，如果不通过建议点击项目->重新打开此项目
4、点击菜单工具->构建npm，完成小程序的基本配置。
重新打开项目的菜单位置
5、通过 useExtendedLib 扩展库的方式引入，这种方式引入的组件将不会计入代码包大小。
5.1首先在需要引入的页面的 json 文件加入 usingComponents 配置字段（以下字段以dialog为例，引入dialog对话框，具体根据自己项目的页面需求进行引入）：

{
  "usingComponents": {
    "mp-dialog": "weui-miniprogram/dialog/dialog"
  }
}

5.2以上引入中已将weui中的组件dialog引入名确定为了mp-dialog。然后可以在对应页面的 wxml 中直接使用mp-dialog作为标签的名称即可，举例如下：

<mp-dialog title="test" show="{{isShowDialog}}" bindbuttontap="tapDialogButton" buttons="{{buttons}}">
    <view>test content</view>
</mp-dialog>

5.3以上格式中传递了很多参数，具体引入的标签中需要传递哪些参数，有什么作用，需要参照微信的说明文档。点击以下链接可查看。
WEUI组件简介
5.4在对应页面的js文件中设置和控制部分参数，isShowDialog的默认值和buttons参数以及按钮响应函数tapDialogButton

Page({
  data: {
    isShowDialog:true,
    buttons: [{text: '取消'}, {text: '确认'}]
  }
})

5.5可以查看显示效果
模拟器显示结果
5.6在页面的js文件中增加控制和响应参数，具体步骤如下：
1、修改wxml中刚才引入的isShowDialog为具体的参数，通过改变该参数来显示或隐藏弹框。
2、在该页面的js中建立刚引入的模块的响应函数。

  tapDialogButton(e){
    console.log(e)
    if(e.detail.index==1){
      //点击了确认后执行的内容
      console.log('点击了确认')
    }else{
      //用户点击了取消按钮
      console.log('点击了取消')
    }
    this.setData({
      isShowDialog:false
    })
  },

更多操作参考以下文件：
快速上手weui