HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

【公告】关于近期Appstore的警告邮件,【已更换高德和个推SDK使用Alpha版HBuilder重新打包即可】

Appstore 警告信息

关于近期各位开发者收到Appstore 违反政策警告的公告
综合各方信息

  1. 主要禁的还是 JSPatch等热修复框架,特点是可以通过 JS 脚本调用和替换任意 OC 方法。
  2. 而使用5+ WGT或WGTU方式做热更新,更新页面和JS 功能暂时不受影响。
  3. 5+runtime没有使用JSPatch等热修复框架,主要是第三方SDK:高德地图和个推使用了jspatch,因此被警告。
    已更换最新高德和个推SDK 已经更新到Alpha 打包机,如果有Alpha版本的HBuilder请直接打包,如果没有请下载对应版本
    公网地址:

    HBuilder.windows@20170316.zip @alpha版本每天都会编译更新,所以最新版为当日时间戳 格式如:HBuilder.windows@20170316.zip

    Win版本:http://update.dcloud.net.cn/alpha/HBuilder.windows@20170316.zip
    Mac版本:http://update.dcloud.net.cn/alpha/HBuilder.macosx_64@20170316.tar.gz
    注意,HBuilder for Mac alpha 是没有签名的,如Mac系统设置了仅信任AppStore或受信任的开发者来源的安装包,请右键点击打开或control+点击打开HBuilder
    Alpha 版HBuilder 百度云下载地址:链接: https://pan.baidu.com/s/1kUNa0jd 密码: e3xg

虽然可以继续使用WGT和WGTU更新方式,但是为了避免appstore审核失败,应该尽量不要显式提示或者”更新“字眼
建议直接走下次启动后生效,另外wgt下载请使用https,避免被三方恶意劫持。

根据苹果要求,收到警告的同学只需要在下次提交版本时去掉相关框架就可以,目前已经有开发者去除高德SDK之后成功通过审核。
此警告没有时间期限,目前也不会强制下架。

部分开发者的app被苹果下架,因为苹果的审核政策不透明,还需向苹果详情了解情况。并非使用HTML5+技术的app都会下架。
同时也可参考如下方案,先通过我们的iOS流应用为用户提供服务:
http://ask.dcloud.net.cn/article/1180
尤其参考里面的代练通的做法http://help.dailiantong.com/contents/13/2004.html

继续阅读 »

关于近期各位开发者收到Appstore 违反政策警告的公告
综合各方信息

  1. 主要禁的还是 JSPatch等热修复框架,特点是可以通过 JS 脚本调用和替换任意 OC 方法。
  2. 而使用5+ WGT或WGTU方式做热更新,更新页面和JS 功能暂时不受影响。
  3. 5+runtime没有使用JSPatch等热修复框架,主要是第三方SDK:高德地图和个推使用了jspatch,因此被警告。
    已更换最新高德和个推SDK 已经更新到Alpha 打包机,如果有Alpha版本的HBuilder请直接打包,如果没有请下载对应版本
    公网地址:

    HBuilder.windows@20170316.zip @alpha版本每天都会编译更新,所以最新版为当日时间戳 格式如:HBuilder.windows@20170316.zip

    Win版本:http://update.dcloud.net.cn/alpha/HBuilder.windows@20170316.zip
    Mac版本:http://update.dcloud.net.cn/alpha/HBuilder.macosx_64@20170316.tar.gz
    注意,HBuilder for Mac alpha 是没有签名的,如Mac系统设置了仅信任AppStore或受信任的开发者来源的安装包,请右键点击打开或control+点击打开HBuilder
    Alpha 版HBuilder 百度云下载地址:链接: https://pan.baidu.com/s/1kUNa0jd 密码: e3xg

虽然可以继续使用WGT和WGTU更新方式,但是为了避免appstore审核失败,应该尽量不要显式提示或者”更新“字眼
建议直接走下次启动后生效,另外wgt下载请使用https,避免被三方恶意劫持。

根据苹果要求,收到警告的同学只需要在下次提交版本时去掉相关框架就可以,目前已经有开发者去除高德SDK之后成功通过审核。
此警告没有时间期限,目前也不会强制下架。

部分开发者的app被苹果下架,因为苹果的审核政策不透明,还需向苹果详情了解情况。并非使用HTML5+技术的app都会下架。
同时也可参考如下方案,先通过我们的iOS流应用为用户提供服务:
http://ask.dcloud.net.cn/article/1180
尤其参考里面的代练通的做法http://help.dailiantong.com/contents/13/2004.html

