江苏龙网

  1. 主页 > 生活百科 > >

微信小程序开发教程：WeUI一个专为微信小程序设计的UI框架

小程序设计

WeUI是什么WeUI 是一套同微信原生视觉体验一致的基础样式库 。由微信官方设计团队为微信内网页和微信小程序量身设计 ， 令用户的使用感知更加统一 。它最初是为了给在微信端页面提供一致的视觉体验而开发开源的一个样式库 ， 后续随着小程序、企业微信等等的开放能力出现 ， WeUI也提供了小程序、企业微信等等的版本 。我们将要介绍的 ， 就是WeUI的小程序版本 。
WeUI提供非常多的基础组件 。列举如下：
表单组件
Button 按钮Input 输入框List 列表Slider 滑块Uploader 上传组件基础组件Article 文章Badge 徽章（小红点）Flex 布局Footer 脚注Gallery 画廊…等等操作反馈ActionSheet 弹出式菜单Dialog 对话框Msg 提示页Picker 选择器Toast 弹出式显示导航相关Navbar 导航栏Tabbar 选项栏搜索相关12345678910111213141516171819202122232425官网地址：https://weui.io/ 。
Github地址为：
https://github.com/Tencent/weui 。
小程序版本的地址为：
https://github.com/Tencent/weui-wxss/ 。
使用weui进行开发可以简单分为两个步骤 。第一步：导入weui.wxss文件
因为weui.wxss是样式文件 ， 所以导入需要在工程的样式文件进行导入 ， 在这里因为我们是在项目全局使用weui的 ， 所以在项目根目录的App.wxss文件进行导入 。
weui.wxss文件位于项目的dist/style目录下 ， 我们在工程下创建thirdparty目录 ， 把weui.wxss文件拷贝进去 。接着 ， 在app.wxss导入weui.wxss文件 。在app.wxss增加import这一行的代码 。
/**app.wxss**/@import 'thirdparty/weui.wxss';.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;} 12345678910111213第二步：参照weui提供的例子使用weui组件
我们可以在example目录找到对应组件的视图层代码和逻辑层代码 ， 比如我们要使用的九宫格 ， 就位于example目录下的grid 。我们可以直接拷贝使用里面的代码 。
为了演示我们自己依赖weui实现的九宫格 ， 我们在上面创建的工程新建一个页面weuidemo ， 置于pages目录下 。
图片描述
然后在app.json下增加一个tabbar相关配置 ， 使得我们可以通过tabbar访问到这个页面 。
【微信小程序开发教程：WeUI一个专为微信小程序设计的UI框架】{"pages": ["pages/index/index","pages/logs/logs","pages/weuidemo/weuidemo"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "WeChat","navigationBarTextStyle": "black"},"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页","iconPath": "","selectedIconPath": ""},{"pagePath": "pages/weuidemo/weuidemo","text": "weuidemo","iconPath": "","selectedIconPath": ""}]}}1234567891011121314151617181920212223242526272829接着把grid目录下的grid.wxml代码拷贝到weuidemo.wxml文件 。
<view class="page"><view class="page__hd"><view class="page__title">Grid</view><view class="page__desc">九宫格</view></view><view class="page__bd"><view class="weui-grids"><block wx:for="{{grids}}" wx:key="*this"><navigator url="" class="weui-grid" hover-class="weui-grid_active"><image class="weui-grid__icon" src=https://www.isolves.com/it/cxkf/ydd/xcx/2021-03-08/"../images/icon_tabbar.png" />Grid12345678910111213141516对grid.js文件内容也拷贝到weuidemo.wxml文件 。
Page({data: {grids: [0, 1, 2, 3, 4, 5, 6, 7, 8]}});12345然后点击重新编译 ， 就能看到九宫格的初步效果 。
图片描述
同时呢 ， 会出现错误日志 ， 提示相关图标没有找到 ， 把图标路径修改或者按照代码的图标路径放置图标文件即可 。
这样子 ， 就可以完成在自建小程序工程使用weui了 ， 在此基础上 ， 开发者就可以进行自定义的开发了 。
总结
weui 是在微信终端非常出色的UI样式库 ， 提供了非常多丰富的基础UI组件 ， 最重要的是拥有了和微信一致的视觉体验 ， 使得用户即使从微信切换到相关小程序 ， 也不会觉得UI感到突兀 。接着本文介绍了在自建工程里面使用weui的方法 ， 并配有详细的图示 ， 相信大家在看完本篇文章之后 ， 都会懂得在自建工引入weui 。


推荐阅读


上一篇：普洱茶的工艺,白话普洱茶的加工

下一篇：七镇茶业加盟信息,广西将评选茶业大师和茶叶名镇