258资源分享网

开发微信小程序掌握了数据交互的方法，再加上web的知识，基本就能开发出了，研究了下与服务器通讯，暂时不知道怎么用ajax通讯，但可以使用WebService可以进行交互尝试开发微信小程序(如果 ...

开发微信小程序掌握了数据交互的方法，再加上web的知识，基本就能开发出了，研究了下与服务器通讯，暂时不知道怎么用ajax通讯，但可以使用WebService可以进行交互尝试开发微信小程序(如果需要登录之类的，也可以自定义握手方法或使用微信登录验证:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject)。

1. 小程序=前端页面 + 服务器数据 
2. 前端页面与服务器的交互

前端使用 wx.request请求数据(常用的有 get，和post)

服务器使用WebService处理数据，并返回结果。

使用WebService时wx.request需要使用post方式

参数对应：wx.request请求data中的参数必须与WebService中对应的参数得名称、类型一样。 
3. 客户端代码

<!--index.wxml-->

<viewclass="container">

<viewbindtap="bindViewTap"class="userinfo">

<imageclass="userinfo-avatar"src="{{userInfo.avatarUrl}}"background-size="cover"></image>

<textclass="userinfo-nickname">{{userInfo.nickName}}</text>

</view>

<viewclass="usermotto">

<textclass="user-motto">{{motto}}</text>

<!-- <button bindtap="onButtonchange">点击</button>

<button bindtap="add">add</button>

<button bindtap="remove">remove</button>-->

<buttonbindtap="requestWebService">测试</button>

</view>

</view>

requestWebService:function(){

var that=this//注意这里必须缓存，不然无法在回调中

获取数据后进行操作

wx.request({

url:':53639/HelloServer.asmx/Name',

data:{

a:1,

b:2

},

method:'POST',// OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT

// header: { }, // 设置请求的 header

success:function(res){

// success

console.log(res)

that.setData({motto:res.data.d})//这里是that不是this

},

fail:function(){

// fail

},

complete:function(){

// complete

}

})

}

4.WebService代码

publicclassHelloServer:System.Web.Services.WebService

{

[WebMethod]

publicint[]Name(int a,int b)

{

returnnewint[]{ a,b};

}

}

5.运行结果  运行前： 

运行后：