owilson-CSDN博客

原创玩转BUI系列2--自定义区间范围选择器range

HTML5范围选择器的兼容样式与不足，结合Progress弥补不足，再扩展支持更多需求的组件

2022-10-09 16:23:00 306 1

原创玩转BUI系列一--脚本动画控制交互篇：bui.animate

早在BUI 1.0 版本就已经加入了这个动画控制器，利用transform 进行上下左右旋转放大缩小等操作，简单的操控元素按步骤做动画。原本是打算在BUI控件里面用的，后面采用了bui.toggle来处理交互动画，用animate比较少，就一直搁着。直到最近1.7.3版本开始，才对这个动画控制器进行改造，改造后，现在支持属性动画，同步动画，顺序动画，循环动画等等，方便了许多。

2022-09-14 09:32:38 173

原创你猜这是小程序还是webapp跳转？--小程序Webview与Webapp交互传参

微信小程序Webview与Webapp单页分享交互在文章开始前，先来看一个效果。两个跳转效果分别使用小程序webview跳转到原生小程序页面，以及webapp的路由跳转。你能猜到第1种效果是采用什么跳转吗？熟悉bui开发的朋友可能已经猜到了，第1种的路由跳转采用的就是BUI的单页开发路由跳转（先加载再跳转），第2种是跳转到小程序的交互效果（先闪白再加载）。得益于单页路由动态加载组件的方式，整体体验感觉会更流畅，更舒服些。一、开发方式的区别有小程序，为何还要用webview组..

2021-05-31 13:42:38 253

原创网易云音乐年度歌单的卡通形象联动制作

最近朋友圈被很多网易云音乐的年底歌单给刷屏了, 我也去看了我的年度歌单, 发现一个有意思的交互效果, 选择卡通形象, 通过滑动选择人物的不同头像,衣服,裤子最终塑造成一个拥有独立个性的卡通形象.界面效果预览交互效果预览制作素材把每个滑动的图片进行了全屏截图, 然后通过图片处理工具去除背景, 制作成统一大小的png图片.图片的卡通元素都是通过截图获取, 每个元素被处理成统一大小, 部分会有锯齿, 仅供参考. 这里头部比较特殊, 每个形象的头部大小不一, 这里取一个统一的截

2021-01-28 09:22:11 716

原创八、几行代码实现一个树组件【BUI App开发】

这可能是最简单的一棵树了.树菜单效果图预览分析交互这棵树的交互像已有的哪个组件? 折叠菜单? 点击显示,点击隐藏. 只是折叠菜单只有一层, 树有无限层. 折叠菜单效果预览BUI的组件都是只定义了交互, 其它给予了比较大的想象空间. 比如: 折叠面板, 新闻详情的查看更多折叠面板效果新闻详情的查看更多效果树的实现如果折叠菜单进行多层嵌套, 理论上就可以实现树的效果, 再把图标进行修改, 就是我们要的了. 折叠面板结构<dl id="uiAccordion&quot

2020-10-01 23:53:11 231

原创 [分享]高仿网易新闻WebApp模板+Dcloud打包源码下载

BUI-163网易新闻大小: 6.27M该App基于BUI Webapp框架+Dcloud构建. 仅供学习交流使用.整个app开发过程记录在这里bui神速订阅号.快速开发App系列篇预览交互1: 下拉刷新, 加载分页交互2: Tab嵌套交互交互3: 栏目删减自动更新交互4: 底部tab的交互, 每个Tab里面还有各自的交互下载源码下载:https://github.com/imouou/BUI-163App体验下载:http://d.firim.to...

2020-08-17 11:57:47 1157

转载【快速开发App实战】BUI高仿网易新闻App系列一、搭建App开发环境和工作空间

一. 搭建App开发环境和工作空间前言我们的目标是要做一个真实的案例, 着重通过BUI框架及其相关工具的使用, 结合原生打包平台, 帮助大家理解一个App的开发过程. 以最新网易新闻的App为例, 尽量只描述过程, 细节可以自行完善, 高仿得太过以假乱真, 会有侵权问题 ^_^. 文章会分为多个小章节, 知识点逐个讲解的方式, 每天掌握一点点, 进步一点点. 文章首发都会在bui神速订阅号, 谢谢关注.注意: 最终开发好的App, 仅供学习交流使用, 由于只获取到了网易新闻的部分接口, 部分内

2020-08-07 11:35:46 528

原创 BUI 组件通讯

以下内容基于BUI 1.6.2版本.组件通讯图路由初始化以后就会去找main入口页, 假设main由3个组件组成, 会依次,从上到下加载组件, 加载以后再递归查找子组件, 如此反复. (虽然默认组件允许嵌套组件, 但我们依然不建议把页面拆得太散. 组件应该是一个可以被自由加载,独立运行的个体. )父组件传参给子组件1. 静态传参一进页面的时候就会编译, 这种组件应该是能...

2020-04-27 22:32:44 442

