一个天气小程序和他们跳过的 47 个坑,你该如何避免?

作者:耿雨声

大家好,很开心今天能和大家分享一些「小天气」小程序在开发过程中经验。

顾名思义,「小天气」是一款天气类的小程序。自从去年被知晓程序报道后,勇往向前,截止目前版本已经更新了 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字符串转换成对象
onLoad:function(options){
    let data = JSON.parse(options.data);
}

关于「小天气」定时推送功能的分享

「小天气」的推送功能是利用知晓云实现的,用户可设置自定义推送时间。知晓云提供了定时推送的方法,并且也实现了一次触发七天内无限推送。

在实现时,首先需要一个透明的,且宽高为屏幕大小的,用来提交模板消息 formid 的表单 form,并把层级写到页面最高;再把提交模板消息 formid 的按钮 button 也设置成宽高为屏幕大小,把点击区域铺满屏幕。当用户在此页面点击时则可获取到一个模板消息 formid,相当于有了推送的触发条件。

但是,这个层级最高的表单 form 会覆盖其他可点击的元素,造成页面其余事件无法触发。「小天气」的解决办法是点击后隐藏这个透明的表单 form,并且把点击发生时的时间写入缓存 。

表单未被点击时,相应 WXML 如下:

<!-- data数据中form默认为true -->
<form bindsubmit='submit' report-submit="true" style="display:{{form ? 'block' : 'none'}}" class="form">
<button formType="submit"></button>
</form>

发生点击操作时,在点击方法中把当前时间写入缓存:

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 变化时从而实现页面滚动。

下图为实现的一个小 demo。

原文发布于微信公众号 - 知晓程序(zxcx0101)

原文发表时间:2018-06-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

[ISUX译]iOS 9人机界面指南(四):UI元素(上) - 腾讯ISUX

2085
来自专栏web前端教室

React虚拟DOM是个什么套路?

React最大的亮点就是快!天下武功,唯快不破,它走的就是这条路。那么它的快是如何达成的呢?是通过虚拟DOM,也就是它所说的Virtual DOM了。 那这个虚...

2028
来自专栏王二麻子IT技术交流园地

HTML出现错位的问题

引起网页HTML显示错位的几个常见问题:          1、在HTML代码中缺失元素的开始或结束标签          2、CSS设置中对边界、填充或边框的...

2375
来自专栏程序你好

在网站或桌面应用使用Font Awesome图标库

2242
来自专栏小李刀刀的专栏

[译]CSS边框实现“无图化”设计

原文:http://www.yuiblog.com/blog/2011/03/08/css-border-tricks-with-collapsed-boxes...

3738
来自专栏Coco的专栏

神秘的 shadow-dom 浅析

2994
来自专栏九彩拼盘的叨叨叨

九彩拼盘的前端技能

1152
来自专栏HTML5学堂

HTML5项目开发备忘录

HTML5学堂:良好的项目开发,从缜密的分析与计划开始,充分的项目开发准备能够让之后的问题降低到最少,让我们的整体开发效率提升不少。精心准备了关于项目开发的相关...

4495
来自专栏软件开发

CSS3与页面布局学习总结(五)——Web Font与Sprite

一、web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体。先了解操作系统中的字体: a)、安装好操作系...

3486
来自专栏hightopo

基于 HTML5 WebGL 的低碳工业园区监控系统

1587

扫码关注云+社区

领取腾讯云代金券