用mpvue写微信小程序时,webview跳转外部链接,再跳转回来需要点两次返回箭头才能跳转

问题描述:

  给公司做微信小程序时遇到了这个问题,用mpvue框架搭建的小程序,从首页点击进去,先跳转到一个中间页面,在中间页面放上webview链接到外部的H5页面,这时点击小程序左上角自带的返回按钮,第一次会跳转到空白页,再点一次才能跳转到首页。

 

  首页:

    用mpvue写微信小程序时,webview跳转外部链接,再跳转回来需要点两次返回箭头才能跳转

  详情页:

    用mpvue写微信小程序时,webview跳转外部链接,再跳转回来需要点两次返回箭头才能跳转

  这时需要点击左上角的返回箭头两次,才能跳转到首页

 

解决办法:

小程序跳到外部页面方法:

  1、从首页(index)跳转到中间页(template): 

    goPage(id){
          wx.navigateTo({url:‘../template/main?id=‘+id})
       }
     2、template页面: 
      
    <template>
        <div>
            <web-view  :src="aSrcs"></web-view>
        </div>
    </template>

    <script>
      export default {

       data(){
          return{
              aSrcs:""
          }
       }
,
       methods: {
          aSrc(){
              var id = this.$root.$mp.query.id
              if(id==1){
                  return ‘https://api.1yunsong.com/Hxjy/Wx/detail_gs‘
              }
              else if(id==2){
                  return ‘https://api.1yunsong.com/Hxjy/Wx/detail_cs‘
              }
              else if(id==3){
                  return ‘https://api.1yunsong.com/Hxjy/Wx/detail_zs‘
              }
              else if(id==4){
                  return ‘https://api.1yunsong.com/Hxjy/Wx/detail_qy‘
              }
              else{
                  return false
              }
          }
       },
       mounted() {
           this.aSrcs =  this.aSrc()
       },
  }
  </script>
 
从外部页面再跳回到微信小程序:(在H5页面中写)
  
  1、先引入一个js文件
    
    <script src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
 
      2、在script中加入一行代码
    
    <script>
            window.onunload = function(){
                wx.miniProgram.navigateBack({})
            }    
       </script>  
 
 
这样就可以了!
 

用mpvue写微信小程序时,webview跳转外部链接,再跳转回来需要点两次返回箭头才能跳转

上一篇:智能血压计方案/设计案列/APP/小程序


下一篇:微信小程序 仿‘得到app’分类列表页