WeChat ミニ プログラム: ミニ プログラムの基本的なディレクトリ構造の説明

WeChat ミニ プログラムの概要では、ミニ プログラムの機能、開発ツール、ミニ プログラム プロジェクトの作成方法についてすでに学習しました。今日は firstdemo を例として、ミニ プログラムの基本的なディレクトリ構造を紹介します。

WeChat アプレット プロジェクトを開き、クリックして [編集] メニューに入ると、次の 5 つのファイル/フォルダーが表示されます: ページ フォルダー、utils フォルダー、グローバル ファイル app.js ファイル、グローバル ファイル app.json ファイル、画像編集ファイルツール app.wxss ファイル。

ミニプログラムのディレクトリ構造の全体構造は以下の通りです。

ミニプログラムディレクトリ内の各ファイルやフォルダーの機能や注意点を詳しく紹介します。
1. ページ ディレクトリの紹介

pages: 主に小さなプログラムのページ ファイルが保存されます。各フォルダーはページであり、各ページには 4 つのファイルが含まれます。プログラム ロジック ファイルは、イベント インタラクション ファイルやスクリプト ファイルとも呼ばれ、初期データの設定、イベントの定義、データ インタラクション、論理演算、変数、配列、オブジェクト、関数の宣言など、インターフェイス上のクリック イベントなどの機能を処理するために使用されます。 , コメントの入れ方など、構文はJavaScriptと同じです。 Index.js のコードを開いて詳しく見ることができます。

まず、モットーの hello ワードをデータ内の hello WeChat アプレットに変更できます。以下の図に示すように:

次に、bindViewTap: function() の関数を見てみましょう。これは、クリックしてログ ページにジャンプします。以下の図に示すように、アバターをクリックしてデモンストレーション効果を確認できます:

最後に、ページ開始時のアクションを設定する onLoad 関数を見てみましょう。以下の図に示すように、ページの開始時に表示されるページを変更したり、新しい関数を追加したりできます。

よく使用される .js 関数は次のとおりです:

Page({
  data:{
    // text:"这是一个页面"
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    console.log('App onLoad')
  },
  onReady:function(){
    // 页面渲染完成
    console.log('App onReady')
  },
  onShow:function(){
    // 页面显示
    console.log('App onShow')
  },
  onHide:function(){
    // 页面隐藏
    console.log('App onHide')
  },
  onUnload:function(){
    // 页面关闭
    console.log('App onUnload')
  } 
})

インデックス付きのファイル。 json.json サフィックスは、主に json データ形式で保存され、プログラムの構成効果を設定するために使用されます。以下に示すように、インデックス ディレクトリに .json 構成ファイルを作成できます:

index.json この構成ファイルは、このレベルのディレクトリ内のページ構成ファイルのみを構成でき、ナビゲーションの関連ファイルのみを構成できます。バーの設定変更。ナビゲーション テキスト、背景色、テキスト色などのナビゲーション バーの表示スタイルの変更など。その構文は json 構文と同じです。たとえば、下の図に示すように、ナビゲーション バーの背景色を赤に変更してみましょう:

背景色が赤に変化することがわかります。 。 (この色は本当にひどいです!)

index.wxml

.wxml ファイルは、ページを構築し、ページにコントロールを追加するために使用されるインターフェイス ファイルおよびページ構造ファイルです。正式名称は、weixin markup language、WeChat マークアップ言語の略称です。他の一般的なマークアップ言語と同様に、タグはペアであり、タグ名は小文字です。クラスを参照することで外観を制御したり、イベントをバインドすることで論理処理を実行したり、レンダリングすることで必要なリストを完成させることもできます。これは、ユーザー操作とバックエンド ロジックの間のリンクです。ページに表示されるすべての要素はここで編集できます。たとえば、以下に示すようにページにボタンを配置します。

在.wxml中如何对不需要的程序代码进行注释呢？如下：

<!--index.wxml-->
<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}000</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
  <!--<button type="primary">按钮</button>-->
</view>

注意：

1. 在微信小程序里面这些特定的标记叫做组件。

index.wxss

.wxss是样式表文件，类似于前端中的css，是为.wxml文件和page文件进行美化的文件，让界面显示的更加美观。例如对文字的大小，颜色，图片的宽高，设置个.wxml中个组件的位置，间距等。

注意：

1.小程序每个页面必须有.wxml和.js文件，其他两种类型的文件可以不需要

2.文件名称必须与页面的文件夹名称相同，如index文件夹，文件只能是index.wxml、index.wxss、index.js和index.json.

1.2 utils

该文件件主要用于存放全局的一些.js文件，公共用到的一些事件处理代码文件可以放到该文件夹下，用于全局调用。例如，公用的方法：对时间的处理等。

module.exports = {  
  formatTime: formatTime  
}

对于允许外部调用的方法，用module.exports进行声明，才能在其他js文件中用一下代码引入

var util = require('../../utils/util.js')

然后就可以调用该方法。

举例：我们直接定义一个utils函数，如下图所示：

function util(){
  console.log("模块被调用了！！")
}

module.exports.util = util

然后在index.js文件中调用这个util函数，如下所示：

var common = require('../../utils/util.js')

我们可以保存后，在后台可以看到，我们定义的util内容被调用了，如下所示：

1.3 app.js、app.json、app.wxss

app.js : 系统的方法处理全局文件，也就是说文件中规定的函数和数据，在整个小程序中，每一个框架页面和文件都可以使用this获取。每个小程序都会有一个app.js文件，有且只有一个，位于项目的根目录！app.js的作用就是告诉小程序，注册一个小程序实例使用app（object）的形式注册，实现小程序在不同阶段的需要实现的事件功能，如onLoad，onshow等，全局的on事件只有如下三个，要比页面的on事件要少。主要处理程序的声明周期的一些方法；例如：程序刚开始运行时事件处理等.app.js 里面包含一个app() 方法，里面提供对应事件定义，如下

App({
  onLaunch: function () {
    console.log('App Launch')
  },
  onShow: function () {
    console.log('App Show')
  },
  onHide: function () {
    console.log('App Hide')
  }
})

App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。

app.json : 系统全局配置文件，是必须包含的。包含设置页面路径，设置底部，网络，调试模式，设置导航头的颜色，字体大小，下面有没有tabbar等功能，具体页面的配置在页面的json文件中单独修改，任何一个页面都需要在app.json中注册，如果不在json中添加，页面是无法打开的。

  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],

（框架中的json优先级高于全局的json优先级。）

app.wxss : 全局的界面美化代码，并不是必须的。其优先级同样没有框架中的wxss的优先级高。

举例：在index.wxss中有头像的外边距设置

.usermotto {
  margin-top: 200px;
}

在app.wxss中也定义一个全局的头像外边距设置400px，我们看看到底哪一个被执行了。

.usermotto {
  margin-top: 400px;
}

在执行重启的过程中，我们可以看到全局的参数被index.wxss里面的覆盖了。

微信小程序的图片添加和处理
微信小程序中添加图片是非常麻烦的，只能通过打开项目文件夹，把图片放到目录下即可。在代码中引用图片的相对路径或者绝对路径就可以了。目前小程序开发中仅支持png和jpg格式，其他格式的图片无法打开。

更多WeChat ミニ プログラム: ミニ プログラムの基本的なディレクトリ構造の説明相关文章请关注PHP中文网！