精华内容
下载资源
问答
  • weui好用吗
    千次阅读
    2022-07-18 16:25:44

    作者:福建火种
    一直以来,我对自已做的微信小程序界面很不满意,但苦于对样式wxss一窍不通,只好默默忍受。俗话说的好,不在沉默中爆发就在沉默中灭亡,最近实在看不下去了,就想找个美工来帮忙,结果美工师傅没有理睬我,乍办。。。?之前就听说WeUI是微信官方为小程序量身设计的样式库,但对于年龄较大的我来说,还没有充分的胆量去尝试学习新知识,所以之前如果不是猫老师一步一步的教,一堂课一堂课的引导,估计我也早已放弃了程序设计。没有美工师傅,怎么办,那只好逼上梁山,上百度搜,结果发现其实也没那么难,因为很多好心的博主都把经验上传分享了。而且之前上过猫老师VUE的课,知道Nodejs和npm,而且微信官方的Demo也很清楚明了,那就水到渠成了。

    在这里插入图片描述

    WeUI就是专门为微信小程序设计的样式库,就象element专门为VUE设计框架。

    一、安装

    1、要有NodeJs。Node.js是一个基于Chrome V8引擎的JavaScript运行时。进入Node.js中文网站http://nodejs.cn/就可以下载安装包。NPM是随同NodeJS一起安装的包管理工具。

    2、NodeJs初始化。在小程序项目根目录,执行命令:npm init ,执行完以后,会在项目根目录看到package.json文件。

    3、安装WeUI组件库。在项目根目录执行以下命令:

    npm install --save weui-miniprogram –production

    安装完后,会在根目录出现node_modules目录。

    4、配置。①构建npm。打开微信小程序开发工具,点击顶部菜单【工具】–【构建npm】,构建完成后会在项目根目录生成miniprogram_npm文件夹。

    在这里插入图片描述

    ②支持npm。点击小程序开发工具右上角【详情】–【本地设置】,勾选上【使用npm模块】。

    5、项目使用WeUI。在小程序根目录app.wxss中引入样式文件:

    @import ‘/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss’

    二、模仿Demo

    进入WeUI-wxss Demo网址:https://github.com/Tencent/weui-wxss下载示例项目文件,然后可以看到项目文件夹中一个dist目录,这个目录就是WeUI示例代码,用小程序打开该dist目录,然后就copy吧!多试试就OK,很容易上手。

    在这里插入图片描述

    简单分享一下:比如表单,如下图,WeUI为表单提供了9种控件的js,wxm,wxss的代码,都可以直接copy.
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XZD6Tgfw-1658132732495)(http://vfp.sn58.cn/Fl2IYpi3ejo87SQStNT4XkLOWA-N)]

    比如要实现如下图的验证码页面,直接copy右边的代码就可以显示和左边一样的界面。

    在这里插入图片描述

    又比如要实现下图的左滑出现菜单,也直接copy右边的代码就可以。

    在这里插入图片描述

    又比如要实现搜索栏,也直接copy右边的代码就可以。
    在这里插入图片描述

    在这里插入图片描述

    和我一样的小白们看到这是不是有点小激动,
    这只是前端功能,后端还是我最爱的VFP,开发速度极快,代码还简单。
    这是小程序做前端,那用VFP做前端也是OK的,这样一套逻辑代码,三端复用。

    在这里插入图片描述

    经过使用WeUI后,小程序界面比之前专业多了,关键客户也很满意,哈哈哈。

    在这里插入图片描述

    顺便说一句,来自一位会员的评价,猫猫一路前行,永不止步。
    在这里插入图片描述

    更多相关内容
  • 构建打包了weui.js 1.2.14的Js下载(包含weui.min.js),以方便使用.
  • flutter-weui源码weui 用flutter实现的weui框架, 实现了weui大部分的组件, 同时支持android 和 ios, 欢迎大家使用和交流app下载ios 暂无下载地址, 需手动执行安装预览图 安装weui: 0.0.8如何运行案例1. clone 代码...
  • jqweui图片上传插件jquery-weui.uploader.js 实现 多图上传,预览,删除,初始化控件,图片赋值加载,获取图片数据。压缩包包含jquery-weui.uploader.js,weui以及示例demo
  • 首先来看下WeUI的介绍: WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。 在微信小程序的开发过程中,涉及到的前端复杂的样式...
  • weui学习总结——1、weui表单常用标签-附件资源
  • ngx-weui:角度的WeUI

    2021-01-31 06:56:58
    NGX-WEUI 组件使用构建。版使用7.0.x WeUI 1.x 使用8.x和Angular 8的WeUI <= 2.2 WeUI >= 2.3使用9.x和Angular 9,10,支持深色和浅色主题目录用法与演示--建立专案安装全局angular-cli : npm install -g @...
  • 查看weui是否是想要的表单样式,样式大致为: 下载weui 链接:https://pan.baidu.com/s/1jYqX1TEsyPWAqUHLwUm19Q 提取码:kvtc 引入weui (1)将src->style->weui.wxss复制到自己项目里 (2)在app.wxss文件中...
  • weui图片上传

    2019-09-27 13:32:04
    web图片上传前台页面 weui
  • weui.js 概述 的轻量级js封装。 注意:由于微信小程序不支持dom操作,所以weui.js并不适用于小程序。不过WeUI也为小程序开发了另外的版本,详情请看: : 手机预览 开发 安装 git clone ...
  • vue_weui 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
  • weui-sketch:ZTfer的weui草图
  • WeUI基础样式库.zip

    2020-12-10 22:27:05
    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。
  • mp-weui mp-weui 是基于 和 的微信小程序 UI 库。 安装 npm i -S mp-weui 使用 # 在 App.vue 中全局引入 css 文件 import 'mp-weui/lib/style.css' # 由于 mpvue component 暂不支持全局注册,暂时只能使用局部注册 ...
  • (已弃用)vue-weui感谢对vue-weui的支持,由于在vue-weui最后提交之后,vue和weui都进行了偏移幅度的更新,且我没有更多的时间和能量来跟进,所以此项目逐步将不再维护,如果有需要可以使用其他相关库,再次感谢。...
  • Weui设计Vue示例 目录 vue2 vue2目录示范了如何使用Vue 2和Weui Design Vue 2建造Weui示例页面,包含如下功能: 基于Weui Design Vue建造 基于vue-router的单页面应用 技术栈:Vue2,Weui Design Vue 2,Vue Cli,...
  • weUI应用,自己用JS封装了几个常用的信息提示的弹层 测试页面的代码在后面有贴出 几个弹层如下图 HTML页面代码: <!DOCTYPE html> <html> <head> <title>weUI-test</title> <meta ...
  • React-WeUI 组件使用构建。 文件 1.0.x以及实时示例。 0.4.x以及实时示例。 安装 使用 : 如果未安装React npm install --save react react-dom npm install --save weui@1.1.0 react-weui 安装了React npm ...
  • 在做微信小程序的时候就想着找一个UI库,方便我们前端开发,然后查找资料,发现了这个WeUI特别适合放在微信小程序里。下面就简单的了解一下。 WeUI是一套跟微信原生的视觉体验类似的一套样式库,由微信官方设计团队...
  • 解决方案; picker和Select组件是通过input标签绑定,... <div class=weui-cell__hd><label for=time-format class=weui-label>性别</label></div> <div class=weui-cell__bd> <input class=weui-input id=appl_se
  • WeUI

    2021-06-01 20:46:01
    WeUI是一套同微信原生视觉体验一致的基础样式库。
  • jQuery WeUI-打造微信公众号开发的瑞士军刀 jQuery WeUI是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含整个WeUI官方CSS组件,并且另外提供了扩展的扩展组件,丰富的组件库可以大大减少前端开发时间。 ...
  • weui风格Axure组件库分享版,需要自己稍微转一下,形成组件库
  • weui-master:weui模板

    2021-03-23 03:15:05
    WeUI-为WeChat Web服务量身定制介绍WeUI是类似于WeChat的UI框架,由WeChat设计团队正式设计,是为WeChat Web开发量身定制的,目的是改善和标准化WeChat用户的体验。 包括button , cell , dialog , progress , ...
  • v-weui 使用Vue2封装,为微信Web服务量身设计(Work with WeUI 0.4.0+) 特点 使用Vue封装了WeUI的所有组件 通过npm安装,可以一次引入所有组件,也可选择只引入需要的组件 不带一行css,与WeUI样式完全解绑,可以...
  • weui-wxss.zip

    2019-08-19 12:30:42
    微信小程序WeUI-wxss引入包 可以引入WeUi 源码 导入到微信小程序中开发
  • weui多选组件

    2018-07-27 15:35:18
    weui多选组件,weui多选组件,weui多选组件,weui多选组件,weui多选组件
  • Axure8 WeUI元件库

    2020-05-12 09:01:05
    一套好用WeUI元件库,适用于移动端的原型开发,包含bar、button、icon、toast、pannel、cell和form
  • weui的模版

    2018-05-10 09:53:51
    weui.rar,weui,css,weui.min.css,example.css,weui.css,js,jquery-1.8.3.js,zepto.min.js,example.js,demo,index.html

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,314
精华内容 5,325
热门标签
关键字:

weui好用吗