搜尋
首頁微信小程式小程式開發微信小程式request請求的詳細介紹
微信小程式request請求的詳細介紹Mar 26, 2017 pm 01:29 PM
微信小程式

談談微信小程式的資料互動---wx.request

官方文件中明確說明,wx.request發起的是https的請求,如果你的伺服器是http站點,那需要做配置。可以參考文章:http轉https教學

但如果你沒有服務端或不想寫後台程式碼,這裡是可以呼叫我提供的接口,本文會介紹使用方法。

首先,我們應該從服務端開始準備,我用的是java。框架是spring+springMVC+spring data 。

介面https://www.itit123.cn/itdragon/findAll 的controller層 

原始碼:

@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,文章標題,預讀內容,主圖,創建時間)放在一個map,在放到集合轉成json格式回傳資料。 (註:程式碼只針對現在的需求(查詢資料),後續做下拉刷新,上拉加載,搜尋排序時,可能會修改程式碼 。分頁查詢:微信小程式入門五上滑載入下拉刷新)。

服務端介面程式碼準備好後,不能急著上線測試,可以用google瀏覽器的 postman。

微信小程式request請求的詳細介紹

查看列印結果,以確保成功

微信小程式request請求的詳細介紹

#然後開始在微信小程式端,準備一個測試頁面來進行數據互動。

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 () {
    // 页面关闭
  }
})


測試頁面的效果圖:

微信小程式request請求的詳細介紹

測試沒有問題,那就在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(){
    // 页面关闭
  }
})


因為傳回的資料結構,剛好是我需要的格式,所以直接賦值了。

效果圖:

微信小程式request請求的詳細介紹

這章學習要點:

1.wx.request 的使用 微信官方文件 。

2.如何為變數賦值 var that = this; that.setData({變數名稱:變數值})。

3.開發的思路。

以上是微信小程式request請求的詳細介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
微信小程序架构原理基础详解微信小程序架构原理基础详解Oct 11, 2022 pm 02:13 PM

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于基础架构原理的相关内容,其中包括了宿主环境、执行环境、小程序整体架构、运行机制、更新机制、数据通信机制等等内容,下面一起来看一下,希望对大家有帮助。

微信小程序云服务配置详解微信小程序云服务配置详解May 27, 2022 am 11:53 AM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于云服务的配置详解,包括了创建使用云开发项目、搭建云环境、测试云服务等等内容,下面一起来看一下,希望对大家有帮助。

微信小程序常用API(总结分享)微信小程序常用API(总结分享)Dec 01, 2022 pm 04:08 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要总结了一些常用的API,下面一起来看一下,希望对大家有帮助。

浅析微信小程序中自定义组件的方法浅析微信小程序中自定义组件的方法Mar 25, 2022 am 11:33 AM

微信小程序中怎么自定义组件?下面本篇文章给大家介绍一下微信小程序中自定义组件的方法,希望对大家有所帮助!

微信小程序实战项目之富文本编辑器实现微信小程序实战项目之富文本编辑器实现Oct 08, 2022 pm 05:51 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了关于富文本编辑器的实战示例,包括了创建发布页面、实现基本布局、实现编辑区操作栏的功能等内容,下面一起来看一下,希望对大家有帮助。

西安坐地铁用什么小程序西安坐地铁用什么小程序Nov 17, 2022 am 11:37 AM

西安坐地铁用的小程序为“乘车码”。使用方法:1、打开手机微信客户端,点击“发现”中的“小程序”;2、在搜索栏中输入“乘车码”进行搜索;3、直接定位城市西安,或者搜索西安,点击“西安地铁乘车码”选项的“去乘车”按钮;4、根据腾讯官方提示进行授权,开通“乘车码”业务即可利用该小程序提供的二维码来支付乘车了。

微信小程序开发工具介绍微信小程序开发工具介绍Oct 08, 2022 pm 04:47 PM

本篇文章给大家带来了关于微信小程序的相关问题,其中主要介绍了关于开发工具介绍的相关内容,包括了下载开发工具以及编辑器总结等内容,下面一起来看一下,希望对大家有帮助。

简单介绍:实现小程序授权登录功能简单介绍:实现小程序授权登录功能Nov 07, 2022 pm 05:32 PM

本篇文章给大家带来了关于微信小程序的相关知识,其中主要介绍了怎么实现小程序授权登录功能的相关内容,下面一起来看一下,希望对大家有帮助。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境