一个天气小程序和他们跳过的 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 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

25410
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

5746
来自专栏张善友的专栏

Silverlight + Model-View-ViewModel (MVVM)

     早在2005年,John Gossman写了一篇关于Model-View-ViewModel模式的博文,这种模式被他所在的微软的项目组用来创建Expr...

3038
来自专栏落花落雨不落叶

canvas画简单电路图

66711
来自专栏大内老A

The .NET of Tomorrow

Ed Charbeneau(http://developer.telerik.com/featured/the-net-of-tomorrow/) Exciti...

32810
来自专栏闻道于事

js登录滑动验证,不滑动无法登陆

js的判断这里是根据滑块的位置进行判断,应该是用一个flag判断 <%@ page language="java" contentType="text/html...

7278
来自专栏张善友的专栏

Mix 10 上的asp.net mvc 2的相关Session

Beyond File | New Company: From Cheesy Sample to Social Platform Scott Hansel...

2627
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

4878
来自专栏hbbliyong

WPF Trigger for IsSelected in a DataTemplate for ListBox items

<DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

4074
来自专栏张善友的专栏

Miguel de Icaza 细说 Mix 07大会上的Silverlight和DLR

Mono之父Miguel de Icaza 详细报道微软Mix 07大会上的Silverlight和DLR ,上面还谈到了Mono and Silverligh...

2757

扫码关注云+社区