一.介绍允许通过特定方式在小程序内通过 webview 内嵌 h5 页面，跳转以及支付等流程。 大致流程如下： 小程序创建 webview 加载 h5 url（https://3400.retail.../shop/index），后续跳转通过 url 后拼接的参数判断是否要跳转新的 webview 页面（参数符合规则并且此跳转点击使用了 CommonRouter(见在H5页面中集成的小程序跳转路由)，否则只是普通的页面跳转），支付环节需要小程序创建一个原生页面用于支付中转； 二.集成1.创建 webview 容器用于承载 h5 页面（webview 组件用法参考官方组件） 创建一个 webview page，用于加载 h5 url，路径没有要求，只需在 步骤2>参数拼接 时带上路径即可。 2.参数拼接在 webview 加载 url 之前，需要在 url 后拼接上必要的参数，否则无法在新的 webview 打开下一次页面和在H5生成支付参数，在H5页面生成支付参数，请求后端生成支付参数接口要用小程序的appid，openid。webview 完整示例如下： Page({   data: {     weburl:'' //加载的 url   },   onLoad: function (options) {     let url = decodeURIComponent(options.url)     // url 拼接参数     this.dealUrl(url)   },     dealUrl(url) {   /**    * miniProgramWebviewPath webview 的路径, 必传 解决采用小程序路由跳转H5嵌在多个小程序webview，跳回小程序webview    * miniProgramPayPath 支付中转页路径，必传    * pageStackLength 页面路由栈个数，必传 解决小程序跳转10级问题，改用redirectTo跳转,    * ec_appid、ec_openid 两个参数为支付所需参数，必传    */     let miniProgramWebviewPath = encodeURIComponent(`${this.route}?weburl=`)     let miniProgramPayPath = "pages/h5payment/payMiddle/index"     let pageStackLength = getCurrentPages().length     let ec_appid = "wxb956c83845b9c0"     let ec_openid = "oOVgY4xSj-LyuFifcaF_YDcRLU"       const urlParams = {}     urlParams.ec_openid = ec_openid     urlParams.ec_appid = ec_appid     urlParams.miniProgramWebviewPath = miniProgramWebviewPath     urlParams.pageStackLength = pageStackLength     urlParams.miniProgramPayPath = miniProgramPayPath       let weburl = this.onInsterParamsInUrl(url, urlParams)     this.setData({       weburl     })   },     /**    * 解析 url param    */   onInsterParamsInUrl(url, params) {     let tempUrl = ''     let hasParams = url.indexOf('?') !== -1;     tempUrl = Object.keys(params).reduce(function (before, after) {       return before + after + '=' + params[after] + '&'     }, tempUrl)     tempUrl = tempUrl.substring(0, tempUrl.length - 1)     return hasParams ? (url + '&' + tempUrl) : (url + '?' + tempUrl)   } }) 3.支付中转页小程序内嵌 h5 的支付无法直接使用微信环境 sdk 支付，需要借助小程序的支付能力，所以小程序需要提供一个支付页面，接收在h5 生成的小程序支付参数，支付成功失败的回调url，发起小程序支付。小程序支付完成，需要跳转到结果回调页面，此页面需要由 webview 打开，所以在下面代码  PayDoneCallback 方法里的跳转路径对应 webview 的路径。 Page({   onLoad: function(options) { /**    * 解析 options, options为H5传过来的参数(支付参数，回跳H5的URL)    */     this.successUrl = options.successUrl     this.failUrl = options.failUrl     options.package = decodeURIComponent(options.package);     options.paySign = decodeURIComponent(options.paySign);     delete options.successUrl     delete options.failUrl     const { success, fail, cancel } = this.PayDoneCallback(this.successUrl, this.failUrl)     this.payment({options, success, fail, cancel})        },   payment(opts) {     const data = opts.options     let hasComplete = false;     wx.requestPayment({       ...data,       success: function(res){         typeof opts.success =='function'&&opts.success()       },       fail: function(res) {         if (res.errMsg == 'requestPayment:fail cancel') {           typeof opts.cancel =='function'&&opts.cancel();           hasComplete = true;           return;         }         typeof opts.fail =='function'&&opts.fail()       },       complete:function(res){         console.log(res)         if (hasComplete) {           hasComplete = false;         }else if(res.errMsg =='requestPayment:fail cancel'||res.errMsg=="requestPayment:cancel") {           typeof opts.cancel =='function'&&opts.cancel()         }         typeof opts.complete =='function' && opts.complete(res)       }     })   },   PayDoneCallback(successUrl, failUrl) {     return {       success(){         wx.redirectTo({           url: `/pages/h5payment/webview/webview?weburl=${successUrl}`         });       },       fail(){         wx.redirectTo({           url: `/pages/h5payment/webview/webview?weburl=${failUrl}`         });       },       cancel(){         wx.redirectTo({           url: `/pages/h5payment/webview/webview?weburl=${failUrl}`         });       }     }   } })