小程序

本篇文章主要介绍了微信小程序开发之圆形菜单 仿建行圆形菜单实例，具有一定的参考价值，有需要的可以了解一下。 建行APP首页有个圆形菜单.仿了个玩具出来.   功能介绍: 1.一个圆形背景.六个item菜单.中间是微信用户的头像; 2.触摸滚动.速度较小时,随手指滚动,手指抬起,滚动停止;速度较大时,随手指滚动,手指抬起,还会自动滚动一段时间; 上一张真机截图: 上代码: 1.index.js var app = getApp() Page({  data: {   userInfo: {},   menuList: {},//菜单集合   animationData: {},   startPoint: {},//触摸开始   dotPoint: {},//圆点坐标   startAngle: 0,//开始角度   tempAngle: 0,//移动角度   downTime: 0,//按下时间   upTime: 0,//抬起时间   // isRunning: false,//正在滚动  },  onLoad: function () {   var that = this   //调用应用实例的方法获取全局数据   app.getUserInfo(function (userInfo) {    //更新数据…

本篇文章给大家介绍一下微信小程序中页面间值传递的2种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 一：url带参数传递           与前端语言一样，小程序页面间的传递可以通过在路由url后接参数，路由的同时会将参数一并传递到新的页面。 index.wxml: <!--index.wxml--> <view>   <!-- 使用navigator组件 -->   <navigator>title=参数传递</navigator></view> 登录后复制 demo.js // pages/demo/demo.js Page({     data: {     title:''   },     onLoad: function (options) {     console.log(options)  //打印options,可以看到title的值可以获取到     this.setData({       title:options.title  //为页面中title赋值…

这篇文章主要介绍了微信小程序报错：this.setdata is not a function的解决办法的相关资料,希望通过本文能帮助到大家解决这样类似的问题，需要的朋友可以参考下 微信小程序 报错：this.setData is not a function 在page中定义的代码如下，代码会报错：this.setData is not a function <strong> pasteEncryptedText:function()</strong>{   let decryptedPass = this.data.decryptedPassword;   if (decryptedPass == '' ){   wx.showToast({   title: '请先输入解密密码',   mask: true,   success: function (res) {    setTimeout(function () {    wx.hideToast();    }, 4000);   },   }); …

<view>           <scroll-view>               <view>首页</view>               <view>                   {{item.nav_name}}               </view>           </scroll-view>       </view> 登录后复制 代码一贴其实当测试小哥告诉你安卓tab不能滑的时候，你只需要加一个overflow-x: auto;哈哈哈 相信看了本文案例你已经掌握了方法，更多精彩请关注米云其它相关文章！ 推荐阅读： 以上就是微信小程序开发中怎样实现Android环境下的横向滚动的详细内容，更多请关注米云其它相关文章！

微信小程序  http请求封装 示例代码 wx.request({  url: 'test.php', //仅为示例，并非真实的接口地址  data: {    x: '' ,    y: ''  },  method:'POST',  header: {    'content-type': 'application/json'  },  success: function(res) {   console.log(res.data)  },  fail: function( res ) {    fail( res );   } }) 登录后复制 以上为小程序的基本http请求代码，实际代码中如果每次这样来写是比较繁琐的，那我们就来做一下封装。 那代码中我们比较关注什么？ 1.请求的参数，访问的接口 2.GET/POST…请求方式 3.请求参数统一处理（比如：加密、设置公共参数…） 4.请求成功返回的数据（比如：解密、抽离逻辑层数据） 5.请求失败反馈…

在学本文的时候我们要知道函数节流是什么，，接下来本文就主要和大家分享微信小程序函数节流多次点击跳转如何防止，希望对大家有用。 场景 在使用小程序的时候会出现这样一种情况：当网络条件差或卡顿的情况下，使用者会认为点击无效而进行多次点击，最后出现多次跳转页面的情况。 解决办法 然后从 轻松理解JS函数节流和函数防抖 中找到了解决办法，就是函数节流(throttle)：函数在一段时间内多次触发只会执行第一次，在这段时间结束前，不管触发多少次也不会执行函数。 /utils/util.js: <span style="font-size: 14px;">function throttle(fn, gapTime) {<br>    if (gapTime == null || gapTime == undefined) {<br>        gapTime = 1500<br>…

手势解锁是app上常见的解锁方式，相比输入密码方式操作起来要方便许多。下面展示如何基于微信小程序实现手机解锁。最终实现效果如下图: 手势解锁 整个功能基于canvas实现，首先添加画布组件，并设定样式 <!--index.wxml--> <view>   <canvas></canvas></view> .gesture-lock {     margin: 100rpx auto;     width: 300px;     height: 300px;     background-color: #ffffff; } 登录后复制 手势解锁实现代码在gesture_lock.js中(完整源码地址见末尾)。 初始化     constructor(canvasid, context, cb, opt){         this.touchPoints = [];         this.checkPoints = [];         this.canvasid = canvasid;         this.ctx = context;         this.width = opt &amp;&amp; opt.width || 300; //画布长度         this.height = opt &amp;&amp; opt.height || 300; //画布宽度         this.cycleNum = opt &amp;&amp; opt.cycleNum || 3;         this.radius = 0;  //触摸点半径         this.isParamOk = false;         this.marge = this.margeCircle = 25; //触摸点及触摸点和画布边界间隔         this.initColor = opt &amp;&amp; opt.initColor || '#C5C5C3';            this.checkColor = opt &amp;&amp; opt.checkColor || '#5AA9EC';…

1.表单，将组件内的用户输入的 提交。当点击 表单中 formType 为 submit 的 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。 登录后复制 登录后复制 2.picker 从底部弹起的滚动选择器，现支持三种选择器，通过mode来区分，分别是普通选择器，时间选择器，日期选择器，默认是普通选择器。 3.label:用来改进表单组件的可用性，使用for属性找到对应的id，或者将控件放在该标签下，当点击时，就会触发对应的控件。for优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。目前可以绑定的控件有：,  ,  ,  。 二.列子 index.wxml 登录后复制 登录后复制 姓名：    密码：…

wx.chooselocation(object) 打开地图选择位置object参数说明：[tr]参数类型必填说明[/tr] success Function 是 接口调用成功的回调函数，返回内容详见返回参数说明。 cancel Function 否 用户取消时调用 fail Function 否 接口调用失败的回调函数 complete Function 否 接口调用结束的回调函数（调用成功、失败都会执行） success返回参数说明：[tr]参数说明[/tr] name 位置名称 address 详细地址 latitude 纬度，浮点数，范围为-90~90，负数表示南纬 longitude 经度，浮点数，范围为-180~180，负数表示西经 wx.getImageInfo(OBJECT)…

用小程序实现显示全部城市列表的界面，首先要考虑界面设计：对wx小程序索引列表组件进行引用；然后实现搜索功能：改组件自带搜索功能，只需在wxml中list-html标签中声明search属性即可。 界面设计 对wx小程序索引列表组件进行引用 上图： js文件： 所有的城市信息可用ajax获取，在这我从allCity.js文件中获取 var city = [   {     title: "热门城市",     type: 'hot',     item: [       {         "name": "北京",         "key": "热门",         "test": "testValue"//可自己添加其他信息       },       {         "name": "上海",         "key": "热门"       },       {         "name": "广州",         "key": "热门"       }]             },     {     title: "A",…