思路 使用2个canvas 一个是背景圆环,一个是彩色圆环. 使用setInterval 让彩色圆环逐步绘制. 在看我的文章前,必须先看 ,下面转的文章,因为本文是在它们基础上修改的. 它们的缺点为: 1.组件必须用js实例化 (如果我有一个任务列表,后面会显示每个任务的进度,每个任务都必须实例化) 2.它们js实例化时,绘图是用 px绘制,导致页面用rpx布局,组件却用px绘制. 修改后的组件 在components文件加下建立  circle组件,如图 circle.js : /* comp

微信小程序progress进度条内部圆角及渐变色 <view class="progress-box"> <progress percent="80" border-radius='5' stroke-width="5" activeColor='#FE564D'/> </view> 设置progress CSS: .wx-progress-inner-bar { border-radius: 8rpx !im

关于答题类,或者一些游戏环节的小程序需要用到时间进度条,改功能怎么实现看下面源码 <view class='out' style='margin-top:10px'> <view class='in' style='width:{{progressWidth}}%'></view> </view> <view class='caozuo'> <text>{{progressTime}}秒</text> <text b

关于进度条的话,我是使用官方原生的progress的. 关于进度progress接受保留2位小数(从后端获取到平均值,再item循环出来) js wxml

在此处输入标题   微信小程序的几条开发建议 功能简约,场景贴近随用随走: 操作快捷方便,交互简单: 程序本身代码资源等文件大小限制在1MB之内,这是微信目前的硬限制,目的是为了使得最终到达用户设备上的页面控制在5MB,而事实上,为了最佳的用户体验(接近原生的),不要使用复杂的页面逻辑: 微信小程序对能够同时打开的页面数量也做了限制(5个),虽然可以打开第六个页面,但依然建议将业务逻辑精简到5个页面以内,另外不要想着把流量带出去,微信小程序里边,没有"链接"这一说.

今天测试了一下,微信小程序圆形二维码是不能直接识别跳转到小程序: 但h5页面的那种微信公众号二维码是可以直接识别

微信小程序动画之圆形进度条 上图: js: //获取应用实例 var app = getApp() var interval; var varName; var ctx = wx.createCanvasContext('canvasArcCir'); Page({ data: { }, drawCircle: function () { clearInterval(varName); function drawArc(s, e) { ctx.setFillStyle('white'); ctx

progress进度条组件说明: 进度条,就是表示事情当前完成到什么地步了,可以让用户视觉上感知事情的执行.progress进度条是微信小程序的组件,和HTML5的进度条progress类似. progress进度条组件示例代码运行效果如下: 下面是WXML代码: [XML] 纯文本查看 复制代码 ? 1 2 3 4 5 <!--index.wxml--> <view class="content">     <text class="con-t

微信小程序联盟出品 跳坑textarea<二百二十三>不显示文本及textarea相关问题集合跳坑<二百一十三> background-image无法获取本地资源图片....跳坑<二百一十二>单位rpx/px/em/vh使用说明跳坑<二百一十一>转发API:onShareAppMessage使用跳坑<二百一十>使用模拟数据mock.js跳坑<二百零九>textarea组件value不显示跳坑<二百零八>使用Express后

代码地址如下:http://www.demodashi.com/demo/14453.html 前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主要思路就是使用canvas绘图,把剪裁的图片绘制成圆形,另外剪裁图片的窗口还可以移动放大缩小,这个功能就用了微信组件movable-view,好了,该说的也说完了,下面咱们开始撸代码. movable-v

前言 最近在开发小程序,产品经理提了一个需求,要求微信小程序换头像,用户剪裁图片必须是圆形,也在github上看了一些例子,一般剪裁图片用的都是方形,所以自己打算写一个小组件,可以把图片剪裁成圆形,主要思路就是使用canvas绘图,把剪裁的图片绘制成圆形,另外剪裁图片的窗口还可以移动放大缩小,这个功能就用了微信组件movable-view,好了,该说的也说完了,下面咱们开始撸代码. movable-view组件 可移动的视图容器,在页面中可以拖拽滑动会有好多个属性,在这里不一一介绍,只说我们能用

终于把小程序版弄完了,不过这并不能称之为是我的作品,因为我还没有彻底学会小程序,对JavaScript语言还有很多不会的地方,没有掌握, 这次的程序是通过学习网上的多个教程,多个案例结合拼凑模仿者人家的弄出来的,所以接下来希望自己能学好JavaScript语言,真正写出自己的 微信小程序! ps:但是前面的轮播图和整体布局可是自己设计的哦^_^啦啦啦 这就是我的随心记账本(美中不足的是过于简单,没有加上日期等模块,嘿嘿,随心嘛~) 这是意趣那一夜,这一页很骄傲啊都是自己设计的,不过,就是,有点l

1. 今天主要根据网上教程学习了微信小程序的代码结构,和代码编写-Tabbar配置, 学习了app.js的App和Page方法, 认识了view组件,button组件,input组件,但是还没怎么应用,还有如何进行首页的开发等等. 这是观看视频时这三种组件的演示 view演示 input演示 button演示 这是简单实现的一个页面,还不完善,明天会进行补充, (备注:那个加载中也是页面效果) 2. 了解到微信小程序开发需要用到JavaScript语言,也学习了网上的一个快速入门视频教程. 然后

index.js import Canvas from '../../utils/canvas.js'Page({ ...Canvas.options, /** * 页面的初始数据 */ data: { ...Canvas.data, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var _this=this; // setTimeout(function(){ // },1000) }, start: function (eve

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源下载5

1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3:设计指南:https://mp.weixin.qq.com/debug/wxadoc/design/index.html 4:设计资源下载:https://mp.weixin.qq.com/debug/wxadoc/design/#资源

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 一:推荐地址集合:(初入门者请先看这里) 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=147643467

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教

微信小程序的开发并不难,但是有时我们想做出比较炫的效果,可能会一时没有思路或找不到方法.下面就整理了微信小程序的一些特殊效果的案例,均来自网络,供你参考. 1.文字跑马灯效果:http://www.wxapp-union.com/portal.php?mod=view&aid=1038 2.触摸水波涟漪效果:http://www.wxapp-union.com/portal.php?mod=view&aid=1350 3.下拉菜单效果:http://www.wxapp-union.com/

2016年9月22日凌晨微信官方正式宣布“小程序”开始内测,有“微信之父”之称.腾讯集团高级执行副总裁张小龙在2016年末对外宣布“小程序“应用将于2017年1月9日正式推出 这一次微信还是按照惯例,通过机器跑出的数据,首先将“小程序”开放给了200名拥有微信服务号的开发者进行内测,而且目前开发者发布的小程序无法在用户的客户端显示 简单说,微信“小程序”可以为开发者提供基于微信的表单.导航.地图.媒体和位置等开发组件,让他们在微信的网页里构建一个HTML 5应用.同时微信还开放了登录和微信支付等

天河君在第一时间通过了微信小程序验证,开启了我的微信小程序之旅.因为天河君之前是一名后端狗,对前端不是很了解,所以几乎可以认为是从零开始学做微信小程序.也希望有志在微信小程序方向做点事情的朋友能够和我一起,共同进步,以致千里.上一篇是天河君在通过验证之后,兴奋的立即上手,在手机上跑了一回微信小程序.(天河微信小程序入门<一>)冷静下来后,天河发现,之前的很多demo在手机上都用不了,因为公测后得到了appId,结果导致无法与后台通讯,appId和后台的服务器域名是绑定的.没有后台的小程序是不完