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