浅析网页与小程序间怎么进行通信

1. 前言

在移动互联网时代，越来越多的企业或个人要求定制化产品，而小程序作为一种轻量化的应用，越来越受到开发者们的青睐。但是，在小程序和网页之间进行信息交互是一个普遍的需求，如何进行通信成了一个很重要的问题。

2. 小程序和网页的不同之处

2.1 技术架构不同

小程序与网页采用的技术架构不同，小程序采用的是前端采用的是 wxml、wxss、js 开发，也就是类似于 H5 的技术，而小程序后端使用的是云开发，而网页则是是采用 HTML、CSS， JavaScript 等技术，后端可以采用多种语言实现。

2.2 小程序没有 cookie 和 session

小程序没有 cookie 和 session 这样的概念。这就意味着，小程序的身份认证不存在类似 HTTP 请求那样通过 session 传递数据的处理方式，所以通信方式也需要进行改变。

3. 小程序和网页的通信方式对比

3.1 网络请求方式

采用网络请求的方式是小程序和网页都可以使用的一种通信方式，在小程序中可以使用 wx.request(api)方法来进行网络请求通信。在 H5 网页中可以使用 jQuery、ajax 或者 axios 等工具完成通信。

以下是一个小程序使用 wx.request(api) 方法发送请求的代码样例:

wx.request({

  url: 'https://example.com',
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默认值
  },
  success(res) {
    console.log(res.data)
  }
})

以下是使用 axios 库的 H5 网页请求代码样例:

axios.get('/user', {

  params: {
    ID: 12345
  }
})
.then(function (response) {
  console.log(response.data);
})
.catch(function (error) {
  console.log(error);
})
.then(function () {
  // always executed
});

3.2 通过中间件实现通信

在小程序中，可以通过 wx.request(wx.cloud.callFunction) 请求数据，但这种方法需要依赖云开发环境。类似的，网页中也可以设置中间件进行通信。

以下是一个使用云函数实现的小程序通信代码样例：

wx.cloud.callFunction({

  name: 'test',
  data: {
    a: 1,
    b: 2
  },
  success: function(res) {
    console.log(res.result) // 3
  },
  fail: console.error
})

3.3 Socket 通信

Socket 通信是一种实时性很高的通信方式，小程序也可以实现 WebSocket 进行通信，浏览器也支持通过 WebSocket 进行 HTTP 请求。

以下是一个实现 WebSocket 的用例：

const ws = new WebSocket('wss://example.com/socketserver')

ws.onopen = function (evt) {
  console.log('Connection open ...')
  ws.send('Hello WebSockets!')
}
ws.onmessage = function (evt) {
  console.log('Received Message: ' + evt.data)
  ws.close()
}
ws.onclose = function (evt) {
  console.log('Connection closed.')
}

4. 结论

小程序和网页之间的通信可以通过网络请求、中间件、WebSocket 等方式，具体方法酌情选择。在应用开发时，我们要根据具体需求和技术栈进行选择，权衡小程序和网页的优劣，做到思路清晰、方案明确、高效实现。