收起阅读 »

"framework not found UserNotifications的问题

App离线打包

按照官方的ios离线打包步骤进行打包,总是出现如下的错误:
framework not found UserNotifications for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
第一时间想到来dcloud.io上面需求答案,可惜很失望,既没有官方的说法,也没有开发者分享答案。
没办法,只好自己问度娘,后来在stackoverflow上面找到了答案。原文地址:
http://stackoverflow.com/questions/40034972/ionic-ld-framework-not-found-usernotifications
虽然提问者使用的是ionic,其实道理都是相通的。
文中提到两个解决方案:
1、使用Xcode8.0版本,因为通过dcloud官网下载的5+SDK离线打包会使用到UserNotifications,
而该特性为IOS10以上版本进行消息推送所需,而目前只有XCode8.0集成了其开发库;
2、使用Xcode8.0以下版本,在工程中搜索UserNotifications,然后将配置该内容的地方去掉。

当然,最终我采用的是方案1,即将Xcode升级到了8.0,解决了该问题。
方案2我试着搜索UserNotifications,但是并没有搜素到该关键字,我想应该是应用程序默认都需要使用到。

如果还有朋友对该问题困扰,不妨试试。

继续阅读 »

按照官方的ios离线打包步骤进行打包,总是出现如下的错误:
framework not found UserNotifications for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)
第一时间想到来dcloud.io上面需求答案,可惜很失望,既没有官方的说法,也没有开发者分享答案。
没办法,只好自己问度娘,后来在stackoverflow上面找到了答案。原文地址:
http://stackoverflow.com/questions/40034972/ionic-ld-framework-not-found-usernotifications
虽然提问者使用的是ionic,其实道理都是相通的。
文中提到两个解决方案:
1、使用Xcode8.0版本,因为通过dcloud官网下载的5+SDK离线打包会使用到UserNotifications,
而该特性为IOS10以上版本进行消息推送所需,而目前只有XCode8.0集成了其开发库;
2、使用Xcode8.0以下版本,在工程中搜索UserNotifications,然后将配置该内容的地方去掉。

当然,最终我采用的是方案1,即将Xcode升级到了8.0,解决了该问题。
方案2我试着搜索UserNotifications,但是并没有搜素到该关键字,我想应该是应用程序默认都需要使用到。

如果还有朋友对该问题困扰,不妨试试。

收起阅读 »

挂人,活干完了不给钱

外包

年前帮一网友做了一个小活,代码打包发给对方后,鸟人借口一个功能没完成,就不给钱了。
需求设这样的(看下图),其中有一个需求是

当应用切换到后台时,其他app内复制数据该app内自动保存

这个功能在android平台是可以实现的,不过在ios平台是有问题的

由于iOS系统极安全防护限制,当应用切换到后台时,系统默认屏蔽剪切版接口,默认获取到的数据为空;当应用切换到前台时,才能访问剪切版,所以需要每次在其他地方复制内容后需要将应用切换到前台

这个也只有踩坑后才能知道能不能搞定

我也在社区中回复了如何操作系统剪切板,如何用Native.js复制内容

对方就咬死了一定要我实现,关键是老子也没办法啊,这个是系统层级的事情

我问了做ios的朋友,也问了DLCOUD的朋友,都回复没法实现。

最主要的是对方一开始也没告知ios一定要实现。

也怪我,刚开始没要定金,主要是刚开始对方发我第一版需求的时候,我做完了,给钱很痛快,
第二次也就是这次的需求我就没要定金,大意了。

打算赚点零花钱过春节就这么黄了。艹

第二次做的时候代码完全重构。。。。


童鞋们,注意了这个人不可靠

QQ号是:80780471

微信: mammapworrall

头像这个鸟样

附一下聊天截图:

代码已分享到了coding.net上,需要了解websql的童鞋可参考

地址在phillyx

继续阅读 »

年前帮一网友做了一个小活,代码打包发给对方后,鸟人借口一个功能没完成,就不给钱了。
需求设这样的(看下图),其中有一个需求是

当应用切换到后台时,其他app内复制数据该app内自动保存

这个功能在android平台是可以实现的,不过在ios平台是有问题的

由于iOS系统极安全防护限制,当应用切换到后台时,系统默认屏蔽剪切版接口,默认获取到的数据为空;当应用切换到前台时,才能访问剪切版,所以需要每次在其他地方复制内容后需要将应用切换到前台

