WeChat ミニプログラムの学習 03 日目 - 構成情報とネットワークリクエスト

構成情報とネットワーク要求

1. グローバル構成
2. ページ構成
3. ネットワークリクエスト - GET と POST
4. まとめ

1. グローバル構成

1. グローバル設定ファイルと一般的に使用される設定項目

1.1 グローバル設定ファイル

ミニプログラムのルートディレクトリにあるファイルapp.jsonは、ミニプログラム全局配置文件に属します。一般的に使用される設定項目は次のとおりです。

ページ
現在のアプレットを記録します所有页面的存放路径
window
グローバル設定アプレット窗口的外观
tabBar
ミニプログラムの下部に tabBar エフェクトを設定します
style
新版 を有効にするかどうか

{
    
    
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",//删掉该配置项就是默认使用旧版本的组件样式（目前不推荐删掉）
  "sitemapLocation": "sitemap.json"
}

1.2 ミニプログラムウィンドウのコンポーネント

ここに画像の説明を挿入します

2. グローバル設定 - ウィンドウ

window:主にアプレットの外観をグローバルに設定するために使用されます。

2.1画面 - 共通ノード設定項目

ここに画像の説明を挿入します

2.2 ウィンドウ - ナビゲーションバーのタイトルを設定します

セットアップ手順:app.json -> window -> navigationBarTitleText

