WeUI | 易学教程

小程序-demo：小程序示例-page/api

阅读更多关于小程序-demo：小程序示例-page/api

ylbtech-小程序-demo：小程序示例-page/api 以下将演示小程序接口能力，具体属性参数详见小程序开发文档。 1. page/component 返回顶部 1、 a) .js Page({ data: { list: [ { id: 'api', name: '开放接口', open: false, pages: [ { zh: '微信登录', url: 'login/login' }, { zh: '获取用户信息', url: 'get-user-info/get-user-info' }, { zh: '发起支付', url: 'request-payment/request-payment' }, { zh: '分享', url: 'share/share' }, { zh: '客服消息', url: 'custom-message/custom-message' }, { zh: '模板消息', url: 'template-message/template-message' } ] }, { id: 'page', name: '界面', open: false, pages: [ { zh: '设置界面标题', url: 'set-navigation-bar-title/set-navigation-bar-title' }, { zh:

网页设置只能在手机微信客户端访问，禁止在电脑端访问包括微信电脑版

阅读更多关于网页设置只能在手机微信客户端访问，禁止在电脑端访问包括微信电脑版

weui实现时间选择器

阅读更多关于 weui实现时间选择器

weui --github文档最近一个项目中要用到日期时间选择器，采用了weui, 但是在其文档中所提供的选择器中，并没有时间选择器，但是有日期选择器以及普通选择器，所以实现思路为，使用普通选择器制作一个时间选择器，在选择日期后，点击确定，马上弹出这个普通选择器，有点踩坑的是在选择完日期后，想调用普通选择器发现不会弹出，解决方案如下： function dateMypick ( el ) { weui . datePicker ( { title : '请选择日期' , className : 'mypick' , id : 'datePicker' , onConfirm : function ( result ) { $ ( el ) . children ( 'input' ) . val ( result [ 0 ] . label + result [ 1 ] . label + result [ 2 ] . label ) myformdata . repdate = result [ 0 ] . label . fluterdate ( ) + '/' + result [ 1 ] . label . fluterdate ( ) + '/' + result [ 2 ] . label . fluterdate ( ) // 这一步很关键，事件监听

CSS网页中导入特殊字体@font-face属性详解

阅读更多关于 CSS网页中导入特殊字体@font-face属性详解

在最近移动端项目中用到了vux，感觉用着还习惯，当把vux使用到PC端的时候出现了IE浏览器出现，这样的错误信息： CSS3114: @font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。文件: UwCtGsNCf5NCQ0N.... 然后在IE浏览器页面中的字体图标就没有显示。原来在vux中weiui_font.less文件中，如下写法： @font-face { font-weight: normal; font-style: normal; font-family: "weui"; src: url('data:application/octet-stream;base64,AAE...省略') format('truetype'); } 于是想到了把base64格式字体转换为可用的字体文件。实现步骤： 1. 获取到base64字符串并删除头部信息，在这里就是 data:font/opentype;base64 , 逗号也要删除，这样就获取到了字体信息。比如： T1RUTwAJAIAAAwAQQ0ZGIBcEq...... 过长不展示。 2. 访问 http://www.motobit.com/util/base64-decoder-encoder.asp 这个网站，将纯字体信息字符串粘贴进编辑区域

微信公众号几种移动端UI框架介绍

阅读更多关于微信公众号几种移动端UI框架介绍

微信公众号开发，主要是移动端网页的页面开发，在这里推荐3个移动端UI框架：WeUI、SUI和Mint UI。 1. WeUI 1.1 WeUI WeUI是微信官方设计团队为微信 Web 开发量身设计，可以令用户在HTML5应用中的使用感知更加统一。组件包含button、cell、dialog、 progress, toast、article、icon等等。资源官方Demo ： https://weui.io/ Github ： https://Github.com/weui/weui (★13402) js支撑： weui.js 缺点：缺少高级组件；截至目前，WeUI还未提供swiper、上拉加载、下拉刷新组件。示例 1.2 weui.js 为WeUI的的轻量级 js 封装。提供了Alert、Confirm、Toast、Loading、ActionSheet等等交互功能。资源官网Demo ： https://weui.io/weui.js/ Github ： https://Github.com/weui/weui.js/ 示例 2. SUI SUI Mobile 是阿里巴巴共享业务事业部SDC团队（UED）提供的一套手机UI库。是一套基于 Framework7 非常适合开发跨平台Web App的UI库。组件包含下拉刷新、上拉加载、日历、省市选择器、幻灯片

微信小程序引入WeUI

阅读更多关于微信小程序引入WeUI

WeUI 为微信小程序量身设计的UI库一、前言在做微信小程序的时候就想着找一个UI库，方便我们前端开发，然后查找资料，发现了这个WeUI特别适合放在微信小程序里。下面就简单的了解一下。 WeUI是一套跟微信原生的视觉体验类似的一套样式库，由微信官方设计团队为微信内网页和小程序设计的，让用户视觉更加统一。包含了外卖常用标签的各种元素。二、预览使用微信开发者工具打开weui-wxss-master 中的dist目录。下载地址：https://github.com/Tencent/weui-wxss PS: 组件的wxml结构请看dist/example/下的组件样式文件可直接引用dist/style/weui.wxss，或者单独引用dist/style/widget下的组件的wxss WeUI的视觉标准：https://github.com/weui/weui-design 小程序中引入样式就好，不需要引入WeUI的js 来源： 51CTO 作者： kouxiaomou 链接： https://blog.51cto.com/9886022/2150491

js实现翻牌效果

阅读更多关于 js实现翻牌效果

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover"> <title>翻牌抽奖</title> <style> body {background: #E7244B;} *{margin:0;padding:0}a img{border:0} a{text-decoration:none;-webkit-tap-highlight-color:rgba(0,0,0,0);text-align: center;} .top {width: 100%;} .weui-grid {padding: 0;} .weui-grid:before {border: 0;} .weui-grid:after {border: 0;} .weui-grids:before {border: 0;} .img {width: 90%;margin-top: 1vw;height: 33.9vw} .info {display: none;margin-top: 1vw;width: 0;height: 33.9vw;} .shelter {opacity: 0.5;filter: alpha

小程序开发--改写HalfScreenDialog和getPhoneNumber按钮

阅读更多关于小程序开发--改写HalfScreenDialog和getPhoneNumber按钮

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 利用HalfScreenDialog可以做出下方弹窗的效果，我这里做了一个用户授权手机号码的提示。 HalfScreenDialog文档 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/half-screen-dialog.html 引入HalfScreenDialog 下载组件改写HalfScreenDialog 因为微信的设定，获取用户手机的button必须得用户手动点击去触发。但是HalfScreenDialog中按钮的引入是通过Array来引入的。官方示例代码  <mp-halfScreenDialog bindbuttontap="buttontap" show="{{show}}" maskClosable="{{false}}" title="测试标题B" subTitle="测试标题B的副标题" desc="辅助描述内容，可根据实际需要安排" tips="辅助提示内容，可根据实际需要安排" buttons="{{buttons}}" ></mp-halfScreenDialog> <button class="weui-btn" type="primary" bindtap=

小程序开发--改写Dialog组件

阅读更多关于小程序开发--改写Dialog组件

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 利用微信的Dialog组件可以做出弹窗，遮罩层的效果。这是我在项目上实现的效果，可以点击某一单的单号，就会弹出详情界面。 Dialog文档 https://developers.weixin.qq.com/miniprogram/dev/extended/weui/dialog.html 可以看到原生的组件是弹出来一个确认框要达到想上面的效果，必须改写组件的样式。引入Dialog 下载对应的组件最好放在根目录common 或者components文件夹在对应页面的.json文件中设置好路径。使用Dialog 发现部分 css 还没有提出来，是个坏习惯。  <mp-dialog title='详情' show="{{showOneButtonDialog}}" bindbuttontap="tapDialogButton" buttons="{{oneButton}}"> <view class="weui-flex detail"> <view class='weui-flex-item detail_left'> BookNo </view> <view class='weui-flex-item detail_right'> {{msgArray.mainInfo[0]

【微信小程序】写一个能自定义尺寸、样式的switch

阅读更多关于【微信小程序】写一个能自定义尺寸、样式的switch

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 小程序原生的switch不能灵活的修改宽高、样式，很不方便，我这边参考 WeUI 的开关，写了一个可以自定义尺寸样式的switch组件。直接上代码： https://gitee.com/piscdong/wechat-switch 效果如下图，可以自定义宽高，可以做成方角的代码分析这个switch主要的难点就是点击后背景颜色变换的动画，这里用到了css的transition、transform两个属性来实现动画，以及::before和::after两个伪元素。 wxml基本结构为： <view class="switch"> <view></view> </view> 父级view是整个switch容器，会用到::before做背景色切换动画，::after做禁用时的灰色遮罩。内部的一个view是来回切换的白点。未选中时默认class是switch，选中时增加一个class：switch_checked。选中状态到未选中状态背景有一个从中间变大到全部的白色动画，所以需要给父级view设置一个颜色作为背景色。 .switch { ... background: #00c000; position: relative; } 未选中时::before覆盖整个容器，选中时::before设置 transform

订阅 WeUI