小程序架構 - 阿珏酱

提示：當你看到這個提示的時候，說明當前的文章是由原emlog博客系統搬遷至此的，文章發佈時間已過於久遠，編排和內容不一定完整，還請諒解`

小程序架構

日期：2019-5-17 阿珏折騰代碼瀏覽：1708 次評論：4 條

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

微信原生的架構是這樣子的

├── 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 標籤引入即可
這種方式既能達到快速切換頁面不閃，文件劃分又好管理。
這種方式是結合了前面兩種的失敗經驗所得，將其合二為一所誕生的。
由於最後項目並沒有全部寫，我就被叫去開發其他項目了，細節方面可能有所纰漏，後續如有新的進展的話，在做更新一波

網友評論：

凡人多煩事 1 年前 (2020-02-17)
微信小程序和 QQ 小程序，框架接口不一樣嗎？聽說微信小程序稍微修改一下，QQ 小程序就可以用

阿珏 1 年前 (2020-02-20)
@凡人多煩事：我這裡說的是架構，不是框架。好高深的樣子

VPS234 主機測評 2 年前 (2019-09-11)
小程序開發這個和 Vue 很像的，感覺比較簡單 [#aru_1]

阿珏 2 年前 (2019-05-17)
新進展？不存在的，我都等一個多月了才發佈的