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

相关文章

来自专栏互联网杂技

React数据流和组件间的通信总结

首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则。 先介绍单向数据流吧。 React单向数据流:   React是单向数据流,数据主要...

3437
来自专栏企鹅号快讯

C/C+的角角落落 第二辑 002

使用Windows API构建窗体应用 就历史来说,使用纯API开发窗体应用程序是上个世纪80年代以前的事情了,开发应用程序的人需要使用大量接近系统内核的API...

1705
来自专栏腾讯IVWEB团队的专栏

React 展示组件与容器组件(英译)

当我们开始使用 React 时,我们很快会开始遇到疑惑。在哪里放置数据,组件间变化如何通信或如何管理状态?问题的答案往往是与场景相关,也有时候只是跟平常使用 r...

7950
来自专栏前端学习心得

Vuex入门到上手

1625
来自专栏前端架构

vue2.x入坑总结—回顾对比angularJS/React的一统

从感性的角度讲,我是不屑于用VUE,觉得react套件用起来更顺手,但是vue现在越来火,所以也不得入vue(杂烩汤)的坑。

982
来自专栏禅林阆苑

Vue2.5源码阅读笔记01—代码结构与初始化

Vue作为当下最流行的渐进式的js框架,其渐进式的思想、虚拟DOM的运用、组件化的开发模式、响应式数据侦听原理值得开发者进行探索学习,其中运用的代码组织的技巧,...

66959
来自专栏编程

如何构建你的第一个 Vue.js 组件

协作翻译 原文:How to build your first Vue.js component 链接:https://medium.freecodecamp....

2245
来自专栏Jack-Cui

Python3网络爬虫(九):使用Selenium爬取百度文库word文章

运行平台: Windows Python版本: Python3.x IDE: Sublime text3 1 前言     大家都应该有过从百度文库下...

4566
来自专栏极客编程

ionic入门之AngularJS扩展

ionic是一个强大的混合式/hybridHTML5移动开发框架,特点是使用标准的HTML、 CSS和JavaScript,开发跨平台(目前支持:Android...

691
来自专栏娱乐心理测试

关于jQuery的浅谈学习

1204

扫码关注云+社区