微信小程序怎么安装使用WeUI组件

WeUi 框架

这是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的UI组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。

WeUi 新版本使用

微信基础库在2.2.1 以上（包含）可以直接在app.json 里面配置就可以

app.json
{"useExtendedLib": {"weui": true}
}

组件的用法


index.json
{"usingComponents": {"mp-badge": "weui-miniprogram/badge/badge"}
}

下面的是老版本的安装方式不推荐使用

安装

要先设置微信编辑器

npm i weui-miniprogram

微信小程序构建 npm

app.wxss 全局引入weui-miniprogram 样式

对应的页面按需加载 weui-miniprogram 组件

npm install weui-miniprogram

安装完毕要构建npm

app.wxss 全局引入

要自己注意自己的目录结构，可能每个人的下载目录不一样！

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

index.wxml 使用例子

index.json 注册mp-searchbar 组件

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

index.wxml 使用 mp-searchbar 组件

<view class="page"><view class="page__bd"><mp-searchbar bindselectresult="selectResult" search="{{search}}"></mp-searchbar></view>
</view>

index.js

Page({data: {inputShowed: false,inputVal: ""},onLoad() {this.setData({search: this.search.bind(this)})},search: function (value) {return new Promise((resolve, reject) => {setTimeout(() => {resolve([{ text: '搜索结果', value: 1 }, { text: '搜索结果2', value: 2 }])}, 200)})},selectResult: function (e) {console.log('select result', e.detail)},
});

微信小程序怎么安装使用WeUI组件相关推荐

android代码控制微信,Android转战微信小程序 - vscode安装和配置
前言前一篇文章稍微总结了微信小程序的一些简单入门用法,这一篇文章说一下开发工具的选择,其实作为一个初次接触的萌新,微信开发者工具就能很好的作为日常的开发了,本人之所以选择vscode是刚入门时被一前 ...
微信小程序如何封装自己的组件？
在现在前端领域,最常见的话语就是组件化.工程化的内容.所有的框架都在朝着这方面发展.作为前端生态中的新兴热人物小程序的出现,同样支持组件化开发. 在我们的日常开发中,可以封装一些常用的组件达到复用效果 ...
微信小程序，自定义导航栏组件
微信小程序,自定义导航栏组件,可兼容iPhone 11及以上留海屏显示,关于参数获取设置参照微信小程序-收藏_羽筠的博客-CSDN博客可定义设置的内容如下: 文字及返回箭头颜色背景图片(优先级高于 ...
微信小程序简易搭建之框架/组件库
微信小程序简易搭建之框架/组件库 Vant weapp 下面看看如何导入 https://github.com/youzan/vant-weapp 使用教程: 1.下载后找到dist 2. 在你的项目 ...
奇遇网：WordPress版微信小程序开发:安装使用问题
原文:WordPress版微信小程序开发:安装使用问题自WordPress版微信小程序发布开源以来,受关注的程度超过我原来的想象.这套程序主要面对的用户是wordpress网站的站长,如果wordp ...
微信小程序---swiper轮播图组件
微信小程序-swiper轮播图组件在components中新建文件夹swiper components/swiper/swiper.wxml <!--components/swiper/swi ...
《微信小程序-进阶篇》Lin-ui组件库源码分析-列表组件List（一）
大家好,这是小程序系列的第二十篇文章,在这一个阶段,我们的目标是由简单入手,逐渐的可以较为深入的了解组件化开发,从本文开始,将记录分享lin-ui的源码分析,期望通过对lin-ui源码的学习能加深组 ...
微信小程序 select 下拉框组件
一.源码地址 GitHub - imxiaoer/WeChatMiniSelect: 微信小程序 select 下拉框组件二.效果图录屏图片质量较差,所以大家会看到残影(捂脸) 三.组件源码 1. ...
微信小程序的开发使用第三方组件库
使用第三方组件库(以vant weapp为例) 初始化右键单击miniprogram,选择在终端打开,输入命令npm init,以下的东西都可以默认(即回车即可). 在微信小程序开发工具中会多一个文 ...

微信小程序怎么安装使用WeUI组件

WeUi 框架

WeUi 新版本使用

安装

安装完毕要构建npm

app.wxss 全局引入

index.wxml 使用例子

微信小程序怎么安装使用WeUI组件相关推荐

最新文章

热门文章