小プログラムのアーキテクチャ

ヒント：このヒントを見ると、現在の記事は元のemlogブログシステムから移行されたものであることを示しています。記事の公開日は非常に古く、レイアウトや内容が完全でない場合がありますので、ご了承ください。

小プログラムのアーキテクチャ

日付：2019-5-17 阿珏コードをいじる浏览：1708 回コメント：4 件

皆さんはどのように小プログラムを書いているのでしょうか。数ヶ月前に WeChat の小プログラムを書いていたとき、自分で一つのアーキテクチャ、またはフレームワークを作りました。

WeChat のネイティブアーキテクチャは次のようなものです。

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

なぜWeChatのネイティブの方法を使わないのですか？
小プログラムは携帯アプリのようなもので、タブバーがあるはずです。WeChatの公式のタブバーはapp.jsonでグローバルに設定されます。一般的な開発では何の問題もありませんが、複雑なタブバーが必要な場合、公式のネイティブでは実現できず、動的に読み込むこともできません。例えば、ビデオアプリの中間にある写真撮影とビデオ撮影の機能などです。
つまり、WeChatが提供する公式のタブバーを使用することはできず、自分で作る必要があります。
最初はネイティブの構造を保つようにしましたが、自分でタブバーを作成しました。したがって、ページのコードはすべて1つのファイルに書かれ、デフォルトでは最初の画面が表示され、他の画面は非表示にされ、ページを切り替えると対応するページが表示され、他のページは非表示にされ、データが動的にレンダリングされます。ただし、問題があります。小規模なプロジェクトでは問題ありませんが、大規模なプロジェクトではコード量が非常に多くなり、1つのファイルに書かれているため、後でメンテナンスが困難になります。そのため、この方法は最終的には放棄されました。

その後、ページの切り替え方法をジャンプ（wx.switchTabなど）に変更し、異なるページのコードを異なるファイルに配置しましたが、切り替えると点滅するという問題があります。ページを切り替えるたびに、ウェブページを再度開くのと同じです。タブバーが再レンダリングされるため、点滅します。放棄

これにより、新しいアーキテクチャの方法が生まれました：
/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()
        })
    },

    // ボトムナビゲーションの切り替え
    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タグでインポートするだけです。
この方法は、ページの切り替えが素早く点滅しないだけでなく、ファイルの分割も管理しやすくなります。
この方法は、前述の2つの失敗した経験を組み合わせて生まれました。
最後のプロジェクトはすべて書かれていないので、他のプロジェクトの開発に呼ばれました。細部には欠陥があるかもしれませんが、今後の進展があれば、更新します。

ユーザーコメント：

凡人多烦事 1 年前 (2020-02-17)
WeChat 小プログラムと QQ 小プログラム、フレームワークのインターフェースは異なりますか？WeChat 小プログラムを少し変更すれば、QQ 小プログラムでも使用できると聞いたことがあります。

阿珏 1 年前 (2020-02-20)
@凡人多烦事：ここで言っているのはアーキテクチャであり、フレームワークではありません。高度なようですね。

VPS234 ホスティングの評価 2 年前 (2019-09-11)
小プログラム開発は Vue に似ていて、比較的簡単だと思います [#aru_1]

阿珏 2 年前 (2019-05-17)
新しい進展？ありません、1 ヶ月以上待ってからリリースしました