小程式架構

阿珏酱發表於2024-05-20
架構

Tips：當你看到這個提示的時候，說明當前的文章是由原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)
新進展？不存在的，我都等一個多月了才釋出的

相關文章