「WeChatミニプログラム」の事前調査-ミニプログラム開発-php.cn

「WeChatミニプログラム」の事前調査

怪我咯

リリース： 2017-04-10 11:27:12

オリジナル

1720 人が閲覧しました

最近、「WeChat ミニプログラム」という言葉が友人たちの間を占め、ネイティブアプリ開発者が職を失うほどの大騒ぎになっています。もちろん、技術者として常に新しい技術に対して好奇心を持ち続ける必要があるので、インターネットで専門家によるチュートリアルを探したり、開発環境を整えたりして、この新しい開発フレームワークについて学びました。

プロジェクトのファイル構造

WeChatアプレットのデモを開くとき、私の個人的な習慣は、まずプロジェクト全体のファイル構造を見て、まずこの部分が何のためのもので、その部分が何であるかを大まかに理解することです。 for, WeChat ミニプログラムの基本的なファイル構造は次のとおりです:

「WeChatミニプログラム」の事前調査

図 1 - WeChat ミニプログラムの基本的なファイル構造

まず、一目で 3 つのファイルがあることがわかります。プロジェクトのルートディレクトリ、app.js、app.json、app.wxss、これら 3 つのファイルについての私の理解を話しましょう。

1. app.js

app.jsには、WeChatアプレットの本当の入り口、つまり、小さなプログラムが起動されると、それが最初に実行されると理解しています。 . ここまで。 App() 関数は、小さなプログラムを登録するために使用されます。パラメータは Object 型で、小さなプログラムのライフサイクル関数を指定できます (もちろん、まだ完全には理解していません)。グローバルデータと関数を定義します。

ページ上でグローバル getApp() メソッドを呼び出してアプレットインスタンスを取得し、それによって定義したグローバルデータと関数を呼び出すことができます。

2. app.json

app.json は、ミニプログラムのページ、ウィンドウ表現、ネットワークタイムアウトの設定、複数のタブの設定などをグローバルに設定できます。以下は簡単な構成です:

{ 
"pages": [ 
"page/index/index", 
"page/logs/index" 
], 
"window": { 
"navigationBarTitleText": "Demo" 
}, 
"tabBar": { 
"list": [{ 
"pagePath": "page/index/index", 
"text": "首页" 
},{
"pagePath": "page/logs/logs",
 "text": "日志" 
}]
 }, 
"networkTimeout": { 
"request": 10000, 
"downloadFile": 10000 
}, 
"debug": true
}

ログイン後にコピー

3 .app.wxss

app.wxss ファイルは、グローバルスタイルシートに相当し、フロントエンドの CSS ファイルに相当し、次のようにすることができます。このスタイルシートはどのページでも使用されますが、ページで特定の属性の式を繰り返し定義すると、app.wxss ファイルで定義されたものが上書きされます。

上記の 3 つのファイルのうち、app.js と app.json はすべての WeChat アプレットに必要で、app.wxss は必要に応じて追加できます。

図 1 のファイル構造には、images、pages、utils の 3 つのフォルダーディレクトリがあります。この形式は、(実際には) 開発における下請けの方法に似ています。つまり、型プロパティを持つファイルまたはクラスをディレクトリに分割して格納します。プロジェクトの維持が容易になります。

ページディレクトリに注目してみましょう。このディレクトリにはミニプログラムのすべてのページが保存されます。

「WeChatミニプログラム」の事前調査

図 2 - ミニプログラムのページ構造

ここでは、インデックス (ホームページ) とログ (ある種のログを表示) という 2 つのページを定義します。

各ページには、前述した app.js、app.json、およびその他のファイルに似たファイルがあることがわかります。それらが何であるかを見てみましょう。

ログページを例に挙げてみましょう:

1 .logs.js

我们看一下这个文件中简单的代码：

//logs.js
var util = require(&#39;../../utils/util.js&#39;)
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync(&#39;logs&#39;) || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

ログイン後にコピー

如果你有过开发经验或者是js开发经验，那么一样就可以看出，这个类的结构很简单：1.引入了一个外部文件，2.有一个函数，进行了某种处理。

我们看一下官方文档是怎么介绍这个以js结尾的文件的：包含一个Page()函数，Page()函数用来注册一个页面。接受一个object参数，其指定页面的初始数据、生命周期函数、事件处理函数等。它是页面的逻辑文件，页面逻辑在这里处理。

在这个文件中，我们可以定义变量，函数等。