通过 useExtendedLib 扩展WeUI库步骤

本文详细介绍了如何在微信小程序中启用并使用WeUI组件,包括在app.json中添加useExtendedLib字段,设置usingComponents,以及在WXML和JS文件中引用和操作组件。通过这些步骤,开发者可以顺利集成并使用WeUI的对话框组件显示自定义内容。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. 在app.ison 中加入 useExtendedLib 字段

"useExtendedLib": {
   "weui": true
}

2. 在所需要的页面的 json 文件中 加入 usingComponents 字段

{

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

}

3. 组件的使用 wxml加入

<mp-dialog title="test" show="{{showDailog}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
    <view>test content</view>
</mp-dialog>

 js文件加入

    data: {
        showDailog: true,
    },
    tapDialogButton(e) {
        this.setData({
            showDailog: false
        })
    },

像这样就可以正常使用WeUI的组件了!

我在开发一款微信小程序,使用的是微信开发者工具,编译后出现系列问题,请你帮忙修复,前提是不能破坏我原有功能,具体问题如下:1、[ app.json 文件内容错误] miniprogram_npm 目录下的 weui-miniprogram 包与扩展 weui 发生冲突,请移除 weui-miniprogram 包或者删除 `useExtendedLib.weui` 配置(env: Windows,mp,1.06.2504010; lib: 3.8.11),app.json原代码:{ "pages": [ "pages/welcome/welcome", "pages/login/login", "pages/home/home", "pages/autoService/autoService", "pages/products/products", "pages/financeCircle/financeCircle", "pages/profile/profile", "pages/doc/upload/upload", "pages/contract/list/list", "pages/setting/setting", "pages/setting/constant/constant" ], "subPackages": [ { "root": "subpackages", "pages": [ "financeCircle/pages/publish/index", "auth/pages/realname/realname", "oa/pages/home/home", "oa/pages/todo/todo", "oa/pages/meetings/meetings", "oa/pages/approvals/approvals", "financeCircle/pages/messages/system", "financeCircle/pages/messages/finance", "financeCircle/pages/messages/interaction", "financeCircle/pages/index/index", "financeCircle/pages/publish/publish", "financeCircle/pages/detail/detail", "carWarranty/infoInput/carInfo", "carWarranty/eSign/eSign", "carWarranty/contract/templateLibrary/templateLibrary" ] }, { "root": "pages/charts", "pages": ["charts"] }, { "root": "subpages/finance", "pages": ["circle", "detail"] }, { "root": "subpages/products", "pages": ["category", "list"] } ], "window": { "backgroundColor": "#F7F9FC", "backgroundTextStyle": "light", "navigationStyle": "custom", "navigationBarBackgroundColor": "#1A3A84", "navigationBarTextStyle": "white" }, "tabBar": { "color": "#999999", "selectedColor": "#1A3A84", "backgroundColor": "#FFFFFF", "borderStyle": "white", "position": "bottom", "list": [ { "pagePath": "pages/home/home", "text": "首页", "iconPath": "images/icon/home.png", "selectedIconPath": "images/icon/home_active.png" }, { "pagePath": "pages/autoService/autoService", "text": "汽车企服", "iconPath": "images/icon/car.png", "selectedIconPath": "images/icon/car_active.png" }, { "pagePath": "pages/products/products", "text": "产品大全", "iconPath": "images/icon/product.png", "selectedIconPath": "images/icon/product_active.png" }, { "pagePath": "pages/financeCircle/financeCircle", "text": "易融圈", "iconPath": "images/icon/finance.png", "selectedIconPath": "images/icon/finance_active.png" }, { "pagePath": "pages/profile/profile", "text": "我的", "iconPath": "images/icon/user.png", "selectedIconPath": "images/icon/user_active.png" } ] }, "permission": { "scope.userLocation": { "desc": "用于展示本地服务机构" } }, "requiredPrivateInfos": ["getLocation"], "style": "v2", "sitemapLocation": "sitemap.json", "preloadRule": { "pages/home/home": { "network": "wifi", "packages": ["subpackages"] } }, "renderer": "skyline", "componentFramework": "glass-easel", "lazyCodeLoading": "requiredComponents", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "disableABTest": true, "defaultContentBox": true } }, "workers": "workers", "setting": { "minSdkVersion": "2.29.2", "urlCheck": true, "es6": true, "postcss": true, "babelSetting": { "ignore": [], "disablePlugins": [], "outputPath": "" }, "useWorker": true }, "useExtendedLib": { "weui": true } } 2、实际编译后,会有报错信息,模拟器终止,代码中有复杂的计算逻辑,强行终止。
最新发布
07-26
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值