uni-app开发经验分享十八:对接第三方h5
1.uni-app中对接第三方为了防止跳出app使用了webview
<template>
<view>
<web-view :src="url" @message="message"></web-view>
</view>
</template> <script>
export default {
data() {
return {
url: ''
}
},
onLoad(option) {
// console.log(JSON.parse(decodeURIComponent(option.url)))
this.url = JSON.parse(decodeURIComponent(option.url))//跳转第三方的url
},
methods:{
message(e){ //接收html发回来的消息判断是否成功,然后跳转页面
console.log(e.detail)
uni.switchTab({
url: '/pages/member/user'
});
}
}
}
</script>
2.顺利的跳转到第三方的时候进行一些操作,例如支付等
3.地方支付成功后会有回调函数,进行一些操作
4.为了从第三方的h5跳回到app 写了个新的html页面
5.uni-app打包后会有static文件夹 所以将页面放到static文件夹中
<!DOCTYPE html>
<html> <head>
<title>正在返回...</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js"></script>//不引入的话不能进行监听
<script>
function load(){
// alert("测试")
let local = window.location.href;
// alert(local)
console.log(local)
let sourceType = getQueryVariable('sourceType');//传参得值
let env = getQueryVariable('env');/传参得值 document.addEventListener('UniAppJSBridgeReady', function() {
uni.postMessage({ //监听向uni-app发消息
data: {
action: 'success'
}
});
})
}
function getQueryVariable(variable) //通过url获取参数
{
var query = window.location.search.substring(1);
var vars = query.split("&");
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split("=");
if(pair[0] == variable){return pair[1];}
}
return(false);
}
</script>
</head>
<body οnlοad="load()">
</body>
</html>
uni-app开发经验分享十八:对接第三方h5的更多相关文章
- uni-app开发经验分享十九: uni-app对接微信小程序直播
uni-app对接微信小程序直播 1.登录微信小程序后台-点击>设置->第三方设置->添加直播插件 2.添加直播组件后->点击<详情> 记录这两个参数直播 ...
- uni-app开发经验分享十六:发布android版App的详细过程
开发环境 1. Android Studio下载地址:Android Studio官网 OR Android Studio中文社区 2. HBuilderX(开发工具) 3. App离线SDK下载:最 ...
- uni-app开发经验分享十五: uni-app 蓝牙打印功能
最近在做uni-app项目时,遇到了需要蓝牙打印文件的功能需要制作,在网上找到了一个教程,这里分享给大家. 引入tsc.js 简单得引入到自己所需要得页面中去,本次我们只要到了标签模式,他同时还有账单 ...
- uni-app开发经验分享十: 封装request请求
http.js //封装requset,uploadFile和downloadFile请求,新增get和post请求方法 let http = { 'setBaseUrl': (url) => ...
- C#&.Net干货分享- 构造SMSWebChineseApi对接第三方短信平台
你们想要的短信对接,要舍得点钱哦.... /// <summary> /// http://sms.webchinese.cn/api.shtml /// </summa ...
- uni-app开发经验分享十四:小程序超过2M限制的方法——分包加载
起初小程序上线时,微信限制了代码包不能超过1MB,后来功能变大变成了2M了,限制大小是出于对小程序启动速度的考虑,希望用户在使用任何一款小程序时,都能获得一种"秒开"体验.但是 ...
- uni-app开发经验分享十二: Android平台应用启动时读写手机存储、访问设备信息(如IMEI)等权限策略及提示信息
Android平台从6.0(API23)开始系统对权限的管理更加严格,所有涉及敏感权限都需要用户授权允许才能获取.因此一些应用基础业务逻辑需要的权限会在应用启动时申请,并引导用户允许. 读写手机存储权 ...
- php分享十八七:mysql基础
mysql操作数据库代码: $link = @mysql_connect('localhost:3306', 'root', 'root') or die(mysql_error()); mysql_ ...
- php分享十八:网页抓取
一.抓取远程图片到本地,你会用什么函数? 方法1:利用readfile读取远程图片到缓冲中,然后写入新的文件 function grabImage($url, $filename = '') { if ...
随机推荐
- angular8 在componet里面跳转新的地址页面
this.router.navigate(['/teacher/course/detail/' + id]);
- 彻底理解Spring如何解决循环依赖
Spring bean生命周期 可以简化为以下5步. 1.构建BeanDefinition 2.实例化 Instantiation 3.属性赋值 Populate 4.初始化 Initializati ...
- Docker部署tomcat+nginx+mysql,创建一个tomcat集群
Docker的部署可以选择虚拟机或者云服务器,我自己选择的是本机安装centos7虚拟机: 1.虚拟机安装登录成功后开始部署docker: 首先了解docker是一个开源应用容器引擎,基于Go语言遵循 ...
- Swift3.0学习之Button
1.根据字符串的长度确定Button的长度(button的高度给定) let hight:CGFloat = 30.0 let size1 = CGSize(width: getLabWidth(la ...
- EF Core扩展工具记录 批量操作 记录修改删除历史 动态linq
Microsoft.EntityFrameworkCore.UnitOfWork Microsoft.EntityFrameworkCore的插件,用于支持存储库,工作单元模式以及支持分布式事务 ...
- Git常用命令大全,迅速提升你的Git水平
原博文 https://mp.weixin.qq.com/s/hYjGyIdLK3UCEVF0lRYRCg 示例 初始化本地git仓库(创建新仓库) git init ...
- SpringBoot 与 SpringSecurity
一.环境搭建 (1)IDEA创建SpringBoot工程 (2)导入依赖 (3)如果是thymeleaf项目 需导入thymeleaf整合security的依赖 (4)编写配置类(采用AOP横切入程序 ...
- 什么情况下调用doGet()和doPost()?
默认情况是调用doGet()方法,JSP页面中的Form表单的method属性设置为post的时候,调用的为doPost()方法: 为get的时候,调用deGet()方法.
- JVM的艺术-对象创建与内存分配机制深度剖析
JVM的艺术-对象创建与内存分配机制深度剖析 引言 本章将介绍jvm的对象创建与内存分配.彻底带你了解jvm的创建过程以及内存分配的原理和区域,以及包含的内容. 对象的创建 类加载的过程 固定的类加载 ...
- swing桌面四子棋程序开发过程中遇到的一些问题记录(二)
第二个遇到的问题是将JButton按钮设置成透明的按钮.首先UI给我一张透明的图片,如果我直接给Button按钮设置背景图片的话,是没有透明的效果的,只会留下白色的底,设置前后的效果如下图 制作透明的 ...