小程序模板網(wǎng)

入坑微信小程序(項(xiàng)目搭建)下

發(fā)布時(shí)間:2018-05-04 15:51 所屬欄目:小程序開(kāi)發(fā)教程

關(guān)于 wx.getLocation

首次 執(zhí)行 wx.getLocation 小程序?qū)⒆詣?dòng)調(diào)啟如下 dialog:

請(qǐng)注意是 首次 !無(wú)論用戶(hù)選擇“確定”或是“取消”,再次進(jìn)入“更美測(cè)試”均不會(huì)被詢(xún)問(wèn)是否開(kāi)啟定位(調(diào)用 100 次 wx.getLocation 也無(wú)濟(jì)于事)。除非用戶(hù)手動(dòng)清理微信緩存、更新微信、切換賬號(hào)...

各種緩存:

存在上述問(wèn)題的 API 絕不止 wx.getLocation 例如 wx.login,遺憾的是,小程序并未開(kāi)放清理緩存的接口。但可通過(guò) wx.openSetting 再次請(qǐng)求用戶(hù)開(kāi)啟授權(quán):

關(guān)于 wx.reportAnalytics

小程序數(shù)據(jù)分析可通過(guò)填寫(xiě)配置上報(bào)、API 上報(bào):

對(duì)于填寫(xiě)配置上報(bào),需提交觸發(fā)動(dòng)作、觸發(fā)頁(yè)面、觸發(fā)元素、埋點(diǎn)數(shù)據(jù)等。但埋點(diǎn)數(shù)據(jù)需從 page data 中獲取,看看官方文檔是怎么曰的:

OMG...需要在 page data 內(nèi)維護(hù)埋點(diǎn)狀態(tài),當(dāng)埋點(diǎn)量較大時(shí)上報(bào)數(shù)據(jù)的復(fù)雜度可想而知。我曾傻傻的認(rèn)為 data 字段值等同 dataset 值:


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

未曾想竟為 page 實(shí)例中的 data 值:


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

如此看來(lái) API 上報(bào)更簡(jiǎn)單,為觸發(fā)元素 dataset 埋點(diǎn)數(shù)據(jù)并調(diào)用 wx.reportAnalytics 傳入?yún)?shù):


<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
    });
}

關(guān)于 rpx

rpx 在不同設(shè)備被小程序換算為 px 時(shí)能產(chǎn)生各種 bug,當(dāng)設(shè)備寬度除不盡 750 時(shí)結(jié)果值精確至哪一位呢(額...bug 產(chǎn)生原因本人猜的),看看換算表:

舉個(gè)例子:


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

問(wèn)題一:當(dāng) top = 0 時(shí),0rpx 被換算為 0.5px 也是厲害~

解決方案:


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

問(wèn)題二:當(dāng) fliter-bar 高度為 84rpx,理論上緊貼的 fliter-bar 與 fliter-wrap 在部分設(shè)備上也不緊貼...

關(guān)于 setData

假如你想在 this.setData 的 key 中傳入變量,下述寫(xiě)法報(bào)錯(cuò):


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,下述寫(xiě)法也報(bào)錯(cuò):


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
    });
}

檢測(cè) page data 內(nèi) selected 值與預(yù)期的一致,但當(dāng) selected 與視圖渲染相關(guān)時(shí),意想不到的情況發(fā)生了...假定我通過(guò) 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>

當(dāng)元素被點(diǎn)擊時(shí)其 class 被賦值 active 使之呈現(xiàn)綠色:

而后我點(diǎn)擊了另一與之前被點(diǎn)擊元素 type 不同的元素,理論上不應(yīng)影響第一次被點(diǎn)擊元素的狀態(tài)(selected.type2 變化不影響 selected.type1),然而:

active 仍在綠色卻不見(jiàn)了,這 bug 也是醉了,我不得不寫(xiě)點(diǎn)爛代碼了(通過(guò) 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;
    }
}

未完待續(xù),謝謝關(guān)注~



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24229.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線咨詢(xún)