HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

【火速报名】互联网技术联盟前端技术在线分享:MUI-最接近原生体验的前端框架

mui

3月9日(本周三)晚8点半,MUI设计师崔红保应邀在ITA1024前端技术讲座,演讲形式为微信群,特邀请DCloud的小伙伴一起参与,有兴趣的朋友请按照文章中的报名方式进行报名

 以下为中国互联网技术联盟(ITA1024)的公告:

 2016年3月,ITA1024推出前端技术专题月,邀请业内最顶级的前端技术专家进行分享和交流。

 3月9日,ITA1024邀请国内知名开源框架MUI设计师崔红保带来最接近原生体验的框架MUI的技术分享,请点击阅读原文报名,准确填写信息,审核通过后会邀请进入微信群。

 (QQ号关联的微信号无法搜索到,请留下可添加的微信号)

万人课堂——ITA1024前端技术专题月
 MUI-最接近原生体验的框架技术分享

3月9号 20:30--22:30
 微信群分享:万人课堂-ITA1024前端精英群

1本期内容介绍
 本期分享是ITA1024前端专题月第二个分享内容,邀请到DCloud前端负责人,MUI框架设计师崔红保带来分享。

2主要包括如下内容:

 1 、mui 框架介绍

 2 、mui 框架如何保证高性能体验

 3 、利用mui 实现多端发布

 4、 DCloud还为 HTML5开发者提供那些产品服务

本期嘉宾——崔红保
 DCloud前端负责人,MUI框架设计师,10年手机跨平台研发经验,目前致力于如何让HTML5应用达到原生App体验。

立即报名
立即报名
立即报名

关于ITA1024
 ITA1024一直坚持议题和讲师都精挑细选自国内顶级技术精英团队,策划技术专题月。在每个技术专题月中,ITA1024联合中国互联网技术联盟中100家核心成员(国内一二线互联网企业研发团队)提交议题和讲师申请,并由ITA1024专业技术委员会评审通过8~10个议题。

 通过每周一期的万人课堂和每月一期的ITA1024互联网技术开放日,以及官方网站(www.ita1024.com),官方微信公众号(ita1024k),ITA1024技术月刊等多种传播形式,精准推送给细分领域的技术人群,而且所有技术分享交流活动全部免费参加,2016年ITA1024计划将覆盖超过千万级别的精准技术人群。

 ITA1024是由中国互联网技术联盟支持的业界顶级技术分享活动品牌。中国互联网技术联盟由京东技术学院和美团技术学院联合倡导发起,首批加入联盟的成员就包括有:搜狐,网易,乐视,滴滴,小米,当当,奇虎360,去哪儿,饿了么,大众点评,携程,58到家、赶集网,猎豹移动,魅族等50+知名互联网企业。

继续阅读 »

3月9日(本周三)晚8点半,MUI设计师崔红保应邀在ITA1024前端技术讲座,演讲形式为微信群,特邀请DCloud的小伙伴一起参与,有兴趣的朋友请按照文章中的报名方式进行报名

 以下为中国互联网技术联盟(ITA1024)的公告:

 2016年3月,ITA1024推出前端技术专题月,邀请业内最顶级的前端技术专家进行分享和交流。

 3月9日,ITA1024邀请国内知名开源框架MUI设计师崔红保带来最接近原生体验的框架MUI的技术分享,请点击阅读原文报名,准确填写信息,审核通过后会邀请进入微信群。

 (QQ号关联的微信号无法搜索到,请留下可添加的微信号)

万人课堂——ITA1024前端技术专题月
 MUI-最接近原生体验的框架技术分享

3月9号 20:30--22:30
 微信群分享:万人课堂-ITA1024前端精英群

1本期内容介绍
 本期分享是ITA1024前端专题月第二个分享内容,邀请到DCloud前端负责人,MUI框架设计师崔红保带来分享。

2主要包括如下内容:

 1 、mui 框架介绍

 2 、mui 框架如何保证高性能体验

 3 、利用mui 实现多端发布

 4、 DCloud还为 HTML5开发者提供那些产品服务

本期嘉宾——崔红保
 DCloud前端负责人,MUI框架设计师,10年手机跨平台研发经验,目前致力于如何让HTML5应用达到原生App体验。

立即报名
立即报名
立即报名

