开发微信小程序掌握了数据交互的方法,再加上web的知识,基本就能开发出了,研究了下与服务器通讯,暂时不知道怎么用ajax通讯,但可以使用WebService可以进行交互尝试开发微信小程序(如果 ...
开发微信小程序掌握了数据交互的方法,再加上web的知识,基本就能开发出了,研究了下与服务器通讯,暂时不知道怎么用ajax通讯,但可以使用WebService可以进行交互尝试开发微信小程序(如果需要登录之类的,也可以自定义握手方法或使用微信登录验证:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-login.html#wxloginobject)。
1. 小程序=前端页面 + 服务器数据
2. 前端页面与服务器的交互
<!--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 class="usermotto">
<text class="user-motto">{{motto}}</text>
<!-- <button bindtap="onButtonchange">点击</button>
<button bindtap="add">add</button>
<button bindtap="remove">remove</button>-->
<button bindtap="requestWebService">测试</button>
</view>
</view>
requestWebService:function(){
var that=this//注意这里必须缓存,不然无法在回调中
获取数据后进行操作
wx.request({
url: 'http://localhost: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代码
public class HelloServer : System.Web.Services.WebService
{
[WebMethod]
public int[] Name(int a, int b)
{
return new int[] { a,b};
}
}
5.运行结果 运行前:
运行后:
源码地址:http://download.csdn.net/detail/ywjun0919/9753671 源码下载:WeChatTest.rar