分享IOS上架审核经验
上图
我的应用的使用在线打包的，所使用HBuilder版本的是HBuilder 8.8.0.201706142254
上传APP使用XCode最新版内置的application loader3.6版本上传的。
上架期间遇到的几次问题和解决方案：
【问题1】上传卡“正在通过 App Store 进行鉴定”
【解】网络原因，可以挂VPN上传，我使用的是“蓝灯”这个科学上网的软件，每个月有免费额度，足够上传了。如果没有VPN也可以，大概等3~40分钟，有时候挂VPN也要等这么就。
【问题2】上传完提示时候提示“No architectures in the binary. Lipo failed to detect any architectures in the bundle executable.”
【解】需要更新XCode到最新版，然后打开XCode->左上角菜单栏->open developer tool->application loader 打开最新版内置的application loader3.6上传
【问题3】上传提示“生成的api分析文件太大，我们无法在交付前验证您的api信息”
【解】貌似不影响上传，可以忽略。
以上都是上传版本时候出现的问题，如果都走完了，就可以到itunes connect里面填写资料上传截图，然后提交审核了。
现在好像审核都比较快，所以拒绝也是很快的。。。审核期间出了一个问题被打回来，拒绝内容没有截图，现在好像也找不到了，大概是说在 IPV6 wifi环境 iPad 下面无法登陆。
这个说一下，大家上架APP前，最好拿iPad安装测试一下，看是否能正常使用，因为苹果测试人员会拿iPad安装测试，如果使用异常会被拒绝的。
回到这里的问题，就是在他们那里无法登陆，这个问题有两个解决方法。
先分析一下，由于是登录不了的情况，问题就定位到了，测试人员在美国无法访问我的服务器API接口，定位到问题了就解决问题。
【解决方案1】需要改动服务器
在排除了后端服务器原因后，问题就出在了网络层，因为美国的网络环境比天朝先进，他们已经把ipv6普及了，能正常解析ipv6地址，而天朝只有教育网支持ipv6，其他网络还停留在ipv4，我的服务器在阿里云，不支持ipv6，所以他们无法在ipv6环境下访问我的API(这个是猜的)。那么我们就给服务器建一条ipv6的隧道，让ipv6环境下的用户能通过隧道访问我们服务器就行了，这个过程很长，我就直接搬运了
1.创建隧道教程（这个教程走到第2步就可以了）：http://www.cnblogs.com/vijayfly/p/6612771.html
2.后续步骤（接着前面教程第2步）：https://bbs.aliyun.com/read/299254.html
以上教程针对系统版本CentOS7以下（不包括）。
CentOS7以上的：
在最后设置网卡信息时候：
登录Hurricane Electric Free IPv6 Tunnel Broker，在Example Configurateions里选择Linux-route2的配置方法
按照上面的方法建好隧道后，要去域名解析那里添加AAAA解析，并且在服务器要监听ipv6地址和端口
【解决方案2】不需要改动服务器
虽然上面说了，测试环境是ipv6下，但是在没有ipv6的情况下也会兼容ipv4，我在AWS主机上ping了一下我服务器ip，丢包率达到了75%。延迟也很高。这个也有可能造成无法登陆的原因。
解决方法也很简单，在域名解析里，给海外的路线套CDN，（如果你的域名解析没有海外线路，那就换个DNS提供商，DNSPod，阿里云dns这些大型的基本都有海外线路解析），很重要的一点，CDN提供商需要在美国有节点。这样，在美国的审核人员就会访问到美国的CDN节点，比访问国内肯定稳定了。
最后，如果你是直接使用了ip访问服务器接口的。。。。。直接重新提交，万一人品爆发。。。。。。
上图
我的应用的使用在线打包的，所使用HBuilder版本的是HBuilder 8.8.0.201706142254
上传APP使用XCode最新版内置的application loader3.6版本上传的。
上架期间遇到的几次问题和解决方案：
【问题1】上传卡“正在通过 App Store 进行鉴定”
【解】网络原因，可以挂VPN上传，我使用的是“蓝灯”这个科学上网的软件，每个月有免费额度，足够上传了。如果没有VPN也可以，大概等3~40分钟，有时候挂VPN也要等这么就。
【问题2】上传完提示时候提示“No architectures in the binary. Lipo failed to detect any architectures in the bundle executable.”
【解】需要更新XCode到最新版，然后打开XCode->左上角菜单栏->open developer tool->application loader 打开最新版内置的application loader3.6上传
【问题3】上传提示“生成的api分析文件太大，我们无法在交付前验证您的api信息”
【解】貌似不影响上传，可以忽略。
以上都是上传版本时候出现的问题，如果都走完了，就可以到itunes connect里面填写资料上传截图，然后提交审核了。
现在好像审核都比较快，所以拒绝也是很快的。。。审核期间出了一个问题被打回来，拒绝内容没有截图，现在好像也找不到了，大概是说在 IPV6 wifi环境 iPad 下面无法登陆。
这个说一下，大家上架APP前，最好拿iPad安装测试一下，看是否能正常使用，因为苹果测试人员会拿iPad安装测试，如果使用异常会被拒绝的。
回到这里的问题，就是在他们那里无法登陆，这个问题有两个解决方法。
先分析一下，由于是登录不了的情况，问题就定位到了，测试人员在美国无法访问我的服务器API接口，定位到问题了就解决问题。
【解决方案1】需要改动服务器
在排除了后端服务器原因后，问题就出在了网络层，因为美国的网络环境比天朝先进，他们已经把ipv6普及了，能正常解析ipv6地址，而天朝只有教育网支持ipv6，其他网络还停留在ipv4，我的服务器在阿里云，不支持ipv6，所以他们无法在ipv6环境下访问我的API(这个是猜的)。那么我们就给服务器建一条ipv6的隧道，让ipv6环境下的用户能通过隧道访问我们服务器就行了，这个过程很长，我就直接搬运了
1.创建隧道教程（这个教程走到第2步就可以了）：http://www.cnblogs.com/vijayfly/p/6612771.html
2.后续步骤（接着前面教程第2步）：https://bbs.aliyun.com/read/299254.html
以上教程针对系统版本CentOS7以下（不包括）。
CentOS7以上的：
在最后设置网卡信息时候：
登录Hurricane Electric Free IPv6 Tunnel Broker，在Example Configurateions里选择Linux-route2的配置方法
按照上面的方法建好隧道后，要去域名解析那里添加AAAA解析，并且在服务器要监听ipv6地址和端口
【解决方案2】不需要改动服务器
虽然上面说了，测试环境是ipv6下，但是在没有ipv6的情况下也会兼容ipv4，我在AWS主机上ping了一下我服务器ip，丢包率达到了75%。延迟也很高。这个也有可能造成无法登陆的原因。
解决方法也很简单，在域名解析里，给海外的路线套CDN，（如果你的域名解析没有海外线路，那就换个DNS提供商，DNSPod，阿里云dns这些大型的基本都有海外线路解析），很重要的一点，CDN提供商需要在美国有节点。这样，在美国的审核人员就会访问到美国的CDN节点，比访问国内肯定稳定了。
最后，如果你是直接使用了ip访问服务器接口的。。。。。直接重新提交，万一人品爆发。。。。。。
收起阅读 »
FTP插件获取不到文件目录
测试的服务器是win系统的，能获取到文件的目录，但是线上的是linux系统的。而且我使用FTP都能直接获取到目录，但是在使用HBuilder FTP插件的时候就是获取不到
测试的服务器是win系统的，能获取到文件的目录，但是线上的是linux系统的。而且我使用FTP都能直接获取到目录，但是在使用HBuilder FTP插件的时候就是获取不到
希望DCloud团队开发Linux版本的HBuilder
尊敬的DCloud团队，HBuilder是我见过的最强大的Web开发IDE，而且完全免费，真心非常喜欢。可惜没有Linux版本的HBuilder，希望强大的DCloud团队能够开发出Ubuntu版本的HBuilder。Please
尊敬的DCloud团队，HBuilder是我见过的最强大的Web开发IDE，而且完全免费，真心非常喜欢。可惜没有Linux版本的HBuilder，希望强大的DCloud团队能够开发出Ubuntu版本的HBuilder。Please
MUI-沉浸式导航代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<style type="text/css">
.bg-color{
/background: red;/
background: rgba(252,35,180,0);
}
.bg-color h1{
color: #fff;
font-weight: bold;
}
.box img{
width: 100%;
height: 300px;
}
</style>
</head><body>
<!--mheader 按下回车键就可以打出头部导航-->
<header class="mui-bar mui-bar-transparent bg-color" id="header">
<h1 class="mui-title">橙汁-2971611409</h1>
</header>
<!--mbody 按下回车键就可以打出主体身体的意思-->
<div class="mui-content">
<div class="box">
<img src="img/logo1.jpg"/>
</div>
<div style="height: 1000px;"></div>
</div>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
// 创建加载内容窗口
var topoffset='45px';
var header=document.getElementById("header");
if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式
// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45);
header.style.height=topoffset+'px';
header.style.paddingTop=(topoffset-45)+'px';
}
});
</script>
把这行代码放到json文件里面的代码视图
"ImmersedStatusbar": true,
</body></html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet"/>
<style type="text/css">
.bg-color{
/background: red;/
background: rgba(252,35,180,0);
}
.bg-color h1{
color: #fff;
font-weight: bold;
}
.box img{
width: 100%;
height: 300px;
}
</style>
</head><body>
<!--mheader 按下回车键就可以打出头部导航-->
<header class="mui-bar mui-bar-transparent bg-color" id="header">
<h1 class="mui-title">橙汁-2971611409</h1>
</header>
<!--mbody 按下回车键就可以打出主体身体的意思-->
<div class="mui-content">
<div class="box">
<img src="img/logo1.jpg"/>
</div>
<div style="height: 1000px;"></div>
</div>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function(){
// 创建加载内容窗口
var topoffset='45px';
var header=document.getElementById("header");
if(plus.navigator.isImmersedStatusbar()){// 兼容immersed状态栏模式
// 获取状态栏高度并根据业务需求处理，这里重新计算了子窗口的偏移位置
topoffset=(Math.round(plus.navigator.getStatusbarHeight())+45);
header.style.height=topoffset+'px';
header.style.paddingTop=(topoffset-45)+'px';
}
});
</script>
把这行代码放到json文件里面的代码视图
"ImmersedStatusbar": true,
</body></html>
动态加载 welcome 欢迎主页
index 页面
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function() {
//引导页面-0
var guide = plus.storage.getItem("guide");
if(guide) {
return;
} else {
mui.openWindow({
url: "guide.html",
id: "guide",
show: {
autoShow: true, //页面loaded事件发生后自动显示，默认为true
aniShow: 'fade-in', //页面显示动画，默认为”slide-in-right“；
duration: 800 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
}
});
}
});
</script>
</body>
</html>
guide 页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<div id="slider" class="mui-slider mui-fullscreen">
<div class="mui-slider-group">
<!-- 第一张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/banner.jpg);">
</div>
<!-- 第二张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/banner01.jpg);">
</div>
<!-- 第三张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/banner02.jpg);">
</div>
<!-- 第四张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/banner03.jpg);">
<button id='enter' class="mui-btn mui-btn-outlined">立即体验</button>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init();
mui.init();
getPicture();
function getPicture() {
var template='';
var btn='';
var slider = mui("#slider");
var gallery=document.getElementById("slider-group")
mui.ajax('http://127.0.0.1/app/home/index.php?r=advertiese/get-home-ad',{
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
console.log(JSON.stringify(data));
var ret=data.response;
var result=data.result;
var website='http://10.2.5.76/app/home/';
if (ret==200) {
mui.each(result,function(index,item){
var para=document.createElement("div");
template='<div class="mui-slider-item" style="background-image: url('+website+item.content+');">'
+'</div>';
gallery.innerHTML+=template;
});
btn='<button id="enter" class="mui-btn mui-btn-outlined">'
+"立即体验"
+'</button>';
gallery.innerHTML+=btn;
slider.slider({
interval: 5000
});
enter();
}else{
slider.slider({
interval: 0
});
}
},
error:function(xhr,type,errorThrown){
}
});
}
function enter () {
(function($,doc) {
var enterButton = doc.querySelector('#enter');
enterButton.addEventListener('tap', function(event) {
plus.webview.currentWebview().close();
plus.storage.setItem("guide", plus.runtime.version);
}, false);
$.plusReady(function() {
plus.navigator.closeSplashscreen();
});
}(mui, document));
}
</script>
</body>
</html>index 页面
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<script src="js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init();
mui.plusReady(function() {
//引导页面-0
var guide = plus.storage.getItem("guide");
if(guide) {
return;
} else {
mui.openWindow({
url: "guide.html",
id: "guide",
show: {
autoShow: true, //页面loaded事件发生后自动显示，默认为true
aniShow: 'fade-in', //页面显示动画，默认为”slide-in-right“；
duration: 800 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
}
});
}
});
</script>
</body>
</html>
guide 页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<div id="slider" class="mui-slider mui-fullscreen">
<div class="mui-slider-group">
<!-- 第一张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/banner.jpg);">
</div>
<!-- 第二张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/banner01.jpg);">
</div>
<!-- 第三张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/banner02.jpg);">
</div>
<!-- 第四张 -->
<div class="mui-slider-item" style="background-image: url(img/guide/banner03.jpg);">
<button id='enter' class="mui-btn mui-btn-outlined">立即体验</button>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script>
mui.init();
mui.init();
getPicture();
function getPicture() {
var template='';
var btn='';
var slider = mui("#slider");
var gallery=document.getElementById("slider-group")
mui.ajax('http://127.0.0.1/app/home/index.php?r=advertiese/get-home-ad',{
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
console.log(JSON.stringify(data));
var ret=data.response;
var result=data.result;
var website='http://10.2.5.76/app/home/';
if (ret==200) {
mui.each(result,function(index,item){
var para=document.createElement("div");
template='<div class="mui-slider-item" style="background-image: url('+website+item.content+');">'
+'</div>';
gallery.innerHTML+=template;
});
btn='<button id="enter" class="mui-btn mui-btn-outlined">'
+"立即体验"
+'</button>';
gallery.innerHTML+=btn;
slider.slider({
interval: 5000
});
enter();
}else{
slider.slider({
interval: 0
});
}
},
error:function(xhr,type,errorThrown){
}
});
}
function enter () {
(function($,doc) {
var enterButton = doc.querySelector('#enter');
enterButton.addEventListener('tap', function(event) {
plus.webview.currentWebview().close();
plus.storage.setItem("guide", plus.runtime.version);
}, false);
$.plusReady(function() {
plus.navigator.closeSplashscreen();
});
}(mui, document));
}
</script>
</body>
</html>slider动态加载
html
<div id="slider" class="mui-slider" style="height:220px;">
<div class="mui-slider-group mui-slider-loop" id="gallery">
</div>
<div class="mui-slider-indicator" id="indicator">
</div>
</div>js
function Home_slider() {
var first='';
var last='';
var middle='';
var gallerys=document.getElementById("gallery");
var elements=document.getElementById("indicator");
var slider = mui("#slider");
mui.ajax('http://127.0.0.1/app/home/index.php?r=ad/get-home-ad',{
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
console.log(JSON.stringify(data));
var ret=data.response;
var result=data.result;
var website='http://127.0.0.1/app/home/';
if (ret==200) {
while(gallerys.hasChildNodes())
{
gallerys.removeChild(gallerys.firstChild);
}
var i=0;
mui.each(result,function(index,item){
i++;
var para=document.createElement("div");
if (i==1) {
para.className='mui-indicator mui-active';
elements.appendChild(para);
first='<div class="mui-slider-item mui-slider-item-duplicate">'
+'<a href="javascript:;">'
+'<img src="'+website+item.content+'">'
+'</a>'
+'</div>';
}else{
para.className='mui-indicator';
elements.appendChild(para);
if (i==4) {
last='<div class="mui-slider-item mui-slider-item-duplicate">'
+'<a href="javascript:;">'
+'<img src="'+website+item.content+'">'
+'</a>'
+'</div>';
}
middle='<div class="mui-slider-item">'
+'<a href="javascript:;">'
+'<img src="'+website+item.content+'">'
+'</a>'
+'</div>';
}
gallerys.innerHTML+=first;
gallerys.innerHTML+=middle;
gallerys.innerHTML+=last;
});
slider.slider({
interval: 5000
});
}else{
slider.slider({
interval: 0
});
}
},
error:function(xhr,type,errorThrown){
}
});
}
html
<div id="slider" class="mui-slider" style="height:220px;">
<div class="mui-slider-group mui-slider-loop" id="gallery">
</div>
<div class="mui-slider-indicator" id="indicator">
</div>
</div>js
function Home_slider() {
var first='';
var last='';
var middle='';
var gallerys=document.getElementById("gallery");
var elements=document.getElementById("indicator");
var slider = mui("#slider");
mui.ajax('http://127.0.0.1/app/home/index.php?r=ad/get-home-ad',{
dataType:'json',//服务器返回json格式数据
type:'get',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){
console.log(JSON.stringify(data));
var ret=data.response;
var result=data.result;
var website='http://127.0.0.1/app/home/';
if (ret==200) {
while(gallerys.hasChildNodes())
{
gallerys.removeChild(gallerys.firstChild);
}
var i=0;
mui.each(result,function(index,item){
i++;
var para=document.createElement("div");
if (i==1) {
para.className='mui-indicator mui-active';
elements.appendChild(para);
first='<div class="mui-slider-item mui-slider-item-duplicate">'
+'<a href="javascript:;">'
+'<img src="'+website+item.content+'">'
+'</a>'
+'</div>';
}else{
para.className='mui-indicator';
elements.appendChild(para);
if (i==4) {
last='<div class="mui-slider-item mui-slider-item-duplicate">'
+'<a href="javascript:;">'
+'<img src="'+website+item.content+'">'
+'</a>'
+'</div>';
}
middle='<div class="mui-slider-item">'
+'<a href="javascript:;">'
+'<img src="'+website+item.content+'">'
+'</a>'
+'</div>';
}
gallerys.innerHTML+=first;
gallerys.innerHTML+=middle;
gallerys.innerHTML+=last;
});
slider.slider({
interval: 5000
});
}else{
slider.slider({
interval: 0
});
}
},
error:function(xhr,type,errorThrown){
}
});
}
关于html5+定位的有关经验
搞了两天,终于把ios跟android端的定位搞明白了,直接看代码
//定位的代码要写在plusReady()里面,而且不能用mui自带的mui.plusReady(){}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
function plusReady(){
/
android端跟ios端定位的代码是不一样的,要不然获取的地址会不准
/
if(plus.os.name == 'Android'){
var mapObj = new plus.maps.Map('allmap');
var getGPS = mapObj.getUserLocation( function ( state, point ){
if( 0 == state ){
plus.maps.Map.reverseGeocode(point1,{},function(event){
var address = event.address; // 转换后的地理位置
console.log("Address:"+address);
$('#location').text(address);
})
clientPoint.longitude = point.longitude;
clientPoint.latitude = point.latitude;
}else{
}
} );
}
else{
plus.geolocation.getCurrentPosition(function(position){
var point1 = new plus.maps.Point(position.coords.longitude,position.coords.latitude);
clientPoint.longitude = position.coords.longitude;
clientPoint.latitude = position.coords.latitude;
plus.maps.Map.reverseGeocode(point1,{},function(event){
var address = event.address; // 转换后的地理位置
var point = event.coord; // 转换后的坐标信息
var coordType = event.coordType; // 转换后的坐标系类型
console.log("Address:"+address);
$('#location').text(address);
console.log(JSON.stringify(event));
})
}, function ( e ) {
}, {geocode:false} );
} }
搞了两天,终于把ios跟android端的定位搞明白了,直接看代码
//定位的代码要写在plusReady()里面,而且不能用mui自带的mui.plusReady(){}
if(window.plus){
plusReady();
}else{
document.addEventListener("plusready",plusReady,false);
}
function plusReady(){
/
android端跟ios端定位的代码是不一样的,要不然获取的地址会不准
/
if(plus.os.name == 'Android'){
var mapObj = new plus.maps.Map('allmap');
var getGPS = mapObj.getUserLocation( function ( state, point ){
if( 0 == state ){
plus.maps.Map.reverseGeocode(point1,{},function(event){
var address = event.address; // 转换后的地理位置
console.log("Address:"+address);
$('#location').text(address);
})
clientPoint.longitude = point.longitude;
clientPoint.latitude = point.latitude;
}else{
}
} );
}
else{
plus.geolocation.getCurrentPosition(function(position){
var point1 = new plus.maps.Point(position.coords.longitude,position.coords.latitude);
clientPoint.longitude = position.coords.longitude;
clientPoint.latitude = position.coords.latitude;
plus.maps.Map.reverseGeocode(point1,{},function(event){
var address = event.address; // 转换后的地理位置
var point = event.coord; // 转换后的坐标信息
var coordType = event.coordType; // 转换后的坐标系类型
console.log("Address:"+address);
$('#location').text(address);
console.log(JSON.stringify(event));
})
}, function ( e ) {
}, {geocode:false} );
} }
收起阅读 »
mui的tap事件封装成anguar指令
ngModule.directive('ngTap', ['$parse',function($parse) {
return {
restrict: 'A',
compile: function($element, attr) {
var fn = $parse(attr["ngTap"]);
return function ngEventHandler(scope, elem) {
elem[0].addEventListener("tap",function(e){
var callback = function(e) {
fn(scope, {$event:e});
};
scope.$apply(callback);
});
};
}
};
}]);ngModule.directive('ngTap', ['$parse',function($parse) {
return {
restrict: 'A',
compile: function($element, attr) {
var fn = $parse(attr["ngTap"]);
return function ngEventHandler(scope, elem) {
elem[0].addEventListener("tap",function(e){
var callback = function(e) {
fn(scope, {$event:e});
};
scope.$apply(callback);
});
};
}
};
}]);angualr+mui对<input type="file" />图片上传的onchange事件的封装
angular+mui点击事件无法触发脏检查的问题，通过angular指令对原生js的onchange事件的封装解决这个问题
ngModule.directive('fileInput', ['$parse',function($parse) {
return {
restrict: "EA",
template: "<input type='file'/>",
replace: true,
link: function (scope, element, attrs) {
var modelGet = $parse(attrs.fileInput);
var modelSet = modelGet.assign;
var onChange = $parse(attrs.onChange);
var updateModel = function () {
scope.$apply(function () {
modelSet(scope, element[0].files[0]);
onChange(scope);
});
};
element.bind('change', updateModel);
}
};
}])
angular+mui点击事件无法触发脏检查的问题，通过angular指令对原生js的onchange事件的封装解决这个问题
ngModule.directive('fileInput', ['$parse',function($parse) {
return {
restrict: "EA",
template: "<input type='file'/>",
replace: true,
link: function (scope, element, attrs) {
var modelGet = $parse(attrs.fileInput);
var modelSet = modelGet.assign;
var onChange = $parse(attrs.onChange);
var updateModel = function () {
scope.$apply(function () {
modelSet(scope, element[0].files[0]);
onChange(scope);
});
};
element.bind('change', updateModel);
}
};
}])
【示例】内置浏览器titleNView版
需求简述
在手机应用内，可以访问外部的网站信息。通常用于推广信息以及商城的活动页等。
实现思路
浏览器
WebView是基于手机webkit内核浏览器封装的一个组件，无论是本地的还是网络的html都可以加载，可以将其视作一个浏览器。
html5plus封装了Webview模块，那么基本的浏览器就有了。
基本操作
浏览器的使用，最基本的操作，大致如下：
- 前进
- 后退
- 刷新
- 关闭
在html5plus环境下，操作的就是WebviewObject。现有的API，完全可以满足这些基本操作。
Webview窗口对象
菜单栏
titleNView是HBuilder8.8更新发布时，html5plus新增的一个与Webview关联的原生组件。
该组件提供了更多的配置，方便进行按钮的布局，并且可以配置进度条等，那么菜单栏就有了。
布局
因为不是真的开发一款浏览器，布局直接从简。功能按钮排布在顶部的titleNView上，剩下的Webview区域用于展示页面内容。
具体实现
创建浏览器
创建Webview直接调用相关API即可，这里就不再详细说明了，关键在于titleNView的配置。
给菜单栏添加按钮
阅读titleNView中标题栏上的自定义按钮相关的API说明，按钮的文本是可以使用unicode字符的。
推荐上Iconfont-阿里巴巴矢量图标库下载所需的矢量图，并将字体文件放在工程目录下。
注意：这里配置icon时，有个需要注意的地方。比如后退箭头，从浏览器中获取的unicode码是"\e603"，但是配置的时候，需要填写为"\ue603"才能被原生层正确解析。
buttons: [{ //后退按钮
'float': 'left',
fontSrc: '_www/font/browser.ttf',
text: '\ue603',
onclick: _self.back.bind(_self) //指定函数的上下文为browser，否则是当前这个对象；
}, { //前进箭头
'float': 'left',
fontSrc: '_www/font/browser.ttf',
text: '\ue602',
onclick: _self.forward.bind(_self)
}, { //关闭按钮
'float': 'right',
fontSrc: '_www/font/browser.ttf',
text: '\ue601',
onclick: _self.close.bind(_self)
}, { //刷新按钮
'float': 'right',
fontSrc: '_www/font/browser.ttf',
text: '\ue600',
onclick: _self.reload.bind(_self)
}]实现按钮功能
打开浏览器
// 显示浏览器
browser.show = function(url) {
url = url || 'http://www.dcloud.io/'; //默认使用DCloud官网
this.webview.loadURL(url);
this.webview.show('slide-in-right');
};这里采用预加载方案，打开浏览器时，加载目标地址。
前进
// 前进
browser.forward = function() {
var _self = this;
_self.webview.canForward(function(event) {
if(event.canForward) {
_self.webview.forward();
} else {
plus.nativeUI.toast('没有可前进的地址');
}
});
};首先要检测，是否可以前进。不能前进，就做出相应的提示。
后退
// 后退
browser.back = function() {
var _self = this;
_self.webview.canBack(function(event) {
console.log('event:', event)
if(event.canBack) {
_self.webview.back();
} else {
_self.close();
}
});
};与前进同理，先检查是否可以后退，然后再执行相关的逻辑。
刷新
// 刷新
browser.reload = function() {
this.webview.reload(true);
};刷新就很简单了，直接调用相关API即可。
关闭
// 关闭
browser.close = function() {
this.webview.hide('slide-out-right');
this.webview.clear();
};关闭操作中，由于是使用预加载方案，所以选择隐藏了Webview，然后清空了Webview中加载的内容。
实际开发中，根据实际业务需求进行调整即可。
效果图及源码
下载附件中的文件，直接解压真机运行即可体验。
需求简述
在手机应用内，可以访问外部的网站信息。通常用于推广信息以及商城的活动页等。
实现思路
浏览器
WebView是基于手机webkit内核浏览器封装的一个组件，无论是本地的还是网络的html都可以加载，可以将其视作一个浏览器。
html5plus封装了Webview模块，那么基本的浏览器就有了。
基本操作
浏览器的使用，最基本的操作，大致如下：
- 前进
- 后退
- 刷新
- 关闭
在html5plus环境下，操作的就是WebviewObject。现有的API，完全可以满足这些基本操作。
Webview窗口对象
菜单栏
titleNView是HBuilder8.8更新发布时，html5plus新增的一个与Webview关联的原生组件。
该组件提供了更多的配置，方便进行按钮的布局，并且可以配置进度条等，那么菜单栏就有了。
布局
因为不是真的开发一款浏览器，布局直接从简。功能按钮排布在顶部的titleNView上，剩下的Webview区域用于展示页面内容。
具体实现
创建浏览器
创建Webview直接调用相关API即可，这里就不再详细说明了，关键在于titleNView的配置。
给菜单栏添加按钮
阅读titleNView中标题栏上的自定义按钮相关的API说明，按钮的文本是可以使用unicode字符的。
推荐上Iconfont-阿里巴巴矢量图标库下载所需的矢量图，并将字体文件放在工程目录下。
注意：这里配置icon时，有个需要注意的地方。比如后退箭头，从浏览器中获取的unicode码是"\e603"，但是配置的时候，需要填写为"\ue603"才能被原生层正确解析。
buttons: [{ //后退按钮
'float': 'left',
fontSrc: '_www/font/browser.ttf',
text: '\ue603',
onclick: _self.back.bind(_self) //指定函数的上下文为browser，否则是当前这个对象；
}, { //前进箭头
'float': 'left',
fontSrc: '_www/font/browser.ttf',
text: '\ue602',
onclick: _self.forward.bind(_self)
}, { //关闭按钮
'float': 'right',
fontSrc: '_www/font/browser.ttf',
text: '\ue601',
onclick: _self.close.bind(_self)
}, { //刷新按钮
'float': 'right',
fontSrc: '_www/font/browser.ttf',
text: '\ue600',
onclick: _self.reload.bind(_self)
}]实现按钮功能
打开浏览器
// 显示浏览器
browser.show = function(url) {
url = url || 'http://www.dcloud.io/'; //默认使用DCloud官网
this.webview.loadURL(url);
this.webview.show('slide-in-right');
};这里采用预加载方案，打开浏览器时，加载目标地址。
前进
// 前进
browser.forward = function() {
var _self = this;
_self.webview.canForward(function(event) {
if(event.canForward) {
_self.webview.forward();
} else {
plus.nativeUI.toast('没有可前进的地址');
}
});
};首先要检测，是否可以前进。不能前进，就做出相应的提示。
后退
// 后退
browser.back = function() {
var _self = this;
_self.webview.canBack(function(event) {
console.log('event:', event)
if(event.canBack) {
_self.webview.back();
} else {
_self.close();
}
});
};与前进同理，先检查是否可以后退，然后再执行相关的逻辑。
刷新
// 刷新
browser.reload = function() {
this.webview.reload(true);
};刷新就很简单了，直接调用相关API即可。
关闭
// 关闭
browser.close = function() {
this.webview.hide('slide-out-right');
this.webview.clear();
};关闭操作中，由于是使用预加载方案，所以选择隐藏了Webview，然后清空了Webview中加载的内容。
实际开发中，根据实际业务需求进行调整即可。
效果图及源码
下载附件中的文件，直接解压真机运行即可体验。
收起阅读 »
