Java web移动端项目实现与微信小程序间通信（测试移动端调用微信扫一扫功能）

       公司最近开发了一款APP，是H5+Android混合模式开发的，将web移动端应用封装到了APP中。

       完成之后，想要再将web移动端应用做成微信小程序，查看了微信小程序开发文档，发现开发微信小程序也是有一套特定的语言，我们不可能再用小程序来单独开发一套，于是我就想能不能像APP一样用微信小程序来封装web移动端应用。果然，微信小程序开发文档中也提供了跟Android的webview组件类似的标签，该组件可以来加载我们的web项目，提供url即可。官方在这里做了一些限制和要求，详细用法参考官方文档：web-view

       微信小程序项目创建略过。

       因为现在个人账号已经不能配置（web-view）业务域名了，我这里只是做测试，所以暂且关闭了域名校验。

    首先，在小程序初始页面中只需要一行代码，让小程序在启动的时候直接在微信浏览器中打开我们的web项目。

    src中的url是我本地web项目地址（使用localhost的话可能真机调试的时候会报错，最好是使用natapp域名穿透工具生成一个外网能够访问的临时域名，下面url中的地址都换一下），服务端初始化index页面为以下代码：

运行效果如下：

  真机调试：使用手机微信打开，点击扫一扫按钮，会跳转到小程序端的sao页面。

  sao.wxml 页面代码：

正在跳转...

  sao.js 代码：

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //兼容ios微信无法立即调起扫一扫
    // setTimeout(function () {
      //调用扫一扫
      wx.scanCode({
        success: function (res) {
          console.log(res)
          wx.redirectTo({
            url: '../succ/succ?result=' + JSON.stringify(res)
          })
        },
        error: function (err) {
          console.log('err');
          wx.redirectTo({
            url: '../index/index'
          })
        }
      })
    // }, 50)
  },

})

 （ 这里的setTimeout延迟时间根据情况自行定义，因为我是用Android系统测的，无需延迟。）

   此时就可以成功调用微信扫一扫功能了。接下来要把扫码结果返回给服务器端。

   可以看到在回调函数里可以拿到扫码的结果res，我把结果传给了succ页面，succ.wxml 页面代码：

  succ.js 代码：

// pages/succ/succ.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },


  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    var param = JSON.parse(options.result)
    console.log(param)
    that.setData({ src: "http://localhost:8080/success?charSet=" + param.charSet + "&result=" + param.result });
  },

})

 拿到传递过来的res结果，通过web-view调用服务器端success接口，并传递结果

import com.mawbo.mybatis.form.Code;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class PageController {

    @RequestMapping("/")
    public String index(){
        return "index";
    }

    @RequestMapping("/success")
    public String success(Code code){
        System.out.println(code);
        return "success";
    }

}

Code是定义的扫码内容对象，根据自己情况定义。

import lombok.Data;

@Data
public class Code {

    private String charSet;

    private String errMsg;

    private String rawData;

    private String result;

    private String scanType;


}

 

  至此，就完成了使用微信小程序访问web移动端项目，并实现了web端与小程序间的通信h5调用微信扫一扫功能。

  本人是后端Java开发，对前端略知一二，如有不足，欢迎下方评论。