H5混合开发app常用代码
1、Android与H5互调可以让我们的实现混合开发,至于混合开发就是在一个App中内嵌一个轻量级的浏览器(高性能webkit内核浏览器),一部分原生的功能改为Html 5来开发。然后这个浏览器又封装了一个WebView控件((网络视图))来加载显示网页,展现html页面。需要注意的是,当H5内嵌在app里面的时候,app那边有很高的权限来控制H5页面上的操作,比如app可以直接调用html里面的函数方法,可以禁止本地存储localStorage和cookie!!从而使H5页面使H5上用的相应功能失效!!!
2、H5跟app交互实例:
我们这边使用app在内嵌H5页面的浏览器内核上带一个标识,这边是加pop=1,如果浏览器中带有pop=1,那么就是嵌在app端的页面,然后暴露方法app_share()给app,里面传参数,可把一些常见的交互规范成固定文档,例如
1.登录:app_login
2、分享:app_share
*分享文案内容的传值须转换成json格式
3、客服:app_service
4、头部返回:app_go_back
5、产品详情(包括后续购买):app_detail
*详情须传产品编号
6、返回首页:app_go_home
具体事例如下:
var sharedata={
event_key: "{$act_data.event_key}",
type:'0',
number:'0'
}
var u = navigator.userAgent; //获取内嵌浏览器信息
var isAndroid = u.indexOf('Android') > -1 ||u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (u.indexOf("pop=1") < 0) {
}else{
var isAndroid = u.indexOf('Android') > -1 ||u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
window.android.app_share(JSON.stringify(sharedata));
} else {
window.app_share(JSON.stringify(sharedata));
}
}
在web移动端中头部需要显示,而嵌在app里面的时候,需要隐藏,那么一开始就让头部隐藏,然后判断如若是移动端就让其显示,优先考虑app端,在app端的H5页面加载速度比较慢,不然会出现闪现
3、在H5页面点击某个按钮唤起app,要是下载app则打开app,没有的话跳转提示下载!!!
<a id=“openApp”>前往app查看</a>
// 手机有没有下载app判断begin
var ua = navigator.userAgent.toLowerCase();
var t;
var config = {
/*scheme:必须*/
scheme_IOS: 'com.xmgztbw.bgbapp://',
scheme_Adr: 'bgbapp://myapp/bgzx?param=1',
download_url: 'http://a.app.qq.com/o/simple.jsp?pkgname=com.gongzhong',
timeout: 3000
}; function openclient() {
var startTime = Date.now(); if(ua.indexOf('os') > 0){
window.location = config.scheme_IOS;
}else{
var ifr = document.createElement('iframe');
ifr.src = ifr.src = config.scheme_Adr;
ifr.style.display = 'none';
document.body.appendChild(ifr);
}
var t = setTimeout(function() {
var endTime = Date.now(); if(!startTime || endTime - startTime < config.timeout + 800) {
window.location.href = config.download_url;
} else { }
}, config.timeout); window.onblur = function() {
clearTimeout(t);
}
}
window.addEventListener("DOMContentLoaded", function() {
document.getElementById("openApp").addEventListener('click', openclient, false); }, false);
// 手机有没有下载app判断end
4、不同客户端判断,赋予不同平台号
// 获取平台号
Vue.prototype.getPlatform = function (){
let u = navigator.userAgent;
if(u.indexOf("pop=1") < ){
let userAgentInfo = navigator.userAgent.toLowerCase();
if(userAgentInfo.indexOf('micromessenger') != -) {
return ; //微信端
}else {
return ; //浏览器端
}
}else{
var isAndroid = u.indexOf('Android') > - || u.indexOf('Adr') > -; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
return ;
} else {
return ;
}
} }
5、在浏览器中打开H5页面,点击某个按钮跳转微信
$(".btn").on("click",function(){
window.location.href="weixin://"
})
6、H5页面要在第三方app里面打开微信时,H5页面需要跟app交互,不能直接跳链接!
应用场景
点击我要参与按钮时,如果改H5页面在微信打开,直接跳活动首页链接,如果在app里面就打开app,在浏览器也是打开微信
var u = navigator.userAgent;
$(".wycy-btn").click(function(){
if (u.indexOf("pop=1") < ) {
var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
if (ua.match(/MicroMessenger/i) == "micromessenger") {
//在微信中打开
window.location.href="{:U('index')}";
}else{
//在浏览器中打开微信;
window.location.href="weixin://";
}
}else{
//在app里面打开微信
var isAndroid = u.indexOf('Android') > - ||u.indexOf('Adr') > -; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if (isAndroid) {
window.android.app_pasteboard();//打开微信交互
} else {
window.app_pasteboard();
}
} })
常遇见问题
常见问题一
为了用户能得到快速的问题处理解决,你第一时间收集到用户的以下信息
1、用户使用的APP版本、
2、使用的手机类型,(如苹果手机或是安卓手机 、苹果6或是7 魅族手机或是华为等信息)
3、苹果手机IOS系统版本
4、用户登录的手机账号、
5、用户使用哪个功能模块出现问题、报错信息是什么 (叫用户以截图凭据)
问题一:app支付成功后跳转成功页面,出现红包金额错误,
常见问题二
ios中的图片会分批加载,需要用到的时候才加载,不需要的时候,就暂时不会加载,所以当点击的时候切换图片的显示隐藏,第一次出现的图片会闪一下,解决方法,用一个div将需要用到的图片包裹起来,提前加载图片,然后设置该div的样式为
opacity=0;
H5混合开发app常用代码的更多相关文章
- cordova 使用H5混合开发APP
cordova 中文官网 http://cordova.axuer.com/docs/zh-cn/latest/
- H5+混合移动app
H5+混合移动app 前言 经过2个多月的艰苦奋斗,app的第一个版本已经快完工了,期间遇到了太多的坑,作为一个喜欢分享的人,我当然不会吝啬分享这爬坑历程.不要问我有多坑,我会告诉你很多,很多.... ...
- Android H5混合开发(1):构建Cordova 项目
Cordova是什么 Apache Cordova是一个开源的移动开发框架.允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 以移动平台为例,安卓.IOS平台设备的常 ...
- 移动端H5混合开发设置复盘与总结
此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...
- Android H5混合开发(2):自定义Cordova插件
前言 Cordova虽然定义了很多基础的插件,供H5端使用原生设备的功能. 但是,如果业务相关的功能,需要提供给H5端使用,那么,就需要我们自定义插件了. 这个"自定义"不是指由A ...
- Android H5混合开发(3):原生Android项目里嵌入Cordova
前言 如果安卓项目已经存在了,那么如何使用Cordova做混合开发? 方案1(适用于插件会持续增加或变化的项目): 新建Cordova项目并添加Android平台,把我们的安卓项目导入Android平 ...
- Android H5混合开发(5):封装Cordova View, 让Fragment、弹框、Activity自由使用Cordova
近期,有同事咨询如何在Fragment中使用Cordova,看了下Cordova源码,官方并没有提供包含Cordova Webview的Fragment,以供我们继承. 上网查询了一下,也有几篇文章讲 ...
- 能挣钱的微信JSSDK+H5混合开发
H5喊了那么久,有些人都说不实用,有些人却利用在微信中开发H5应用赚得盆满钵满.微信JSSDK + HTML 5,让移动Web开发与微信结合轻而易举!跨平台.零成本,让大众创业变得更方便. 我觉得现在 ...
- Android H5混合开发(4):构建Cordova Jar包
前言 上一节,介绍了原生项目如何嵌入Cordova,我们对Cordova的依赖使用的是CordovaLib Module,这也是安卓项目常用的方式. 但是,也有项目希望以Jar包的方式依赖Cordov ...
随机推荐
- saltstack returners
大意就是将saltstack 执行的结果,不在终端显示,写到文件或者数据库,功能类似于ansible的callback 参考 https://github.com/saltstack/salt/tre ...
- Jenkins权限分配
做完Jenkins安装.项目自动化打包部署后,当然需要对小组成员进行项目权限的分配 1.安装插件:Role-based Authorization Strategy(安装过程就展示了): 2. 插件装 ...
- jsp过滤器
1.ip过滤 IpFilter: package com.cn.filter; import java.io.IOException; import javax.servlet.Filter; imp ...
- string.GetHashCode获取值不一样
今天在使用程序时发现两个String.GetHashCode值不一样,通过测试 (1)程序在两台不同的计算机上运行,没有变化. (2)修改32位,64位,值有变化,说明GetHashCode和.net ...
- IDAPython学习(二)
1.常用函数 ScreenEA() 获取IDA调试窗口中,光标指向代码的地址.通过这个函数,我们就能够从一个已知的点运行我们的脚本. GetInputFileMD5() 返回IDA加载的二进制文件的M ...
- 【python小练】0011题
第 0011 题: 敏感词文本文件 filtered_words.txt,里面的内容为以下内容,当用户输入敏感词语时,则打印出 Freedom,否则打印出 Human Rights. #word.tx ...
- WebSocket起航 JavaScript客户端和Server通信
Message =>JSON => Move 客户端发给服务器总是Move server.send(JSON.stringify({row: row, column: column} ...
- pycharm上传代码到github
一.配置pycharm 点击create API,添加自己的github账号,切记将clone git 那个对勾去掉,不然会报: Successfully created project ‘…’ on ...
- 查看 Centos 7 的MAC 地址
查看 Centos 7 的 MAC 地址 ens*** 网卡名称# cat /sys/class/net/eno16777736/address 查看内核版本 uname -a 查看系统版本 ca ...
- 使用electron搭建桌面app的简便方法
使用electron官方给出的`electron-quick-start`示例项目,将其拷贝下来, 1. git命令: git clone https://github.com/electron/ ...