这个也只有踩坑后才能知道能不能搞定

我也在社区中回复了如何操作系统剪切板,如何用Native.js复制内容

对方就咬死了一定要我实现,关键是老子也没办法啊,这个是系统层级的事情

我问了做ios的朋友,也问了DLCOUD的朋友,都回复没法实现。

最主要的是对方一开始也没告知ios一定要实现。

也怪我,刚开始没要定金,主要是刚开始对方发我第一版需求的时候,我做完了,给钱很痛快,
第二次也就是这次的需求我就没要定金,大意了。

打算赚点零花钱过春节就这么黄了。艹

第二次做的时候代码完全重构。。。。


童鞋们,注意了这个人不可靠

QQ号是:80780471

微信: mammapworrall

头像这个鸟样

附一下聊天截图:

代码已分享到了coding.net上,需要了解websql的童鞋可参考

地址在phillyx

收起阅读 »

【文档】mui.pullToRefresh插件

mui 上拉加载 下拉刷新

下拉刷新和上拉加载,是大部分应用中都会用到的功能。
mui结合html5plus的API,封装了一套可以在Android和iOS上实现的配置,详细参考mui相关文档

为了方便开发wap站的开发者,mui还扩展了pullToRefresh插件。

依赖

  • mui.js
  • mui.pullToRefresh.js
  • mui.pullToRefresh.material.js

同样,和其它一些插件一样,在HBuilder中新建hello mui示例工程,或在在github上均可获取以上资源。

初始化组件

初始化方法

var pullToRefresh = mui(selector).pullToRefresh(options);  

配置信息

下拉配置

down: {  
    callback: function(){} //下拉回调函数  
}  

目前下拉只有这一个配置项,下拉的动画是canvas绘制的,想调整的话需要修改mui.pullToRefresh.material.js中的相关代码。

上拉配置

up: {  
    callback: function(){}, //上拉回调,必填;  
    auto: false, //自动执行一次上拉加载,可选;  
    show: true, //显示底部上拉加载提示信息,可选;  
    contentinit: '上拉显示更多', //可以上拉提示信息  
    contentdown: '上拉显示更多', //上拉结束提示信息  
    contentrefresh: '正在加载...', //上拉进行中提示信息  
    contentnomore: '没有更多数据了' //上拉无更多信息时提示信息  
}  

常用API

下拉相关

手动触发下拉

pullToRefresh.pullDownLoading();  

结束下拉

pullToRefresh.endPullDownToRefresh();  

上拉相关

手动触发上拉

pullToRefresh.pullUpLoading();  

结束上拉

pullToRefresh.endPullUpToRefresh(Boolean); //传true代表无更多信息,默认可不传;  

禁用/开启组件

pullToRefresh.setStopped(Boolean);  

刷新组件

上拉的操作,如果无更多信息后,调用结束上拉并且传true会禁用上拉。如果需要重新开启上拉,则需要刷新组件。

pullToRefresh.refresh(true);  

结尾

附件中提供了一个简单的,使用mui.pullToRefresh制作的例子。多个选项卡的情景,请参考hello mui示例中的pullrefresh_with_tab.html

继续阅读 »

下拉刷新和上拉加载,是大部分应用中都会用到的功能。
mui结合html5plus的API,封装了一套可以在Android和iOS上实现的配置,详细参考mui相关文档

为了方便开发wap站的开发者,mui还扩展了pullToRefresh插件。

依赖

  • mui.js
  • mui.pullToRefresh.js
  • mui.pullToRefresh.material.js

同样,和其它一些插件一样,在HBuilder中新建hello mui示例工程,或在在github上均可获取以上资源。

初始化组件

初始化方法

var pullToRefresh = mui(selector).pullToRefresh(options);  

配置信息

下拉配置

down: {  
    callback: function(){} //下拉回调函数  
}  

目前下拉只有这一个配置项,下拉的动画是canvas绘制的,想调整的话需要修改mui.pullToRefresh.material.js中的相关代码。

上拉配置

up: {  
    callback: function(){}, //上拉回调,必填;  
    auto: false, //自动执行一次上拉加载,可选;  
    show: true, //显示底部上拉加载提示信息,可选;  
    contentinit: '上拉显示更多', //可以上拉提示信息  
    contentdown: '上拉显示更多', //上拉结束提示信息  
    contentrefresh: '正在加载...', //上拉进行中提示信息  
    contentnomore: '没有更多数据了' //上拉无更多信息时提示信息  
}  

常用API

下拉相关

