Hello! 欢迎来到阿珏酱のBlog!

小程序架构


avatar
阿珏 2019-05-17 1.98k

不知道大家们写小程序是怎么个写法的,前几个月在写微信小程序,自己整的一种架构,或者叫框架
微信原生的架构是这样子的

├── 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 标签引入即可
这种方式既能达到快速切换页面不闪,文件划分又好管理。
这种方式是结合了前面两种的失败经验所得,将其合二为一所诞生的。
由于最后项目并没有全部写,我就被叫去开发其他项目了,细节方面可能有所纰漏,后续如有新的进展的话,在做更新一波

  • avatar
    游客

    微信小程序和QQ小程序,框架接口不一样吗?听说微信小程序稍微修改一下,QQ小程序就可以用

    • avatar
      博主

      @ 凡人多烦事 @凡人多烦事:我这里说的是架构,不是框架。好高深的样子

  • avatar
    游客

    小程序开发这个和Vue很像的,感觉比较简单aru_1

  • avatar
    博主

    新进展?不存在的,我都等一个多月了才发布的

发表评论
OωO表情

相关阅读