请选择 进入手机版 | 继续访问电脑版

网赚论坛之家_国内最大的手机网络赚钱项目资源兼职交流论坛分享平台

 找回密码
 立即注册
查看: 395|回复: 0

让你更知微信的 清大硅谷51小程序

[复制链接]
发表于 2018-7-3 01:53:08 | 显示全部楼层 |阅读模式
  原标题:让你更知微信的 清大硅谷51小程序
  清大硅谷移动互联网科学研究院51小程序是一家集微信小程序开发,小程序代理,小程序名称查询系统小程序教程,小程序代理为一体,如果你对我们感兴趣,请咨询我们,和我们合作,和清华大学合作,和腾讯合作。

  大家好,很开心今天能和大家分享一些「小天气」小程序在开发过程中经验。  顾名思义,「小天气」是一款天气类的小程序。自从去年被知晓程序报道后,勇往向前,截止目前版本已经更新了 47 次。俗话说,一代版本一代神(坑),版本代代……

第一版的「小天气」和如今的「小天气」没有卖不出去的商品,只有卖不出去商品的商人。同理,没有爬不上来的坑,只有爬不上来的程序员,与天斗其乐无穷,与坑斗更是其(bǎo)乐(shòu)无(jiān)穷(áo)。在希望微信小程序运行环境越来越健全的同时,我也和大家分享一下最近遇到的小坎儿与我的应对技巧。子元素溢出圆角的问题问题描述:当外层容器设置圆角边框属性 border-radius 与溢出隐藏属性 overflow:hidden 时,如果子元素有 transform 属性,子元素则会溢出父元素设置的圆角。问题状况如下图所示,红色区域代表子元素溢出父元素的圆角框体。

  解决方案有以下三种:   .container{     /* 解决方案 1 */     -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);     /* 解决方案 2 (通过解决层级原因) */     z-index: 1;     /* 解决方案 3 (通过解决层级原因) */     transform: translate3d(0, 0, 0); }   在修改代码后,子元素显示正常,不再有溢出情况。关于下拉刷新时的回弹 Bug问题描述:当下拉刷新调用包含显示消息提示框 wx.showToast() 方法时,刷新完成时会有回弹 bug(目前知道 iOS 会有回弹,Android 尚未测试)。这个效果比较尴尬,让人看着很生硬。目前的解决办法就是放弃原生的 Toast 组件,采用第三方 Toast 组件,或自己定义一个 Toast 组件。   onPullDownRefresh: function () {   //有wx.showToast()方法时,会触发回弹效果    wx.showToast({   title: '提示',   });   }   关于页面传参当要传递的参数为一个对象的时候该怎样传参呢?一是可以通过全局变量,好用又省心;二是把对象转换成 JSON 字符串作为参数,在目的页里再把 JSON 字符串转换成对象。   //把对象转换成JSON字符串 var data = {'name':'A'}; let strData = JSON.stringify(data);   …… //目标页再把JSON字符串转换成对象>   let data = JSON.parse(options.data);   }   关于「小天气」定时推送功能的分享「小天气」的推送功能是利用知晓云实现的,用户可设置自定义推送时间。知晓云提供了定时推送的方法,并且也实现了一次触发七天内无限推送。在实现时,首先需要一个透明的,且宽高为屏幕大小的,用来提交模板消息 formid 的表单 form,并把层级写到页面最高;再把提交模板消息 formid 的按钮 button 也设置成宽高为屏幕大小,把点击区域铺满屏幕。当用户在此页面点击时则可获取到一个模板消息 formid,相当于有了推送的触发条件。但是,这个层级最高的表单 form 会覆盖其他可点击的元素,造成页面其余事件无法触发。「小天气」的解决办法是点击后隐藏这个透明的表单 form,并且把点击发生时的时间写入缓存 。表单未被点击时,相应 WXML 如下:      发生点击操作时,在点击方法中把当前时间写入缓存:   click:function(){   wx.setStorage({   key: 'date',   data: date,   //把当前时间写入缓存        })   }

  进入页面时触发,获取缓存数据,时间差大于设置天数时(7天):   getFormIdTime:function(){   wx.getStorage({   key: 'date',   success: function (res) {   //获取存入的时间,与当前时间相减得到时间差,进行判断        }   })   }   当再次进入「小天气」时,可以用当前时间与缓存时间的时间差来判断模板消息 formid 是否过期,如果当前时间大于等于缓存时间七天以上,则显示透明的按钮 button,如果小于七天则不显示 button。为了保险起见,「小天气」设置成了大于或等于 6 天时就显示提交 formid 的 button。虽然麻烦了一点,但是提升了用户体验。避免了用户每次进入「小天气」时发生的第一次点击都是无效的。关于滚动视图的应用「小天气」十五日预报页面的类似锚点功能就是运用滚动视图 scroll-view 实现的,用户在直接滑动查看天气的同时,也可以通过点选日期进行页面定位,自动将点选日期的当天天气滚动到页面顶部。首先需要一个顶部的导航,导航列表的个数与下面 scroll-view 列表的个数是相对应的。导航列表有 A、B、C,导航高 60px。滚动视图 scroll-view 列表有1、2、3,每个高 300px。通过点击导航时获取到当前下标 index,然后改变 data 数据里面的 index。滚动视图 scroll-view 标签里页面滚动 scroll-top 属性为竖向滚动条位置,设置值为当前下标 X scroll-view 列表下每个元素的高度 300px(index * 300)。   scroll-view 标签里 scroll-top 的值随 index 变化时从而实现页面滚动。   清华大学清大硅谷移动互联网科学研究院51小程序率先开发出微信小程序名称查询系统,小程序名称查询系统,小程序注册关键词查询系统,终结小程序不容易查询的历史,给广大用户带来极大方便。

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关闭

站长推荐上一条 /1 下一条

QQ|Archiver|手机版|小黑屋|网赚论坛之家

GMT+8, 2018-10-22 01:28

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表