手动触发下拉

pullToRefresh.pullDownLoading();  

结束下拉

pullToRefresh.endPullDownToRefresh();  

上拉相关

手动触发上拉

pullToRefresh.pullUpLoading();  

结束上拉

pullToRefresh.endPullUpToRefresh(Boolean); //传true代表无更多信息,默认可不传;  

禁用/开启组件

pullToRefresh.setStopped(Boolean);  

刷新组件

上拉的操作,如果无更多信息后,调用结束上拉并且传true会禁用上拉。如果需要重新开启上拉,则需要刷新组件。

pullToRefresh.refresh(true);  

结尾

附件中提供了一个简单的,使用mui.pullToRefresh制作的例子。多个选项卡的情景,请参考hello mui示例中的pullrefresh_with_tab.html

收起阅读 »

修复App崩溃Bug!安卓更新WebView引擎

  Google在安卓4.4开始引入了WebView这一新特性,App如果请求网页渲染的话,会统一交给系统WebView引擎进行渲染,这样可以保证安卓App渲染在线内容的质量。然而最近这个WebView出现了Bug,导致不少App频频崩溃。现在Google发布了相应的修复,解决了App崩溃的问题,新版WebView已经可以通过Google Play商店更新。


Google更新WebView修复App崩溃问题

  从安卓5.0开始,Google可以从Play商店推送新版的WebView引擎,无需发布系统更新也可以进行问题修复。Google的更新日志表示,新版的WebView修复了导致部分设备在线视频和底层图形驱动出现故障的Bug。之前的问题只出现在安卓5.0以上的系统,这是由于安卓4.X系统并没有获得过出现故障的WebView版本,因祸得福。

  Google已经将越来越多的系统功能更新放置到Google Play商店,例如Google Play服务、WebView引擎、系统桌面等等。通过Google Play更新系统功能,可以带来更快捷的安全、功能方面的更新和修复。遗憾的是,Google Play在中国难以正常使用,希望日后情况有所改观吧。

继续阅读 »

  Google在安卓4.4开始引入了WebView这一新特性,App如果请求网页渲染的话,会统一交给系统WebView引擎进行渲染,这样可以保证安卓App渲染在线内容的质量。然而最近这个WebView出现了Bug,导致不少App频频崩溃。现在Google发布了相应的修复,解决了App崩溃的问题,新版WebView已经可以通过Google Play商店更新。


Google更新WebView修复App崩溃问题

  从安卓5.0开始,Google可以从Play商店推送新版的WebView引擎,无需发布系统更新也可以进行问题修复。Google的更新日志表示,新版的WebView修复了导致部分设备在线视频和底层图形驱动出现故障的Bug。之前的问题只出现在安卓5.0以上的系统,这是由于安卓4.X系统并没有获得过出现故障的WebView版本,因祸得福。

  Google已经将越来越多的系统功能更新放置到Google Play商店,例如Google Play服务、WebView引擎、系统桌面等等。通过Google Play更新系统功能,可以带来更快捷的安全、功能方面的更新和修复。遗憾的是,Google Play在中国难以正常使用,希望日后情况有所改观吧。

收起阅读 »

【示例】mui.view插件的使用

插件 view 单页 mui

hello mui示例工程中setting.html页面,用到了mui提供的一个单页插件mui.view。
可能是该页面的内容较多,许多开发者对此插件的使用不是很明了。这里通过一个最简示例,来详细说明该插件的使用。

依赖

  • mui.js
  • mui.view.js
  • mui.css

以上文件,都可以在HBuilder中新建hellomui示例工程中获取。

html结构

主体部分

<div class="mui-view">  
    <div class="mui-navbar"></div>  
    <div class="mui-pages"></div>  
</div>  

.mui-view->.mui-navbar用于加载单页的header部分
.mui-view->.mui-mui-pages用于加载单页的content部分

单页结构

<div class="mui-page">  
    <!--header部分-->  
    <div class="mui-navbar-inner mui-bar mui-bar-nav">  
        <a href="javascript:;" class="mui-icon mui-icon-back mui-action-back"></a>  
    </div>  
    <!--内容区域-->  
    <div class="mui-page-content">内容区域</div>  
</div>  

每个单页的内容区域,都在.mui-page容器中。
header部分,必须按照.mui-page->.mui-navbar-inner的结构构建。内容区域,推荐使用.mui-page.content。

css部分

.mui-page.mui-transitioning {  
    -webkit-transition: -webkit-transform 300ms ease;  
    transition: transform 300ms ease;  
}  