关于ITA1024
 ITA1024一直坚持议题和讲师都精挑细选自国内顶级技术精英团队,策划技术专题月。在每个技术专题月中,ITA1024联合中国互联网技术联盟中100家核心成员(国内一二线互联网企业研发团队)提交议题和讲师申请,并由ITA1024专业技术委员会评审通过8~10个议题。

 通过每周一期的万人课堂和每月一期的ITA1024互联网技术开放日,以及官方网站(www.ita1024.com),官方微信公众号(ita1024k),ITA1024技术月刊等多种传播形式,精准推送给细分领域的技术人群,而且所有技术分享交流活动全部免费参加,2016年ITA1024计划将覆盖超过千万级别的精准技术人群。

 ITA1024是由中国互联网技术联盟支持的业界顶级技术分享活动品牌。中国互联网技术联盟由京东技术学院和美团技术学院联合倡导发起,首批加入联盟的成员就包括有:搜狐,网易,乐视,滴滴,小米,当当,奇虎360,去哪儿,饿了么,大众点评,携程,58到家、赶集网,猎豹移动,魅族等50+知名互联网企业。

收起阅读 »

解决MUI同一个页面不能初始化多个下拉/上拉刷新的问题(非父子Webview方式)

上拉加载 下拉刷新

【背景介绍】
  MUI 版本 2.8。
  在页面中使用了 TabBar 组件(mui-bar-tab),每个子面板都有上拉加载和下拉刷新。

【问题阐述】
  由于项目需要,每个子页面之间需要有数据进行同步。
  如果采用父子 Webview 的方式去加载子页面,确实可以做到每个子面板各自拥有独立的下拉刷新功能,但跨 Webview 的数据同步非常蛋疼:传值还好说一点儿,可以使用 evalJs;取值就更麻烦了,需要使用 localStorage 之类的中间存储做中转(当然也可能是本人才疏学浅,没有摸索到更牛叉的方式)。而且跨 Webview 操作 DOM 十分的不便。
  如果使用 Div 方式实现父子面板,再辅以 Avalon、Angular 之类的 MV* 方案,数据同步问题可以很好的解决。但是,却在下拉刷新功能上出现的了问题。当使用官方的 mui.pullToRefresh.js,调用 mui(scroller).pullToRefresh() 初始化多个下拉刷新组件时,竟然只有第一个起作用。如果同时引入了 mui.pullToRefresh.material.js 文件,还会抛一个空指针异常。
  我转而想到是否可以多个子面板共用一个下拉刷新,然后通过判断当前激活的是哪个面板的办法来选择执行何种操作。但经过尝试后发现,这样做存在两个问题:1、每个子面板的下拉刷新事件不能独立,即在面板A执行下拉操作时,如果下拉刷新未结束,跳转到面板B时是无法刷新B的;2、使用同一个 mui-scroll-wrapper 定位不能独立,在面板A时滚动条在某个坐标位置,切换到B时也会是在这个坐标,体验很差。

【解决方案】
  遇到问题首先上论坛搜集资料,发现还是有很多人遇到了和我同样的问题的,比较有代表性的是 http://ask.dcloud.net.cn/question/1970 这篇贴子。但官方给出的答案和我自己想的共用一个下拉刷新如出一辙,这样就会遇到我的那两个问题。
  难道就这么放弃 Div 方式,转而使用 Webview 这么蛋疼的方式吗?
  正当我苦恼之时,突然灵光一闪,mui-scroll-wrapper 都可以在同一个页面中初始化多次,而 pullToRefresh 是在 mui-scroll-wrapper 的 $.fn.Scroll 基础之上做的扩展,没道理不能初始化多次啊?
  于是我仔细查看了 mui.pullToRefresh.js 的源代码(顺便吐个槽,贵司的开发人员写代码时不屑于写注释么……看的这个头大……),发现第 101 行存在代码

 var element = document.querySelector('.' + CLASS_PULL_TOP_TIPS);

第 194 行存在代码

