1.在英文目录下。
git clone https://github.com/wechat-miniprogram/weui-miniprogram.git
cd weui-miniprogram
npm run init

上面可能有一些报错如下图，不过没影响，继续下面的npm install

npm installnpm run dev

之后看到如下

成功。

生成的 miniprogram_dev 目录是一个小程序项目目录。

之后用微信开发工具，导入项目，

选择

就可以了。

在自己项目中使用

现在变简单了，开发工具内置了这个库，

这里的路径直接写，就能调用，请放心。

更新最新的 nightly 版开发者工具
在app.json里新增
“useExtendedLib”: {
“weui”: true
}
在使用的页面json文件应用组件，比如在index.json里
{
“navigationStyle”:“custom”,
“usingComponents”: {
“mp-navigation-bar”:"weui-miniprogram/navigation-bar/navigation-bar"
}
}
wxml文件使用组件，比如在index.wxml里
<mp-navigation-bar title=“首页”></mp-navigation-bar>
备注:
文档里说目前暂不支持在分包中引用，但据代码测试，分包也能使用。
各位觉得有用的话，给个赞呗。

小程序weui组件使用相关推荐

用微信开发者工具--打开微信小程序weui组件示例
浏览器搜索 :https://github.com/Tencent/weui-wxss/ 1.下载为小程序设计的weui组件, 2.在开发者工具中打开dist目录,而不是整个目录, 在开发者工具中就可 ...
微信小程序weui在线入门教程-WeUi表单组件-list列表
效果图微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua wxml代码 <view class ...
微信小程序weui在线入门教程-基础组件-badge徽章
效果图微信小程序交流群:111733917 | 微信小程序从0基础到就业的课程:https://edu.csdn.net/topic/huangjuhua Wxml代码 <view class ...
微信小程序自定义组件，提示组件
微信小程序自定义组件,这里列举了一个常用的提示自定义组件,调用自定义组件中的方法和字段.仅供参考和学习. 编写组件: 在根目录下添加"components"目录,然后像添加Page ...
PHP使用weui,微信小程序WeUI引入
引入组件通过 useExtendedLib 扩展库的方式引入 1.报错Component is not found in path "miniprogram_npm/weui-minip ...
7 个热门又优质的小程序 UI 组件库，社区、电商、工具各类都有！
如果你也是一名小程序开发者,当你打开一个高颜值的小程序时,是不是很想知道「这用的是哪一套 UI 组件库」呢? 目前,网上已有不少开源的小程序组件库,但选择太多往往让人挑花了眼,反而不知哪一款才适合自己 ...
小白如何上手几款微信小程序UI组件库
文章目录 1. 环境信息 2. GO 2.1 新建项目 2.2 使用WeUI微信官方组件 2.21. 命令行进入该项目文件夹 2.22. npm初始化 2.23. npm安装该组件包 2.24.npm ...
微信小程序weui的引入及使用
微信小程序weui的引入及使用一.微信小程序引入WeUI组件库并使用组件 1. 通过useExtendedLib扩展库的方式引入(推荐使用) 2. 通过npm的方式引入(weui-miniprogr ...
微信小程序引入组件（useExtendedLib）
使用之前扩展组件库基于小程序自定义组件构建,在使用扩展组件库之前,建议先阅读熟悉小程序自定义组件. 引入组件通过 useExtendedLib 扩展库的方式引入,这种方式引入的组件将不会计入代码 ...

小程序weui组件使用

在自己项目中使用

小程序weui组件使用相关推荐

最新文章

热门文章