banner
阿珏酱

阿珏酱

いつもとは逆の電車に乗り、見たこともない風景を見に行く
twitter
github
facebook
bilibili
zhihu
steam_profiles
youtube

小程序架构

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

网友评论:

image 凡人多烦事 1 年前 (2020-02-17)
微信小程序和 QQ 小程序,框架接口不一样吗?听说微信小程序稍微修改一下,QQ 小程序就可以用

image 阿珏 1 年前 (2020-02-20)
@凡人多烦事:我这里说的是架构,不是框架。好高深的样子

image VPS234 主机测评 2 年前 (2019-09-11)
小程序开发这个和 Vue 很像的,感觉比较简单 [#aru_1]

image 阿珏 2 年前 (2019-05-17)
新进展?不存在的,我都等一个多月了才发布的

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。