WeChat 미니 프로그램 요청 요청에 대한 자세한 소개

WeChat 미니 프로그램의 데이터 상호작용에 대해 이야기하세요---wx.request

공식 문서에는 wx.request가 https 요청을 시작한다고 명시되어 있습니다. 서버가 http 사이트인 경우 다음을 수행해야 합니다. 구성. http to https 튜토리얼

을 참조할 수 있습니다. 하지만 서버가 없거나 배경 코드를 작성하고 싶지 않은 경우 여기에서 제공한 인터페이스를 호출할 수 있습니다. 이 기사에서는 방법을 소개합니다. 그것을 사용하려면.

우선 서버쪽부터 준비를 시작해야겠습니다. 프레임워크는 spring+springMVC+spring 데이터입니다.

인터페이스의 컨트롤러 레이어 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 브라우저의 우편 배달부를 사용할 수 있습니다.

인쇄 결과를 확인하여 성공 여부를 확인하세요

그런 다음 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. that = this;라는 변수에 값을 할당하는 방법.

3. 개발 아이디어.

위 내용은 WeChat 미니 프로그램 요청 요청에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!