微信小程序通过web-view跳转到小程序页面_webview跳转微信小程序页面

一、背景

      博主这边的小程序大部分都使用了web-view，众所周知，使用web-view最大的问题就是和小程序之间进行交互的问题。我这边主要是从web-view跳转回小程序的demo。

二、通过web-view跳转到小程序页面

1、微信官方文档

微信web-view文档

2、关于web-view页面的用法：

Page({
  data: {
    url: '你的web-view地址'
  },
  onLoad: function () {

  },
})
1
2
3
4
5
6
7
8

      直接在page方法中就可以用。注意把你的web-view地址加入到小程序的白名单。而且需要是https的。

3、关于web-view跳转到小程序页面

微信官方给出的有特定的JS，我们在我们的web-view页面引用这个JS，然后就可以用微信官方给出的方法了

//引入JS
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>
//跳转
 $('#wxxcx').on('click',function(s) {
      wx.miniProgram.switchTab({
        url:'/pages/index/index',
        success: function(){
          console.log('success')
        },
        fail: function(){
          console.log('fail');
        },
        complete:function(){
          console.log('complete');
        }

      });
    });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

这里需要注意：

1）跳转的页面必须是在app.json中注册过的。
2）JS要引入正确
3）对应的跳转方法要正确。

三、关于微信给出的跳转方法

1、wx.navigateTo

      该方法主要用于在小程序中已注册页面之间的跳转。微信官方规定“为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。”

      其次，该方法跳转页面的时候，原来的页面还留着，可以进行返回的。就像一个栈一样。这个栈只能存储5个页面。

2、wx.redirectTo()

      该方法主要用于打开新的页面，用于小程序中已注册页面之间的跳转。使用该方法之后，原来的页面相当于被关闭了，打开了一个新的栈。所以我们可以把一些不需要返回的页面，用wx.redirectTo()来进行跳转。

3、wx.switchTab（）

      这个方法是微信给出的跳转方法中，唯一能跳到tabBar注册页面的方法。比如你想通过web-view跳转到tabBar页面，那么此时使用wx.navigateTo（）和wx.redirectTo()都不会成功。必须要使用wx.switchTab（）。

      我这个例子中，因为要跳转的就是tabBar，也就是咱们底部导航栏目对应的页面，所以用switchTab方法进行的跳转。

end