微信小程序与H5相互跳转和传递数据

微信小程序开发交流qq群 173683895

承接微信小程序开发。扫码加微信。

这是小程序和web-vew的H5相互传参，H5使用小程序的微信支付的代码

H5部分

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><!--<meta name="divport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />--><title>心意有礼</title><link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /><link rel="stylesheet" href="css/index.css"><script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script><script src="https://cdn.jsdelivr.net/npm/vue"></script><script src="./index.js"></script><script src="./js/JQ.js"></script><style></style></head><body><div class="body" id="app"><div class="top_phone"><input class="input" placeholder="手机号" v-model="kongge_phone" maxlength='{{maxlength}}' @blur.prevent="changeCount()" type='{{input_type}}'></input><button class="btn" v-on:click='phonenumber'>重新输入</button></div><div class="chat">{{phone_type}}</div><div class="shu"></div><div class='cost'><div class='cb'><block v-for="(item, index) in addr_2_data"><div v-on:click='changeType(item)' class="ci"><div v-if="productId==item.productId" class="cib cibbb" formType="submit" style=''><div style='' id="item">{{item.productName}}</div><div style='' id="item">售价:{{item.productPrice/100}}.00元</div></div><div v-if="productId!=item.productId" class="cib" formType="submit" style=''><div style='' id="item">{{item.productName}}</div><div style='' id="item">售价:{{item.productPrice/100}}.00元</div></div></div></block></div></div><div class="summarize" v-if="summarize_money!=''"><div class="summarize_title">{{summarize_title}}</div><div class="summarize_money">￥{{summarize_money/100}}.00元<div class='acc'>￥{{aac/100}}元</div></div><div class="up_btn" v-on:click="wxxcx">充值</div></div></div><script type="text/javascript">var app = new Vue({el: '#app',data: {body:'',summarize_title: '',summarize_money: '',aac: '',productId: '',maxlength: '13',input_type: 'number',phone_type: '',token: '',kongge_phone: '',operatorType: '2',mproducts: '',products: '',ptypes: '',addr_2_data: [],},mounted: function() {this.load();},methods: {wxxcx: function(s) {console.log('121212')var num = this.kongge_phone.replace(/\s*/g, "");var data = {productId: this.productId,'number': num,price: this.summarize_money,myCouponId: '',token: this.token}data = JSON.stringify(data);wx.miniProgram.navigateTo({url: '/pages/h5/h5_pay?data=' + data,success: function() {console.log('success')},fail: function() {console.log('fail');},complete: function() {console.log('complete');}});},load: function() {var that = this;var token = GetRequest()['token'];console.log('token:', token);$.ajax({type: "GET",url: "https://xxx.cn/v1/product/index.do?token=" + token,data: {},async: true,success: function(res) {that.summarize_money = ''var body = JSON.parse(res).body;if(that.kongge_phone == ''&&body.phone) {that.kongge_phone = body.phone;that.$options.methods.if_util_isUnicoms.bind(that)(body.phone);}that.mproducts = body.mproducts;that.products = body.products;that.ptypes = body.ptypes;that.body = body;that.set_data(body)}})},// 添加空格add_kongge: function(e) {this.$options.methods.if_util_isUnicoms.bind(this)(e);try {kongge_phone = e.replace(/\s*/g, "");var result = [];for(var i = 0; i < kongge_phone.length; i++) {if(i == 3 || i == 7) {result.push(" " + kongge_phone.charAt(i));} else {result.push(kongge_phone.charAt(i));}}kongge_phone = result.join("");this.kongge_phone = kongge_phone;this.input_type = 'number';} catch(e) {}},
//                  处理数据set_data: function(e) {var that = this;var addr_2_data = [],is_list_data = [];var arr_data_products = e.products;var i = 0,j = 0;console.log('arr_data_products:', arr_data_products)for(i; i < arr_data_products.length; i++) {if(arr_data_products[i].operatorType == that.operatorType) {is_list_data.push(arr_data_products[i])}}if(is_list_data.length <= 0) {is_list_data = arr_data_products}var arr_data_ptypes = e.ptypes;i = 0;j = 0;for(i; i < arr_data_ptypes.length; i++) {if(arr_data_ptypes[i].addr == 2) {for(j; j < is_list_data.length; j++) {if(is_list_data[j].productType == arr_data_ptypes[i].productTypes) {is_list_data[j].productPrice = Number(is_list_data[j].productPrice).toFixed(2);addr_2_data.push(is_list_data[j]);}}}}that.addr_2_data = addr_2_data;that.products = is_list_data;that.summarize_money='';},changeCount: function() {this.input_type = 'number';this.maxlength = 13;this.$options.methods.add_kongge.bind(this)(this.kongge_phone);},// 验证手机号码展示充值可点击公共函数if_util_isUnicoms: function(e) {var that = this;var kongge_phone = that.kongge_phone.replace(/\s*/g, "");console.log('121313')$.ajax({type: "get",url: "https://xxx.cn/v1/product/telAttribution.do",data: {'phone': kongge_phone},async: true,dataType: "json",success: function(res) {console.log('telAttribution.do', res)console.log('telAttribution.do', res.data)if(res.body) {that.if_phone_yse = true;that.phone_type = res.body;var _type = res.body.substr(res.body.length - 2);switch(_type) {case '移动': //移动that.operatorType = 1;break;case '联通':that.operatorType = 2break;case '电信':that.operatorType = 3break;default:that.operatorType = 4}} else {that.phone_type = '';that.if_phone_yse = false;}console.log('that.operatorType:', that.operatorType)that.$options.methods.set_data.bind(that)(that.body);}})},
//                  清空手机号码phonenumber: function() {this.kongge_phone='';that.summarize_money='';},/*** 切换数额*/changeType: function(event) {console.log(event);console.log(event.productId);this.productId = event.productId;this.aac = event.originalPrice;this.summarize_money = event.productPrice;this.summarize_title = event.productContent;}}});function GetRequest() {var url = location.search; //获取url中"?"符后的字串var theRequest = new Object(); if(url.indexOf("?") != -1) {    var str = url.substr(1);    strs = str.split("&");    for(var i = 0; i < strs.length; i++) {      theRequest[strs[i].split("=")[0]] = decodeURIComponent(strs[i].split("=")[1]);    }  }  return theRequest;}</script></body></html>

