![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
微信小程序-weui教程
黄菊华老师
专注大学生计算机教育和毕业设计辅导
展开
-
微信小程序weui在线入门教程-Weui项目的引用
项目引用你在使用小程序从零开始开发的时候,一定会想小程序有没有一个UI库,类似于前端中的Bootstrap,MD,Semantic UI这样的框架UI库,如果有的话,一定是一个完美的事情。上帝总是宠着我们,这样的好事情真的有,我的答案是weui.wxss。WeUI概述WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统...原创 2019-01-13 12:20:43 · 1180 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi表单组件-list列表
效果图wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">List</view> <view class="page__desc">列表</原创 2019-01-13 13:24:41 · 8233 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi表单组件-slider滑块
效果图wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">Slider</view> <view class="page__desc">滑块,这里采用原创 2019-01-13 13:27:26 · 1665 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi表单组件-uploader上传
效果图wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">Uploader</view> <view class="page__desc">上传组件&原创 2019-01-13 13:33:18 · 4861 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi操作反馈-actionsheet弹出式菜单
效果图wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">ActionSheet</view> <view class="page__desc">弹出式菜原创 2019-01-13 13:35:44 · 3685 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi操作反馈-dialog对话框
效果图js代码openConfirm: function () { wx.showModal({ title: '弹窗标题', content: '弹窗内容,告知当前状态、信息和解决方法,描述文字尽量控制在三行内', confirmText: "主操作", cancelText: "辅助操作", succ...原创 2019-01-13 13:38:19 · 3077 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi操作反馈-msg提示页
成功提示页面wxml代码<view class="page"> <view class="weui-msg"> <view class="weui-msg__icon-area"> <icon type="success" size="93"><原创 2019-01-13 13:41:01 · 1092 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi操作反馈-picker选择器
单列选择器时间选择器日期选择器js代码data: { array: ['美国', '中国', '巴西', '日本'], index: 0, date: '2016-09-01', time: '12:01' }, bindPickerChange: function (e) { console.log('picker发...原创 2019-01-14 12:29:07 · 2186 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi操作反馈-toast弹出式提示
效果图成功提示加载提示JS代码openToast: function () { wx.showToast({ title: '已完成', icon: 'success', duration: 3000 }); }, openLoading: function () { wx.showToast({ t...原创 2019-01-14 12:41:08 · 3091 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi导航相关-navbar
效果图Js代码 data: { tabs: ["选项一", "选项二", "选项三"], activeIndex: 1, sliderOffset: 0, sliderLeft: 0 }, onLoad: function () { var that = this; wx.getSystemInfo({ succe...原创 2019-01-14 12:45:06 · 2919 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi表单组件-button按钮
效果图wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">Button</view> <view class="page__desc">按钮,WeUI采用原创 2019-01-13 13:21:48 · 5298 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi基础组件-footer页脚
效果图wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">Footer</view> <view class="page__desc">页脚<原创 2019-01-13 13:07:32 · 4405 阅读 · 3 评论 -
微信小程序weui在线入门教程-基础组件-栏目首页
效果图Wxml代码<view class="weui-cells weui-cells_show "> <navigator url="/pages/01jichuzujian/01-article" class="weui-cell weui-cell_access"> <view class="weui-cell__bd&quo原创 2019-01-13 12:23:33 · 855 阅读 · 0 评论 -
微信小程序weui在线入门教程-基础组件-aiticle文章
效果图Wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">Article文章的排版布局</view> <view class="page__desc"原创 2019-01-13 12:26:33 · 1104 阅读 · 0 评论 -
微信小程序weui在线入门教程-基础组件-badge徽章
效果图Wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">Badge</view> <view class="page__desc">徽原创 2019-05-30 09:51:58 · 4513 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi基础组件-flex布局
效果图wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">Flex</view> <view class="page__desc">Flex布局<原创 2019-01-13 12:34:24 · 5290 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi基础组件-grid九宫格
效果图wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">Grid</view> <view class="page__desc">九宫格<原创 2019-01-13 12:39:11 · 7227 阅读 · 2 评论 -
微信小程序weui在线入门教程-WeUi基础组件-icon图标
效果图wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">Icons</view> <view class="page__desc">图标<原创 2019-01-13 12:50:55 · 6466 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi基础组件-loadmore加载更多
效果图wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">Loadmore</view> <view class="page__desc">加载更多&原创 2019-01-13 12:55:54 · 2584 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi基础组件-panel面板
效果图wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">Panel</view> <view class="page__desc">面板<原创 2019-01-13 13:00:56 · 8819 阅读 · 1 评论 -
微信小程序weui在线入门教程-WeUi基础组件-preview表单预览
效果图wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">Preview</view> <view class="page__desc">表单预览&原创 2019-01-13 13:03:22 · 3253 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi基础组件-progress进度条
效果图wxml代码<view class="page"> <view class="page__hd"> <view class="page__title">Progress</view> <view class="page__desc">进度条,这里采用原创 2019-01-13 13:05:24 · 1906 阅读 · 0 评论 -
微信小程序weui在线入门教程-WeUi搜索相关-searchbar搜索栏
效果图js代码 data: { inputShowed: false, inputVal: "" }, showInput: function () { this.setData({ inputShowed: true }); }, hideInput: function () { this.setData({ ...原创 2019-01-14 12:50:04 · 2207 阅读 · 5 评论