国产美女在线精品免费观看,人人澡人人透人人爽,息与子猛烈交尾在线播放

超榮幸能夠參與我司【更美小程序】的搭建，在此分享些心得希望能夠幫助到像我一樣的前端界萌新。因【更美小程序】源碼需保密，我僅向大家分享基礎建設級別的非業務代碼。點我~

一個最基本的小程序項目需具備：app.js（入口文件）、app.json（全局配置）、app.wxss（通用樣式）、pages/（頁面）。pages/ 下的每一頁面擁有獨自的 .js、.json、.wxss。形如：

想了解更多請參考微信小程序代碼構成。對于中大型項目需明確劃分功能模塊，我司小程序文件目錄如下：

assets：靜態資源

<image /> 及 tabBar 支持引用本地靜態資源，而 wxss 中 background-image 不支持，但支持引用 base64 及網絡資源。
components：公用組件
templates：公用模板

組件與模板的應用場景易混淆。父節點可向組件也可向模板傳入 data 控制其視圖。然組件的優勢在于其 數據監聽、事件監聽、生命周期 等機制，自行科普 component 構造器你便明了。

但構造組件成本較高，json、wxml、wxss、js 需齊備：

反之模板較輕便，構造 wxml 接收 page data 即可：
```
<template name="mError">
    <view class="mError">
        <image src="/assets/images/holder_error.png"></image>
        <text>網絡錯誤</text>
    </view>
</template>
<template is="mError" />
```
將模塊封裝為組件或是模板需開發者分析其特性并結合業務場景定奪（純粹的視圖控制請選擇模板）。
settings：配置文件
```
module.exports = {
    version: '1.0.0',
    server: 'https://backend.igengmei.com',
    release: 1
}
```
開發階段的網絡環境往往與生產階段不同，settings.js 配置了生產環境，需自行創建 settings_local.js（不入庫）配置開發環境。
```
var settings = require('settings');
var settings_local = null;
try {settings_local = require('settings_local');} catch (err) {}
module.exports = settings_local || settings
```
上述腳本會優先 export settings_local.js 內配置。也可將 server 配置為本地服務，然小程序合法域名不支持 localhost...我們可在開發階段“不校驗安全域名、TLS 版本以及 HTTPS 證書”。（在微信開發者工具中設置）

utils：公用腳本

utils 類腳本非全局注冊需在 page 內 import 方可調用。app.js 內注冊的全局函數無需 import，可通過 app.method(params) 直接調用：

// utils 類腳本
import Common from '../../utils/common'

const app = getApp();
Page({
    data: {},
    ...Common,  
    onLoad: function () {
        this.exampleRequest();
        // 全局注冊類腳本
        app.showToast(this, {
            message: '呆戀小喵一枚',
            duration: 3000,
            type: 'common'
        });
    },
    exampleRequest: function () {
        // 全局注冊類腳本  
        app.request({
            url: 'url',
            method: 'GET'
        });
    }
});

全局注冊使用率高的模塊，可減少 page 內的 import，例如 app.request(params)、app.showToast(params) 等：

import { getBaseInfo } from 'utils/baseInfo'
import Request from 'utils/request'
import Toast from 'utils/toast'

App({
    GLOBAL: {
        baseInfo: getBaseInfo()
    },
    request: function (params) {
        Request(params);
    },
    showToast: function (page, opts) {
        Toast.show(page, opts);
    }
});

也可在 GLOBAL 內注冊一些全局 data，在 page 內通過 app.GLOBAL 獲取。

踩坑札記

關于 tabBar

app.json 內可配置 tabBar 的 pagePath、text、iconPath、selectedIconPath，但圖標尺寸、文字大小、元素間距不可自定義。icon 尺寸建議為 81px * 81px，若 icon 切圖恰好撐滿畫布，圖標與文字便相互緊貼不美觀。故 icon 切圖底邊距需有所保留：

關于 toast

小程序自帶 wx.showToast 必須傳入 icon：

wx.showToast({
    title: '成功',
    icon: 'success',
    duration: 2000
});

但我想使用樸素的 toast：

自行封裝 toast 捎帶默認類型及自定義類型是個不錯的選擇：

switch (opts.type) {
    case 'common':
        page.setData({
            'render.toast.show': true,
            'render.toast.message': opts.message
        });
        let t = setTimeout(() => {
            page.setData({
                'render.toast.show': false,
                'render.toast.message': ''
            });
            opts.callback();
        }, opts.duration);
        break;
    case 'loading':
        wx.showToast({
            title: opts.message,
            duration: opts.duration,
            icon: 'loading'
        });
        break;
    case 'success':
        wx.showToast({
            title: opts.message,
            duration: opts.duration,
            icon: 'success'
        });
        break;
}

