实例分享微信小程序项目搭建(下)

关于 wx.getLocation

首次 执行 wx.getLocation 小程序将自动调启如下 dialog:

请注意是 首次 !无论用户选择“确定”或是“取消”,再次进入“更美测试”均不会被询问是否开启定位(调用 100 次 wx.getLocation 也无济于事)。除非用户手动清理微信缓存、更新微信、切换账号...

各种缓存:

存在上述问题的 API 绝不止 wx.getLocation 例如 wx.login,遗憾的是,小程序并未开放清理缓存的接口。但可通过 wx.openSetting 再次请求用户开启授权:

关于 wx.reportAnalytics

小程序数据分析可通过填写配置上报、API 上报:

对于填写配置上报,需提交触发动作、触发页面、触发元素、埋点数据等。但埋点数据需从 page data 中获取,看看官方文档是怎么曰的:

OMG...需要在 page data 内维护埋点状态,当埋点量较大时上报数据的复杂度可想而知。我曾傻傻的认为 data 字段值等同 dataset 值:

<text
    wx:for="{{ areas }}"
    data-id="{{ item.id }}"
    data-name="{{ item.name }}"
    data-idx="{{ index }}"
    bindtap="tapItem">{{ item.name }}</text>

未曾想竟为 page 实例中的 data 值:

Page({
    data: {},
    onLoad: function () {},
    onReady: function () {}
});

如此看来 API 上报更简单,为触发元素 dataset 埋点数据并调用 wx.reportAnalytics 传入参数:

<text
    wx:for="{{ orders }}"
    data-id="{{ item.id }}"
    data-name="{{ item.name }}"
    data-type="order"
    bindtap="triggerSelected">{{ item.name }}</text>
triggerSelected (e) {
    var dataset = e.target.dataset;
    var id = dataset.id;
    var name = dataset.name;
    var type = dataset.type;
    wx.reportAnalytics('click_fliter_item', {
        item_type: type,
        item_id: id,
        item_name: name
    });
}

关于 rpx

rpx 在不同设备被小程序换算为 px 时能产生各种 bug,当设备宽度除不尽 750 时结果值精确至哪一位呢(额...bug 产生原因本人猜的),看看换算表:

举个例子:

<view class="fliter-bar" style="top: {{ top }}rpx;"></view>
<view class="fliter-wrap" style="top: {{ top + 84 }}rpx;"></view>

问题一:当 top = 0 时,0rpx 被换算为 0.5px 也是厉害~

解决方案:

<view class="fliter-bar" style="top: {{ top ? (top + 'rpx') : 0 }};"></view>

问题二:当 fliter-bar 高度为 84rpx,理论上紧贴的 fliter-bar 与 fliter-wrap 在部分设备上也不紧贴...

关于 setData

假如你想在 this.setData 的 key 中传入变量,下述写法报错:

triggerSelected (e) {
    var dataset = e.target.dataset;
    var id = dataset.id;
    var name = dataset.name;
    var type = dataset.type;
    this.setData({
        selected[type]: {
            id: id,
            name: name
        }
    });
}

且 this.setData 不支持模板字符串形式的 key,下述写法也报错:

triggerSelected (e) {
    var dataset = e.target.dataset;
    var id = dataset.id;
    var name = dataset.name;
    var type = dataset.type;
    this.setData({
        `selected.${type}`: {
            id: id,
            name: name
        }
    });
}

可将 selected 存入变量,直接操作 selected 变量后再 this.setData:

triggerSelected (e) {
    var dataset = e.target.dataset;
    var id = dataset.id;
    var name = dataset.name;
    var type = dataset.type;
    var selected = this.data.selected;
    selected[type] = {
        id: id,
        name: name
    };
    this.setData({
        selected: selected
    });
}

检测 page data 内 selected 值与预期的一致,但当 selected 与视图渲染相关时,意想不到的情况发生了...假定我通过 selected 的某一属性值控制元素 class:

<text
    class="{{ selected.order.id == item.id ? 'active' : '' }}"
    wx:for="{{ orders }}"
    data-id="{{ item.id }}"
    data-name="{{ item.name }}"
    data-type="order"
    bindtap="triggerSelected">{{ item.name }}</text>

当元素被点击时其 class 被赋值 active 使之呈现绿色:

而后我点击了另一与之前被点击元素 type 不同的元素,理论上不应影响第一次被点击元素的状态(selected.type2 变化不影响 selected.type1),然而:

active 仍在绿色却不见了,这 bug 也是醉了,我不得不写点烂代码了(通过 switch case 一一处理):

triggerSelected (e) {
    var dataset = e.target.dataset;
    var id = dataset.id;
    var name = dataset.name;
    var type = dataset.type;
    var selected = this.data.selected;
    switch (type) {
        case 'area':
            this.setData({
                'selected.area': {
                    id: id,
                    name: name
                }
            });
            break;
        case 'tag':
            this.setData({
                'selected.tag': {
                    id: id,
                    name: name
                }
            });
            break;
        case 'order':
            this.setData({
                'selected.order': {
                    id: id,
                    name: name
                }
            });
            break;
    }
}

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏企鹅号快讯

2017年互联网中你不知道的小程序战略布局

如今,微信平台的发展逐渐趋于操作系统,其核心竞争力也愈加突出,微信在长期发展过程中,始终致力于通过自身平台的运营,满足用户在多元化场景下的各类需求,在发展社交功...

19580
来自专栏企鹅号快讯

微信小程序曾表示暂不支持游戏,现全面上线小游戏,腾讯直怼苹果

微信上线了“小游戏”,用户无需下载即可在微信中玩跳一跳、中国象棋、坦克大作战等15款H5游戏。 ? 这些小游戏是通过微信小程序实现的,用户只要下载微信6.6.1...

22550
来自专栏企鹅号快讯

爆款微信小游戏“跳一跳”背后隐藏的商业逻辑

关注外星闻名,发现不一样的投资视角。 年关之际,突然又一个微信小游戏不知不觉迅速传开——跳一跳。这又是一款极富爆款特征的小游戏:极易上手、极易操作、社交比拼、易...

23950
来自专栏企鹅号快讯

直播、NFC、分包加载……小程序这两次新能力,有哪些开发者们可以玩的东西?

小程序释放的能力一波接一波,对于开发者而言,真的是高潮一波接一波,微信已经越来越像一个移动端的操作系统。 如今,理论上来说,基于微信几乎可以完成所有想完成的开发...

34650
来自专栏企鹅号快讯

深度解析小程序4大核武器级接口能力

今天给大家介绍4组极其重要,但并不广为人知的微信小程序接口,了解这4类接口,相信您也可以设计出来一款牛逼的微信应用。下面且听微播君为您娓娓道来: 其实在公众号接...

25450
来自专栏企鹅号快讯

微信小程序一天连发2大招:小游戏和腾讯浏览器垂直搜索开放

微信上线了“小游戏”,用户无需下载即可在微信中玩跳一跳、中国象棋、坦克大作战等15款H5游戏。这些小游戏是通过微信小程序实现的,用户只要下载微信6.6.1版都可...

42760
来自专栏企鹅号快讯

小程序入口移到微信主页面,你玩了小游戏没有?

昨天下午3点多,微信公众平台又发出炸裂消息:小程序功能升级,6.6.1版本微信在主界面新增了小程序任务栏的功能。小程序菜单进行了升级,并提供小程序间快速切换的功...

57670
来自专栏企鹅号快讯

你的票被“虫子”吃了

不到两个月,2018年春节要来了。 “今年我得早下手,抢张回家的低价机票。”在北京打工的小王对科技日报记者说,由于老家在云南,春节机票太贵,他都选择坐两天两夜的...

229100
来自专栏企鹅号快讯

微信跳一跳iOS安卓机怎么进入?进不去怎么办?

微信跳一跳iOS安卓版进不去怎么办?听着身边的朋友说,微信出了一个小游戏,叫做跳一跳,这个游戏有点像儿时的跳房子,手指长按屏幕“i”形小人就会躬身蓄力,松开后翻...

22960
来自专栏企鹅号快讯

小程序再添新入口,开放微信外部流量入口,QQ浏览器直接打开小程序

最近小程序的动作不断,就在今天,小程序可以在QQ浏览器里打开,首页入口也即将开放!这一年以来,小程序频繁更新了将近 100 次,现在又在QQ浏览器上面增加了新的...

54980

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励