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

程序员文章站 2024-01-23 10:49:34

...

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

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

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

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

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

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

<web-view src="http://localhost:8080"></web-view>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扫一扫</title>
</head>

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>

<script type="text/javascript">

    function openScanCode() {

        // 是否微信环境
        if (!window.WeixinJSBridge || !WeixinJSBridge.invoke) {
            console.log("非微信环境")
        } else {
            // 是否小程序环境
            if (window.__wxjs_environment === 'miniprogram') {
                // 跳转到指定小程序页面
                wx.miniProgram.navigateTo({url: '../sao/sao'});
            } else {
                //跳转到小程序指定页面
                console.log("非微信小程序环境")
            }

        }

    }

</script>

<body>

    <div align="center">
        <input type="button" value="扫一扫" οnclick="openScanCode()" style="width: 600px; height: 100px; font-size: 50px"/>
    </div>

</body>
</html>

运行效果如下：

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

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

sao.wxml 页面代码：

<!--pages/sao/sao.wxml-->
<text>正在跳转...</text>

<web-view src="http://localhost:8080"></web-view>

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 页面代码：

<!--pages/succ/succ.wxml-->

<web-view src="{{src}}"></web-view>

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开发，对前端略知一二，如有不足，欢迎下方评论。

上一篇： Ubuntu16.0.4安装mongodb

下一篇： Windows下MongoDB安装和配置