我们经常可以在一些页面看到看起来很酷的线条动画,有些可以用css实现,有些css就无能为力了,今天来研究另一种实现方式,svg 如果对svg是什么还不了解的话,可以先去看看svg的基础教程: 一般对于复杂的线条,不提倡自己去手动画,而应该借助illustrator之类的绘图软件生成后保存位svg文件 svg做线条动画的主要方式使用stroke-dasharray,stroke-dashoffset来实现: stroke-dasharray:它是一个<length>和<percentage

微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下: 1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2.在WXSS中使用以上文本:background-image: url("data:image/png;base64,iVBORw0KGgo=..."); 3.为了是背景图片自适应宽高,可以做如下设置: background-repeat:

微信小程序通过background-image设置背景:只支持线上图片和base64图片,不支持本地图片:base64图片设置步骤如下:1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2.在WXSS中使用以上文本:background-image: url("data:image/png;base64,iVBORw0KGgo=..."); 3.为了是背景图片自适应宽高,可以做如下设置: background-repeat:n

微信小程序连续旋转动画 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html <view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx; bottom:10px;position: absolute;"></view> Page({ data: { anim

微信小程序也已出来有一段时间了,最近写了几款微信小程序项目,今天来说说感受.首先开发一款微信小程序,最主要的就是针对于公司来运营的,因为,在申请appid(微信小程序ID号)时候,需要填写相关的公司认证信息如,营业执照等再次就是用一个未曾开通过公众号的QQ号或微信号来注册一个微信小程序号. 最后,下载微信小程序开发工具.由于这里,我们更多的关注如何去开发一些app,而不是科谱微信小程序,故在此不在过多的解释,详细的说明,可以去官网帮助文档. 首先,我们拿自己的项目在一步一步的说明并开发吧,下面是

最近做,微信点餐小程序,遇到添加商品时出现抛物动画,参考借鉴了这位大神的方法 https://www.cnblogs.com/greengage/p/7815842.html 但出现了一个问题,连续点击加入购物车时,抛物动画报错.如图: 我的解决方法是: //购物车抛物动画 (时间间隔)(解决点击过于频繁时,抛物动画报错问题) var nowTime = new Date().getTime(); var clickTime = e.currentTarget.dataset["ctime&qu

1-1_微信小程序需求背景及评审 背景: 我是一个做了2年的Java后台开发 ,最近换了份工作 改做全栈了,需要对各方面的知识都有一定程度的认识及掌握, 虽然现如今还未要求开发小程序,但是已经有趋势了,趁着Q4收关没啥事从零设计开发一款基于云开发的小程序好了. 语言逻辑不好,大家轻喷! 1.小程序介绍 Buddy记账是一款基于微信小程序云开发的日常消费记账小程序,比较特殊的功能是增加了一个群记账的功能, 通过拉小组的形式继续记账,方便类如室友购买公共用品的记账. 2.Buddy记账功能介绍 前期

UISegmentedControl 分段控件 //1. UISegmentedControl 分段控件 (就是一个一个的按钮) //分段显示的标题是以一个数组存储的 NSArray * titles = @[@"护卫队",@"三军仪仗队",@"步兵队"]; UISegmentedControl * segment = [[UISegmentedControl alloc]initWithItems:titles]; segment.frame

第一步,在组件里编写弹窗的代码 <!-- 活动类型弹框 --> <view class='bottomModel' wx:if="{{modelFlag}}" catchtouchmove="toCatch"></view> <view class='fixedModel' wx:if="{{modelFlag}}" animation='{{animationData}}'> <view c

