小程序架構

不知道大家們寫小程序是怎麼個寫法的，前幾個月在寫微信小程序，自己整理的一種架構，或者叫框架微信原生的架構是這樣子

├── app.js ├── app.json ├── app.wxss ├── pages │ │── index │ │ ├── index.wxml │ │ ├── index.js │ │ ├── index.json │ │ └── index.wxss │ └── logs │ ├── logs.wxml │ └── logs.js └── utils

為什麼不用微信原生的寫法呢？小程序就類似手機APP，都會有一個tabBar欄對吧，微信官方的tabBar欄是在app.json中進行的全局配置。做一般的開發是沒有任何問題的，但涉及到一個複雜的tabBar欄時，使用官方原生的就無法實現，也無法動態載入，比如某影片app中間的拍照錄影功能這意味著，我們不能使用官方給我們提供的tabBar欄，需要我們自己寫最開始我的做法還是保持原生的結構，只是自己寫tabBar欄，所以頁面程式碼都寫在一個文件中，預設顯示第一屏，其他的都隱藏起來，切換頁面的時候再把相應的頁面顯示，其他的隱藏起來，並且動態渲染資料上去。但是有個問題是，如果是小專案倒沒什麼大問題，但是如果是大專案程式碼量非常龐大，都寫在一個文件中，後期難以維護，所以這個方法最後被pass掉

再後來將切換頁面的方式改為跳轉（wx.switchTab等），把不同頁面的程式碼放到了不同的文件，但是還有一個問題，切換也會閃爍，每次切換頁面就等於重新打開一個網頁一樣，tabBar都被重新渲染，所以會閃爍。pass

由此就有了現在的全新架構方式：將/pages/index/下的文件全部定義為入口文件，js入口，css入口，視圖入口，不同頁面的文件還是放到不同的位置去，為了好管理，新建了一個template的資料夾，用於放不同頁面間的程式碼，結構和官方的單頁面結構是一樣的根目錄下的app.js用於存放全域函數，其他頁面呼叫只需getApp()即可 js的入口文件

const app = getApp();
var index\_js = require("../../template/index/index.js");
var types\_js = require("../../template/types/types.js");
var Global\_Data = \[\];
Page({
    data: {
        active: 0,
        show: {
            index: true,
            types: false,
            course: false,
            user: false
        }
    },

    onLoad(options) {
        this.setData({
            Global\_Data: index\_js.getData()
        })
    },

    // 底部nav切换
    tabbar\_onChange(event) {
        var key = '';
        this.data.show = {
            index: false,
            types: false,
            course: false,
            user: false
        };
        console.log(event)
        switch (event.detail) {
            case 0:
                key = 'index';
                Global\_Data = index\_js.getData();
                break;
            case 1:
                key = 'types';
                Global\_Data = types\_js.getData()
                break;
            case 2:
                key = 'course';
                Global\_Data = index\_js.getData();
                break;
            case 3:
                key = 'user';
                Global\_Data = index\_js.getData();
                break;
        }
        this.data.show\[key\] = true;
        console.log(Global\_Data)
        this.setData({
            show: this.data.show,
            Global\_Data: Global\_Data
        })
    },
});

wxml入口文件

<!-- 入口文件 -->
<import src="/template/nav" />

<block wx:if="{{show.index }}">
    <import src="/template/index/index" />
    <template is="index" data="{{Global\_Data}}" />
</block>

<block wx:elif="{{show.types}}">
    <import src="/template/types/types" />
    <template is="types" data="{{Global\_Data}}" />
</block>

<block wx:elif="{{show.course}}">
    <import src="/template/course/course" />
    <template is="course" data="{{Global\_Data}}" />
</block>

<block wx:elif="{{show.user}}">
    <import src="/template/user/user" />
    <template is="user" data="{{Global\_Data}}" />
</block>

<template is="nav" data="{{active}}" />

<view style='height:50px;'></view>

css入口

@import "/template/user/user.wxss";


.container {
  height: 100vh;
  background-color: #fff;
}

.tag,
.button {
  margin-right: 5px;
}

.van-card\_\_footer {
  margin-top: 5px;
}

然後子頁面的程式碼結構 js

const app = getApp();
var index\_data = {
    banner: \[
        '//img4.mukewang.com/szimg/5c4a74c009dea3b500000000.jpg', '//img2.mukewang.com/szimg/5c734d880939299918000600.jpg', '//img4.mukewang.com/szimg/5c63e89209f9f17d00000000.jpg'
    \],
    imageUrl: 'http://img1.sycdn.imooc.com/szimg/5c6bdb3e08e4674a06000338-360-202.jpg',
    tabs\_active: 0
};
// app.alert('aa');
// 需要对外开放接口，否则无法调用到
module.exports = {//用于返回全局数据
    getData: function() {
        return index\_data;
    },
    myfunction: function (){
        app.alert('aa');
    }

};

css和wxml照常寫即可，如果wxml要複用的地方繼續在當前目錄下分出公共部分，透過 template 標籤引入即可這種方式既能達到快速切換頁面不閃爍，文件劃分又好管理。這種方式是結合了前面兩種的失敗經驗所得，將其合二為一所誕生的。由於最後專案並沒有全部寫完，我就被叫去開發其他專案了，細節方面可能有所疏漏，後續如有新的進展的話，再做更新一波