.mui-page-left {  
    -webkit-transform: translate3d(0, 0, 0);  
    transform: translate3d(0, 0, 0);  
}  

.mui-ios .mui-page-left {  
    -webkit-transform: translate3d(-20%, 0, 0);  
    transform: translate3d(-20%, 0, 0);  
}  

.mui-navbar .mui-btn-nav {  
    -webkit-transition: none;  
    transition: none;  
    -webkit-transition-duration: .0s;  
    transition-duration: .0s;  
}  

.mui-navbar .mui-bar .mui-title {  
    display: inline-block;  
    width: auto;  
}  

.mui-page-shadow {  
    position: absolute;  
    right: 100%;  
    top: 0;  
    width: 16px;  
    height: 100%;  
    z-index: -1;  
    content: '';  
}  

.mui-page-shadow {  
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);  
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);  
}  

.mui-navbar-inner.mui-transitioning,  
.mui-navbar-inner .mui-transitioning {  
    -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;  
    transition: opacity 300ms ease, transform 300ms ease;  
}  

.mui-page {  
    display: none;  
}  

.mui-pages .mui-page {  
    display: block;  
}  

上述css,均为实现单页切换所必须的。
与transition相关的css,用于实现单页的切换动画。可以根据实际需求,适当调整。

javascript部分

初始化插件

var viewApi = mui('.mui-view').view({  
    defaultPage: '#default_page' //默认页面的选择器  
});  

切换页面

两种方式可以实现页面切换
锚点方式

<!--锚点部分-->  
<a href="#pageid"></a>  
<!--单页部分-->  
<div class="mui-page" id="pageid"></div>  

js控制
如果希望通过js来控制,可以调用view组件的go()方法来实现。

var elem = document.querySelector('a');  
elem.addEventListener('tap', function(){  
    viewApi.go('#pageid');  
});  

切换事件

hello mui中setting.html中对此已经做了明确的说明。
监听页面切换事件方案,通过view元素监听所有页面切换事件
目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
第一个参数为事件名称,第二个参数为事件回调,其中e.detail.page为当前页面的html对象

后退操作

单页面的切换,后退的处理非常关键。view组件提供了两个方法,来处理back。

  1. viewApi.canBack() 用于判定是否可以后退
  2. viewApi.back() 后退至上一次访问的页面
    通常,会按照setting.html中那样,重写原来的back。
    var oldBack = mui.back;  
    mui.back = function() {  
    if(viewApi.canBack()) {  
        viewApi.back();  
    } else {  
        oldBack();  
    }  
    };  

结尾

附上一个简单的demo,解压后直接在浏览器中即可预览效果。

继续阅读 »

hello mui示例工程中setting.html页面,用到了mui提供的一个单页插件mui.view。
可能是该页面的内容较多,许多开发者对此插件的使用不是很明了。这里通过一个最简示例,来详细说明该插件的使用。

依赖

  • mui.js
  • mui.view.js
  • mui.css

以上文件,都可以在HBuilder中新建hellomui示例工程中获取。

html结构

主体部分

<div class="mui-view">  
    <div class="mui-navbar"></div>  
    <div class="mui-pages"></div>  
</div>  

.mui-view->.mui-navbar用于加载单页的header部分
.mui-view->.mui-mui-pages用于加载单页的content部分

单页结构

<div class="mui-page">  
    <!--header部分-->  
    <div class="mui-navbar-inner mui-bar mui-bar-nav">  
        <a href="javascript:;" class="mui-icon mui-icon-back mui-action-back"></a>  
    </div>  
    <!--内容区域-->  
    <div class="mui-page-content">内容区域</div>  
</div>  

每个单页的内容区域,都在.mui-page容器中。
header部分,必须按照.mui-page->.mui-navbar-inner的结构构建。内容区域,推荐使用.mui-page.content。

css部分

.mui-page.mui-transitioning {  
    -webkit-transition: -webkit-transform 300ms ease;  
    transition: transform 300ms ease;  
}  

.mui-page-left {  
    -webkit-transform: translate3d(0, 0, 0);  
    transform: translate3d(0, 0, 0);  
}  

.mui-ios .mui-page-left {  
    -webkit-transform: translate3d(-20%, 0, 0);  
    transform: translate3d(-20%, 0, 0);  
}  

.mui-navbar .mui-btn-nav {  
    -webkit-transition: none;  
    transition: none;  
    -webkit-transition-duration: .0s;  
    transition-duration: .0s;  
}  

