WeChatアップルト開発-ディレクトリ構造（1.8）

I.概要

この記事では、HelloWorldを例として使用して説明します

アプリレットのディレクトリ構造
リンゴのファイル構成

2つのappletのディレクトリ構造

道	説明
project.config.json	プロジェクト構成ファイル
app.js	アプリケーションロジックファイル
app.json	アプリケーション構成ファイル
app.wxss	アプリケーションの共通スタイルファイル
ページ/	ページファイルが保存されているディレクトリ
ページ/インデックス/	インデックスページが保存されているディレクトリ
pages / index / index.js	インデックスページの論理ファイル
pages / index / index.wxml	インデックスページの構造ファイル
pages / index / index.wxss	インデックスページのスタイルファイル
ページ/ログ/	ログページが保存されているディレクトリ
pages / logs / logs.js	ログページの論理ファイル
pages / logs / logs.json	ログページの構成ファイル
pages / logs / logs.wxml	ログページの構造ファイル
pages / logs / logs.wxss	ログページのスタイルファイル
utils /	パブリックスクリプトファイルを保存するためのディレクトリ
utils / utils.js	共通のスクリプトファイル、いくつかのツールコードを保存

上記の表では、アップルトにはページ/インデックス（ホームページ）とページ/ログ（ログインログページ）の2つのページがあります。ホームページは、以前エミュレータで表示されていたページです。このページの[アバターを取得]ボタンをクリックすると、現在ログインしているユーザーのWeChatアバターが表示されます。アバターをクリックしてログインログページに入り、ユーザーのログイン履歴を表示します。録音

3つの小さなプログラムの構成

WeChatアップルトでは、各ページはwxml、wxss、js、およびjsonファイルで構成され、その中にwxmlおよびjsファイルが存在する必要があり、wxssおよびjsonファイルは省略できます。wxmlファイルとwxssファイルは、Web開発のhtmlファイルとcssファイルに似ていますが、異なります。

4ページの関係

4.1 app.json

特定のプログラミングスキルを持つ読者の場合、コードを読むことでページ間の関係を分析できます。最初にapp.jsonファイルを開き、ファイル内で次のコードを見つけます。

{ 
  "pages"：[ 
    "pages / index / index"、
    "pages / logs / logs" 
  ]、
}

上記のコードでは、ページの先頭はページパスを表します。たとえば、pages / index / indexはpages / indexディレクトリのindex。*ファイルを表します。ページは拡張子の異なる複数のファイルで構成されているため、ここでは全体として扱い、拡張子を追加する必要はありません。ここでは、インデックスとログの2つのページが定義されています。前面のインデックスは、アップルレットを開いた後の最初のページになります。

4.2ページ/インデックス/index.wxml

次に、pages / index / index.wxmlを開き、アップルトのホームページの構造を確認して、次のコードを見つけます。

<！-index.wxml-> 
<view class = "container"> 
  <view class = "userinfo"> 
    <button wx：if = "{ 
      
      {！hasUserInfo && canIUse}}" open-type = "getUserInfo" bindgetuserinfo = "getUserInfo">获取头像昵称</ button> 
    <block wx：else> 
      <image bindtap = "bindViewTap" class = "userinfo-avatar" src = "{ 
      
      {userInfo.avatarUrl}}" mode = "cover"> < / image> 
      <text class = "userinfo-nickname"> { 
      
      {userInfo.nickName}} </ text> 
    </ block> 
  </ view> 
  <view class = "usermotto"> 
    <text class = "user-motto"> { 
      
      {モットー}} </ text> 
  </ view> 
</ view>

上述代码中，<image>标签用于显示用户头像，该标签的属性bindtap表示当用户单击该组件时，执行相应的事件处理函数，即bingViewTap。因此，当用户单击头像时，就会执行bingViewTap函数。

在pages/index/index.js中找到bindViewTap事件处理函数的代码，具体如下：

//事件处理函数
bindViewTap: function() {
  wx.navigateTo({
    url: '../logs/logs'
  })
},

在上述代码中，wx.navigateTo()方法用于跳转页面，从url行代码尅看出，程序会跳转到logs页面，从而实现了单击头像跳转到登录日志页面的效果

4.3 ../logs/logs

打开logs页面的逻辑文件pages/logs/logs.js，可以看到该页面引用了utils/utils.js脚本文件，如下所示。这个脚本文件用于保存公共代码，从而在不同页面中引用。

1 2	//logs.js const util = require('../../utils/util.js')