解决ios小程序web-view 没有返回键的问题

当首页中直接用web-view时 ios会没有返回键，这样对用户很不友好，网上大部分的方法就是加一个过渡页面首先打开页面A然后跳转到页面B 页面B中写web-view，但是这样在页面A时是空白的，也不是很优雅，这里我在页面A中加了一个加载层看起来就舒服多了，废话不多说直接上代码（附分享跳转页面代码）index（过渡页）index.wxml<view id="loadingToast"&gt

LionHeart丶

1326人浏览 · 2020-07-30 16:55:22

LionHeart丶 · 2020-07-30 16:55:22 发布

当首页中直接用web-view时 ios会没有返回键，这样对用户很不友好，网上大部分的方法就是加一个过渡页面首先打开页面A然后跳转到页面B 页面B中写web-view，但是这样在页面A时是空白的，也不是很优雅，这里我在页面A中加了一个加载层看起来就舒服多了，废话不多说直接上代码（附分享跳转页面代码）

index（过渡页）

index.wxml

<view id="loadingToast">
  <view class="weui-mask_transparent"></view>
  <view class="weui-toast">
      <view class="weui-loading weui-icon_toast"></view>
      <view class="weui-toast__content">数据加载中</view>
  </view>
</view>

index.wxss

.weui-mask_transparent {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
.weui-toast {
  position: fixed;
  z-index: 5000;
  width: 120px;
  height: 120px;
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  text-align: center;
  border-radius: 5px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  color: #fff;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  background-color: #4c4c4c;
}
.weui-toast__content {
  font-size: 14px;
}
.weui-loading {
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  -webkit-animation: weuiLoading 1s steps(12,end) infinite;
  animation: weuiLoading 1s steps(12,end) infinite;
  background: transparent url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E") no-repeat;
  background-size: 100%;
  
}
.weui-icon_toast {
  display: block;
  color: rgba(255,255,255,0.9);
  width: 55px;
  height: 55px;
  margin: 8px 0;
  width: 38px;
  height: 38px;
}

index.js

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    url: encodeURIComponent('https://www.baidu.com')
  },

  onLoad: function (option) {
    console.log(option)
    if (option.url) {
      this.setData({url: option.url}, () => {
        console.log(this.data.url)
        wx.navigateTo({
          url: '/pages/webview/webview?url='+this.data.url
        })
      })
    } else {
      wx.navigateTo({
        url: '/pages/webview/webview?url='+this.data.url
      })
    }
  },
  onShow: function(option) {
    console.log(option)
    wx.navigateTo({
      url: '/pages/webview/webview?url='+this.data.url
    })
    console.log('onshow')
  }
})

webview 引h5页面

webview.js

// pages/webview/webview.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    url: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options)
    this.setData({
      url: decodeURIComponent(options.url) //获取H5页面传递过来的weburl
    });
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage(options) {
    return {
      title: '分享标题', //this.data.shareObj.title,  注释部分为h5传回的标题和简介
      desc: '分享简介',//this.data.shareObj.desc,
      path: '/pages/index/index?url=' + encodeURIComponent(options.webViewUrl),
    }
  },
})

webview.wxml