小程序模板網(wǎng)

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

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

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

一個(gè)最基本的小程序項(xiàng)目需具備:app.js(入口文件)、app.json(全局配置)、app.wxss(通用樣式)、pages/(頁面)。pages/ 下的每一頁面擁有獨(dú)自的 .js、.json、.wxss。形如:

想了解更多請參考 微信小程序代碼構(gòu)成。對于中大型項(xiàng)目需明確劃分功能模塊,我司小程序文件目錄如下:

  • assets :靜態(tài)資源

 及 tabBar 支持引用本地靜態(tài)資源,而 wxss 中 background-image 不支持,但支持引用 base64 及網(wǎng)絡(luò)資源。

  • components :公用組件
  • templates :公用模板

組件 與 模板 的應(yīng)用場景易混淆。父節(jié)點(diǎn)可向組件也可向模板傳入 data 控制其視圖。然組件的優(yōu)勢在于其 數(shù)據(jù)監(jiān)聽 、 事件監(jiān)聽 、 生命周期 等機(jī)制,自行科普 component 構(gòu)造器 你便明了。

但構(gòu)造組件成本較高,json、wxml、wxss、js 需齊備:

反之模板較輕便,構(gòu)造 wxml 接收 page data 即可:


<template name="mError">
    <view class="mError">
        <image src="/assets/images/holder_error.png">image>
        <text>網(wǎng)絡(luò)錯(cuò)誤text>
    view>
template>
<template is="mError" />

將模塊封裝為組件或是模板需開發(fā)者分析其特性并結(jié)合業(yè)務(wù)場景定奪(純粹的視圖控制請選擇模板)。

  • settings :配置文件

module.exports = {
    version: '1.0.0',
    server: 'https://backend.igengmei.com',
    release: 1
}

開發(fā)階段的網(wǎng)絡(luò)環(huán)境往往與生產(chǎn)階段不同, settings.js 配置了生產(chǎn)環(huán)境,需自行創(chuàng)建 settings_local.js (不入庫)配置開發(fā)環(huán)境。


var settings = require('settings');
var settings_local = null;
try {settings_local = require('settings_local');} catch (err) {}
module.exports = settings_local || settings

上述腳本會(huì)優(yōu)先 export settings_local.js 內(nèi)配置。也可將 server 配置為本地服務(wù),然小程序合法域名不支持 localhost...我們可在開發(fā)階段“不校驗(yàn)安全域名、TLS 版本以及 HTTPS 證書”。

  • utils :公用腳本

utils 類腳本非全局注冊需在 page 內(nèi) import 方可調(diào)用。 app.js 內(nèi)注冊的全局函數(shù)無需 import,可通過 app.method(params) 直接調(diào)用:


// 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 內(nèi)的 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 內(nèi)注冊一些全局 data,在 page 內(nèi)通過 app.GLOBAL 獲取。


踩坑札記

關(guān)于 tabBar

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

關(guān)于 toast

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


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

但我想使用樸素的 toast:

自行封裝 toast 捎帶默認(rèn)類型及自定義類型是個(gè)不錯(cuò)的選擇:


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

關(guān)于

渲染時(shí)不會(huì)將 nodes 解析為常規(guī)標(biāo)簽,你只能拿到這樣一大坨:

無法直接獲取其中的 dom,且不可在 .wxss 中定義其樣式故必須添加內(nèi)聯(lián) style。

且 無法對 nodes 自動(dòng)糾錯(cuò):例如部分瀏覽器可解析 一段錯(cuò)誤代碼 , 則直接過濾錯(cuò)誤代碼不進(jìn)行渲染。

關(guān)于 onPullDownRefresh

enablePullDownRefresh 僅可開啟 pulldown 的交互及監(jiān)聽,并非想象中的 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 概念,不可調(diào)用 window.location.reload 。其實(shí) reload 無非 重置 data 、重新調(diào)用 onLoad 及 onReady (原諒我這膚淺的理解,但你可在 callback 中做任何意義上的重置)。

在 onPullDownRefresh 回調(diào)執(zhí)行時(shí) wx.stopPullDownRefresh() 防止用戶瘋狂 pulldown 導(dǎo)致卡澀。

關(guān)于 wx.getSystemInfo

調(diào)用 wx.getSystemInfo 可獲取設(shè)備信息,fail 回調(diào)限制了獲取失敗時(shí)的嘗試次數(shù):


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,而我司項(xiàng)目規(guī)定使用 rpx。為實(shí)現(xiàn)單位統(tǒng)一,需對 windowWidth 及 windowHeight 做單位轉(zhuǎn)換:


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


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