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

時間 2019-11-16

標籤微信程序項目搭建简体版

原文原文鏈接

超榮幸可以參與我司【更美小程序】的搭建，在此分享些心得但願可以幫助到像我同樣的前端界萌新。因【更美小程序】源碼需保密，我僅向你們分享基礎建設級別的非業務代碼。點我~html

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

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

assets ：靜態資源

<image /> 及 tabBar 支持引用本地靜態資源，而 wxss 中 background-image 不支持，但支持引用 base64 及網絡資源。git

components ：公用組件
templates ：公用模板

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

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

反之模板較輕便，構造 wxml 接收 page data 便可：小程序

<template name="mError">
    <view class="mError">
        <image src="/assets/images/holder_error.png"></image>
        <text>網絡錯誤</text>
    </view>
</template>
<template is="mError" />

將模塊封裝爲組件或是模板需開發者分析其特性並結合業務場景定奪（純粹的視圖控制請選擇模板）。segmentfault

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...

個人 github：https://github.com/sunmengyuan

原文連接：https://sunmengyuan.github.io...