精华内容
下载资源
问答
  • wei UI使用

    2019-05-31 15:34:00
    1、前言 通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识。后端基本能够基于盛派的第三方...于是乎博主打算另辟蹊径,找找基于微信开发的移动端UI组件,最后找到了微信官方开发的一套前...

    1、前言

    通过前面系列文章的学习与讲解,相信大家已经对微信的开发有了一个全新的认识。后端基本能够基于盛派的第三方sdk搞定大部分事宜,剩下的就是前端了。关于手机端的浏览器的兼容性问题相信一直是开发者们的一块心病,对于微信开发前端组件这一块总是找不到合适的移动端组件,什么都要自己去实现,这个开发成本就大了去了。于是乎博主打算另辟蹊径,找找基于微信开发的移动端UI组件,最后找到了微信官方开发的一套前端组件:WeUI。

    2、WeUI基本介绍

    2.1 WeUI概述

    WeUI、微信公众号开发的瑞士军刀。WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。有了这个作为基础,我们再也不用担心微信开发的浏览器兼容性问题了,微信官方推出的这个东西拯救了千千万万的开发者!

    jQuery WeUI 是专为微信公众账号开发而设计的一个简洁而强大的UI库,包含全部WeUI官方的CSS组件,并且额外提供了大量的拓展组件,丰富的组件库可以极大减少前端开发时间。

    jQuery WeUI 的最大特点是它只提供UI组件,并不会对项目所使用的框架和其他库有任何的限制,几乎可以在任何环境下使用。无论你的项目是基于jQuery,还是 React, Angular, Vue, 你都会发现 jQuery WeUI 能非常方便的和他们结合使用。既是你的项目是一个有很悠久历史的老项目,也几乎可以做到拿来即用。

    WeUI开源地址:https://github.com/Tencent/weui

    WeUI使用示例:https://weui.io/

    基于jquery的WeUI:http://jqweui.com/(提供了大量的第三方组件库)

    2.2 为什么选择jQuery WeUI

    jQuery WeUI 的定位正如 jQuery 的定位:做一把锋利易用的小刀,而不是做一个笨重的大炮。

    • 简单易用,无上手难度
    • 丰富强大的组件库,并且还在不断完善中
    • 轻量,无限制,可以结合任何主流JS框架使用,比如 Vue, Angular, React 等
    • 高性能的 CSS3 动画,低端手机上依然可以较流畅运行
    • 详尽完善的官方文档
    • 标准稳定的API,基本可以保证版本透明更新
    • 基于 MIT 协议发布,免费开源

    下面引用几张WeUI官方提供的jQuery WeUI组件展示。
    jQuery WeUI组件展示
    jQuery WeUI组件展示

    3、jQuery WeUI基本用法

    考虑到大家对WeUI组件的使用有忧虑,不知如何下手。下面我就从最基础的开始,手把手教你入门WeUI。已经很熟悉的朋友请直接跳过此段,前往官方网站查看demo。

    1、引用必须的文件

    如果你用的是原始的开发方式,比如基于jQuery的开发,那么你首先需要去Github上面将WeUI的源文件down下来,然后引入到你的项目;如果是基于npm管理组件,使用npm命令的方式引入WeUI组件即可。这里我们使用的是原始的开发方式。如果你只需要WeUI的css样式支持,那么你只需要引入weui.css文件即可;如果除了样式之外,还需要WeUI的js组件支持,那么你还需要引用另外一个包:weui.js。下面先介绍基础的WeUI样式库,先来看看WeUI到底能为我们带来啥,后面再来分享WeUI.js以及jquery.WeUI.js的相关技术。

    要使用WeUI,这里首先必须引入css样式文件

    <link rel="stylesheet" href="/Content/weui-master/dist/style/weui.css" />

    2、最基础的组件样式

    下面我们以一个最基础的表单来展示WeUI的使用方法,如下我们开发一个个人资料录入的页面效果。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>个人资料录入</title> <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css" /> </head> <body> <div class="container"> <div class="page navbar js_show"> <div class="page__bd"> <div class="weui-cells__title">填写个人资料</div> <div class="weui-cells weui-cells_form"> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">姓名</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="text" placeholder="请输入姓名" /> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">QQ</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="number" pattern="[0-9]*" placeholder="QQ号" /> </div> </div> <div class="weui-cell weui-cell_vcode"> <div class="weui-cell__hd"> <label class="weui-label">手机号</label> </div> <div class="weui-cell__bd"> <input class="weui-input" type="tel" placeholder="请输入手机号" /> </div> <div class="weui-cell__ft"> <button class="weui-vcode-btn">获取验证码</button> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="" class="weui-label">出生日期</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="date" value="" /> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label for="" class="weui-label">注册时间</label></div> <div class="weui-cell__bd"> <input class="weui-input" type="datetime-local" value="" placeholder="" /> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">性别</label></div> <div class="weui-cell__bd"> <div class="weui-cells weui-cells_radio"> <label class="weui-cell weui-check__label" for="x11"> <div class="weui-cell__bd"> <p>男</p> </div> <div class="weui-cell__ft"> <input type="radio" class="weui-check" name="radio1" id="x11" /> <span class="weui-icon-checked"></span> </div> </label> <label class="weui-cell weui-check__label" for="x12"> <div class="weui-cell__bd"> <p>女</p> </div> <div class="weui-cell__ft"> <input type="radio" name="radio1" class="weui-check" id="x12" checked="checked" /> <span class="weui-icon-checked"></span> </div> </label> </div> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"><label class="weui-label">爱好</label></div> <div class="weui-cell__bd"> <div class="weui-cells weui-cells_checkbox"> <label class="weui-cell weui-check__label" for="s11"> <div class="weui-cell__hd"> <input type="checkbox" class="weui-check" name="checkbox1" id="s11" checked="checked" /> <i class="weui-icon-checked"></i> </div> <div class="weui-cell__bd"> <p>篮球</p> </div> </label> <label class="weui-cell weui-check__label" for="s12"> <div class="weui-cell__hd"> <input type="checkbox" name="checkbox1" class="weui-check" id=

    转载于:https://www.cnblogs.com/dxqNet/p/10955500.html

    展开全文
  • // weiui 组件 "mp-cells" : "weui-miniprogram/cells/cells" , "mp-cell" : "weui-miniprogram/cell/cell" , "mp-badge" : "weui-miniprogram/badge/badge" } , 这里配置到全局了,也可以在...

    下载

    npm install weui-miniprogram --save
    

    下载完之后,在微信开发者工具点击 工具 -> 构建npm

    配置

    在 app.json 中修改 usingComponents 字段:

    "usingComponents": {
      // 自定义组件
      "v-order": "components/order/order",
      "v-score": "components/score/score",
      // 有赞组件
      "van-tab": "vant-weapp/tab/index",
      "van-tabs": "vant-weapp/tabs/index",
      "van-dialog": "vant-weapp/dialog/index",
      "van-popup": "vant-weapp/popup/index",
      "van-cell": "vant-weapp/cell/index",
      // weiui 组件
      "mp-cells": "weui-miniprogram/cells/cells",
      "mp-cell": "weui-miniprogram/cell/cell",
      "mp-badge": "weui-miniprogram/badge/badge"
    },
    

    这里配置到全局了,也可以在那个页面的 页面.json 文件里配置

    引入css:

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

    使用

    <mp-cells>
       <mp-cell title="隐私声明"
                link
                bindtap="toPrivacy">
       </mp-cell>
       <mp-cell title="注销说明"
                link
                bindtap="toLogout">
       </mp-cell>
    </mp-cells>
    

    在这里插入图片描述

    展开全文
  • weiUI 基本上是 weui 的 css 样式: npm install weui -save   weui 配套的 js 代码: npm install weui.js -save   在要用的 vue 文件里加上:   import 'weui' import weui ...

     

    express 

    1. 安装

    npm install express --save

    2. 创建项目

     

    vue js

    安装Vuejs

    vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目。这篇文章将会从实操的角度,介绍整个搭建的过程。

    1. 避坑前言

    其实这次使用vue-cli的过程并不顺利,反复尝试几次都遇到以下这个报错:

     
    创建vue-cli工程项目时的报错

    在网上查了很多资料才发现原来是node版本过低的问题,虽然没有找到官方对这个“过低”问题的解释,但是根据国外网友的经验之谈,应该是至少使用node6,我将node4更新至node8之后确实没有报错了,顺利搭建。相关答疑帖: https://github.com/vuejs/vue-cli/issues/618

     

     
    确认node与npm的版本

    将这个放在最前面说是希望大家在搭建前,应该先确保将node更新至6以上,这样能少走一些弯路。下面开始正式介绍整个构建过程。

    2. 使用 vue-cli 搭建项目

    下面整个过程是基于已经安装node.js和cnpm的基础上,node.js如何安装就不在这里详说了。如何全局化安装cnpm,这里简单提一下:

    npm install cnpm -g --registry=https://registry.npm.taobao.org
    

    其实对于安装vue-cli,使用npm命令和cnpm命令都是可以的,个人觉得使用npm安装的比较慢,而且很可能会因为网络问题而出错,所以还是觉得使用cnpm稳一点。

    (1)全局安装 vue-cli ,在命令提示窗口执行:
    cnpm install -g vue-cli 
    
     
    安装vue-cli

    出现以上提示表示vue-cli正常安装成功,可以正式创建vue-cli工程项目了。

    (2)安装vue-cli成功后,通过cd命令进入你想放置项目的文件夹,在命令提示窗口执行创建vue-cli工程项目的命令:
    vue init webpack
    
     
    创建vue-cli工程项目

    确认创建项目后,后续还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等,详见上图。安装顺利执行后会,生成如下文件目录:


     
    生成文件目录
    (3)生成文件目录后,使用 cnpm 安装依赖:
     cnpm install 
    
     
    安装依赖
    (4)最后需要执行命令: npm run dev 来启动项目,启动完成后会自动弹出默认网页:
     
    启动项目

     
    启动项目

     
    默认网页

    到这一步,就算成功利用vue-cli搭建一个vue项目了,撒花 ~

    3.目录结构及其对应作用

    通过vue-cli搭建一个vue项目,会自动生成一系列文件,而这些文件具体是怎样的结构、文件对应起什么作用,可以看看下面的解释:

    ├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境
    │   └── ...
    ├── config/                     
    │   ├── index.js                # 项目核心配置
    │   └── ...
    ├ ── node_module/               #项目中安装的依赖模块
       ── src/
    │   ├── main.js                 # 程序入口文件
    │   ├── App.vue                 # 程序入口vue组件 │ ├── components/ # 组件 │ │ └── ... │ └── assets/ # 资源文件夹,一般放一些静态资源文件 │ └── ... ├── static/ # 纯静态资源 (直接拷贝到dist/static/里面) ├── test/ │ └── unit/ # 单元测试 │ │ ├── specs/ # 测试规范 │ │ ├── index.js # 测试入口文件 │ │ └── karma.conf.js # 测试运行配置文件 │ └── e2e/ # 端到端测试 │ │ ├── specs/ # 测试规范 │ │ ├── custom-assertions/ # 端到端测试自定义断言 │ │ ├── runner.js # 运行测试的脚本 │ │ └── nightwatch.conf.js # 运行测试的配置文件 ├── .babelrc # babel 配置文件 ├── .editorconfig # 编辑配置文件 ├── .gitignore # 用来过滤一些版本控制的文件,比如node_modules文件夹 ├── index.html # index.html 入口模板文件 └── package.json # 项目文件,记载着一些命令和依赖还有简要的项目描述信息 └── README.md #介绍自己这个项目的,可参照github上star多的项目。 build/



    weiUI
    基本上是 weui 的 css 样式:
    npm install weui -save
     
    weui 配套的 js 代码:
    npm install weui.js -save
     
    在要用的 vue 文件里加上:

     

    import 'weui'
    import weui from 'weui.js'
     

     

    转载于:https://www.cnblogs.com/dxqNet/p/10357164.html

    展开全文
  • 只想选择年月日,jquery-weui建议使用日历 但实际的需求需要向移动端ios时间那样的效果原生的安卓上默认的体验并不很好,只有这个接近于ios,type=date的效果,但是这个里面却包含了时间,需求只要年月日,网上查了...

    只想选择年月日,jquery-weui建议使用日历
    但实际的需求需要向移动端ios时间那样的效果原生的安卓上默认的体验并不很好,只有这个接近于ios,type=date的效果,但是这个里面却包含了时间,需求只要年月日,网上查了很多方法都是修改源码操作,比较繁琐。

    尝试了不返回时间的值可以只有年月日。

    就是jq weui会报错== 但是不影响操作和效果。

    $("#datetime-picker").datetimePicker({
          times: function () {
                 return;
          }
    });

     

    展开全文
  • 调用时,显示了加载框,于是取到数据后写了关闭代码,结果只要滚动到底部就不断重复加载数据。。。 要疯掉
  • <input class="weui-input" id="xszHz" name="xszHz" type="text" onblur="sbblur(this, 'xszHz')" onkeyup="numTrim('xszHz')" required pattern="^[0-9.]*$" emptyTips="请输入吨位" notMatchTips="请输入小于...
  • IOS 下面不显示预览. 结果去掉了红框中的缓存部分 就可以显示了 备忘,也帮助一下需要的朋友 @*<meta http-equiv="pragma" content="no-cache" /> <meta ...met...
  • mpvue怎么使用第三方样式weui

    千次阅读 2018-08-24 11:45:10
    第一步:npm install --save weiui npm install --save weiui.css   第二步:  
  • html移动端商城

    2018-09-27 16:42:37
    一个weiui开发的移动端商城,需要的可以下载看看,=VV=
  • weui-master.zip

    2019-10-30 15:48:54
    weiui页面开发,微信页面开发;包含各种页面样式,下载后立马可以用,但验证效果缺乏。
  • APICloud开发记录手册

    千次阅读 2018-10-29 20:27:49
    APICloud开发手册 ...WeiUI集成5.1 将样式以及JS加入到项目中5.2 weiui官网6、上拉刷新6.1 父页面[只有header...
  • 微信开发-苹果手机无法滑动页面

    千次阅读 2017-07-10 11:52:59
    使用的是微信提供的weiui样式库。 其中的一个样式为: slideIn cell"> 去掉样式中的slideIn 。 修改为: 同时,需要重新page的样式,修改为: .page{ overflow-y:auto; opacity:1; } 主要...
  • Android 漂亮的UI库集合

    千次阅读 2016-09-09 15:35:58
    Android 漂亮的UI库集合
  • UILibrary 一些 UI 相关的 View、Drawable 等整理了一下
  • 获取全国城市列表方法:页面中先引入 jquery-weui-city-picker.jshttps://cdn.bootcss.com/jquery-weui/1.2.1/js/city-picker.js//服务城市列表$.rawCitiesData来自jquery-weiui-city-picker.jsfunctiongetCity(){...
  • 便民查询简介-markdown

    2016-08-11 23:39:34
    便民自行车查询关爱城市,绿色出行便民自行车查询民间版,目前只支持北京和福州,其他城市是否加入,待定...weiui easyui mysql截图城市列表 福州公共自行车列表 北京公共自行车列表 [厦门] [深圳 ]代码链接
  • 简介:提高 Android UI 开发效率的 UI 库 更多:作者 提 Bug 官网  标签:   QMUI Android 的设计目的是用于辅助快速搭建一个具备基本设计还原效果的 Android 项目,同时利用自身提供的丰富控件及兼容处理...
  • 从零开始学微信小程序开发–记录 ​ 疫情严重,被困在家,利用时间学习微信小程序的开发。...下载colorUI格式库开发,下载weiUI, github地址:https://github.com/weilanwl/ColorUI/ github地址:https...
  • Chat UI library for Android

    2017-09-08 14:14:13
    Chat UI library for Android
  • 利用npm来安装包 指令:npm install weiui-miniprogram --save 勾选开发者工具中顶部详情中的npm选项点击左上角工具进行构造npm 在app.wxss中引入 @import ‘/miniprogram_npm/weui-miniprogram/weui-wxss/dist/...
  • 微信小程序构建

    2021-10-15 04:31:19
    微信小程序创建 ... ... 创建小程序 新建小程序 ... ...进入到创建的小程序目录 ...引入weiui组件 npm i weui-miniprogram -S --production 本地设置 工具栏 → 构建NPM 好啦!现在一个微信小程序已经构建完毕了! ...
  • weui中日期使用

    千次阅读 2019-12-12 15:37:58
    weiui选择时间,有好几种方式, 1.将输入框类型定义成date 2.使用weui.datePicker() 3.使用$("#fdName").datetimePicker() 4.使用 $("#fdName").calendar() 除了第一种方法外,另外三种方法其实都差不多. 不过呢,...
  • weiUI自动化测试需要掌握以下几点:一是获取元素,java获取元素对象与python差不多,用的是findElement方法,不过我在搭建框架过程中为了实现PO模式,从万能的百度中获知还有个一更好的类FindBy,FindBy+PageFactory...

空空如也

空空如也

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

weiui