微信小程序,百度小程序,支付宝小程序调用接口不同之处

1.微信小程序调用接口

	wx.request({
	  url: 'https:xxx.com', // 仅为示例,并非真实的接口地址
	  data: {
	    x: '',
	    y: '' //要传的参数
	  },
	  header: {
	    'content-type': 'application/json' // 默认值
	  },
	  success(res) { //接口调用失败的回调函数
	    console.log(res.data)
	  },
	  fail(err){ //接口调用失败的回调函数
	  	console.log('错误信息:' + err.errMsg);
	  },
	  complete(){ //接口调用结束的回调函数(调用成功、失败都会执行)
	  }
	})

可参考 https://developers.weixin.qq.com/miniprogram/dev/api/wx.request.html

2. 百度小程序调用接口

	swan.request({
	    url: 'https://xxx.com', // 仅为示例,并非真实的接口地址
	    method: 'GET',
	    dataType: 'json',
	    data: {
	        key: 'value' //请求参数
	    },
	    header: {
	        'content-type': 'application/json' // 默认值
	    },
	    success: function (res) { //成功回调
	        console.log(res.data);
	    },
	    fail: function (err) {
	        console.log('错误码:' + err.errCode);
	        console.log('错误信息:' + err.errMsg);
	    }
	});

可参考 https://smartprogram.baidu.com/docs/develop/api/net_request/#request/

3. 支付宝小程序调用接口

	my.httpRequest({
	  url: 'http://httpbin.org/post', //接口地址
	  method: 'POST',
	  data: {
	    from: '支付宝',
	    production: 'AlipayJSAPI',
	  },
	  dataType: 'json',
	  success: function(res) { //成功
	    my.alert({content: 'success'});
	  },
	  fail: function(res) { //失败
	    my.alert({content: 'fail'});
	  },
	  complete: function(res) { //成功失败都会执行
	    my.hideLoading();
	    my.alert({content: 'complete'});
	  }
	});

可参考 https://docs.alipay.com/mini/api/network

4(1). 做个简单的封装(写在app.js做全局封装)

	fxHeader(content_type) { //请求头
	    let header = {}
	    if (content_type) {
	      header['content_type'] = content_type
	    }
	    return header
	  },
	  req(method, url, cb, data) {
	    const that = this
	    if (!url.match(/^http/)) {
	      url = 'https://xxx.com/'+ url  //接口地址
	    }
	    let content_type = ''
	    if (!content_type && method !== 'GET') {
	      content_type = 'application/json'
	    }
	    let token = wx.getStorageSync('token') || '' //wx.getStorageSync(微信) ,swan.getStorageSync(百度) ,my.getStorageSync(支付宝)
	    if (token) {
	      data = { ...data, token: token }
	    }
	    if (data) {
	      if (!data.hideLoading) {
	        wx.showLoading({ //微信小程序
	          title: 'Loading...',
	          mask: true
	        })
	        swan.showLoading({ //百度小程序
		   	 title: '加载中',
		   	 mask: 'true'
			});
	        my.showLoading({ //支付宝小程序
		     content: '加载中...',
		     delay: 1000,
		    });
	      }
	    }
	    wx.request({  //wx.request(微信小程序) || swan.request(百度小程序) || my.httpRequest(支付宝小程序)
	      url: url,
	      data: { ...data },
	      method: method,
	      header: that.fxHeader(content_type),
	      success(res) {
	        if (data) {
	          if (!data.hideLoading) {
	            wx.hideLoading() //微信小程序
	            swan.hideLoading() //百度小程序
	            my.hideLoading() //支付宝小程序
	          }
	        }
	        if (res.statusCode === 200) {// 接口请求成功
	          // if (res.data && res.data.meta.status_code !== 200) {
	          //   wx.showToast({
	          //     title: res.data.meta.message,
	          //     // image: '../assets/image/icon/[email protected]'
	          //     icon: 'none'
	          //   })
	          // }
	          return typeof cb === 'function' && cb(res)
	        } else if (res.statusCode === 401){ // 未经授权:访问由于凭据无效被拒绝( token过期)
	            wx.navigateTo({  // 返回登录页
	              url: '/pages/login/index/index',
	            })
	          	that.globalData.hasUserInfo = false
	            wx.clearStorageSync() // 清空token 和用户信息重新登陆授权
	          return typeof cb === 'function' && cb(err)
	        }
	      },
	      fail(err) {
	        if (!data.hideLoading) {
	          wx.hideLoading() //微信小程序
	          swan.hideLoading() //百度小程序
	          my.hideLoading() //支付宝小程序
	        }
	        return typeof cb === 'function' && cb(err)
	      }
	    })
	  },

4(2). 页面调用

	const app = getApp()
  	const api = require('api.js')
	page({
		data:{}
  		  onShow(){
  		  	app.req('GET', api.user, res =>{
  		  		console.log(res)
  		  	})
  		  	app.req('POST', api.users, res =>{
  		  		console.log(res)
  		  	},{
  			 		x:'', //传的参数
  			 		y:''
  			})
  		}
    });

4(3)api.js

	module.exports = { //导出对象
		user: 'xxx/xxx' //GET,
		users: 'xxx/xxx' //POST
	}

你可能感兴趣的:(微信小程序,百度小程序,支付宝小程序调用接口不同之处)