小程序架构 - 阿珏酱

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)
新进展？不存在的，我都等一个多月了才发布的