原创 BUI 1.6 新版功能盘点

BUI是什么?BUI 是用来快速构建界面交互的渐进式UI框架, 专注webapp开发, 开发者只需关注业务的开发, 界面的布局及交互交给BUI, 开发出来的应用, 可以嵌入平台 ( 微信公众号, 微信小程序webview, 聆客, 钉钉, 淘宝, 支付宝等 ), 亦可以跟其它第三方平台打包成独立应用( Bingotouch , Cordova , Dcloud , APICloud , App...

2020-04-22 09:52:33 792

原创好快, 1分钟写好下拉刷新,滚动加载自动分页列表

前言欢迎关注BUI Webapp专栏或者bui神速微信公众号.以往文章:2019开发最快的Webapp框架--BUI交互框架微信Webapp开发的各种变态路由需求及解决办法! 【BUI实战篇】BUI数据驱动做的拼图游戏 Webapp移动适配版，基于vuejs拼图游戏改造 webapp结合Dcloud平台打包图文教程一张脑图看懂BUI Webapp移动快速开发框架【上】-...

2019-08-27 22:55:07 607

原创【BUI实战篇】BUI数据驱动做的拼图游戏 Webapp移动适配版，基于vuejs拼图游戏改造

原文链接：https://segmentfault.com/a/1190000019865515前言如果你还不了解bui是什么？建议先看看这两篇文章。一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源 2019开发最快的Webapp框架--BUI交互框架bui.store是bui的核心一部分，基于DOM的数据驱动。为了让熟悉vuejs更容易上手，接口参照 ...

2019-07-25 10:02:58 635

原创一张脑图看懂BUI Webapp移动快速开发框架【下】--快速入门指引

继上一篇一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源大纲在线查看大纲1. 框架设计框架介绍简介BUI 是用来快速构建界面交互的UI交互框架, 专注webapp开发, 开发者只需关注业务的开发, 界面的布局及交互交给BUI, 开发出来的应用,可以嵌入平台( Link, 微信, 小程序, 钉钉, 淘宝, 支付宝等 ), 亦可以跟其它第三方平台打...

2019-07-22 16:07:58 940

原创一张脑图看懂BUI Webapp移动快速开发框架【上】--框架与工具、资源

前言之前写过一篇2018开发最快的Webapp框架--BUI交互框架，如果你还没看过，可以简单看一下，主要介绍了BUI的基本功能，有多少控件，以及实现的思路，BUI 1.5版本以后变化很大，统一新的风格，新的规范750，新增基于Dom的数据驱动，完善了页面的生命周期等等，当你真正理解了BUI的模块，路由，数据驱动，工具之间的关系，没有什么需求是你实现不了的。后续我们还会增加一些实战类的移动...

2019-07-22 16:06:44 1199

原创 webapp结合Dcloud,APICloud,Appcan等平台打包图文教程

原文链接: https://segmentfault.com/a/1190000015902575?_ea=4124812前言最近一直有BUI Webapp的开发者在问, webapp如何打包? 这本身是属于第三方平台的事, 既然有开发者在问, 那我们针对这个问题, 也想对Webapp的打包做个总结, 本文适用于任何的H5打包, 如果你是使用BUI开发的Webapp, 那会更加简单. 最后...

2018-08-06 15:17:30 2584

原创微信Webapp开发的各种变态路由需求及解决办法!

原文链接: https://segmentfault.com/a/1190000015493097前言最近在使用BUI Webapp开发的一个小商城项目在微信上遇到一些坑及变态需求, 层层深入, 整理一下给后来人参考. 一定有你还不知道的!调试缓存问题描述: 微信打开的web页面默认是会缓存的,这是为了加载更快,本来是好事,但对于用来调试的我们就比较痛苦了,每每更改一些js,html, 刷新以后...

2018-07-05 16:41:27 1557

原创 BUI Webapp 入门教程

BUI 是用来快速构建界面交互的UI框架, 专注webapp开发, 开发者只需关注业务的开发, 界面的布局及交互交给BUI, 开发出来的应用, 可以嵌入平台 ( 微信, 钉钉, 淘宝, 支付宝等 ), 亦可以跟其它第三方平台打包成独立应用( Bingotouch , Cordova , Dcloud , APICloud , Appcan , 前海圆舟等), 最终可以全跨平台展示.点击在线阅读...

2018-05-30 10:20:42 4724

转载 2018开发最快的Webapp框架--BUI交互框架

原文地址:https://segmentfault.com/a/11900000129940821.5 版本更新说明BUI 1.5版本以后变化很大，统一新的风格，新的规范750，新增基于Dom的数据驱动，完善了单页路由页面的生命周期等等，在好用的路上越走越远，如果你也觉得好用，帮我们推荐给您身边的朋友，谢谢。后续我们还会整理一些实战类的教程，欢迎关注BUI Webapp专栏。一...

2018-03-09 16:41:11 42113 2