现在小程序越来越流行，但是公司很多项目都是用网页写的，小程序的语法和原生网页不兼容，使得老项目迁移到小程序的代价是很高;webview功能先于小程序开放，可以说是web应用的一大福音，但是微信的webview也有一些坑。这篇文章就是罗列一下我在开发过程中遇到的一些问题和发现的问题。一些解决方案。openid登录遇到的问题webview动态src支付功能分享功能扫描普通二维码跳转到特定页面返回按钮缺失问题openid登录问题微信webview使用起来很简单，只要按如下方式设置src即可显示具体网站。微信环境下的很多网页都是使用pages来实现网站的登录功能，只要将登录信息，比如openid或者其他信息拼接到src中即可。这里有一个问题。公众号的账号系统一般是通过openid来判断的。小程序可以获得openids，但是小程序的openids与公众号等原来的openids是不一样的。原openid账号系统升级为unionid账号系统。下面是微信对unionid的介绍。获取用户基本信息（UnionID机制??）。关注者与公众号互动后，公众号可以获得关注者的OpenID（加密后的微信ID，每个用户负责每个公众号的OpenID是唯一的。对于不同的公众号，同一个用户的openid是不同的）.公众号该接口可用于基于OpenID获取用户基本信息，包括昵称、头像、性别、城市、语言、关注时间。请注意，如果开发者需要在多个公众号之间，或者公众号与移动应用之间统一用户账号，需要到微信开放平台（open.weixin.qq.com）绑定公众号，可以采用UnionID机制??来满足上述要求。UnionID机制??说明：开发者可以通过OpenID获取用户的基本信息。特别是如果开发者有多个移动应用、网站应用和公众号，可以通过获取用户基本信息中的unionid来区分用户的唯一性，因为只要同一个微信开放平台账号下的移动应用，网站申请和公众账号，用户的unionid是唯一的。也就是说，对于同一个用户，同一个微信开放平台下的不同应用，unionid是相同的。完成以上步骤后，就可以调用小程序apiwx.getUserInfo()获取用户信息了。这一步需要后台信息解密过程，这里不赘述，结合小程序api文档操作即可。获取unioid后，可以将unionid信息拼接到src中，进行网页登录操作（前提是网页可以用跳转链接登录，类似上获取openid的形式页）。webview动态src微信的webview有一个坑，不会动态监听src的变化，这就造成一个问题，无法通过改变src来实现页面跳转。尝试了一些方法后，找到了解决办法：微信webview会在页面加载的时候加载一次webview，我们利用这个特性来实现动态src问题。首先，将要跳转的链接信息设置为全局变量。更改src时，首先将src设置为'?'拆分成链接和参数两部分，存放在全局函数中，然后调用onLoad刷新webview。页面跳转时，我们还需要动态刷新src，所以我们需要将链接信息存放在全局函数中；页面跳转时会调用onShow函数，然后再调用onLoad。data:{url:'',loaded:false}//小程序js中的onLoad函数可以这样写onLoad:function(){this.setData({url:getApp().globalData.urlToken+'?'+getApp().globalData.urlData})},changUrl:function(){getApp().globalData.urlToken='https://www.example.com'getApp().globalData.urlToken='a=1&b=2'//直接调用onLoad会刷新srcthis.onLoad()},onShow:function(){if(!this.data.loaded){//第一次不要运行this.setData({loaded:true})return}//直接调用onLoad会刷新srcthis.onLoad()}//wxml可以这样写paymentfunction中webview、jssdk可以实现一些小程序功能，但是不能直接调用小程序的支付功能。这时候我们需要换个策略：在需要发起支付的网页引入微信jssdk，调用跳转页面接口控制小程序跳转到小程序的支付页面（这个要单独写在小程序中）。跳转时需要将订单的一些信息拼接成链接，由后台返回订单信息。通过微信支付系统统一下单接口，具体请以支付文档为准。跳转到小程序支付页面后，小程序页面发起支付。支付完成后跳转回webview页面。通过之前设置的动态src，控制webview跳转到特定页面。//网页引入jssdk//网页发起支付wx.miniProgram.navigateTo({//payData是后台返回的，主要是统一下单平台的prepay_idurl:'../pay/index?data='+encodeURIComponent(JSON.stringify(payData))})//微信支付页面onLoad:function(option){letpage=thistry{letdata=JSON.parse(option.data)if(!data||!data.prepay_id){console.error('支付参数错误，请稍后再试',data)}wx.requestPayment({timeStamp:''+data.timestamp,nonceStr:data.nonceStr,package:'prepay_id='+data.prepay_id,paySign:data.paySign,signType:data.signType,success:function(res){getApp().globalData.urlToken=`paySuccess.html`//支付成功getApp().globalData.urlData='data=paySuccessData'wx.navigateTo({url:'/page/home/index',})},fail:function(res){getApp().globalData.urlToken=`payError.html`//支付失败getApp().globalData.urlData='data=payErrorData'wx.navigateTo({url:'/page/home/index',})},complete:function(res){}})}catch(e){console.error('支付错误',e)}}分享功能小程序直接分享webview所在的页面，如果需要添加页面参数，那么我们需要处理一下。不能直接在webview中发起分享，需要使用wx.分享信息推送到小程序；推送到小程序的信息不是实时处理的，而是在用户点击分享按钮后，小程序返回读取，这就需要重新进入每个需要分享的页面发起wx.miniProgram.postMessage向小程序推送分享信息。小程序页面通过bindmessage函数读取post信息，分享的信息会是一个列表。我们就拿最后一个来分享，处理分享的信息，存入data，供下次onShareAppMessage调用。当用户点击分享时，会触发onShareAppMessage函数，并在其中设置相应的分享信息。onload函数有一个option参数，可以在页面加载时读取url中的参数。这时需要修改原来的onload函数，从option中读取链接信息。//网页wx.miniProgram.postMessagewx.miniProgram.postMessage({data:{link:shareInfo.link,ti??tle:shareInfo.title,imgUrl:shareInfo.imgUrl,desc:shareInfo.desc}})//小程序索引wxmlsettings//小程序索引jsbindGetMsg:function(e){if(!e.detail){return}letlist=e.detail.dataif(!list||list.length===0){return}letinfo=list[list.length-1]if(!info.link){console.error('共享信息错误',list)return}lettokens=info.link.split('?')this.setData({shareInfo:{title:info.title,imageUrl:info.imgUrl,path:`/page/index/index?urlData=${encodeURIComponent(tokens[1])}&urlToken=${tokens[0]}`}})},onShareAppMessage:function(res){if(res.from==='button'){//来自页面前进按钮console.log(res.target)}letthat=thisreturn{title:that.data.shareInfo.title,path:that.data.shareInfo.path,imageUrl:that.data.shareInfo.imageUrl,success:function(res){//转发成功},fail:function(res){//转发失败}}},onLoad:function(option){if(option.urlToken){getApp().globalData.urlToken=option.urlToken}if(option.urlData){getApp().globalData.urlData=option.urlData}this.setData({url:getApp().globalData.urlToken+'?'+getApp().globalData.urlData})}，扫描常用二维码跳转到特定页面小程序除了分享功能外，还可以配置实现扫描普通二维码跳转到特定页面的功能。以下是微信对此功能的介绍。能够跳转到带有二维码的小程序。功能介绍普通链接二维码是指开发者使用工具对网页链接进行编码生成的二维码。线下商户无需更改线下二维码。在小程序后台完成配置后，用户扫描普通链接二维码即可打开小程序，使用小程序功能。对于普通链接二维码，目前支持使用微信“扫一扫”或微信长按识别二维码跳转到小程序。二维码规则根据二维码跳转规则，开发者需要填写需要跳转的小程序程序的二维码规则。要求如下：二维码规则域名必须通过ICP备案验证。支持以http、https、ftp开头的链接（如：http://wx.qq.com、https://wx.qq.com/mp/、https://wx.qq.com/mp?id=123）。一个小程序账号最多可以配置10条二维码前缀规则。前缀占用规则开发者可以选择是否占用所有符合二维码匹配规则的子规则。如果选择占用，其他账号不能申请使用其他满足前缀匹配规则的子规则。例如：如果开发者A配置了二维码规则：https://wx.qq.com/mp?id=123，并选择“占用所有子规则”，其他开发者将无法配置该子规则满足前缀匹配如https://wx.qq.com/mp?id=1234。我推荐的方式是webview实现，设置跳转功能可以在小程序后台设置，链接分为四部分，路径为https://www.example.com/wxmin....https://www.example.com域名/wxmini/小程序预规则，需要在服务器上创建一个文件夹，并将验证文件放在该文件夹行home.html需要跳转的页面a=1跳转传输页面的参数通过onload函数处理，实现普通二维码跳转。//处理索引onLoadonLoad:function(option){this.resetOption(option)if(option.urlToken){getApp().globalData.urlToken=option.urlToken}if(option.urlData){getApp().globalData.urlData=option.urlData}this.setData({url:getApp().globalData.urlToken+'?'+getApp().globalData.urlData})},resetOption:function(option){if(!option){返回}if(option.q){option.q=decodeURIComponent(option.q)if(option.q.indexOf('https://www.example.com/wxmini/')==-1){return}让tmp=option.q.replace('/wxmini','')lettmps=tmp.split('?')option.urlToken=tmps[0]option.urlData=tmps[1]}else{option.urlData=decodeURIComponent(option.urlData)}}后退按钮缺失问题如果网页在第一页，这时候就会出现问题，小程序的后退按钮没有了，webview无法使用微信的后退按钮，这时候只要在webview页面前加一个跳转页面即可（第一页也可以设置为获取用户权限的页面，但是感觉这样体验不好，并不是所有的页面都需要用户获取权限。可以使用)finalpagehierarchy"pages":["page/index/index",//首页，处理onload中的option内容，设置"page/home/index"以便返回按钮，//webview所在的页面"page/auth/index"，//页面到获取用户权限"page/pay/index",//支付页面"page/error/index"//错误信息页面]，参考链接webview文档小程序unionid介绍如何获取unionid
