uniapp怎么和后台交互

什么是UniApp

UniApp是一款基于Vue.js和Webpack的前端框架，可以一次编写代码，生成多个平台的应用，包括iOS、Android、H5、以及微信小程序、支付宝小程序等。

UniApp的优势在于它能够快速地开发多个平台应用，而不需要开发者去逐个适配不同平台的API和UI。

如何和后台交互

1. 发送请求获取数据

在UniApp中，可以使用uni.request发送HTTP(S)请求获取后台数据。uni.request是一个类似于jQuery.ajax的方法，支持各种请求类型和自定义请求头。

uni.request({

  url: 'http://example.com/api/data',
  method: 'GET',
  success: function (res) {
    console.log(res.data);
  },
  fail: function (res) {
    console.log('请求失败', res);
  }
});

在请求完成后，后台会返回一个JSON格式的响应，可以使用res.data获取到响应的数据。

需要注意的是，uni.request发送请求需要注意后台的CORS设置，否则会导致请求被拦截。

2. 使用WebSocket实现实时通信

UniApp也支持使用WebSocket进行双向通信，需要在manifest.json文件中声明相应的权限。

uni.connectSocket({

  url: 'ws://example.com/socket',
  success: function () {
    console.log('WebSocket连接成功');
  },
  fail: function () {
    console.log('WebSocket连接失败');
  }
});
uni.onSocketOpen(function () {
  console.log('WebSocket已打开');
});
uni.onSocketError(function () {
  console.log('WebSocket出错');
});
uni.onSocketClose(function() {
  console.log('WebSocket已关闭');
});
uni.onSocketMessage(function(res) {
  console.log('收到消息：', res.data);
});

使用uni.connectSocket打开WebSocket连接，并监听相关事件。

注意事项：WebSocket连接需要在manifest.json文件中声明网络权限（例如wss、ws等协议）。

3. 使用uni.uploadFile上传文件

在UniApp中，可以使用uni.uploadFile上传文件。uni.uploadFile支持上传一个或多个文件，并可以同时上传其他表单数据。

uni.uploadFile({

  url: 'http://example.com/api/upload',
  filePath: tempFilePath,
  name: 'file',
  formData: {
    'fileType': 'image'
  },
  success: function (res) {
    console.log('上传成功', res.data);
  },
  fail: function (res) {
    console.log('上传失败', res);
  }
});

使用uni.uploadFile上传文件时，需要设置请求的URL、文件的临时路径、上传的文件名等。同时可以设置表单数据。

需要注意的是，uni.uploadFile也需要注意CORS设置。

4. 集成第三方SDK

在实际开发中，很多项目可能需要和第三方服务集成，比如支付、微信分享等。UniApp也支持使用第三方SDK集成这些服务。

import uniRequest from 'uni-request';

import wx from 'weixin-js-sdk';
uniRequest.get('http://example.com/api/wxconfig').then(res => {
  const data = res.data;
  wx.config({
    debug: false,
    appId: data.appId,
    timestamp: data.timestamp,
    nonceStr: data.nonceStr,
    signature: data.signature,
    jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData']
  });
  wx.ready(() => {
      wx.updateAppMessageShareData({
        title: '分享标题',
        desc: '分享描述',
        link: 'http://example.com/share',
        imgUrl: 'http://example.com/share.png',
        success: () => {
          console.log('分享成功');
        },
        fail: () => {
          console.log('分享失败');
        }
      });
  });
});

在使用第三方SDK时，需要在项目中引入相应的库，并按照SDK文档中的方式进行初始化。例如上面代码中，使用了weixin-js-sdk库来集成微信分享功能。首先是引入wx对象，接着调用wx.config进行相关配置，注意需要传递到后台获取的签名数据。最后，在wx.ready中开始处理分享操作。

总结

通过以上几种方式，可以在UniApp中方便地与后台进行交互。其中，使用uni.request进行请求是最为常用的方式，可以访问任意API，并支持各种请求类型。而使用WebSocket进行通信，则可以实现实时双向通信的功能。除此之外，uni.uploadFile可以用于上传文件，集成第三方SDK则可以方便地使用第三方服务。