微信小程序webview网页调起小程序微信支付

判断访问网页的是web访问还是小程序webview访问

// 判断是否小程序访问
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript">
	window.onload = function(){
		var url = 'http://xxx.com/xxx'
		var isWxMini = window.__wxjs_environment === 'miniprogram'
		if (isWxMini) {
			window.location.href=url+'?type=miniprogram'
		} else {
			window.location.href=url+'?type=web'
		}
	};
</script>

webview网页跳转至微信小程序页面

// 上下文省略,仅展示webview网页跳转至微信小程序页面的能力
// ...
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
<script type="text/javascript">
	wx.miniProgram.navigateTo({
		url: "/pages/wxPay/index?order_id="+order_id
	})
</script>
// ...

微信小程序获取小程序的openid

// pages/wxPay/index.js
// ...
onLoad: function (options) {
  this.setData({
      order_id: options.order_id
  });
  this.getTempcode();
},
getTempcode: function () {
  var self = this;
  wx.login({
    success: res => {
      // 获取到 res.code
      // 发送 res.code 到后台换取 openId, sessionKey, unionId
      wx.request({
        url: 'http://xxx.com/xxx/'+res.code,
        data: {
        },
        method: 'GET',
        success: function (res) {
          // console.log(res)
          self.setData({
            user:res.data.user
          })
				// 获取支付信息
          self.getPayinfo();
        }
      })

    }
  })
}

获取支付信息 并 调起支付

// pages/wxPay/index.js
//...
getPayinfo: function () {
  var self = this;
  wx.request({
		//后台接口地址
    url: 'http://xxx.com/xx/'+self.data.order_id+'/'+self.data.user.openid,
    data: {
    },
    method: 'GET',
    success: function (res) {
      self.setData({
          jsapi: res.data.data.jsapi,// 支付信息
          view_url: res.data.data.view_url// 支付后跳转回的网页url
      });
      // 调起支付
      wx.requestPayment({
        'timeStamp': self.data.jsapi.timeStamp,// 为字符串，否则报错
        'nonceStr': self.data.jsapi.nonceStr,
        'package': self.data.jsapi.package,
        'signType': 'MD5',
        'paySign': self.data.jsapi.paySign,
        'success': function (res) {
          console.log('=======支付成功==========');
          wx.navigateTo({
              url: `/pages/index/index?view_url=${self.data.view_url}`
          })
        },
        'fail': function (res) {
          console.log(res)
          console.log('=======支付失败==========')
          wx.navigateBack({
              delta: 1//返回1个页面
          })
        }
      })
    }
  })
}

原写死的webview首页 需修改下:

// pages/index/index.js
// ...
data: {
  view_url: 'http://xxx.com'
},
onLoad(options) {
  if(options.view_url){
    this.setData({
      view_url:options.view_url // 传过来的url如果带url参数的话有可能丢失，未细测
    })
  }
},
// ...

<!--pages/index/index.wxml-->
<view class="container">
  <web-view src="{{view_url}}"></web-view>
</view>