WeChatアプレットのリクエストリクエストの詳細な紹介

WeChat アプレットのデータ対話について話しましょう ---wx.request

公式ドキュメントには、サーバーが http サイトの場合、wx.request が https リクエストを開始することが明確に記載されています。 http から https へのチュートリアル

の記事を参照してください。ただし、サーバーがない場合、またはバックグラウンド コードを書きたくない場合は、ここで提供したインターフェイスを呼び出すことができます。この記事ではその使用方法を紹介します。

まず、サーバー側から準備を始める必要があります。私はJavaを使用します。フレームワークは spring+springMVC+spring data です。

インターフェイスのコントローラー層 https://www.itit123.cn/itdragon/findAll

ソースコード:

@RequestMapping(value="findAll")
	@ResponseBody
	public Object listWxDatas(@RequestParam(value = "page", defaultValue = "1") int pageNumber,
			@RequestParam(value = "pageSize", defaultValue = PAGE_SIZE) int pageSize,
			@RequestParam(value = "sortType", defaultValue = "auto") String sortType, 
			ServletRequest request){
		pageSize = pageSize > 10? 10 : pageSize;
        try {
			Map<string> searchParams = Servlets.getParametersStartingWith(request, "search_");
			Page<wxdata> WxDatas = wxDataService.getWxData(searchParams, pageNumber, pageSize, sortType);
			List<map>> resultList = new ArrayList<map>>();
			for (WxData WxData : WxDatas) {
				Map<string> resultMap = new HashMap<string>();
				resultMap.put("id", WxData.getId());
				resultMap.put("title", WxData.getTitle());
				resultMap.put("content", WxData.getContent());
				resultMap.put("src", WxData.getImageUrl());
				resultMap.put("time", WxData.getCreatedDate());
				resultList.add(resultMap);
			}
			return gson.toJson(resultList);
        } catch (Exception e) {
			e.printStackTrace();
		}  
        return null;
	}</string></string></map></map></wxdata></string>

コードの一般的なロジックは、一度に最大 10 個のデータをチェックし、出力することです結果は ID の降順で表示されます。コードはオブジェクト全体をコレクションに入れるのではなく、必要な内容（ID、記事タイトル、先読み内容、メイン画像、作成時刻）をマップに入れてからコレクションに入れてjsonに変換しています。データを返す形式。 (注: このコードは現在のニーズ (データのクエリ) のみに使用されます。将来、プルダウンの更新、プルアップの読み込み、検索と並べ替えを行うときにコードが変更される可能性があります。 ページング クエリ: WeChat Mini 入門プログラム 5: 上にスワイプして読み込み、下にスワイプして更新します)。

サーバー インターフェイスのコードが準備できたら、急いでオンラインに接続してテストする必要はありません。Google Chrome の postman を使用できます。

印刷結果を確認して成功したことを確認してください

次に、WeChat アプレットでのデータ対話用のテスト ページの準備を開始します。

test.wxml:

<view>
    <textarea></textarea>
</view>
<button>request</button>

test.js:

Page({
  data: {
    textdata: "测试 wx.request",
  },
  RequestData: function () {
    var that = this;
    wx.request({
      url: 'https://www.itit123.cn/itdragon/findAll',
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 设置请求的 header 默认是application/json
      success: function (res) {
        // 操作json数据
        var text ="";
        for(var i in res.data) {
          text += i + "." + res.data[i].title + "\r\n";
        }
        that.setData({ textdata: text});
      },
      fail: function () {
        // fail
      },
      complete: function () {
        // complete
      }
    })
  },
  onLoad: function (options) {
    // 页面初始化 options为页面跳转所带来的参数
  },
  onReady: function () {
    // 页面渲染完成
  },
  onShow: function () {
    // 页面显示
  },
  onHide: function () {
    // 页面隐藏
  },
  onUnload: function () {
    // 页面关闭
  }
})

テストページのレンダリング:

テストに問題がなければ、list.jsのコードを修正します。

必要に応じて変更できます。 (func を ajax に変更しただけです)

// pages/list/list.js
var app = getApp();
Page({
  data:{
    msgList:[]
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    var that = this
    app.ajax.req('/itdragon/findAll',{},function(res){  
      that.setData({
        msgList:res
      })
    });
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})

返されたデータ構造はまさに必要な形式であるため、それを直接割り当てました。

レンダリング:

この章の学習ポイント:

1.wx.request の使用法 WeChat 公式ドキュメント。

2. 変数 var that = this.setData({変数名: 変数値}) に値を割り当てる方法。

3. 開発アイデア。

以上がWeChatアプレットのリクエストリクエストの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。