小程序webview 的一些问题记录 webview 小程序支付 webview 小程序分享

小程序内嵌webview

碰到的问题

• webview 中的 h5 不能使用sdk 的微信支付

• 页面的返回前进相关问题

• 小程序转发

• 页面的返回前进相关问题

在h5 端使用sdk 提供的api 跳转到小程序中的页面，并将url 以url参数的形式传过去

 function navigateToWebWiew(replaceHash) {
      // h5中的方法 
      let nowHash = window.location.hash
      let webwiewUrl = window.location.href.replace(nowHash, replaceHash)
      wx.miniProgram.navigateTo({
        url: `/pages/webwiew/webwiew?url=${encodeURIComponent(webwiewUrl)}`
      })
    }

h5 跳转时，一般还需要区分小程序 和 h5 环境
文档有提供案例

// 我的
let isApplets = window.__wxjs_environment === 'miniprogram'
  if( isApplets === true ){  // if(isApplet) 结果不一致 ，没整明白
    isApplet = true 
  }else{
    isApplet = false
  }

// 跳转时根据条件判断到底是要跳小程序页面还是正常路由
onClick={e => { isApplet ? window.navigateToWebWiew('/orderdetail') : history.push('/orderdetail') }}

这样就简单的解决小程序中页面返回问题
新问题来了，小程序的页面栈有限，最多十层
没有搬到啥好方法

// 菜鸡做法
 if (getCurrentPages().length > 9) { // 如果当前页面栈 大于 9 ， 挺影响体验的，不过在适合的地方配合 redirectTo 等 一般不会达到这么多
      wx.reLaunch({
        url: '../webwiew/webwiew?url=' + options.url,
      })
    } else {
      this.setData({
        url: decodeURIComponent(options.url)
      })
    }

支付问题

思路和跳转页面差不多
将支付相关参数传到 小程序的支付页（如 pay.js）
请求后端的支付配置接口得到小程序支付api 需要的相关参数
请求完事
常见问题都是支付参数错误

小程序转发分享

转发分享一般都需要带上标题，如商品 标题
许多人做法是从 onload 的 option.url 中 正则出 如 商品id
其实可以直接在分享转发的函数里拿到 h5 当前页面的url

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

    let id = options.webViewUrl.match('正则')
    let title = '默认标题'
    if (id) {
      title = await this.getTitle(id[1])
    }
    return {
      title,
      path: 'pages/webwiew/webwiew?url=' + encodeURIComponent(options.webViewUrl)
    }
  }