關于 <rich-text />

<rich-text /> 渲染時不會將 nodes 解析為常規標簽，你只能拿到這樣一大坨：

無法直接獲取其中的 dom，且不可在 .wxss 中定義其樣式故必須添加內聯 style。

且 <rich-text /> 無法對 nodes 自動糾錯：例如部分瀏覽器可解析 <u>一段錯誤代碼</u>， <rich-text /> 則直接過濾錯誤代碼不進行渲染。

關于 onPullDownRefresh

enablePullDownRefresh 僅可開啟 pulldown 的交互及監聽，并非想象中的 window.location.reload。我們需要定義自己的 reload：

reload: function (page, callback) {
    page.setData({
        reqError: false
    });
    callback && callback();
    page.onLoad();
    page.onReady();
}

onPullDownRefresh: function () {
    const _page = this;
    Loadmore.clear(_page);
    app.reload(_page, function () {
        _page.setData({
            'render.orders': [],
            'render.loading': true,
            'render.empty.show': false
        });
    });
    wx.stopPullDownRefresh();
}

小程序無 window 概念，不可調用 window.location.reload。其實 reload 無非 重置 data、重新調用 onLoad 及 onReady（原諒我這膚淺的理解，但你可在 callback 中做任何意義上的重置）。

在 onPullDownRefresh 回調執行時 wx.stopPullDownRefresh() 防止用戶瘋狂 pulldown 導致卡澀。

關于 wx.getSystemInfo

調用 wx.getSystemInfo 可獲取設備信息，fail 回調限制了獲取失敗時的嘗試次數：

function getMobileInfo(i) {
    wx.getSystemInfo({
        success: (res) => {
            BaseInfo.mobile = res.brand + res.model;
            BaseInfo.system = res.platform + res.system;
            BaseInfo.wechat = res.version;
            BaseInfo.winWidth = res.windowWidth / (res.windowWidth / 750);
            BaseInfo.winHeight = res.windowHeight / (res.windowWidth / 750);
        },
        fail: () => {
            (i < 3) && getMobileInfo(i + 1);
        }
    });
}
getMobileInfo(0);

請注意 windowWidth、windowHeight 度量單位為 px，而我司項目規定使用 rpx。為實現單位統一，需對 windowWidth 及 windowHeight 做單位轉換：

BaseInfo.winWidth = res.windowWidth / (res.windowWidth / 750);
BaseInfo.winHeight = res.windowHeight / (res.windowWidth / 750);

1rpx = (設備寬度 / 750) px

關于 wx.getLocation

首次執行 wx.getLocation 小程序將自動調啟如下 dialog：

請注意是首次！無論用戶選擇“確定”或是“取消”，再次進入“更美測試”均不會被詢問是否開啟定位（調用 100 次 wx.getLocation 也無濟于事）。除非用戶手動清理微信緩存、更新微信、切換賬號...

各種緩存：

存在上述問題的 API 絕不止 wx.getLocation 例如 wx.login，遺憾的是，小程序并未開放清理緩存的接口。但可通過 wx.openSetting 再次請求用戶開啟授權：

關于 wx.reportAnalytics

小程序數據分析可通過填寫配置上報、API 上報：

對于填寫配置上報，需提交觸發動作、觸發頁面、觸發元素、埋點數據等。但埋點數據需從 page data 中獲取，看看官方文檔是怎么曰的：

事件數據來源于對頁面 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;
    }
}

未完待續，謝謝關注~

作者：呆戀小喵

相關文章：初嘗微信小程序（浪漫調酒師）

我的后花園：https://sunmengyuan.github.io/garden/

我的 github：https://github.com/sunmengyuan

原文鏈接：https://sunmengyuan.github.io/garden/2018/01/04/xcx-gm.html

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

入坑微信小程序（項目搭建）

入坑微信小程序（項目搭建）

踩坑札記

關于 tabBar

關于 toast

關于 <rich-text />

關于 onPullDownRefresh

關于 wx.getSystemInfo

關于 wx.getLocation

關于 wx.reportAnalytics

關于 rpx

關于 setData

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

入坑微信小程序（項目搭建）

踩坑札記

關于 tabBar

關于 toast

關于 <rich-text />

關于 onPullDownRefresh

關于 wx.getSystemInfo

關于 wx.getLocation

關于 wx.reportAnalytics

關于 rpx

關于 setData

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频