ミニプログラムでのページ構成とネットワークデータリクエスト

ページ構成ファイルと一般的に使用される構成アイテム

        1. msg.jsonでウィンドウの色と背景色を設定します。

  "navigationBarBackgroundColor": "#efefef",
  "navigationBarTextStyle": "black"

        2. home には変化はありませんが、msg が変化していることがわかりますが、これは先ほどの近接原則に基づく CSS と同じです。

         3. よく使用される設定項目

属性	デフォルト値	説明する
ナビゲーションバー背景色	ふふふ	ナビゲーションバーの背景色
ナビゲーションバーテキストスタイル	黒、	ラベル色（黒/白）
ナビゲーションバータイトルテキスト		文字内容
背景色	ふふふふ	ドロップダウンの背景色
背景テキストスタイル	暗い	ドロップダウン スタイル (ダーク/ライト)
イネーブルプルダウンリフレッシュ	間違い	プルダウン更新を有効にするかどうか
到達距離下の距離	50	下部リフレッシュ距離

 ネットワークデータリクエスト

        リクエストの制限

        1.HTTPSリクエスト

        2. ドメイン名を信頼する

        ドメイン名の設定

         1. Web  ページの WeChat Developer Mini プログラムにログインします。

   アカウントをお持ちでない場合は、次の内容を参照してください: WeChat ミニ プログラムにすばやく登録する

         QR コードをスキャンするだけでドメイン名を設定でき、詳細で設定したドメイン名を確認できます。

 GETリクエスト

1. wxmlでボタンを記述し、イベントをバインドする

<button bindtap="getInfo" type="primary">get请求</button>

2. js でイベントを記述し、wx.request を通じて呼び出します。

    getInfo(){
        wx.request({
          url: 'https://www.excook.cn',
          method:'GET',
          data:{
              name:"zs",
              age:21
          },
          success:(data)=>{
            console.log(data)
          }
        })
    },

3. [リクエストの取得] をクリックして電話をかける

POSTリクエスト

 1. wxmlでボタンを記述し、イベントをバインドする

<button bindtap="postInfo" type="primary">post请求</button>

2. js でイベントを記述し、wx.request を通じて呼び出します。

    postInfo(){
        wx.request({
          url: 'https://www.excook.cn',
          method:'POST',
          data:{
            name:'ls'
          },
          success:(resp)=>{
             console.log(resp.data)
          }
        })
    },

3. リクエストの投稿をクリックして電話をかける

        ページがロードされたばかりのときにこのメソッドを自動的に呼び出したい場合は、JS の onload で 2 つのメソッドを呼び出すことができます。

    this.getInfo()
    this.postInfo()

        この 2 つのメソッドは、クリックしたときにのみ呼び出すのではなく、ページが読み込まれた後に呼び出すこともできます。

        独自に定義された http インターフェースにアクセスします

        1. 詳細で、正当なドメイン名を検証しないオプションにチェックを入れますが、これは書き込み時にのみ可能であり、正式リリース後も引き続き https インターフェースが必要です。

        2. バックグラウンドでインターフェースを定義する

         エンティティクラス

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.io.Serializable; 
@Data
@AllArgsConstructor
@NoArgsConstructor
public class User implements Serializable {
    private String name;
    private String age;
}

        インターフェース

import com.example.re.pojo.User;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class ReceiveController {

    @RequestMapping("get1")
    public User get(@RequestBody User u){
       return u;
    }

    @RequestMapping("get")
    public User get(String name,String age ){
        User u = new User(name, age);
        return u;
    }
}

        apipostでインターフェースが正常かテストする

 

        ミニ プログラムで、get リクエストのパスを http://localhost:8080/get に変更します。

        ミニ プログラムで、投稿リクエストのパスを http://localhost:8080/get1 に変更します。

        再コンパイル