WeChat アプレット開発でページを作成する方法

インデックス ページとログ ページの 2 つのページがあります。つまり、ウェルカム ページとミニ プログラムの起動ログ表示ページです。これらは両方ともページ ディレクトリにあります。 WeChat ミニ プログラムの各ページの [パス + ページ名] は app.json のページ内に記述する必要があり、ページ内の最初のページがミニ プログラムのホームページになります。

各ミニ プログラム ページは、同じパスにある同じ名前の 4 つの異なるサフィックス ファイル (index.js、index.wxml、index.wxss、index.json など) で構成されています。接尾辞 .js の付いたファイルはスクリプト ファイル、接尾辞 .json の付いたファイルは構成ファイル、接尾辞 .wxss の付いたファイルはスタイル シート ファイル、接尾辞 .wxml の付いたファイルはページ構造ファイルです。

index.wxml はページの構造ファイルです:

<font size="3" face="微软雅黑" style=""><!--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}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view></font>

この例では、ページ構造の構築、データのバインド、対話型処理関数の作成に 、 、が使用されます。

index.js はページのスクリプト ファイルです。このファイルでは、ページのライフサイクル関数の監視と処理、ミニ プログラム インスタンスの取得、データの宣言と処理、ページ インタラクション イベントへの応答などを行うことができます。

<font size="3" face="微软雅黑" style="">//index.js
// 获取应用实例
var app = getApp()
Page({
  data: {
    motto: &#39;Hello World&#39;,
    userInfo: {}
  },
  // 事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: &#39;../logs/logs&#39;
    })
  },
  onLoad: function () {
    console.log(&#39;onLoad&#39;)
    var that = this
    // 调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      // 更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }
})</font>

index.wxss 是页面的样式表：
<font size="3" face="微软雅黑" style="">/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}
.userinfo-nickname {
  color: #aaa;
}
.usermotto {
  margin-top: 200px;
}</font>

コードをコピー

ページ スタイル シートはオプションです。ページ スタイル シートがある場合、ページのスタイル シートのスタイル ルールは app.wxss のスタイル ルールにカスケードされます。ページのスタイル シートを指定しない場合は、ページの構造ファイルの app.wxss で指定されたスタイル ルールを直接使用することもできます。

index.jsonはページの設定ファイルです:

ページの設定ファイルは必要ありません。ページ構成ファイルがある場合、ページ上の構成項目は、app.json のウィンドウ内の同じ構成項目を上書きします。ページ構成ファイルが指定されていない場合は、app.json のデフォルト構成がページで直接使用されます。

ログのページ構造

<font size="3" face="微软雅黑" style=""><!--logs.wxml-->
<view class="container log-list">
  <block wx:for-items="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view></font>

ログページは、コントロールタグを使用してコードを整理し、wx:for-itemsを使用してログデータをバインドし、ログデータをループしてノードを展開します

<font size="3" face="微软雅黑" style="">//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))
      })
    })
  }
})</font>

あなたはそれをマスターしたと思いますこの記事の「方法」の事例を読んだ後、さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

基本的なユーザー情報を取得するための WeChat ミニ プログラム開発

WeChat ミニ プログラム開発用のプロジェクトの作成方法

以上がWeChat アプレット開発でページを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。