Applet embedded webview h5 page

Applets embedded applet designated h5 page jump page, you need to reference JSSDK: <script src = "https://res.wx.qq.com/open/js/jweixin-1.3.2.js"> </ script >

//h5页面   aaa.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>h5页面</title>
  </head>
  <body>
    <div id="app">
　　　　　　<button class='btn' @click= 'the handleClick' > </ Button > 
    </ div > 
    < Script the src = "../ JS / vue.js" > </ Script > 
    < Script the src = "../ JS / common.js" > </ Script > 
    < Script the src = "https://res.wx.qq.com/open/js/jweixin-1.3.2.js" > </ Script > 
  </ body > 
</ HTML > 

// template used here VUE Of course, you can use JQ 
< Script >

@ Taken applets src parameters are passed to h5 webview page 
// in common.js, the codes will be attached later 
varparame = Parameter () 
the console.log ( " accepts parameters: " , parame) = 111 //parmae.type
   var App =  new new Vue ({ 
      EL: ' #app ' , 
  
      Data: { 
        dataList: [] 
      
      }, 
  
      Methods: { 
          handleClick () { 
             // Jump manner consistent navigateTo and applets, refer to the official website link: https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html 
              wx.miniProgram.navigateTo ({
                      // H5 pass parameters to the applet    
                      url: ' / Pages and the / bbb / bbb the above mentioned id = 3? ' ,
                      success: function(){
                          console.log('success')
                      },
                      fail: function(){
                          console.log('fail');
                      },
                      complete:function(){
                          console.log('complete');
                      }
              });
        }

      },
      
      mounted (){

      }
    })
  
</script>

//common.js

/*将url?name=value&name=value转换为{name:value,name:value}*/
function gainParameter(url) {
    var urlParameter = url.split("?");
    urlParameter = urlParameter[1].split("&");
    var arr = {};
    for (var i in urlParameter) {
        var parameter = urlParameter[i].split("=");
        arr[parameter[0]] = parameter[1]
    }
    return arr
}
/*url参数返回封装*/
function parameter() {
    return gainParameter(decodeURI(window.location.href));
}

Small programs embedded in the page h5 page: aaa.wxml and bbb.wxml

需要先去微信平台配置业务域名 : (例子: https://www.bigbear.com) , h5页面部署到服务器: https://www.bigbear.com/static/aaa.html

// aaa.wxml

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


//aaa.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    urlAll: ''//webview链接
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    //给h5传各参数   type  name  ....随你写
　　　　let  name = '测试'  
    this.setData({
      urlAll: 'https://bigbear.com/static/aaa.html?type=111' +'&name='+name 

    })
    
  },
  
})

//bbb.js    小程序 bbb.js

Page({

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

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)   //接受h5  aaa页面传过来的  id
    
  },
  
})

有问题和建议都可以留言哦,俺经常会看的

感谢各位老板小额打赏: (有问题call俺)

<div id="app" v-cloak>
　　　　　　<button></button>
    </div>

Applet embedded webview h5 page

感谢 各位老板 小额打赏: (有问题call俺)

Guess you like

感谢各位老板小额打赏: (有问题call俺)