WeChatミニプログラム事例の詳細説明：ページ構築-ミニプログラム開発-php.cn

WeChatミニプログラム事例の詳細説明：ページ構築

高洛峰

リリース： 2017-03-04 14:31:13

オリジナル

2244 人が閲覧しました

この記事では、実践的な例を使用して、WeChat ミニプログラムページを構築する方法を説明します。まず、この記事で達成されるページ効果を見てみましょう:

WeChatミニプログラム事例の詳細説明：ページ構築

開発ツールのダウンロード: WeChat には開発とデバッグ、コード編集、プログラムのリリースなどの機能を統合した開発者ツールが公式に用意されています。
WeChat ミニプログラムのアーキテクチャ:

WeChatミニプログラム事例の詳細説明：ページ構築

これがプログラムの基本構造です。最も重要で不可欠なものは、app.js、app.json、および app.wxss です。このうち、.js サフィックスはスクリプトファイル、.json サフィックスは設定ファイル、.wxss サフィックスはスタイルシートファイルです。
下部ラベル下部ラベルは tabBar です。実装は比較的単純で、簡単な構成のみが必要です。 app.json

{
  "pages":[
    "pages/function/function",
    "pages/pay/pay",
    "pages/account/account",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "tabBar":{
    "color": "#464a56",
    "selectedColor": "#6595e9",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "white",
    "list": [{
        "pagePath": "pages/function/function",
        "text": "功能",
        "iconPath": "images/tab_function_default.png",
        "selectedIconPath": "images/tab_function_sel.png"
    },{
        "pagePath": "pages/pay/pay",
        "text": "收款",
        "iconPath": "images/tab_consume_default.png",
        "selectedIconPath": "images/tab_consume_sel.png"
    },{
        "pagePath": "pages/account/account",
        "text": "账户",
        "iconPath": "images/tab_account_default.png",
        "selectedIconPath": "images/tab_account_sel.png"
    }]
  },
  "window":{
    "navigationBarBackgroundColor": "#6595e9",
    "navigationBarTextStyle":"white",
    "navigationBarTitleText": "V50",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle":"light"
  }
}

ログイン後にコピー

ミニプログラムがどのページで構成されているかを指定するために、ページは配列 (各項目は文字列) を受け入れることに注意してください。各項目は対応するページの [パス + ファイル名] 情報を表し、配列の最初の項目はミニプログラムの最初のページを表します。
ミニプログラムでページを追加/削減するには、ページ配列を変更する必要があります。
フレームワークは統合のためにパス .json、.js、.wxml、.wxss 内の 4 つのファイルを自動的に検索するため、ファイル名にファイル接尾辞を付ける必要はありません。
ページタイトル:

ページタイトルこのタイトルを実装するにはどうすればよいですか?公式ドキュメントを見てみましょう。

WeChatミニプログラム事例の詳細説明：ページ構築

これを見ると、指定したページの json ファイルでページを構成する必要があることがわかります。引き続き公式ドキュメントを確認してください

WeChatミニプログラム事例の詳細説明：ページ構築

以上です！すべてのページに共通の構成を page.json に記述し、各ページの .json ファイルで各ページ固有のプロパティを構成するだけです。上記の app.json で一般ページの window 属性が設定されているので、function.json でページタイトルを設定するだけです:

{
     "navigationBarTitleText": "功能"   
   }

ログイン後にコピー

カルーセルチャート
次に、上部のカルーセルチャートを実装します。 WeChat は、カルーセルチャートを実装するためのスワイパーコンポーネントを提供します。

WeChatミニプログラム事例の詳細説明：ページ構築

コードは function.wxml

<swiper indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
</swiper>
function.js

//function.js
Page({
  data: {
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    imgUrls: [
       &#39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg&#39;,
       &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg&#39;,
       &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg&#39;
     ],  
  },
})

ログイン後にコピー

はい、WeChat アプレットのカルーセル画像はとてもシンプルです。「カルーセルの画像は URL アドレスを使用しています。ローカルの画像を使用したい場合はどうすればよいですか? 実現できますか?」
この公式ドキュメントではそれが紹介されていませんが、テストした結果、実現可能です。コードは次のとおりです

imgUrls: [
    &#39;../../images/adv_50.png&#39;,
    &#39;../../images/adv_60.png&#39;,
    &#39;../../images/adv_80.png&#39; 
],

ログイン後にコピー

真ん中の関数モジュール
真ん中の8つの関数モジュールはAndroidのGridView効果に似ています。この記事では、ループメソッドを使用して実装します: function.wxml

<view class=&#39;function_container&#39;>
    <view class=&#39;function_item&#39; wx:for="{{functions}}" wx:for-index="idx" wx:for-item="function">
        <image class=&#39;function_img&#39; src=&#39;{{function.pic_url}}&#39;/> 
        <view class=&#39;function_name&#39;>{{function.name}}</view>
    </view>
  </view>
function.js

functions: [
      {
        "name": "刷卡消费",
        "pic_url": &#39;../../images/icon_consume.png&#39;
      },
      {
        "name": "提现",
        "pic_url": &#39;../../images/icon_withdrawals.png&#39;
      },
      {
        "name": "交易记录",
        "pic_url": &#39;../../images/icon_records.png&#39;
      },
      {
        "name": "实名认证",
        "pic_url": &#39;../../images/icon_auth.png&#39;
      },
      {
        "name": "飞机票",
        "pic_url": &#39;../../images/icon_airplane.png&#39;
      },
      {
        "name": "火车票",
        "pic_url": &#39;../../images/icon_train.png&#39;
      },
      {
        "name": "手机充值",
        "pic_url": &#39;../../images/icon_phone_recharge.png&#39;
      },
      {
        "name": "水电煤",
        "pic_url": &#39;../../images/icon_water.png&#39;
      }
    ]
function.wxss

/**function.wxss**/
.container {
    height: 650px;
}
.slide-image{
    display: block;
    height: 280rpx;
    width:100%
}
.function_container{
    display:flex;
    flex-wrap: wrap;
    width:100%;
}
.function_item{
    width:25%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-size:12px;
    box-sizing:border-box;
    padding-bottom:10px;
    padding-top:10px
}
.function_img{
    width:60px;
    height:60px;
}
.function_name{
    padding-top:10px
}

ログイン後にコピー

ここでは、幅: 25% を使用して、各行に 4 つの機能ボタンを配置する効果を実現します。
完全なコード
以下のレイアウトは比較的単純です。完全なコードをアップロードするだけです: function.wxml

<!--function.wxml-->
<scroll-view scroll-y="true" class="container">
  <swiper indicator-dots="{{indicatorDots}}"
    autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" />
      </swiper-item>
    </block>
  </swiper>

  <view class=&#39;function_container&#39;>
    <view class=&#39;function_item&#39; wx:for="{{functions}}" wx:for-index="idx" wx:for-item="function">
        <image class=&#39;function_img&#39; src=&#39;{{function.pic_url}}&#39;/> 
        <view class=&#39;function_name&#39;>{{function.name}}</view>
    </view>
  </view>

  <view class=&#39;divider&#39; />

  <view class=&#39;specialities_layout&#39;>
      <view class=&#39;view_divider&#39; />
      <text class="specialities_text">特色业务</text>
  </view>
  <image class=&#39;bottom-image&#39; src=&#39;../../images/app_banner.jpg&#39;/> 
</scroll-view>
function.wxss

/**function.wxss**/
.container {
    height: 650px;
}
.slide-image{
    display: block;
    height: 280rpx;
    width:100%
}
.function_container{
    display:flex;
    flex-wrap: wrap;
    width:100%;
}
.function_item{
    width:25%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    font-size:12px;
    box-sizing:border-box;
    padding-bottom:10px;
    padding-top:10px
}
.function_img{
    width:60px;
    height:60px;
}
.function_name{
    padding-top:10px
}
.divider{
    background: #f5f5f5;
    height: 40rpx;
    width:100%;
}
.specialities_layout{
    display:flex;
    flex-wrap: wrap;
    width:100%;
    flex-direction:row;
    margin-left: 16px;
    margin-top:16px;
    margin-bottom: 16px;
}
.view_divider{
    background: #EEA9B8;
    height: 40rpx;
    width:10rpx;
}
.specialities_text {
    margin-left: 8px;
    font-size: 16px;
    height: auto;
    width:auto;
    margin-top: 6rpx;
}
.bottom-image{
    height: 280rpx;
    width:100%;
}
.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
function.js

//function.js
//获取应用实例
var app = getApp()
Page({
  data: {
    userInfo: {},
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    // imgUrls: [
    //   &#39;http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg&#39;,
    //   &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg&#39;,
    //   &#39;http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg&#39;
    // ],
    imgUrls: [
      &#39;../../images/adv_50.png&#39;,
      &#39;../../images/adv_60.png&#39;,
      &#39;../../images/adv_80.png&#39;
    ],
    functions: [
      {
        "name": "刷卡消费",
        "pic_url": &#39;../../images/icon_consume.png&#39;
      },
      {
        "name": "提现",
        "pic_url": &#39;../../images/icon_withdrawals.png&#39;
      },
      {
        "name": "交易记录",
        "pic_url": &#39;../../images/icon_records.png&#39;
      },
      {
        "name": "实名认证",
        "pic_url": &#39;../../images/icon_auth.png&#39;
      },
      {
        "name": "飞机票",
        "pic_url": &#39;../../images/icon_airplane.png&#39;
      },
      {
        "name": "火车票",
        "pic_url": &#39;../../images/icon_train.png&#39;
      },
      {
        "name": "手机充值",
        "pic_url": &#39;../../images/icon_phone_recharge.png&#39;
      },
      {
        "name": "水电煤",
        "pic_url": &#39;../../images/icon_water.png&#39;
      }
    ]
  },
  //事件处理函数
  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
      })
      that.update()
    })
  }
})

ログイン後にコピー

WeChat ミニプログラムのケースの詳細な説明については、ページ構築に関連する記事については、PHP 中国語 Web サイトに注目してください。