小步调webview嵌入的H5页面，点击按钮，返回小步调的指定页面

目次
H5页面
一、H5页面uniapp项目安装微信插件
二、main.js挂载
三、使用，跳转至小步调指定页面
web-view
功能形貌
干系接口 1
示例代码
小步调代码
小步调中调试webview页面的方法

---

起首从小步调进入webview里的H5页面，然后H5页面里有个按钮，点击后必要跳转到小步调的注册页。那么，H5那边该怎么实现呢？ 由于已经进入小步调环境了，以是实现起来相对单纯的H5跳小步调比力简单
H5页面

一、H5页面uniapp项目安装微信插件

1. npm install --save weixin-js-sdk

复制代码

二、main.js挂载

1. import wx from 'weixin-js-sdk'
2. Vue.prototype.wx = wx

复制代码

三、使用，跳转至小步调指定页面

1.                         closePage() {
2.                                 this.wx.miniProgram.switchTab({
3.                                         success() {
4.                                                 console.log("跳转成功");
5.                                         },
6.                                         fail(err) {
7.                                                 console.log('跳转失败', err)
8.                                         },
9.                                         complete() {
10.                                                 console.log("执行");
11.                                         }
12.                                 })
14.                         },

复制代码

web-view

   Bug & Tip
  

• tip：网页内 iframe 的域名也必要设置到域名白名单。
  
• tip：开发者工具上，可以在web-view组件上通过右键 - 调试，打开web-view组件的调试。
  
• tip：每个页面只能有一个web-view，web-view会自动铺满整个页面，并覆盖其他组件。
  
• tip：web-view网页与小步调之间不支持除 JSSDK 提供的接口之外的通讯。
  
• tip：在 iOS 中，若存在JSSDK接口调用无相应的环境，可在web-view的 src 背面加个#wechat_redirect办理。
  
• tip：克制在链接中带有中笔墨符，在 iOS 中会有打开白屏的题目，发起加一下 encodeURIComponent
  

  功能形貌

承载网页的容器。会自动铺满整个小步调页面，个人范例的小步调暂不支持使用。
客户端 6.7.2 版本开始，navigationStyle: custom对web-view组件无效
干系接口 1

web-view网页中可使用JSSDK 1.3.2提供的接口返回小步调页面。 支持的接口有：
接口名
阐明
最低版本
wx.miniProgram.navigateTo
参数与小步调接口同等
1.6.4
wx.miniProgram.navigateBack
参数与小步调接口同等
1.6.4
wx.miniProgram.switchTab
参数与小步调接口同等
1.6.5
wx.miniProgram.reLaunch
参数与小步调接口同等
1.6.5
wx.miniProgram.redirectTo
参数与小步调接口同等
1.6.5
wx.miniProgram.postMessage
向小步调发送消息，会在以下特定时机触发组件的message事故：小步调退却、组件烧毁、分享、复制链接（2.31.1）
1.7.1
wx.miniProgram.getEnv
获取当前环境
1.7.1
示例代码

在开发者工具中预览效果[这里是图片001]

1. // <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
3. // javascript
4. wx.miniProgram.navigateTo({url: '/path/to/page'})
5. wx.miniProgram.postMessage({ data: 'foo' })
6. wx.miniProgram.postMessage({ data: {foo: 'bar'} })
7. wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })

复制代码

小步调代码

[/code] 小步调中调试webview页面的方法

从小步调跳转到该H5页面的时间，无法看到该H5页面的控制台信息的方法

办理方式：要在打开嵌入H5的webview的page页面操纵；
1.微信开发者工具左边页面底部栏右侧，会有三个图片点击。此中有个爬虫图标，点它。
点击虫虫 自动会打开当前嵌入的H5页面的调试器窗口。