微信小程序与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 () {}
})相关文章：
【算法】弗洛伊德（Floyd）算法
这个算法主要要弄懂三个循环的顺序关系。 弗洛伊德（Floyd）算法过程：１、用D[v][w]记录每一对顶点的最短距离。２、依次扫描每一个点，并以其为基点再遍历所有每一对顶点D[][]的值，看看是否可用过该…
二次开发photoshop_Photoshop 101：Web开发人员简介
二次开发photoshop介绍 (Introduction) Often, when working as web developer, we need to integrate templates. They can be from Photoshop or other software. In this article, we will have a look at the basics of Photoshop for web developers.通常，在作…
html 提交表单，图片和文字一起提交，图片存入服务器，图片地址和表单信息存入数据库，带后端php代码
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 html <!DOCTYPE html> <html><head><meta name"viewport" content"widthdevice-width, initial-scale1.0, user-scalableno, minimum-scale1.0, maximum-scale1.0…
mysql-理想的索引
1.查询频繁 2.区分度高 例如：数据库表字段：sex 存储：男女，区分度就不高。 3.长度小 索引的长度直接影响索引文件的大小，影响增删改的速度，并间接影响查询速度。 4.尽可能覆盖常用字段 转载于:https://www.c…
使用java的Calendar对象获得当前日期的上几个度开始、结束时间
思路： 先获得当前季度的开始和结束日期，在当前日期的基础上往前推3个月即上个季度的开始和结束日期 /*** param flag true：开始日期；false：结束日期* return*/public static String getLastQuarterTime(boolean flag){…
快速 开发平台 架构_快速介绍清洁架构
快速 开发平台 架构by Daniel Deutsch由Daniel Deutsch 快速介绍清洁架构 (A quick introduction to clean architecture) In an open source project I started to contribute to, the concept of “clean architecture” was brought to me.在一个我开始参与的开源项目中 &a…
linux uart m200平台波特率500kbps乱码问题和输入不响应问题
[问题] linux uart m200平台波特率500kbps乱码问题 [解答] [问题] linux uart m200平台波特率500kbps输入不响应问题 [解答]转载于:https://www.cnblogs.com/harvis/p/6972196.html
VS2013中， 无法嵌入互操作类型“……”，请改用适用的接口的解决方法
使用VS2013，在引用COM组件的时候，出现了无法嵌入互操作类型“……”，请改用适用的接口的错误提示。 查阅资料，找到解决方案，记录如下： 选中项目中引入的dll，鼠标右键，选择属性&#…
JS根据两点的经纬度坐标得到驾车行驶距离
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 html <!DOCTYPE html> <html><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8"><meta name"viewport" content&quo…
three.ar.js_我们如何通过AR.js使产品吉祥物栩栩如生
three.ar.jsby Mateusz Tarnaski由Mateusz Tarnaski 我们如何通过AR.js使产品吉祥物栩栩如生 (How we brought our product mascot to life with AR.js) Short answer: using a browser-based Augmented Reality (AR) application. For the long answer, read below.简短答案&…
利用tuning-primer脚本优化MySQL数据库
脚本下载网址： http://www.day32.com/MySQL/tuning-primer.sh #!/bin/sh # vim: ts8########################################################################## ## MySQL performance tuning primer script ## Writen by: Matthew Montgomery ## Report bugs t…
自定义View步骤学习笔记
用途 : 一个View内部的子控件比较多的时候可以自定义一个View,把它内部的子控件屏蔽起来(就像苹果的导航栏上面的UIBarButton,你是通过BarButtonitem来修改显示的内容) 1.重写 initWithFrame 和 awakeFromNib(一般两个都要写),然后在写一个初始化的方法,在初始化方法中添加子控…
小程序给视频加默认图片封面，点击播放视频并停止播放上一个视频
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 实现的功能： 微信小程序视频组件添加图片封面, 点击图片播放视频, 点击下一个视频的封面图自动停止播放当前视频并播放点击的视频。 效果GIF图： 实现代码： WXML …
一天 用户旅程_439天的旅程改变了我的生活
一天 用户旅程by Daniel Lemay丹尼尔勒梅(Daniel Lemay) 439天的旅程改变了我的生活 (The 439 day Journey that Changed my Life) It was Spring of 2017. I was beyond displeased with my current work situation. I dreaded going into work every day and being a punchi…
实现音乐播放器
音乐播放器 首先声明一下，本例是直接采用课本中范例122的方法。 效果图如下: 1、activity_main.xml布局 1 //四个按钮2 <LinearLayout3 android:layout_width"fill_parent"4 android:layout_height"wrap_content"5 …
学习ASP.NET MVC系列 - 还有比这更简炼的吗？把复杂的事情变简单了，贡献啊！...
转自学习ASP.NET MVC系列： 学习ASP.NET MVC(一)——我的第一个ASP.NET MVC应用程序 学习ASP.NET MVC(二)——我的第一个ASP.NET MVC 控制器 学习ASP.NET MVC(三)——我的第一个ASP.NET MVC 视图 学习ASP.NET MVC(四)——我的第一个ASP.NET MVC 实体对象 学习ASP.NET…
微信小程序开通腾讯云开发实践流程附详细图解
微信小程序开发交流qq群 173683895 云开发流程： 1.关联账户 关联腾讯云账号与微信公众号平台账号。前往关联账号时，请选择微信公众号。错误关联账号请在腾讯云账号中心重新绑定。 已关联账号 2.安装开发者工具 下载与安装客户端微信开发者工具并使…
github组织存储库使用_为什么我不使用您的GitHub存储库
github组织存储库使用by Sam Westreich, PhD由Sam Westreich博士 为什么我不使用您的GitHub存储库 (Why I’m not using your GitHub repository) As a bioinformatician, I reside in an interesting middle ground between developers and end users. My background trainin…
PHP导入excel到mysql数据库完整代码附效果图
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 1.新建一个数据库 ImportXlsx 并在里面添加表名 IsXlsx. 2.下载 phpExcel 插件 点击下载 3.导入文件和xlsx 。 4.获取xlsx表的对象并存入数据库 效果图： PHP 实现 demo <?phph…
黑马程序员—易混淆的知识
------- android培训、java培训、期待与您交流！ ---------- String和StringBuffer类区别1.String 是定长的例如：String s1"abc";s1"egf";StringBuffer类:是变成字符串，因为它具有（buffer）缓冲区&a…
简谈 Java 中的泛型通配符
很好的一篇文章https://zhuanlan.zhihu.com/p/26681625 转载于:https://www.cnblogs.com/hihtml5/p/6978651.html
播客＃47：劳伦斯·布拉德福德
On todays episode, I interview Laurence Bradford. Shes the creator of the LearnToCodeWith.me blog and podcast, and the Newbie Coder Warehouse Facebook group.在今天的一集中，我采访了劳伦斯布拉德福德。 她是LearnToCodeWith.me博客和播客以及Newbie Cod…
如何使用 DBCC MEMORYSTATUS 命令来监视 SQL Server 2005 中的内存使用情况
https://technet.microsoft.com/en-us/solutionaccelerators/dd537566.aspx 注意：这篇文章是由无人工介入的微软自动的机器翻译软件翻译完成。微软很高兴能同时提供给您由人工翻译的和由机器翻译的文章, 以使您能使用您的语言访问所有的知识库文章。然而由机器翻译的…
{code:-1,error:`QcloudSecretId`不能为空，请确保 SDK 配置已正确初始化}解决方法
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 微信小程序云开发登录报错：{"code":-1,"error":"QcloudSecretId不能为空，请确保 SDK 配置已正确初始化"} 遇到这个错误的原因是：腾讯不…
[转载] Tmux 速成教程：技巧和调整
原文: http://blog.jobbole.com/87584/ 决定从 screen 转向 tmux 了, 非常喜欢 tmux 的窗格功能. 简介 有些开发者经常要使用终端控制台工作，导致最终打开了过多的标签页。如果你也是他们当中的一员，或者你正在实践结对编程，那么我推荐你读一…
css在兼容模式下无法引用_如何在CSS中使用深色模式
css在兼容模式下无法引用by Frank Lmmer由FrankLmmer 如何在CSS中使用深色模式 (How to get dark mode working with CSS) I have been playing around with MacOS Mojave’s dark mode lately. It’s not 100% pleasing to my eyes, yet. But it’s especially useful when n…
COJ 0995 WZJ的数据结构（负五）区间操作
WZJ的数据结构（负五）难度级别：C； 运行时间限制：1000ms； 运行空间限制：262144KB； 代码长度限制：2000000B 试题描述请你设计一个数据结构，完成以下功能…
接入网易云信IM即时通讯的微信小程序聊天室
微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 接入流程： 初次接触网易云通信IM服务，您可以通过以下产品介绍文档了解我们的产品功能、相关概念、业务限制： 产品简介主要功能帐号集成与登录接口及业务限制 1. 创建…
vue颜色选择器_如何制作？ Vue的颜色选择器！
vue颜色选择器by ZAYDEK由ZAYDEK 如何制作？ Vue的颜色选择器！ (How to make a ? color picker with Vue!) 注意：颜色看起来可能比实际颜色更可爱！ (Caution: colors may appear cuter than they are!) Before I get to the arti…
centos7中使用yum安装tomcat以及它的启动、停止、重启
centos7中使用yum安装tomcat 介绍 Apache Tomcat是用于提供Java应用程序的Web服务器和servlet容器。 Tomcat是Apache Software Foundation发布的Java Servlet和JavaServer Pages技术的开源实现。 本教程介绍在CentOS 7服务器上使用yum进行Tomcat 7的基本安装和一些配置。请注意…