精华内容
下载资源
问答
  • 2021-11-09 17:22:55
    更多相关内容
  • weui框架实现的投票系统,全部用jsp、jdbc等技术实现。
  • jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库...weui框架暂时只有css文件,并没有js文件实现其功能,我在其html+css后
  • WEUI微信官方提供的小程序框架!知道你们懒我做成小程序了,直接在开发者打开找自己用的就OK了!
  • WeUI框架

    千次阅读 2019-10-23 08:22:35
    WeUI框架 WeUI是一套小程序的UI框架,所谓UI框架就是一套界面设计方案,有了组件,我们可以用它来拼接出一个内容丰富的小程序,而有了UI框架,我们就可以让我们的小程序变得更加美观。 体验WeUi小程序 WeUI是微信...

    WeUI框架

    WeUI是一套小程序的UI框架,所谓UI框架就是一套界面设计方案,有了组件,我们可以用它来拼接出一个内容丰富的小程序,而有了UI框架,我们就可以让我们的小程序变得更加美观。

    体验WeUi小程序

    WeUI是微信官方设计团队的一套同微信原生视觉体验一致的基础样式库,在手机微信里搜索WeUI小程序即可。

    下载源码就可以看到weui-wxss-master文件夹,导入项目,体验

    为什么是weui-wxss-master下的dist⽂件夹,⽽不是weui-wxss-master? 你还记得什么是⼩程序的根⽬录吗?

    下载了WeUI的源代码,其实WeUI的核⼼⽂件是weui.wxss。

    如何在我们 的模板⼩程序⾥使⽤WeUI的样式呢?

    ├── pages  
    ├── image  
    ├── style
    │   ├── weui.wxss  
    ├── app.js
    ├── app.json
    ├── app.wxss

    把weui⼩程序dist/style⽬录下的weui.wxss⽂件粘贴到style的⽂件夹⾥

    @import 'style/weui.wxss';

    Flex布局

    布局也是⼀种样式,也属于css⽅⾯的知识哦Flex是Flexible Box的缩写,意为”弹性布局”

    <view class="flex-box">
      <view class='list-item'>Python</view>
      <view class='list-item'>⼩程序</view>
      <view class='list-item'>⽹站建设</view>
    </view>
    .list-item{
      background-color: #82c2f7;
      height: 100px;
      text-align: center;
      border:1px solid #bdd2f8; 
    }

    让组件变成左右关系

    .flex-box{
      display: flex; 
    }

    让组件的宽度均分

    .list-item{
      flex:1; 
    }

    让组件内的内容垂直居中

    .list-item{
      display: flex;
      align-items:center;/*垂直居中*/
      justify-content: center;/*⽔平居中*/
     }

    全局样式与局部样式

    定义在 app.wxss 中的样式为全局样式,作⽤于每⼀个⻚⾯。

    在 page 的 wxss ⽂件中定 义的样式为局部样式,只作⽤在对应的⻚⾯,并会覆盖 app.wxss 中相同的选择器。

    渐变与动画CSS的渐变Gradientlinear-gradient() 函数⽤于创建⼀个表示两种或多种颜⾊ 线性渐变的图⽚。

    在gradient.wxml⻚⾯输⼊以下代码:

    <view class="gradient-display">
    </view>

    在gradient.wxss⾥输⼊:

    .gradient-display{
      background-image:linear-gradient(red, blue);
      width: 100vw;
      height: 100vh;
      }

    它默认的渐变⽅向是从上到下改变渐变的⽅向

    background-image: linear-gradient(45deg, blue, red);
    /* 渐变轴为45度,从蓝⾊渐变到红⾊ */
    background-image:linear-gradient(to left top, blue, red);
    /* 从右下到左上、从蓝⾊渐变到红⾊ */
    background-image:linear-gradient(0deg, blue, green 40%, red);
    /* 从下到上(渐变轴为0度),从蓝⾊开始渐变、到⾼度40%位置是绿⾊渐变开始、最后以红⾊结束
     */

    Filter滤镜

    滤镜filter属性,可以对图⽚进⾏⾼斯模糊、调整 对⽐度、转换为灰度图像、⾊相旋转、图⽚透明等操作。

    ⾼斯模糊blur,图⽚变灰grayscale(%),图⽚透 明opacity(%)

     .filter-display img{
            width: 150px;height: auto;
        }
        .blur{
            filter: blur(8px);
        }
        .grayscale{
            filter: grayscale(90%);
        }
        .opacity{
            filter: opacity(25%);
        }
        .multiple{
            filter: blur(8px) grayscale(90%) opacity(25%);
        }

    变形属性Transform

    CSS transform属性能通过修改CSS视觉格式化模型的坐标空间旋转、缩放、倾斜或平移给定 的组件。

    变形Transform、过渡Transition、动画Animation

    .transform-display image{
      width: 80px;height: 80px;
      }
    .scale{
        transform: scale(1,0.5); }
    .translate{
        transform: translate(500px,20px); }
    .rotate{
        transform: rotate(45deg); }
    .skew{
        transform: skew(120deg); }

    过渡属性TransitionCSS transitions 可以控制组件从⼀个属性状态切换为另外⼀个属性状态时的过渡效果。

    .selector {
        transition: [transition-property] [transition-duration] [transition-ti
    ming-function] [transition-delay]; }

    transition-property,应⽤过渡的 CSS 或动画属性的名称;transition-duration,整个过渡效果持续的时间transition-timing-function,规定过渡效果的时间曲线transition-delay,过渡效果延迟多久

    动画属性Animation

    CSS animations 使得可以将从⼀个CSS样式配置转换到另⼀个CSS样式配置。动

    @keyframes fadeIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      } }
    .fadeIn {
      animation: 4s linear 0s infinite alternate fadeIn; }

    抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转 (rotateIn/rotateOut)、淡⼊淡出(fadeIn/fadeOut)

    若本号内容有做得不到位的地方(比如:涉及版权或其他问题),请及时联系我们进行整改即可,会在第一时间进行处理。

    请点赞!因为你们的赞同/鼓励是我写作的最大动力!

    欢迎关注达达的简书!

    这是一个有质量,有态度的博客

    博客

    展开全文
  • 网上有很多类似的说法,都是用npm构建的方式,... "weui": true } 然后在你要用的页面json文件里,引入对应你需要用的组件 { "usingComponents": { "mp-badge": "weui-miniprogram/badge/badge", "mp-form": "we

    网上有很多类似的说法,都是用npm构建的方式,但是不知道你们会不会像我一样在终端上各种报错

    • 其实不必,我们直接引用

    首先打开app.json,直接插入这段代码放在最外层的花括号里

    "useExtendedLib": {
        "weui": true
      }
    
    • 然后在你要用的页面json文件里,引入对应你需要用的组件
    {
      "usingComponents": {
        "mp-badge": "weui-miniprogram/badge/badge",
        "mp-form": "weui-miniprogram/form/form",
        "mp-checkbox": "weui-miniprogram/checkbox/checkbox"
      }
    }
    
    • 然后html里面用前面的词作为标签
    <mp-badge content="99+" style="position: absolute;top: -.4em;right: -.4em;"/>
    
    • 至于每个组件的可选参数,在官网下面都有
      https://developers.weixin.qq.com/miniprogram/dev/extended/weui/badge.html

    仅此而已,不需要任何多余的操作,至于为什么不能一次性把所有组件放进去,想到什么用什么,是因为包太大,很容易超过2M,倒时上传版本就会带来阻碍

    展开全文
  • 本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。苏南大叔在本文中说说腾讯的...weui框架组件小白入门指南:如何安装使用weui.js?(图12-1)本文的主要介绍内容是:weui...

    9ac5e4e30859fb63569e5fad0d8d2230.png 本博客不欢迎:各种镜像采集行为,请尊重知识产权法律法规。大家都是程序员,不要闹得不开心。

    苏南大叔在本文中说说腾讯的weui这个前端框架的基本使用方法。这款框架已经问世有几年的时间了,因为其可以把微信的风格高度还原到网页之中。所以,可以说是微信公众号之类的网站,必备组件了,可以很好地保证用户体验。

    1d4e742f5251fb8dacebba9aa25f1e08.pngweui框架组件小白入门指南:如何安装使用weui.js?(图12-1)

    本文的主要介绍内容是:weuijs的范例使用方式,而weui的部分,就是一笔带过。

    本文测试环境:mac,weui@1.1.3,weuijs@1.1.4。

    官方github仓库

    相关github仓库地址:

    相关在线范例的地址:

    1d4edb6982f165073da6b015f7c44c1f.pngweui框架组件小白入门指南:如何安装使用weui.js?(图12-2)

    对于设计师们,这里还有相关的psd或者sketch文件可以下载:

    最简易的方式

    这个部分就是最简单的使用方式了,没有比这更简单的了。

    weui.alert('alert');

    反馈1
    表单2
    上传3
    其它6

    49a30950774cde64e6eed72daa34bea2.pngweui框架组件小白入门指南:如何安装使用weui.js?(图12-3)

    主要的关键代码就是:

    引入两个库文件:

    书写符合weui格式的html结构:

    反馈1
    表单2
    上传3
    其它6

    编写符合weuijs要求的script:

    weui.alert('alert');

    官方weuijs的范例

    weuijs的官方例子是基于webpack的,所以,如果您对webpack不熟悉的话,可能理解上会有些费力。下面先说基础的命令行步骤:git clone https://github.com/Tencent/weui.js.git

    cd weui.js

    npm install

    npm start

    818b7bb5d488277af507c5fbe568aff0.pngweui框架组件小白入门指南:如何安装使用weui.js?(图12-4)

    npm start之后,默认占用的端口号是8001,webpack插件会自动打开127.0.0.1:8001,以展示运行结果。

    5579bd6e94187e8f6229544f9b522487.pngweui框架组件小白入门指南:如何安装使用weui.js?(图12-5)

    先说说git命令,有些开发小伙伴就可能没有安装git命令啊。所以下面的文章是你所需要的。

    对于mac系统来说,您执行npm install的时候,可能会出现permission denied的情况。这个时候,您的解决方案是:sudo npm i --unsafe-perm

    下面的文章是相关链接:

    f0edd737e6094410552819834f430cd5.pngweui框架组件小白入门指南:如何安装使用weui.js?(图12-6)

    bb8889cc7c34c402a957330e3371b0c9.pngweui框架组件小白入门指南:如何安装使用weui.js?(图12-7)

    修改代码

    这个官方的例子,运行后,就是对examples目录进行了处理,添加了对example.js的引用而已。值的注意的是:example.js,代码里面是import的,包含了对weuijs的引用。而examples/index.html里面,并没有主动加载example.js,而是webpack主动注入的代码。

    3b74abb9a7b75c2dd7380e6241075328.pngweui框架组件小白入门指南:如何安装使用weui.js?(图12-8)

    9db025afb633c2c62e031a5a981b6065.pngweui框架组件小白入门指南:如何安装使用weui.js?(图12-9)

    那么,大家把examples目录下的代码,和苏南大叔本文最开始的代码,进行对比,就可以知道其中的区别。

    ccca20d6d7928ec4e7c64548b1ee4d4f.pngweui框架组件小白入门指南:如何安装使用weui.js?(图12-10)

    最终代码

    执行下面的命令:npm run build

    执行build命令后,就在dist目录下面,可以得到最终的编译过的版本了。这个版本就是可以脱离webpack而存在的版本了。

    309150d598cc396d40b85eaccd1b005a.pngweui框架组件小白入门指南:如何安装使用weui.js?(图12-11)

    修改配置

    因为是基于webpack的,通过package.json里面的script可以知道:配置文件的位置是:build/webpack.example.config.js

    所以,大家可以修改一下下图中的的这些文件试试看:

    b9216938045d27364f9b6a873f1e6954.pngweui框架组件小白入门指南:如何安装使用weui.js?(图12-12)

    相关链接

    第三方修改的基于jquery的weui版本:

    weui官方的范例汇总页面,常见的使用场景,相关使用范例都是存在的:

    总结

    这个weui和weuijs的文档,说起来还是挺简单的,比bootstrap比起来的话,文档就是有些分散。但是使用起来,绝对是要比bootstrap要简单的多。所以,还是那句话,"眼观六路耳听八方"就好了。

    更多weui的相关经验文字,欢迎阅读苏南大叔的经验文章:

    93ddba5b688a6967c0a88c0220992c34.gif

    e6eebe3032abd035b5cf072fe954fec6.png 如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。

    9ac5e4e30859fb63569e5fad0d8d2230.png 本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

    展开全文
  • 微信,手机weui框架

    2018-10-19 12:04:42
    微信小程序 的一些实用小工具、例子的压缩包,微信官方下载
  • weui 框架

    2019-05-27 16:18:00
    weui是一个框架,但是官方并没有提供文档;  所以我们需要在github上来通过案例来了解他的用法  一般做列表,左边的图片要么60x60,要么80x80用的比较多  weui是一个小巧的框架,所以带来的问题就是不全,所以...
  • 微信小程序(WeUI框架

    千次阅读 2019-12-03 19:17:56
    类似于前端中的常见的UI库例如Bootstrap、MDUI(简称MD)、Semantic UI(简称Semantic )、uni-app、MUI、Element等等类似的框架UI库。 小程序UI库WeUI: 结果当前是当前有的,它就是微信小程序官方推出的小程序UI库...
  • 26.微信小程序(WeUI框架

    千次阅读 2019-11-30 09:18:27
    微信小程序(WeUI框架) 前言 前言: 因为小程序的api描述都比较简单,并没有wxml及wxss的描述,有的人可能会想小程序有没有一个UI库。类似于前端中的常见的UI库例如Bootstrap、MDUI(简称MD)、Semantic UI(简称...
  • weui框架

    2017-07-31 17:01:34
    做项目的时候,发现一个挺好用的一个微信开发使用的weui框架,挺不错的,现在分享一下给小伙伴们。开发的效率挺高的! https://weui.io/ https://github.com/weui/weui WeUI 的轻量级 js 封装 ...
  • 这是一款使用weui框架的前端ui技术,制作的一款可以应用于图片上传、预览与删除的代码,在代码中,我做了图片上传个数的限制,你只需取得存储文件的数组,即可得到图片文件,此代码实现的功能可以应用于所有的web...
  • 针对 Vue 框架移植的 We UI 框架的适配,让 mobile开发过程成为一种享受
  • 小歆记账微信小程序项目(WeUI框架客户端)xxjzWeb-master.zip
  • 1、weui框架 优势: 不需要占体积 同微信客户端一致的视觉效果 性能比其他框架会好一点 weui框架的引用: 在app.json里面添加 "useExtendedLib": { "weui": true }, 在需要使用的页面的json上添加,例如: { ...
  • 1.公众号样式UI库的下载地址:https://github.com/Tencent/weui 2.微信小程序UI库的下载地址:https://github.com/Tencent/weui-wxss/ 3.微信小程序的官方实例Demo:...
  • 小歆记账微信小程序项目(WeUI框架客户端)xxjzWeChat-master.zip
  • Jqweui框架开发实例
  • mpvue 兼容的 微信小程序:API 代码片段,组件代码片段(mpvue 语法),weui 框架代码片段
  • 浅谈jQuery WeUI框架

    万次阅读 2018-09-28 18:52:59
    WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计。而jQuery WeUI是在其基础上的加强版本,专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI...
  • 类似于前端中的常见的UI库例如Bootstrap、MDUI(简称MD)、Semantic UI(简称Semantic )、uni-app、MUI、Element等等类似的框架UI库 小程序UI库WeUI: 结果当前是当前有的,它就是微信小程序官方推出的小程序UI库...
  • 利用微信的weui框架上传、预览和删除图片

    万次阅读 热门讨论 2018-03-09 09:48:31
    jQuery WeUI 是专为微信公众账号开发而设计的一个框架,jQuery WeUI的官网:http://jqweui.com/需求:需要在微信公众号网页添加上传图片功能技术选型:实现上传图片功能可选百度的WebUploader、饿了么的Element和...
  • 微信 weui框架代码汇总

    千次阅读 2016-11-10 10:06:08
    weui框架代码汇总: Button 按钮1 按钮2 确认3 确认4 按钮5 按钮6

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,535
精华内容 1,814
关键字:

weui框架

友情链接: TDI-master.zip