关于小程序中web-view内嵌h5无法支付的优化方案

• 问题：小程序内嵌h5中部分功能失效
• • 支付功能
  • 分享功能
  • ......
• 想到的解决办法
• • h5这边能够检测到h5所在环境，可以看到h5是否在小程序内
  • 可以在支付前先判断所在环境，然后如果是小程序的话给相应的提示
  • 安卓用户可以现在h5页面将小程序所需的支付相关的参数请求到之后，跳转到小程序相应的购买页面，直接利用参数调起支付
  • Ios可以像之前一样引导用户联系客服
  • 无奈之举：将h5页面用小程序重写一遍
• 主要阻碍：ios很多支付相关的功能不能正常使用 （苹果要求微信付30%收益，微信拒绝，所以小程序中ios端有支付相关的行为都无法过审）

代码干货：

判断h5所在环境是否小程序

我这边是将这个结果存入了store，这样可以方便

----@/utils/wx.js
// 获取h5所在环境
let getEnv = () => {  
    return new Promise((resolve, reject) => {    
        wx.ready(() => {      
            wx.miniProgram.getEnv(function (res) { 
            // 获取当前环境        
            this.$store.commit('JUDGE_ENV', res.miniprogram)// true 在微信小程序中 false 在微信公众号里        
            resolve()      
         })    
    })  
})}

----h5主页面在购买行为发生前判断
import wechat from '@/utils/wx.js'
async buy () {      
    await wechat.getEnv()      
    console.log(this.$store.state.isMiniprogram)
      //是否在小程序内     
     if (this.$store.state.isMiniprogram) {                    
            this.$toast({          
                message: '我在小程序内',          
                duration: 800        
            })
      //小程序购买环节       
            this.miniprogramBuy()        
            return      
    }
      //公众号购买环节      
        this.Buy()
}

安卓用户可以现在h5页面将小程序所需的支付相关的参数请求到之后，跳转到小程序相应的购买页面，直接利用参数调起支付

    async miniprogramBuy () {      
        let options = {       
             goodsId: this.clockInfo.id,        
             payMethod: 'wechat',        
             payChannel: 'wx_lite'      
    }      
    const res = await apiCheckout(options)      
    let payInfo = res.data.result.payInfo      
    // 定义path 与小程序的支付页面的路径相对应      
    var path = '/pages/pay/Index?payParam=' + encodeURIComponent(JSON.stringify(payInfo))      
    // 通过JSSDK的api跳转到指定的小程序页面      
    wx.miniProgram.navigateTo({ url: path })    
}

在小程序中通过url，this.$options可以直接获取到调取购买所需参数

代码和小程序正常购买一样，在此不做展示