小程序通过＜web-view＞跳转H5页面

可达大力鹅

已于 2023-10-30 20:37:53 修改

阅读量1.3k

点赞数

分类专栏： vue 小程序文章标签： vue.js 小程序

于 2023-07-15 18:15:38 首次发布

本文链接：https://blog.csdn.net/weixin_49581008/article/details/131742050

版权

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

小程序

1 篇文章

订阅专栏

小程序通过<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"

  ],

//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;
}