ホームページ > 記事 > WeChat アプレット > 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: 'Hello World', userInfo: {} }, // 事件处理函数 bindViewTap: function() { wx.navigateTo({ url: '../logs/logs' }) }, onLoad: function () { console.log('onLoad') 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('../../utils/util.js') Page({ data: { logs: [] }, onLoad: function () { this.setData({ logs: (wx.getStorageSync('logs') || []).map(function (log) { return util.formatTime(new Date(log)) }) }) } })</font>
あなたはそれをマスターしたと思いますこの記事の「方法」の事例を読んだ後、さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
基本的なユーザー情報を取得するための WeChat ミニ プログラム開発
WeChat ミニ プログラム開発用のプロジェクトの作成方法
以上がWeChat アプレット開発でページを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。