if (document.querySelector('.' + CLASS_PULL_TOP_TIPS)) {

  结合上下文来看是为了判断当前页面是否存在下拉刷新标志的,但居然是从整个文档中检索,而非对应的 mui-scroll-wrapper 内检索,怀疑此处有问题。遂将 document 改为 this.element,保存,执行。
  至此,问题解决。

继续阅读 »

【背景介绍】
  MUI 版本 2.8。
  在页面中使用了 TabBar 组件(mui-bar-tab),每个子面板都有上拉加载和下拉刷新。

【问题阐述】
  由于项目需要,每个子页面之间需要有数据进行同步。
  如果采用父子 Webview 的方式去加载子页面,确实可以做到每个子面板各自拥有独立的下拉刷新功能,但跨 Webview 的数据同步非常蛋疼:传值还好说一点儿,可以使用 evalJs;取值就更麻烦了,需要使用 localStorage 之类的中间存储做中转(当然也可能是本人才疏学浅,没有摸索到更牛叉的方式)。而且跨 Webview 操作 DOM 十分的不便。
  如果使用 Div 方式实现父子面板,再辅以 Avalon、Angular 之类的 MV* 方案,数据同步问题可以很好的解决。但是,却在下拉刷新功能上出现的了问题。当使用官方的 mui.pullToRefresh.js,调用 mui(scroller).pullToRefresh() 初始化多个下拉刷新组件时,竟然只有第一个起作用。如果同时引入了 mui.pullToRefresh.material.js 文件,还会抛一个空指针异常。
  我转而想到是否可以多个子面板共用一个下拉刷新,然后通过判断当前激活的是哪个面板的办法来选择执行何种操作。但经过尝试后发现,这样做存在两个问题:1、每个子面板的下拉刷新事件不能独立,即在面板A执行下拉操作时,如果下拉刷新未结束,跳转到面板B时是无法刷新B的;2、使用同一个 mui-scroll-wrapper 定位不能独立,在面板A时滚动条在某个坐标位置,切换到B时也会是在这个坐标,体验很差。

【解决方案】
  遇到问题首先上论坛搜集资料,发现还是有很多人遇到了和我同样的问题的,比较有代表性的是 http://ask.dcloud.net.cn/question/1970 这篇贴子。但官方给出的答案和我自己想的共用一个下拉刷新如出一辙,这样就会遇到我的那两个问题。
  难道就这么放弃 Div 方式,转而使用 Webview 这么蛋疼的方式吗?
  正当我苦恼之时,突然灵光一闪,mui-scroll-wrapper 都可以在同一个页面中初始化多次,而 pullToRefresh 是在 mui-scroll-wrapper 的 $.fn.Scroll 基础之上做的扩展,没道理不能初始化多次啊?
  于是我仔细查看了 mui.pullToRefresh.js 的源代码(顺便吐个槽,贵司的开发人员写代码时不屑于写注释么……看的这个头大……),发现第 101 行存在代码

 var element = document.querySelector('.' + CLASS_PULL_TOP_TIPS);

第 194 行存在代码

if (document.querySelector('.' + CLASS_PULL_TOP_TIPS)) {

  结合上下文来看是为了判断当前页面是否存在下拉刷新标志的,但居然是从整个文档中检索,而非对应的 mui-scroll-wrapper 内检索,怀疑此处有问题。遂将 document 改为 this.element,保存,执行。
  至此,问题解决。

收起阅读 »

plus.gallery 不能设置 header, 希望能增加样式选项

相册

plus.gallery 不能设置 header, 希望能增加样式选项

plus.gallery 不能设置 header, 希望能增加样式选项

使用HBuilder进行php调试

给单位开发个快速的项目,顺手用了HBuilder
但是坑爹的是调了半天的debug。也连接不上XDEBUG
于是乎研究之后才弄明白。
需要在视图->定制透视图中把启动里的运行和调试勾上。
不过不能勾上就在上面的选项卡里选命令,勾上运行和调试后再勾。
这样界面工具栏上就有运行和调试按钮了。
然后在运行
运行配置当中,新建一个phpwebpage
点调试。ok了。

说实话,隐藏调试按钮非常坑爹。

官网连图片都不能上传更坑爹。
强力吐槽一下。

继续阅读 »

给单位开发个快速的项目,顺手用了HBuilder
但是坑爹的是调了半天的debug。也连接不上XDEBUG
于是乎研究之后才弄明白。
需要在视图->定制透视图中把启动里的运行和调试勾上。
不过不能勾上就在上面的选项卡里选命令,勾上运行和调试后再勾。
这样界面工具栏上就有运行和调试按钮了。
然后在运行
运行配置当中,新建一个phpwebpage
点调试。ok了。

说实话,隐藏调试按钮非常坑爹。

官网连图片都不能上传更坑爹。
强力吐槽一下。

收起阅读 »

关于拍照后, 相册选完相片后, view 隐藏的问题

相册

关于拍照后, 相册选完相片后, view 隐藏的问题

现在安卓 向右侧滑出
ios 是 向底部滑出

这块我觉得应该可以自定义, 因为接下来可能需要别的 view 显示出来, 能控制最理想

关于拍照后, 相册选完相片后, view 隐藏的问题

现在安卓 向右侧滑出
ios 是 向底部滑出

这块我觉得应该可以自定义, 因为接下来可能需要别的 view 显示出来, 能控制最理想

输入法遮挡输入框问题

输入框 软键盘

PC连接手机端测试时并没有出现这个问题,但是在打包后,安装到手机端,出现了输入法遮挡输入框这个问题。
起初在考虑利用软键盘弹出的监听,监听弹出后计算软键盘高度,使输入域的高度距离底部增加出一个软键盘的高度即可。
但在实现的过程中,又觉得是滚动条影响了这个输入框的显示,所以想利用刷新滚动条的方式解决一下试试,结果是可以的。
将这段代码放在index.html下的js方法中。
代码如下:

mui('.mui-scroll-wrapper').scroll({  
bounce: true,  
indicators: true, //是否显示滚动条  
deceleration: 0.0003  
});  
mui(".mui-scroll-wrapper").scroll().refresh();

参考的实例是这个问题:http://ask.dcloud.net.cn/question/15866

继续阅读 »

PC连接手机端测试时并没有出现这个问题,但是在打包后,安装到手机端,出现了输入法遮挡输入框这个问题。
起初在考虑利用软键盘弹出的监听,监听弹出后计算软键盘高度,使输入域的高度距离底部增加出一个软键盘的高度即可。
但在实现的过程中,又觉得是滚动条影响了这个输入框的显示,所以想利用刷新滚动条的方式解决一下试试,结果是可以的。
将这段代码放在index.html下的js方法中。
代码如下:

mui('.mui-scroll-wrapper').scroll({  
bounce: true,  
indicators: true, //是否显示滚动条  
deceleration: 0.0003  
});  
mui(".mui-scroll-wrapper").scroll().refresh();

参考的实例是这个问题:http://ask.dcloud.net.cn/question/15866

收起阅读 »

compressImage, 原图2.4m 压缩后 3.5m

plus.zip.compressImage({  
    src: src,  
    dst: '_doc/avatar-tmp.png',  
    quality: '20%'  
 }, function (e) {  
    console.log(e)  
    var target = e.target;  
    createImg(target);  
 }, function (err) {  
    console.log(err)  
 });
继续阅读 »
plus.zip.compressImage({  
    src: src,  
    dst: '_doc/avatar-tmp.png',  
    quality: '20%'  
 }, function (e) {  
    console.log(e)  
    var target = e.target;  
    createImg(target);  
 }, function (err) {  
    console.log(err)  
 });
收起阅读 »

DCloud招人啦,快快投简历

招聘

作为熟悉DCloud产品的开发者,其实我们也需要你们加入。
简历投递至hr2013@dcloud.io。
如果开发过App注明自己开发过的App下载地址。

  • 前端工程师
    熟悉5+App开发,有体验良好的App案例
    3年以上工作经验 年薪:20-30w
    应届毕业生 年薪:8-10w

  • 前端实习生
    熟悉5+App开发,有良好的表达沟通能力,有充足的学习热情
    实习生 年薪:5w-8w左右

  • PHP工程师
    熟悉前端者优先,熟悉开发云服务者优先。
    4年以上经验 年薪:25-35w
    应届毕业生 年薪:10-15w

  • Android工程师
    专职Android开发经验,精通JS者优先。
    3年以上经验 年薪:30w左右
    应届毕业生 年薪:10-15w

  • iOS工程师
    专职iOS开发经验,精通JS者优先。
    3年以上经验 年薪:30w左右
    应届毕业生 年薪:10-15w

  • 软件测试工程师
    精通黑盒、白盒测试,精通自动化测试,有大型项目工作经验者优先。
    年薪:20-30w

  • 增长黑客或数据科学家
    精通数据分析和用户增长
    年薪:不限

  • 产品运营
    熟悉和喜爱产品运营,有编程经验,1年以上运营工作经验。
    年薪:20-25w

  • 销售
    与各大App厂商市场部有广泛合作关系,负责帮助App厂商推量。
    年薪:25-35w

更多福利介绍,见 http://dcloud.io/hr/

工作地点北京北三环大钟寺。

重要的事情说两遍,简历投递至hr2013@dcloud.io。

继续阅读 »

作为熟悉DCloud产品的开发者,其实我们也需要你们加入。
简历投递至hr2013@dcloud.io。
如果开发过App注明自己开发过的App下载地址。

  • 前端工程师
    熟悉5+App开发,有体验良好的App案例
    3年以上工作经验 年薪:20-30w
    应届毕业生 年薪:8-10w

  • 前端实习生
    熟悉5+App开发,有良好的表达沟通能力,有充足的学习热情
    实习生 年薪:5w-8w左右

  • PHP工程师
    熟悉前端者优先,熟悉开发云服务者优先。
    4年以上经验 年薪:25-35w
    应届毕业生 年薪:10-15w

  • Android工程师
    专职Android开发经验,精通JS者优先。
    3年以上经验 年薪:30w左右
    应届毕业生 年薪:10-15w

  • iOS工程师
    专职iOS开发经验,精通JS者优先。
    3年以上经验 年薪:30w左右
    应届毕业生 年薪:10-15w

  • 软件测试工程师
    精通黑盒、白盒测试,精通自动化测试,有大型项目工作经验者优先。
    年薪:20-30w

  • 增长黑客或数据科学家
    精通数据分析和用户增长
    年薪:不限

  • 产品运营
    熟悉和喜爱产品运营,有编程经验,1年以上运营工作经验。
    年薪:20-25w

  • 销售
    与各大App厂商市场部有广泛合作关系,负责帮助App厂商推量。
    年薪:25-35w

更多福利介绍,见 http://dcloud.io/hr/

工作地点北京北三环大钟寺。

重要的事情说两遍,简历投递至hr2013@dcloud.io。

收起阅读 »

mui等待雪花修改

有时候为了配套我们的应用颜色,使App看起来风格一致,我们需要修改等待wating样式,具体怎么做呢其实很简单。
<script>
mui.plusReady(function(){
plus.nativeUI.showWaiting( "", {background:"rgba(0,255,0,0.8)",style:"black"} );
})
</script>
这样就搞定了,参数都有哪些呢?我列举如下:
width: (String 类型 )等待框背景区域的宽度
值支持像素值("500px")或百分比("50%"),百分比相对于屏幕的宽计算,如果不设置则根据内容自动计算合适的宽度。

height: (String 类型 )等待框背景区域的高度
值支持像素绝对值("500px")或百分比("50%"),如果不设置则根据内容自动计算合适的高度。

color: (String 类型 )等待框中文字的颜色
颜色值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值,默认值为白色。

textalign: (String 类型 )等待对话框中标题文字的水平对齐方式
对齐方式可选值包括:"left":水平居左对齐显示,"center":水平居中对齐显示,"right":水平居右对齐显示。默认值为水平居中对齐显示,即"center"。

padding: (String 类型 )等待对话框的内边距
值支持像素值("10px")和百分比("5%"),百分比相对于屏幕的宽计算,默认值为"3%"。

background: (String 类型 )等待对话框显示区域的背景色
背景色的值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值,默认值为rgba(0,0,0,0.8)。

style: (String 类型 )等待对话框样式
可取值"black"、"white",black表示等待框为黑色雪花样式,通常在背景主色为浅色时使用;white表示等待框为白色雪花样式,通常在背景主色为深色时使用。 仅在iOS平台有效,其它平台忽略此值,未设置时默认值为white。

平台支持
Android - 2.3 (不支持): 忽略此属性值。
iOS - 4.5 (支持): 支持"black"、"white"两种样式。
modal: (Boolen 类型 )等待框是否模态显示
模态显示时用户不可操作直到等待对话框关闭,否则用户在等待对话框显示时也可操作下面的内容,未设置时默认为true。

round: (Number 类型 )等待框显示区域的圆角
值支持像素值("10px"),未设置时使用默认值"10px"。

padlock: (Boolen 类型 )点击等待显示区域是否自动关闭
true表示点击等待对话框显示区域时自动关闭,false则不关闭,未设置时默认值为false。

继续阅读 »

有时候为了配套我们的应用颜色,使App看起来风格一致,我们需要修改等待wating样式,具体怎么做呢其实很简单。
<script>
mui.plusReady(function(){
plus.nativeUI.showWaiting( "", {background:"rgba(0,255,0,0.8)",style:"black"} );
})
</script>
这样就搞定了,参数都有哪些呢?我列举如下:
width: (String 类型 )等待框背景区域的宽度
值支持像素值("500px")或百分比("50%"),百分比相对于屏幕的宽计算,如果不设置则根据内容自动计算合适的宽度。

height: (String 类型 )等待框背景区域的高度
值支持像素绝对值("500px")或百分比("50%"),如果不设置则根据内容自动计算合适的高度。

color: (String 类型 )等待框中文字的颜色
颜色值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值,默认值为白色。

textalign: (String 类型 )等待对话框中标题文字的水平对齐方式
对齐方式可选值包括:"left":水平居左对齐显示,"center":水平居中对齐显示,"right":水平居右对齐显示。默认值为水平居中对齐显示,即"center"。

padding: (String 类型 )等待对话框的内边距
值支持像素值("10px")和百分比("5%"),百分比相对于屏幕的宽计算,默认值为"3%"。

background: (String 类型 )等待对话框显示区域的背景色
背景色的值支持(参考CSS颜色规范):颜色名称(参考CSS Color Names)/十六进制值/rgb值/rgba值,默认值为rgba(0,0,0,0.8)。

style: (String 类型 )等待对话框样式
可取值"black"、"white",black表示等待框为黑色雪花样式,通常在背景主色为浅色时使用;white表示等待框为白色雪花样式,通常在背景主色为深色时使用。 仅在iOS平台有效,其它平台忽略此值,未设置时默认值为white。

平台支持
Android - 2.3 (不支持): 忽略此属性值。
iOS - 4.5 (支持): 支持"black"、"white"两种样式。
modal: (Boolen 类型 )等待框是否模态显示
模态显示时用户不可操作直到等待对话框关闭,否则用户在等待对话框显示时也可操作下面的内容,未设置时默认为true。

round: (Number 类型 )等待框显示区域的圆角
值支持像素值("10px"),未设置时使用默认值"10px"。

padlock: (Boolen 类型 )点击等待显示区域是否自动关闭
true表示点击等待对话框显示区域时自动关闭,false则不关闭,未设置时默认值为false。

收起阅读 »

【新手探索】 - 导入Github上的项目

Git

Git小小白,试了试Hbuilder的git共享和import项目。

有错请放开指☞!

总体步骤如下:

1. Copy URL From Github

2. 工具栏 - 文件 - 导入,或空白处右键

3. 选择 【Projects form git】

4. 选择 【URI】

5. 【Location】 这一栏应该会自动填充Copy的URL, 继续下一步

6. 【Branch Selection】 默认即可

7. 选择目录,或者默认即可。

8. 选择第一项 【Import existing projects】 , 下一步

9. 选择要导入的项目, 点击【完成】

10. 【当当当当】, ok咯

引用@DCloud_heavensoft 的补充:

导入app项目时,默认git下来的还是普通web项目,此时需要对工程点右键,在项目属性界面里把项目类型从web项目改为app项目。

即如下图(Hbuilder版本号6.9.2):

属性设置:

正在看:

继续阅读 »

Git小小白,试了试Hbuilder的git共享和import项目。

有错请放开指☞!

总体步骤如下:

1. Copy URL From Github

2. 工具栏 - 文件 - 导入,或空白处右键

3. 选择 【Projects form git】

4. 选择 【URI】

5. 【Location】 这一栏应该会自动填充Copy的URL, 继续下一步

6. 【Branch Selection】 默认即可

7. 选择目录,或者默认即可。

8. 选择第一项 【Import existing projects】 , 下一步

9. 选择要导入的项目, 点击【完成】

10. 【当当当当】, ok咯

引用@DCloud_heavensoft 的补充:

导入app项目时,默认git下来的还是普通web项目,此时需要对工程点右键,在项目属性界面里把项目类型从web项目改为app项目。

即如下图(Hbuilder版本号6.9.2):

属性设置:

正在看:

收起阅读 »

基于plus.downloader的图片懒加载功能,支持本地缓存

基于plus.downloader的图片懒加载功能,支持本地缓存

如果有样式问题的话,请移步至http://www.cnblogs.com/phillyx/p/4649128.html

简单说一下

在app中,对一些变动不频繁的图片数据(如个人头像等),是需要存储在本地的。我相信这对大多数的app都是强需求的。  

怎么使用呢

img标签默认都有data-src属性,用来存放网络链接,src属性初始是最好给一个默认本地图片链接,下载好会自动替换掉

<img data-src="远程链接" src="默认图片">
  1. 如果在列表中,通过下拉刷新、上拉刷新加载数据,加载下一页的时候可以如下做:
    一次新增多条数据时,为避免重复渲染页面及重新下载正在下载中的图片等问题,新增的img要设置data-pageno属性,如下使用arttemplate写的模板

    <script id="tmpl" type="text/html">  
    {{each items as item i}}  
            <li class="mui-table-view-cell" data-id='{{item.id}}'>  
              <img data-src="{{item.url}}" data-pageno="{{item.pageno}}" src="img/default.png">  
            </li>  
    {{/each}}  
    </script>

    在js中怎么用呢

    var html = template('tmpl', data);  
    document.querySelector("#pullrefresh").innerHTML  = html;  
    lazyImg.pageno=data.pageno;  
    lazyImg.lazyLoad();
  2. 如果不需要分页或者零散的数据,直接添加lazy类就可以了

    <img data-src="远程链接" src="默认图片" class="lazy">

    然后直接调用lazyImg.lazyLoad()就可以了

注意

lazyimg.js是结合cache.js一齐使用的,代码都已提交至github
地址在https://github.com/phillyx/MUIDemos/tree/master/js/lazyimg.js
也可直接使用合并后的代码https://github.com/phillyx/MUIDemos/tree/master/dist/common.js

继续阅读 »

基于plus.downloader的图片懒加载功能,支持本地缓存

如果有样式问题的话,请移步至http://www.cnblogs.com/phillyx/p/4649128.html

简单说一下

在app中,对一些变动不频繁的图片数据(如个人头像等),是需要存储在本地的。我相信这对大多数的app都是强需求的。  

怎么使用呢

img标签默认都有data-src属性,用来存放网络链接,src属性初始是最好给一个默认本地图片链接,下载好会自动替换掉

<img data-src="远程链接" src="默认图片">
  1. 如果在列表中,通过下拉刷新、上拉刷新加载数据,加载下一页的时候可以如下做:
    一次新增多条数据时,为避免重复渲染页面及重新下载正在下载中的图片等问题,新增的img要设置data-pageno属性,如下使用arttemplate写的模板

    <script id="tmpl" type="text/html">  
    {{each items as item i}}  
            <li class="mui-table-view-cell" data-id='{{item.id}}'>  
              <img data-src="{{item.url}}" data-pageno="{{item.pageno}}" src="img/default.png">  
            </li>  
    {{/each}}  
    </script>

    在js中怎么用呢

    var html = template('tmpl', data);  
    document.querySelector("#pullrefresh").innerHTML  = html;  
    lazyImg.pageno=data.pageno;  
    lazyImg.lazyLoad();
  2. 如果不需要分页或者零散的数据,直接添加lazy类就可以了

    <img data-src="远程链接" src="默认图片" class="lazy">

    然后直接调用lazyImg.lazyLoad()就可以了

注意

lazyimg.js是结合cache.js一齐使用的,代码都已提交至github
地址在https://github.com/phillyx/MUIDemos/tree/master/js/lazyimg.js
也可直接使用合并后的代码https://github.com/phillyx/MUIDemos/tree/master/dist/common.js

收起阅读 »

MUI - 封装localStorage与plus.storage

Storage

更好的预览效果看这http://www.cnblogs.com/phillyx/p/4761364.html
在使用plus.storage频繁地存取数据时,可以感觉到明显的卡顿,而且很耗内存,
在切换到localstorage时虽然效率很高,页面渲染速度明显变快了,且手机发热不明显,不过又遇到了存储瓶颈(一般<=5M),
因此折中采取了plus.storage与localStorage混合的方案:
当localStorage达到存储瓶颈时切换到plus.storage

封装的方法基本上和plus.storage没区别。关于plus.storage参考http://www.html5plus.org/doc/zh_cn/storage.html

接口

  1. getItem
    通过键key检索获取应用存储的值

    var item=myStorage.getItem(key);
    • 参数key: DOMString必选
      存储的键值
    • 返回值DOMString : 键key对应应用存储的值,如果没有则返回null
    • 说明:方法内部默认先从localStorage取值,没有再从plus.Storage取值
  2. setItem
    修改或添加键值(key-value)对数据到应用数据存储中

    void myStorage.setItem(key, value);
    • 说明:方法默认将数据存储在localStorage中,超出localStorage容量限制则存到plus.storage
  3. getLength
    获取localStorage中保存的键值对的个数

    var len=myStorage.getLength();
  4. getLengthPlus
    获取plus.storage中保存的键值对的个数

  5. removeItem
    通过key值删除键值对存储的数据

    void myStorage.removeItem();
  6. clear
    清除应用所有的键值对存储数据

    void myStorage.clear();
  7. key
    获取localStorage键值对中指定索引值的key值

    var foo = myStorage.key(index);
  8. keyPlus
    获取plus.storage键值对中指定索引值的key值

    var foo = myStorage.keyPlus(index);
  9. getItemByIndex
    通过键key检索获取应用存储localStorage的值

    var item=myStorage.getItemByIndex(index);
    • 参数index: Number必选 存储键值的索引
    • 返回值DOMString : 键key对应应用存储的值,如果没有则返回null
  10. getItemByIndexPlus
    通过键key检索获取应用存储的值

    var item=myStorage.getItemByIndexPlus(index);
    • 参数index: Number必选 存储键值的索引
    • 返回值DOMString : 键key对应应用存储的值,如果没有则返回null
  11. getItems
    通过键key检索获取应用存储的值

    var items=myStorage.getItems(key)
    • 参数 key: Number可选 存储键值的索引
    • 返回值Array:不传key参则返回所有对象,否则返回含有该key的对象
  12. removeItemByKeys
    清除指定前缀的存储对象

    void myStorage.removeItemBykeys(keys,cb)
    • 参数keysDOMStringArray, 必选 keysString,方法内部自动转换为Array
    • 参数cbFunction 可选 回调函数

说明

以上方法经常用到的还是getItem setItem
getItems在测试或控制台查看时倒是偶尔用得到
removeItemBykeys是结合本地文件common.cache.clear缓存清除时一齐使用的


代码已分享到github
地址在https://github.com/phillyx/MUIDemos/tree/master/js/myStorage.js
也可直接使用压缩后的代码https://github.com/phillyx/MUIDemos/tree/master/dist/common.js

继续阅读 »

更好的预览效果看这http://www.cnblogs.com/phillyx/p/4761364.html
在使用plus.storage频繁地存取数据时,可以感觉到明显的卡顿,而且很耗内存,
在切换到localstorage时虽然效率很高,页面渲染速度明显变快了,且手机发热不明显,不过又遇到了存储瓶颈(一般<=5M),
因此折中采取了plus.storage与localStorage混合的方案:
当localStorage达到存储瓶颈时切换到plus.storage

封装的方法基本上和plus.storage没区别。关于plus.storage参考http://www.html5plus.org/doc/zh_cn/storage.html

接口

  1. getItem
    通过键key检索获取应用存储的值

    var item=myStorage.getItem(key);
    • 参数key: DOMString必选
      存储的键值
    • 返回值DOMString : 键key对应应用存储的值,如果没有则返回null
    • 说明:方法内部默认先从localStorage取值,没有再从plus.Storage取值
  2. setItem
    修改或添加键值(key-value)对数据到应用数据存储中

    void myStorage.setItem(key, value);
    • 说明:方法默认将数据存储在localStorage中,超出localStorage容量限制则存到plus.storage
  3. getLength
    获取localStorage中保存的键值对的个数

    var len=myStorage.getLength();
  4. getLengthPlus
    获取plus.storage中保存的键值对的个数

  5. removeItem
    通过key值删除键值对存储的数据

    void myStorage.removeItem();
  6. clear
    清除应用所有的键值对存储数据

    void myStorage.clear();
  7. key
    获取localStorage键值对中指定索引值的key值

    var foo = myStorage.key(index);
  8. keyPlus
    获取plus.storage键值对中指定索引值的key值

    var foo = myStorage.keyPlus(index);
  9. getItemByIndex
    通过键key检索获取应用存储localStorage的值

    var item=myStorage.getItemByIndex(index);
    • 参数index: Number必选 存储键值的索引
    • 返回值DOMString : 键key对应应用存储的值,如果没有则返回null
  10. getItemByIndexPlus
    通过键key检索获取应用存储的值

    var item=myStorage.getItemByIndexPlus(index);
    • 参数index: Number必选 存储键值的索引
    • 返回值DOMString : 键key对应应用存储的值,如果没有则返回null
  11. getItems
    通过键key检索获取应用存储的值

    var items=myStorage.getItems(key)
    • 参数 key: Number可选 存储键值的索引
    • 返回值Array:不传key参则返回所有对象,否则返回含有该key的对象
  12. removeItemByKeys
    清除指定前缀的存储对象

    void myStorage.removeItemBykeys(keys,cb)
    • 参数keysDOMStringArray, 必选 keysString,方法内部自动转换为Array
    • 参数cbFunction 可选 回调函数

说明

以上方法经常用到的还是getItem setItem
getItems在测试或控制台查看时倒是偶尔用得到
removeItemBykeys是结合本地文件common.cache.clear缓存清除时一齐使用的


代码已分享到github
地址在https://github.com/phillyx/MUIDemos/tree/master/js/myStorage.js
也可直接使用压缩后的代码https://github.com/phillyx/MUIDemos/tree/master/dist/common.js

收起阅读 »