.mui-navbar .mui-bar .mui-title {  
    display: inline-block;  
    width: auto;  
}  

.mui-page-shadow {  
    position: absolute;  
    right: 100%;  
    top: 0;  
    width: 16px;  
    height: 100%;  
    z-index: -1;  
    content: '';  
}  

.mui-page-shadow {  
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);  
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);  
}  

.mui-navbar-inner.mui-transitioning,  
.mui-navbar-inner .mui-transitioning {  
    -webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;  
    transition: opacity 300ms ease, transform 300ms ease;  
}  

.mui-page {  
    display: none;  
}  

.mui-pages .mui-page {  
    display: block;  
}  

上述css,均为实现单页切换所必须的。
与transition相关的css,用于实现单页的切换动画。可以根据实际需求,适当调整。

javascript部分

初始化插件

var viewApi = mui('.mui-view').view({  
    defaultPage: '#default_page' //默认页面的选择器  
});  

切换页面

两种方式可以实现页面切换
锚点方式

<!--锚点部分-->  
<a href="#pageid"></a>  
<!--单页部分-->  
<div class="mui-page" id="pageid"></div>  

js控制
如果希望通过js来控制,可以调用view组件的go()方法来实现。

var elem = document.querySelector('a');  
elem.addEventListener('tap', function(){  
    viewApi.go('#pageid');  
});  

切换事件

hello mui中setting.html中对此已经做了明确的说明。
监听页面切换事件方案,通过view元素监听所有页面切换事件
目前提供pageBeforeShow|pageShow|pageBeforeBack|pageBack四种事件(before事件为动画开始前触发)
第一个参数为事件名称,第二个参数为事件回调,其中e.detail.page为当前页面的html对象

后退操作

单页面的切换,后退的处理非常关键。view组件提供了两个方法,来处理back。

  1. viewApi.canBack() 用于判定是否可以后退
  2. viewApi.back() 后退至上一次访问的页面
    通常,会按照setting.html中那样,重写原来的back。
    var oldBack = mui.back;  
    mui.back = function() {  
    if(viewApi.canBack()) {  
        viewApi.back();  
    } else {  
        oldBack();  
    }  
    };  

结尾

附上一个简单的demo,解压后直接在浏览器中即可预览效果。

收起阅读 »

远程加载的webview,选择完照片后不能显示的解决方法

5+App开发

思路:
1、从相册中选择照片,路径是受限制的,这时候就需要把选择的照片拷贝到私有路径下,私有路径是开放的。

代码:
提交代码报错,好渣渣,看附件截图吧

思路:
1、从相册中选择照片,路径是受限制的,这时候就需要把选择的照片拷贝到私有路径下,私有路径是开放的。

代码:
提交代码报错,好渣渣,看附件截图吧

点击指定区域外隐藏此区域

document.addEventListener("touchstart", function(e) {
var elem = e.srcElement || e.target;
while(elem) {
if(elem.id == "指定区域id") {
return;
}
elem = elem.parentNode;
}
document.getElementById("指定区域id").style.display = 'none';
}, false);

继续阅读 »

document.addEventListener("touchstart", function(e) {
var elem = e.srcElement || e.target;
while(elem) {
if(elem.id == "指定区域id") {
return;
}
elem = elem.parentNode;
}
document.getElementById("指定区域id").style.display = 'none';
}, false);

收起阅读 »

工具分享:不用担心了没有苹果Mac电脑也可以直接在Windows上架iOS app了

iOS打包

我们现在上架iOS app通常用到苹果的应用加载器Application Loader,这个工具很好的帮助了开发者们上架app,但这个工具只能在mac电脑中使用,限制了使用环境。

现在很多开发者通过其他开发平台开发应用,没有搭建mac环境,上传app时会遇到阻碍,有些开发者让有mac电脑的朋友帮忙上架,有些到淘宝找人代上架,或者在win系统搭建虚拟机,搞黑苹果,总是没那么方便,花费较多时间,降低效率。而Appuploader可以实现在windows,linux或mac上直接使用,提供了极大的便利。

继续阅读 »

我们现在上架iOS app通常用到苹果的应用加载器Application Loader,这个工具很好的帮助了开发者们上架app,但这个工具只能在mac电脑中使用,限制了使用环境。