一..js中封装旋转动画方法 添加animation属性 data:{ animation:''" } 改变animation的值(官网提供角度范围是-180~180,但是我发现角度越大会一直旋转) onShow: function() { console.log('index---------onShow()') this.animation = wx.createAnimation({ duration: 1400, timingFunction: 'linear', // "li

这两天开发微信小程序,在设置背景图片时,发现在wxss里面设置 background-image:(url) 属性,不管是开发工具还是线上都无法显示.经过查资料发现,background-image 只能用网络url或者base64图片编码 , 本地图片只能用 image标签src属性才行.当然 image标签src属性也可以使用网络url或者base64图片编码. 下面通过 image 标签src属性设置,实现背景图显示 界面结构: <view class='set-background'>

​ 这两天因为要做一个带背景的小程序头,哭了,小程序导航栏有背景也就算了,还得让导航栏上的背景顺下来,心态小崩.现在可以单独设置一个页面的小程序头了,但是前提是要微信7.0以上的版本,考虑到兼容性问题,还是不要贸然的上了,所以用老版本的替换所有页面的小程序头来做. ​ 参考了jiuyucha的文章,但是没有解决自定义背景的和返回按钮的颜色的问题,还有因为IOS的橡皮筋效果,对IOS端不太友好,屏幕会乱划.所以针对性的改动了这些功能,因为才学小程序两三天,所以其中踩了很多坑,但好在最后效果还是达到

小程序中当动画animation遇上setTimeout函数内部使用this.setData函数,通常情况下会出现报错.本文先告诉解决方法,后分析报错原因 1.解决方法: 在 setTimeout() 函数的同级加上 const that = this;   ,然后将this.setData换成that.setData就好了 贴上我的代码示例: getMsg: function () { const that = this; // 动画内容 this.animation.translate(-1

给微信小程序页面加载背景图片解决方案 直接附上原文地址: 给微信小程序页面加载背景图片解决方案 - YUSIR 完美CODING世界 - CSDN博客  https://blog.csdn.net/yusirxiaer/article/details/81116274 希望对大家有帮助!

这几天在看代码时遇到了一些问题:关于微信小程序的animation自定义动画自己没有系统的学习过 做动画需要我们将一个复杂的动作过程,拆解为一步一步的小节过程 微信中已经为我们写好了端口我们只需要实例化一个动画实例(实例代码如下) 先了解基础部分: 在看代码之前要先有个下面的基础了解 1)wx.createAnimation(object) 微信小程序实例化一个动画效果 2)export( ) 这个方法是导出动画数据(传递给animation属性) 3)step( ) 来表示一组动画完成 微信官

本人对知乎日报是情有独钟,看我的博客和github就知道了,写了几个不同技术类型的知乎日报APP 要做微信小程序首先要对html,css,js有一定的基础,还有对微信小程序的API也要非常熟悉 我将该教程分为以下三篇 微信小程序开发日记--高仿知乎日报(上) 微信小程序开发日记--高仿知乎日报(中) 微信小程序开发日记--高仿知乎日报(下) 三篇分别讲不同的组件和功能块 这篇要讲 API分析 启动页 轮播图 日报列表 浮动按钮 侧滑菜单 API分析 以下是使用到的具体API,更加详细参数和返回结

上一次的<微信小程序之小豆瓣图书>制作了一个图书的查询功能,只是简单地应用到了网络请求,其他大多数小程序应有的知识.而本次的示例是知乎日报,功能点比较多,页面也比上次复杂了许多.在我编写这个DEMO之前,网上已经有很多网友弄出了相同的DEMO,也是非常不错的,毕竟这个案例很经典,有比较完整的API,很值得模仿学习.本次个人的DEMO也算是一次小小的练习吧. 由于知乎日报是一个资讯类的App,UI的布局主要是以资讯列表页.资讯详情页和评论页为主,当然本次也附带了应用设置页,不过现阶段功能尚未编写

微信小程序,weixin,关于微信小程序,那些开发文档没有告诉你的-微信小程序开发资源-微信开发者平台,微信开发者社区,微信小程序开发者社区 Discuz! Team and Comsenz UI Team [color=rgb(153, 153, 153) !important][size=0.18]本文由广研微信小程序的开发团队所做,作者为UI开发工程师王婷婷.本文从UI开发的角度,结合OM小程序的案例,剖析小程序的组件用法与传统HTML5标签的区别. 小程序与传统HTML5的区别 小程序刚

一.设计 无需开发者开发的 1.小程序加载动画: 2.页面下拉刷新加载样式: 3.微信控件(拥有完整的操作反馈):如弹出框.通知.模态框...   建议用微信自己的 1.加载.反馈样式(全局.局部) 二.开发 1.注册小程序 在app.js中,通过app函数 App({ //生命周期 onLaunch:function(){}, onShow:function(){}, onHide:function(){} })   2.注册页面 Page({ data:{}, onLoad:function

以下是自己在开发过程中遇到的坑和小技巧,记录以下: 1.出现了 page[pages/XXX/XXX] not found.May be caused by :1. Forgot to add page route in app.json.2. Invoking Page() in async task. 截图如下: 解决办法:需要在每个XXX.js文件中加入page(),以用来生成一个页面实例对象. Page({ }); 有时就算你在每个js文件中都写了基本的page()代码,还是会保这个错误

1.上拉加载失效 问题背景:部分页面上拉加载失效.当使用flex布局,底部固定,中间采用自适应撑满全屏实现滚动时,发现上拉加载失效,不知道是什么原因. 解决问题: 在小程序中,官方为我们提供了原生的下拉刷新和上拉加载,只需要进行简单的配置即可实现下拉刷新的功:onPullDownRefresh.onReachBottom 除此之外,还可以使用 scroll-view 组件来实现这两个功能,利用scroll-view的bindscrolltolower.bindscrolltoupper事件 <s