{
    
    
  "pages":[
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    
    
    "backgroundTextStyle":"light",//下拉loading的样式，仅支持dark/light
    "navigationBarBackgroundColor": "#fff",//导航栏背景色,不支持文本颜色如"red".仅支持十六进制颜色
    "navigationBarTitleText": "我是导航标题", //导航栏标题
    "navigationBarTextStyle":"black", //导航栏文本颜色
     "enablePullDownRefresh": true,//开启下拉刷新
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

ここに画像の説明を挿入します

2.3 グローバルに`下拉刷新`機能を有効にする

コンセプト:下拉刷新 はモバイル端末の固有名詞で、画面上で指をプルダウンスライド操作することを指します。重新加载页面数据的行为。

(これはグローバル) 設定手順: の値をに設定します。app.json -> window ->enablePullDownRefreshtrue
ここに画像の説明を挿入します

注:app.json でプルダウン更新機能を有効にすると、すべてのミニプログラムページに影響します。

2.4 プルダウン更新時のウィンドウの背景色を設定する

全局开启下拉刷新功 が有効な場合、默认 のウィンドウの背景は 白色 になります。ドロップダウン更新ウィンドウの背景色をカスタマイズする場合、設定手順は次のとおりです。
app.json -> window ->色の値を指定するbackgroundColor< a i=7>。効果は次のとおりです。16进制#efefef

  "window":{
    
    
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我是导航标题",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true,//开启下拉刷新
    "backgroundColor": "#efefef",//设置下拉刷新背景色
  },

ここに画像の説明を挿入します

2.5 プルダウンして更新するときの読み込みスタイルを設定する

後全局开启下拉刷新功能、默认 ウィンドウの loading スタイルは、次の場合、白色 です。読み込みスタイルの効果を変更するには、app.json -> window -> またはを backgroundTextStyle 。 darklight

ここに画像の説明を挿入します

注:backgroundTextStyle に指定できる値はlight とのみです。dark

2.6 `上拉触底`

コンセプト: .上拉触底 はモバイル側の固有名詞で、画面上で指を上にスライドさせてさらにデータを読み込む行為です。
セットアップ手順: の app.json -> window ->新規セットアップonReachBottomDistance数值

  "window":{
    
    
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "我是导航标题",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "onReachBottomDistance": 100//上拉触底距离
  }

注:默认距離は50pxです。特別な要件がない場合は、デフォルト値を使用することをお勧めします。

3. グローバル設定タブバー

3.1 タブバーとは

tabBarこれはモバイルアプリケーションで一般的なページ効果であり、複数のページ間をすばやく切り替えるために使用されます。ミニプログラムは通常、次のように分かれています。

下部タブバー
トップタブバー

知らせ：

tabBar最少2个、最多5个タブではタブのみを設定できます。
レンダリング時顶部tabBar、iconは表示せず、テキストのみを表示します

ここに画像の説明を挿入します

3.2 tabBar の 6 つのコンポーネント

backgroundColor: tabBarの背景色
selectedlconPath：選択時の画像パス
borderStyle: tabBar. 上枠の色
iconPath：未選択時の画像パス
selectedColor：選択時のタブ上の文字の色です。
color: タブ上のテキストのデフォルト (未選択) の色。

ここに画像の説明を挿入します

3.3 tabBarノードの設定項目

3.3.1 設定項目属性一覧の説明

listはい必选项、その他はすべてオプションです。

tabBarこれはウィンドウやページなどと同じレベルにあります。

ここに画像の説明を挿入します

それぞれtab项の構成オプション:

ここに画像の説明を挿入します

pagePath と text は必須ですが、その他はオプションです

3.3.2 tabBarを通常表示する

{
    
    
    //页面创建
  "pages":[
    "pages/home/home",
    "pages/msg/msg",
    "pages/index/index",
    "pages/logs/logs"
  ],
    //小程序窗口设置
  "window":{
    
    
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
    //tabBar菜单选项配置
  "tabBar": {
    
    
    "position": "bottom",
    "borderStyle":"black",
    "color": "#75878a",
    "selectedColor": "#f00056",
    "backgroundColor": "#f0f0f4",
    "list": [{
    
    
      "pagePath": "pages/home/home",
      "text": "主页",
      "iconPath": "/icon/tabBar/home1.png",
      "selectedIconPath": "/icon/tabBar/home2.png"
    },
    {
    
    
      "pagePath": "pages/msg/msg",
      "text": "消息页面",
      "iconPath": "/icon/tabBar/msg1.png",
      "selectedIconPath": "/icon/tabBar/msg2.png"
    }]
  },
    //样式版本
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

//配置项文件中不能有注释

ここに画像の説明を挿入します

3.3.3 tabBar を表示できない問題

注: tabBar ページ必须放到所有页面的前面。それ以外の場合は tabBar を表示できません

次のコードに示すように、"pages/home/home"和"pages/msg/msg"タブバーページが "pages/index/index","pages/logs/logs" の後に配置されている場合、tabBar メニューオプションは表示できません。

{
    
    
    //页面创建
  "pages":[
    //非tabBar页面
    "pages/index/index",
    "pages/logs/logs"
      //tabBar页面
    "pages/home/home",
    "pages/msg/msg",
    
  ],
    //tabBar菜单选项配置
  "tabBar": {
    
    
    "position": "bottom",
    "borderStyle":"black",
    "color": "#75878a",
    "selectedColor": "#f00056",
    "backgroundColor": "#f0f0f4",
    "list": [{
    
    
      "pagePath": "pages/home/home",
      "text": "主页",
      "iconPath": "/icon/tabBar/home1.png",
      "selectedIconPath": "/icon/tabBar/home2.png"
    },
    {
    
    
      "pagePath": "pages/msg/msg",
      "text": "消息页面",
      "iconPath": "/icon/tabBar/msg1.png",
      "selectedIconPath": "/icon/tabBar/msg2.png"
    }]
  }
}

//配置项文件中不能有注释

ここに画像の説明を挿入します

2. ページ構成

2.1 ページ構成ファイルの役割

アプレットでは、各ページに独自の json配置文件 があり、 当前页面 ウィンドウの外観、ページ効果などを構成するために使用されます。

2.2 页面配置和全局配置的关系

アプレットでは、 app.json の window ノードは、アプレットの各ページのウィンドウを 全局配置 表示できます。何らかのミニプログラムページ 想要拥有特殊的窗口表现 であれば、「页面级别 の .json配置文件」でこの要件を実現できます。

注: ページ設定とグローバル設定冲突の場合、就近原则 に従って、最終的な効果は 以页面配置为准 になります。

2.3 共通ページ構成項目

ここに画像の説明を挿入します

例：

{
    
    
  "usingComponents": {
    
    },
  "navigationBarBackgroundColor": "#f2ecde",
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "消息页面",
  "backgroundColor": "#f0fcff"
}

ここに画像の説明を挿入します

3. ネットワークリクエスト - GET と POST

3.1 ミニプログラムでのネットワークデータ要求の制限

安全性 を考慮して、ミニプログラム公式は数据接口的请求に対して次の 2 つの制限を設けました。

インターフェイスHTTPSタイプのみをリクエストできます
必须将接口的域名添加到信任列表中

予防：

ドメイン名のみサポートhttps协议
域名不能使用IP地址或localhost
域名必须经过ICP备案
サーバードメイン名 - 1 か月以内最多申請可能5次修改

ここに画像の説明を挿入します

3.2 リクエストの正当なドメイン名の構成

要件の説明: 独自の WeChat アプレットで、https:/ /www.escook.cn/ ドメイン名でインターフェースをリクエストするとします。

配置步骤:登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

ここに画像の説明を挿入します

公式には、変更できるのは月に 5 回だけであるとされています。次の記述は誤りです。谨慎修改！!

ここに画像の説明を挿入します

3.3 GET リクエストの開始

WeChat アプレットによって提供されるwx.request() メソッドを呼び出して、GET データリクエスト (下面接口是没有功能的，所以没有东些) を開始します。サンプルコードは次のとおりです。
ここに画像の説明を挿入します

3.4 POSTリクエストの開始

WeChat アプレットによって提供される wx.request() メソッドを呼び出して、POST データリクエストを開始します。サンプルコードは次のとおりです。

wxml:

<!--pages/index/index.wxml-->
<button bindtap="getInfo" type="primary">发起GET请求</button>
---
<button bindtap="postInfo" type="primary">发起POST请求</button>

jsファイル:

// pages/index/index.js
Page({
    
    

    /**
     * 页面的初始数据
     */
    data: {
    
    

    },

    // 发起一个get请求
    getInfo(){
    
    
        wx.request({
    
    
            url:'https://api.aa1.cn',//请求接口地址
            method:'GET',//请求方式
            // data:{//发送到服务器的数据
            //     name:'zs',
            //     age:20
            // },
            success:(res)=>{
    
    //请求成功的回调函数
                console.log(res);
            }
        })
    },

     // 发起一个post请求
     postInfo(){
    
    
        wx.request({
    
    
            url:'https://api.aa1.cn',//请求接口地址
            method:'POST',//请求方式
            data:{
    
    //发送到服务器的数据
                name:'zs',
                age:20
            },
            success:(res)=>{
    
    //请求成功的回调函数
                console.log("发送post回调函数==>",res);
            }
        })
    },


})

ここに画像の説明を挿入します

3.5 ページの最初のロード時にデータをリクエストする

ページが読み込まれたばかりのとき初始化数据、onLoad事件 を使用して関数を呼び出してデータを取得できます。

/**
生命周期函数 - 监听页面加载
*/
  onLoad(options) {
    
    
	this.getSwiperList()
	this.GridList()
   },

//获取轮播图的函数
getSwiperList(){
    
    
	...
},

//获取九宫格的数据
GridList(){
    
    
	...
}

3.6 ネットワークリクエスト - リクエストリクエスト時の注意事項

3.6.1 正当なドメイン名の検証リクエストをスキップする

シナリオ: バックグラウンドにHTTPインターフェイスのみがあり、準備がありませんHTTPS接口协议;
解決策: 一時的に有効にします。 开发环境不校验请求域名、TLS版本以及HTTPS证书选项、合法的なドメイン名の検出リクエストをスキップします。

ここに画像の説明を挿入します

注: 合法的なドメイン名の検証リクエストをスキップするオプション 仅限 は 开发与调试阶段 で使用されており、オンラインにするときはオフにする必要があります。

3.6.2 Ajax クロスドメインの問題の説明

跨域問題は浏览器web端 にのみ存在します。小程序 はブラウザ側ではなく、基于微信客户端 にあるため、< /span> 」と呼ばれます。以降、アプレット 8> のオブジェクトに依存します。はブラウザの 微信小程序不存在跨域问题!
Ajax技术核心XMLHttpRequest微信小程序的宿主环境是微信客户端不能叫做发起网络数据请求

4. まとめ

WXML テンプレート構文を使用してページ構造をレンダリングする機能

wx:if、wxelif、wx:else、hidden、wx:for、wx:key

WXSS スタイルを使用してページ構造を美しくする機能

rpx 尺寸单位、 @import スタイルのインポート、グローバルスタイルとローカルスタイル

app.json を使用してミニプログラムをグローバルに構成できる

ページ、window、tabBar、スタイル

page.json を使用してミニプログラムページをパーソナライズできる

個々のページをパーソナライズし、就近原则

ネットワークデータリクエストを開始する方法を知る能力

wx.request() メソッド、onLoad()イベント

リンク: WXML 構文の概要