1.

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

2.

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

3.

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

4.

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

5.

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

web-viewsrc"http://localhost:8080"/web-view6.

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

!DOCTYPEhtmlhtmllang"en"headmetacharset"UTF-8"title扫一扫/title/headscripttype"text/javascript"src"http://res.wx.qq.com/open/js/jweixin-1.4.0.js"/scriptscripttype"text/javascript"functionopenScanCode(){//是否微信环境if(!window.WeixinJSBridge||!WeixinJSBridge.invoke){console.log("非微信环境")}else{//是否小程序环境if(window.__wxjs_environment'miniprogram'){//跳转到指定小程序页面wx.miniProgram.navigateTo({url:'../sao/sao'});}else{//跳转到小程序指定页面console.log("非微信小程序环境")}}}/scriptbodydivalign"center"inputtype"button"value"扫一扫"οnclick"openScanCode()"style"width:600px;height:100px;font-size:50px"//div/body/html7.

运行效果如下：

8.

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

9.

sao.wxml页面代码：

!--pages/sao/sao.wxml--text正在跳转.../textweb-viewsrc"http://localhost:8080"/web-view10.

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)},})11.

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

12.

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

13.

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

!--pages/succ/succ.wxml--web-viewsrc"{{src}}"/web-view14.

succ.js代码：

//pages/succ/succ.jsPage({/***页面的初始数据*/data:{},/***生命周期函数--监听页面加载*/onLoad:function(options){varthatthis;varparamJSON.parse(options.result)console.log(param)that.setData({src:"http://localhost:8080/success?charSet"+param.charSet+"result"+param.result});},})15.

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

importcom.mawbo.mybatis.form.Code;importorg.springframework.stereotype.Controller;importorg.springframework.web.bind.annotation.RequestMapping;@ControllerpublicclassPageController{@RequestMapping("/")publicStringindex(){return"index";}@RequestMapping("/success")publicStringsuccess(Codecode){System.out.println(code);return"success";}}16.

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

importlombok.Data;@DatapublicclassCode{privateStringcharSet;privateStringerrMsg;privateStringrawData;privateStringresult;privateStringscanType;}17.

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

18.

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