微信小程序圆形按钮怎么开发?

　　微信小程序圆形按钮怎么开发?有微信用户问小编，微信小程序圆形按钮应该怎么开发?今天小编就为大家介绍微信小程序圆形按钮的开发方法，以下的全部内容供大家参考。赶快来看看吧。

　　微信小程序圆形按钮怎么开发?

　　首先大家先看看微信小程序圆形按钮的效果图吧，微信小程序圆形按钮效果图如下：

　　微信小程序圆形按钮开发的思路是先绘制底层的灰色圆圈背景，再绘制上层的蓝色微信进度条。

　　微信小程序圆形按钮开发所需要的微信代码如下：

　　Page({

　　data: {},

　　onLoad: function (options) {

　　// 页面初始化 options为页面跳转所带来的参数

　　},

　　onReady: function () {

　　// 页面渲染完成

　　var cxt_arc = wx.createCanvasContext('canvasArc');//创建并返回绘图上下文context对象。

　　cxt_arc.setLineWidth(6);

　　cxt_arc.setStrokeStyle('#d2d2d2');

　　cxt_arc.setLineCap('round')

　　cxt_arc.beginPath();//开始一个新的路径

　　cxt_arc.arc(106, 106, 100, 0, 2*Math.PI, false);//设置一个原点(106,106)，半径为100的圆的路径到当前路径

　　cxt_arc.stroke();//对当前路径进行描边

　　cxt_arc.setLineWidth(6);

　　cxt_arc.setStrokeStyle('#3ea6ff');

　　cxt_arc.setLineCap('round')

　　cxt_arc.beginPath();//开始一个新的路径

　　cxt_arc.arc(106, 106, 100, -Math.PI * 1 / 2, Math.PI*6/5, false);

　　cxt_arc.stroke();//对当前路径进行描边

　　cxt_arc.draw();

　　},

　　onShow: function () {

　　// 页面显示

　　},

　　onHide: function () {

　　// 页面隐藏

　　},

　　onUnload: function () {

　　// 微信页面关闭

　　}

　　})

　　感谢大家的观看，微信小程序圆形按钮的开发方法就介绍到这里了，以上就是微信小程序圆形按钮怎么开发的全部内容了哦。更多相关的微信小程序内容尽在微微风。大家要多多关注我们的网站哦。

推荐阅读：

　　餐饮微信小程序开发有哪些内容呢

　 个人如何开发小程序?个人小程序开发流程

　 微信小程序怎么开发?微信小程序开发工具