现在很多开发者通过其他开发平台开发应用,没有搭建mac环境,上传app时会遇到阻碍,有些开发者让有mac电脑的朋友帮忙上架,有些到淘宝找人代上架,或者在win系统搭建虚拟机,搞黑苹果,总是没那么方便,花费较多时间,降低效率。而Appuploader可以实现在windows,linux或mac上直接使用,提供了极大的便利。

收起阅读 »

第一次

挺好用,加油,话说,你们的发起页面输入框是用layui做的么

挺好用,加油,话说,你们的发起页面输入框是用layui做的么

【示例】原生标题栏titleNView使用说明

性能优化 navigator Webview HTML5+ mui titleNView

概念澄清

HBuilder8.0.1版更新说明中App模块【重要】更新,新增原生导航栏控件
titleNView在js层也是nativeObj.View对象,可再次自由绘制定义。建议非必要不使用双webview模式的webview title,而改用原生title。
以往,为了解决列表流畅滚动等问题,采用了双webview模式等方案。现在有了titleNView后,可以减少webview的数量,进而大幅提高应用的整体性能。

titleNView规范地址:**http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

实际使用

可用属性

目前只有三个属性可以配置

  1. backgroundcolor 导航栏背景颜色,字符串类型,格式为“#RRGGBB”,默认值为灰黑色(#1B1A1F)
  2. titletext 导航栏标题文字内容,默认值为当前应用的标题; titlecolor:导航栏标题文字颜色,字符串类型,格式为“#RRGGBB”
  3. titlecolor 导航栏标题文字颜色,字符串类型,格式为“#RRGGBB”,默认值为白色(#FFFFFF)

ps:注意属性的大小写。并且高度是固定的,为44px。

首页配置

首页的titleNView需要在manifest.json文件中配置。
plus->launchwebview->titleNView

"plus": {  
    "launchwebview": {  
        "titleNView": {  
            "backgroundcolor": "#f7f7f7",  
            "titletext": "首页",  
            "titlecolor": "#ff461f"  
        }  
    }  
}  

非首页webview

该属性必须在创建webview时就设置,不支持动态setStyle修改。

var homeWv = plus.webview.create('home.html', 'home', {  
    titleNView: {  
        titleText: 'home页'  
    }  
});  
homeWv.show('slide-in-right');  

mui扩展

mui.openWindow({  
    url: 'home.html',  
    id: 'home',  
    styles: {  
        titleNView: {  
            titleText: 'home页'  
        }  
    }  
})  

补充
titleNView的高度是固定的,为了方便开发者,mui-v3.5.1开始提供了更为灵活的方案。

mui.openWindowWithTitle(WebviewOptions,{  
    title:{//标题配置  
        text:'home页',  
    },  
    back:{//左上角返回箭头  
        image:{//图片格式  
            base64Data:''//加载图片的Base64编码格式数据 base64Data 和 imgSRC 必须指定一个.否则不显示返回箭头  
        }  
    }  
});  

关于openWindowWithTitle方法,请参考mui相关文档

获取titleNView对象

通过getTitleNView()方法,可以获取webview窗口的原生标题栏对象。

var titleNView= plus.webview.currentWebview().getTitleNView();  

添加button

可以通过直接配置titleNView的buttons实现icon的绘制以及click事件的监听,参考文档http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewCustomButtonStyles
以及这篇文章内置浏览器titleNView版

修改titleText

var wv = plus.webview.currentWebview();  
wv.setStyle({  
    titleNView: {  
        titleText: '标题'  
    }  
});

绘制更多内容

更新说明中提到,titleNView在js层是nativeObj.View对象,可以通过相关方法进行更多内容的绘制。
最新的Hello Mui示例工程,首页的icon的绘制就是这样实现的,在最新的HBuilder中新建Hello Mui示例工程即可体验并查看相关源码。

更多

更多关于HBuilder8.0的更新,以及manifest.json的配置,参考相关文章。
感谢80万开发者厚爱,HBuilder8.0正式发布 【内含重要性能优化新策略】
Manifest.json文档说明 manifest配置

最后附上一个简单的示例源码,解压后真机运行即可。

继续阅读 »

概念澄清

HBuilder8.0.1版更新说明中App模块【重要】更新,新增原生导航栏控件
titleNView在js层也是nativeObj.View对象,可再次自由绘制定义。建议非必要不使用双webview模式的webview title,而改用原生title。
以往,为了解决列表流畅滚动等问题,采用了双webview模式等方案。现在有了titleNView后,可以减少webview的数量,进而大幅提高应用的整体性能。

titleNView规范地址:**http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

实际使用

可用属性