小程序部分

<!--pages/h5/h5_index.wxml-->
<web-view wx:if='{{h5_show}}' src='{{url}}'></web-view>

// pages/h5/h5_index.js
var config = require('../../config.js');
var util = require('../../utils/util.js');
var app = getApp();
Page({/*** 页面的初始数据*/data: {h5_show: true},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {var that=this;app.promise.then(resolve => {that.setData({url: 'http://127.0.0.1:8020/%e5%85%85%e8%af%9d%e8%b4%b9h5/index.html?token=' + app.token})})if (options.data) {that.setData({h5_show: false})var data = JSON.parse(options.data);data.price = (Math.round(data.price * 100) / 100)var url = config.HTTP_URL + '/v1/product/getPayConfig.do';util.request(url, 'post', data, '正在充值', function (res) {if (res.data.success == true) {var _data = res.data.body;that.setData({orderId: _data.orderId,})// console.log('store_obj:', store_obj)var pbj = _data.payConfigwx.requestPayment({'timeStamp': pbj.timeStamp,'nonceStr': pbj.nonceStr,'package': pbj.package,'signType': 'MD5','paySign': pbj.paySign,'success': function (res) {},'fail': function (res) {return;console.log("失败" + JSON.stringify(pbj.nonceStr))},'complete': function (res) {wx.reLaunch({url: '/pages/h5/h5_index',})console.log("complete" + JSON.stringify(res))},})} else {if (res.data.msg) {wx.showModal({title: '温馨提示',content: res.data.msg,})}}}, function (e) {wx.showToast({title: '网络错误,请稍后再试。。。',icon: 'none'})})}},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

微信小程序与H5相互跳转和传递数据相关推荐

微信小程序 uniapp 使用navigateTo跳转url传递对象
微信小程序使用navigateTo跳转url传递对象阐述在使用 "uni.navigateTo" 跳转的时候,如果要不是对象的方式传递,则会在url上面拼接太多的参数了.不易 ...
app能不能跳转外部h5_轻羽微信小程序和H5的区别在哪里？主要有三点
随着移动互联网的发展,许多应用在不断的产生,要说现在更新快.开放功能多的应用,只能是微信小程序了.微信小程序开放了60多个流量入口,更新了各种新的功能,尤其是之前实现的页面跳转功能,给开发者带来了好消 ...
微信小程序和H5之间互相跳转、互相传值
最近又开始写小程序了,刚好遇到微信小程序和内嵌 H5 之间来回跳转,来回交互:这里记录一下微信小程序和 H5 之间交互的实现:(我的小程序是通过 un-app 框架来写的,内部代码基本都是 vue) ...
微信小程序内含H5页面实现方式
微信小程序内含H5页面实现方式一.背景众所周知,我们写完小程序,发到线上,是需要经历设置版本.提交代码审核.等待审核等步骤,放一个版本下来可能花费很多的时间,甚至很可能等待了很长时间,审核未通过, ...
微信小程序和H5网页之间有什么区别？
微信小程序和H5网页之间有什么区别本博主语录:小程序和H5网页的主要开发语言都是 JavaScript ,所以通常小程序的开发会被用来同普通的网页开发来做对比.两者有很大的相似性,对于前端开发者而言 ...
微信小程序与h5的区别
HTML英文全称为Hyper Text Markup Language,即超文本标记语言,H5是一种技术,依附的外壳是是浏览器,而小程序是基于微信的一种不需要下载安装即可使用的应用. 从「前端开发」的 ...
h5 bootstrap 小程序模板_微信小程序和H5的区别在哪里？主要有三点
原标题:微信小程序和H5的区别在哪里?主要有三点随着移动互联网的发展,许多应用在不断的产生,要说现在更新快.开放功能多的应用,只能是微信小程序了.微信小程序开放了60多个流量入口,更新了各种新的功能 ...
微信小程序PHP文件建在哪里,微信小程序解析H5文件方法
经常有网友问怎么让微信小程序解析H5文件或者类似封装H5网页到APP里面?我一开始觉得这是不可能的,因为官方的解答是这样的: 每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index. ...
json 微信小程序筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件，适配app、微信小程序、H5。...
sl-filter 筛选筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享效果图并列菜单 ...

微信小程序与H5相互跳转和传递数据

承接微信小程序开发。扫码加微信。

微信小程序与H5相互跳转和传递数据相关推荐

最新文章

热门文章