小程序通过＜web-view＞跳转H5页面-Toy模板网

这篇具有很好参考价值的文章主要介绍了小程序通过＜web-view＞跳转H5页面。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

小程序通过<web-view>跳转H5页面

vue项目

1.在Vue项目中安装weixin-js-sdk依赖，
该依赖可以用于调用微信小程序的JS-SDK。在终端
中执行以下命令:
npm install weixin-js-sdk --save

/*
* 跳转到小程序支付页面
* selectedItem是传给小程序的支付订单信息
*/
goMiniProgramPay() {
    wx.miniProgram.navigateTo({
        url: `/pages/wxpay/wxpay?obj=${JSON.stringify(this.selectedItem)}`
    })
},

小程序项目

在小程序app.json文件，配置vue跳小程序页面的路径

  "pages":[

    "pages/wxpay/wxpay"

  ],

小程序h5支付,vue,小程序,vue.js,小程序文章来源地址https://www.toymoban.com/news/detail-718997.html

//wxpay.js 
Page({
    data:{
      pay_info:{}
    },
    onLoad(e) {
      // h5跳转到小程序携带的参数
      let info = JSON.parse(e?.obj)
      this.setData({
        pay_info:info
      })
    },
    payClick(){
      //小程序跳转到h5
      wx.navigateBack({delta:1})
    }
})

//wxpay.wxml
<view class="container">
  <block>
    <text class="pay-text">需支付</text>
    <view class="pay-mount">
      <text class="pay-mount-unit">￥</text>
      <text class="pay-mount-price">{{pay_info.price}}</text>
    </view>
    <view class="line"></view>
    <text class="pay-select-text">选择支付方式</text>
    <view class="content-middle">
      <view class="content-middle-left">
        <image class="pay_icon" src="../assets/image/wx_pay.png"></image>
        <text class="pay_text">微信支付</text>
      </view>
      <view class="content-middle-right">
        <image class="selected_icon" src="../assets/image/cycle_selected.png"></image>
      </view>
    </view>
    <view class="content-bottom-btn" bindtap="payClick">使用微信支付支付</view>
  </block>
</view>

//wxpay.wxss
.pay-text{
  color: #666666;
  font-size: 13px;
  margin-bottom: 16px;
}
.pay-mount{
  color: #333333;
  font-weight: bold;
}
.pay-select-text{
  color: #666666;
  font-size: 13px;
  margin-bottom: 40px;
}
.pay-mount-unit{
  font-size: 20px;
}
.pay-mount-price{
  font-size: 34px;
}
.content-middle{
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content-middle-left{
  display: flex;
  align-items: center;
}
.pay_icon{
  width: 26px;
  height: 23px;
  margin-right: 16px;
}
.pay_text{
  color: #333333;
  font-size: 16px;
}
.selected_icon{
  width: 20px;
  height: 20px;
}
.content-bottom-btn{
  background-color: #2B79F2;
  width: 80%;
  height: 40px;
  color: #FFFFFF;
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  position: fixed;
  bottom: 32px;
}
.line{
  width: 90%;
  height: 1px;
  background-color: #E8E8E8;
  margin: 29px 0 32px;
}

到了这里，关于小程序通过＜web-view＞跳转H5页面的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！