집 > 기사 > 웹 프론트엔드 > Ajax를 사용하여 WeChat 애플릿에서 서버 데이터를 요청하는 방법

Ajax를 사용하여 WeChat 애플릿에서 서버 데이터를 요청하는 방법

亚连원래의: 2018-06-20 15:45:443304검색

이 글에서는 주로 서버 데이터 요청 기능과 템플릿 순회 데이터를 구현하는 WeChat 애플릿 Ajax를 소개하고, WeChat 애플릿 Ajax 호출과 템플릿 wx:for 루프 목록 렌더링과 관련된 작업 기술을 예제 형식으로 분석합니다. 필요하면 참조할 수 있습니다

이 기사의 예에서는 서버 데이터 요청 및 데이터 기능을 탐색하는 템플릿을 요청하는 WeChat 애플릿 Ajax 구현을 설명합니다. 참고로 자세한 내용은 다음과 같습니다.

어제 WeChat 애플릿의 개발자 도구를 다운로드하고 문서를 간략하게 살펴본 후 간단히 그의 방법을 사용하여 ajax 요청을 구현했습니다.

WeChat 애플릿 문서 주소:
https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl

헤더 제목과 하단 탭 구성은 모두 app.json 파일에 있습니다. , 하단에 최소 2개의 탭, 최대 5개의 탭 . 다음은 app.json 파일 코드 및 관련 댓글입니다

{
 "pages":[
  "pages/index/index",
  "pages/tucao/tucao",
  "pages/center/center"
 ],
 "window":{
  "backgroundTextStyle":"",
  "navigationBarBackgroundColor": "red",
  "navigationBarTitleText": "一个标题而已",
  "navigationBarTextStyle":"white"
 },
 "tabBar": {
  "list": [{
   "pagePath": "pages/index/index",
   "text": "首页",
   "iconPath": "/images/public/menu-cd.png",
   "selectedIconPath": "/images/public/menu.png"
  },{
   "pagePath": "pages/tucao/tucao",
   "text": "吐槽",
   "iconPath": "/images/public/hot-cd.png",
   "selectedIconPath": "/images/public/hot.png"
  },{
   "pagePath": "pages/center/center",
   "text": "我的",
   "iconPath": "/images/public/center-cd.png",
   "selectedIconPath": "/images/public/center.png"
  }],
  "borderStyle": "white"
 }
}

여기에서는 WeChat 애플릿 wx.request를 사용하여 서버 데이터에 대한 ajax 요청을 구현합니다. 하나의 프로그램에는 이러한 요청이 최대 5개까지 있을 수 있습니다. . 다음은 index.js의 코드입니다wx.request实现ajax请求服务器数据的，一个程序里面最多能有五个这样的请求。下面是index.js的代码

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
  motto: &#39;Hello World&#39;,
  userInfo: {},
  Industry:{}
 },
 onLoad: function (res) {
  var that = this
  //调用应用实例的方法获取全局数据
  app.getUserInfo(function(userInfo){
   //更新数据
   that.setData({
    userInfo:userInfo
   })
  })
  wx.request({
   url: &#39;http://xx.xxxxx.com/xxx.php&#39;,//上线的话必须是https，没有appId的本地请求貌似不受影响
   data: {},
   method: &#39;GET&#39;, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
   // header: {}, // 设置请求的 header
   success: function(res){
    console.log(res.data.result)
    that.setData({
     Industry:res.data.result
    })
   },
   fail: function() {
    // fail
   },
   complete: function() {
    // complete
   }
  })
 }
})

其中http://xx.xxxxx.com/xxx.php的返回数据格式是一个json，格式如下

展示页面就简单了，变量{{array}} 微信模版遍历数据使用 wx:for

<!--index.wxml-->
<view class="container">
 <view bindtap="bindViewTap" class="userinfo">
  <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
  <text class="userinfo-nickname">{{userInfo.nickName}}</text>
 </view>
</view>
<view wx:for="{{Industry}}" wx:ket="{{index}}">
  {{index}}：{{item.name}}
</view>

http://xx.xxxxx.com/xxx.php의 반환 데이터 형식은 json이며 형식은 다음과 같습니다

표시 페이지는 간단하며 변수 { {array}} WeChat 템플릿은 wx:for를 사용하여 데이터를 탐색합니다. index.wxml 코드는 다음과 같습니다.

rrreee위 내용은 제가 모두를 위해 정리한 내용입니다. 앞으로 모든 분들께 도움이 되길 바랍니다.

Ajax를 사용하여 WeChat 애플릿에서 서버 데이터를 요청하는 방법

관련 기사