目前只有三个属性可以配置

  1. backgroundcolor 导航栏背景颜色,字符串类型,格式为“#RRGGBB”,默认值为灰黑色(#1B1A1F)
  2. titletext 导航栏标题文字内容,默认值为当前应用的标题; titlecolor:导航栏标题文字颜色,字符串类型,格式为“#RRGGBB”
  3. titlecolor 导航栏标题文字颜色,字符串类型,格式为“#RRGGBB”,默认值为白色(#FFFFFF)

ps:注意属性的大小写。并且高度是固定的,为44px。

首页配置

首页的titleNView需要在manifest.json文件中配置。
plus->launchwebview->titleNView

"plus": {  
    "launchwebview": {  
        "titleNView": {  
            "backgroundcolor": "#f7f7f7",  
            "titletext": "首页",  
            "titlecolor": "#ff461f"  
        }  
    }  
}  

非首页webview

该属性必须在创建webview时就设置,不支持动态setStyle修改。

var homeWv = plus.webview.create('home.html', 'home', {  
    titleNView: {  
        titleText: 'home页'  
    }  
});  
homeWv.show('slide-in-right');  

mui扩展

mui.openWindow({  
    url: 'home.html',  
    id: 'home',  
    styles: {  
        titleNView: {  
            titleText: 'home页'  
        }  
    }  
})  

补充
titleNView的高度是固定的,为了方便开发者,mui-v3.5.1开始提供了更为灵活的方案。

mui.openWindowWithTitle(WebviewOptions,{  
    title:{//标题配置  
        text:'home页',  
    },  
    back:{//左上角返回箭头  
        image:{//图片格式  
            base64Data:''//加载图片的Base64编码格式数据 base64Data 和 imgSRC 必须指定一个.否则不显示返回箭头  
        }  
    }  
});  

关于openWindowWithTitle方法,请参考mui相关文档

获取titleNView对象

通过getTitleNView()方法,可以获取webview窗口的原生标题栏对象。

var titleNView= plus.webview.currentWebview().getTitleNView();  

添加button

可以通过直接配置titleNView的buttons实现icon的绘制以及click事件的监听,参考文档http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewCustomButtonStyles
以及这篇文章内置浏览器titleNView版

修改titleText

var wv = plus.webview.currentWebview();  
wv.setStyle({  
    titleNView: {  
        titleText: '标题'  
    }  
});

绘制更多内容

更新说明中提到,titleNView在js层是nativeObj.View对象,可以通过相关方法进行更多内容的绘制。
最新的Hello Mui示例工程,首页的icon的绘制就是这样实现的,在最新的HBuilder中新建Hello Mui示例工程即可体验并查看相关源码。

更多

更多关于HBuilder8.0的更新,以及manifest.json的配置,参考相关文章。
感谢80万开发者厚爱,HBuilder8.0正式发布 【内含重要性能优化新策略】
Manifest.json文档说明 manifest配置

最后附上一个简单的示例源码,解压后真机运行即可。

收起阅读 »

【工具分享】iOS app上架辅助工具分享给没苹果机的开发者

iOS打包

我们现在上架iOS app通常用到苹果的应用加载器Application Loader,这个工具很好的帮助了开发者们上架app,但这个工具只能在mac电脑中使用,限制了使用环境。

现在很多开发者通过其他开发平台开发应用,没有搭建mac环境,上传app时会遇到阻碍,有些开发者让有mac电脑的朋友帮忙上架,有些到淘宝找人代上架,或者在win系统搭建虚拟机,搞黑苹果,总是没那么方便,花费较多时间,降低效率。而Appuploader这个工具可以实现在windows,linux或mac上直接使用,提供了极大的便利。而且可以免费使用,分享给有需要的开发者们。

博客:http://www.appuploader.net/blog/

继续阅读 »

我们现在上架iOS app通常用到苹果的应用加载器Application Loader,这个工具很好的帮助了开发者们上架app,但这个工具只能在mac电脑中使用,限制了使用环境。

现在很多开发者通过其他开发平台开发应用,没有搭建mac环境,上传app时会遇到阻碍,有些开发者让有mac电脑的朋友帮忙上架,有些到淘宝找人代上架,或者在win系统搭建虚拟机,搞黑苹果,总是没那么方便,花费较多时间,降低效率。而Appuploader这个工具可以实现在windows,linux或mac上直接使用,提供了极大的便利。而且可以免费使用,分享给有需要的开发者们。

博客:http://www.appuploader.net/blog/

收起阅读 »