HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

关于个推分享功能的经验总结

个推 推送 Push

由于相关的文档冗杂,社区、QQ群互动差,完全是一步一个坑爬过来,稍微做个总结。后续开发中也可以给自己理个思路,欢迎指正。

安卓端

安卓端暂不考虑推送进程被系统杀除的情况(其实我无解)。开发的这个是新闻类的应用,所以推送的应用场景大多数在点击消息通知后跳转至新闻情况页。
无论应用离线或在线的情况下只要使用标准的透传消息格式即可成功,应用中只需要监听click写相关事件即可。标准的透传格式为

{title:"通知标题",content:"通知内容",payload:"通知去干嘛这里可以自定义"}

不符合以上格式的推送内容则会触发receive事件,安卓端上只要推送的工作人员注意就不会有问题。

iOS端

iOS端应用推送的时候分两个场景,分别是:

  1. 应用在线 应用在线的情况下实测收不到APNS下发的通知。推送之后需要在receive中本地创建一条推送通知,看很多开发者是使用confirm提醒用户的,我这边做了一个toast+提示音的方式提醒用户有新通知。个推平台上填写时必填内容填一下,“消息内容”中填写
    {"content":"需要推送的标题","payload":"传值用"}

    客户端上处理一下数据就可以了。

  2. 应用离线 应用离线的情况下可以收到APNS下发的通知。离线推送的时候需要注意一下非必填项也需要填写一下,不然客户端会发生有震动有声音但是通知不显示的情况。这时候的消息内容中填写payload的值,在body里直接填写要显示的标题就可以了。

必看

一、 参数配置 《推送开发指南》中有详情介绍,这点不阐述,申请完个推账户,将新建的应用参数填写到manifest.json中即可
二、 注意事项

  1. iOS推送的时候只支持content,原先安卓中填写的title默认为应用名称。
  2. 应用在线时推送的消息由于是本地创建的会再触发receive事件,发生循环创建消息导致应用闪退的问题。所以首次receive事件触发并创建本地消息的同时需要在payload里携带一个参数用以区分。
  3. iOS推送测试的时候一定要把推送的证书上传到个推上,不然无法接收到APNS消息的。 打包的时候不要把和个推上已经上传的推送证书搞错了。
继续阅读 »

由于相关的文档冗杂,社区、QQ群互动差,完全是一步一个坑爬过来,稍微做个总结。后续开发中也可以给自己理个思路,欢迎指正。

安卓端

安卓端暂不考虑推送进程被系统杀除的情况(其实我无解)。开发的这个是新闻类的应用,所以推送的应用场景大多数在点击消息通知后跳转至新闻情况页。
无论应用离线或在线的情况下只要使用标准的透传消息格式即可成功,应用中只需要监听click写相关事件即可。标准的透传格式为

{title:"通知标题",content:"通知内容",payload:"通知去干嘛这里可以自定义"}

不符合以上格式的推送内容则会触发receive事件,安卓端上只要推送的工作人员注意就不会有问题。

iOS端

iOS端应用推送的时候分两个场景,分别是:

  1. 应用在线 应用在线的情况下实测收不到APNS下发的通知。推送之后需要在receive中本地创建一条推送通知,看很多开发者是使用confirm提醒用户的,我这边做了一个toast+提示音的方式提醒用户有新通知。个推平台上填写时必填内容填一下,“消息内容”中填写
    {"content":"需要推送的标题","payload":"传值用"}

    客户端上处理一下数据就可以了。

  2. 应用离线 应用离线的情况下可以收到APNS下发的通知。离线推送的时候需要注意一下非必填项也需要填写一下,不然客户端会发生有震动有声音但是通知不显示的情况。这时候的消息内容中填写payload的值,在body里直接填写要显示的标题就可以了。

必看

一、 参数配置 《推送开发指南》中有详情介绍,这点不阐述,申请完个推账户,将新建的应用参数填写到manifest.json中即可
二、 注意事项

  1. iOS推送的时候只支持content,原先安卓中填写的title默认为应用名称。
  2. 应用在线时推送的消息由于是本地创建的会再触发receive事件,发生循环创建消息导致应用闪退的问题。所以首次receive事件触发并创建本地消息的同时需要在payload里携带一个参数用以区分。
  3. iOS推送测试的时候一定要把推送的证书上传到个推上,不然无法接收到APNS消息的。 打包的时候不要把和个推上已经上传的推送证书搞错了。
收起阅读 »

vue&html5+开发app demo

HTML5+ Vue

jd.aiplat.com
imei.aiplat.com

jd.aiplat.com
imei.aiplat.com

vue&html5+开发app 实例

HTML5+ Vue

亲信地铁
http://aiplat.com/#/apps.html
android用户到腾讯应用宝搜索‘亲信地铁’下载APP体验
ios用户到appstore搜索‘亲信地铁’下载APP体验。

亲信地铁
http://aiplat.com/#/apps.html
android用户到腾讯应用宝搜索‘亲信地铁’下载APP体验
ios用户到appstore搜索‘亲信地铁’下载APP体验。

qq分享失败的

分享qq时出现{"message":"[ShareQQ:5]未知错误,http://ask.dcloud.net.cn/article/287","code":-100}
其中原因之一是title为空


处理方法可以为msg.title = shareTitle==''?'分享':shareTitle;

附加:微博分享失败的解决方法,在红框下的那句代码。
希望跟我遇到同样的问题的童鞋们有帮助!

继续阅读 »

分享qq时出现{"message":"[ShareQQ:5]未知错误,http://ask.dcloud.net.cn/article/287","code":-100}
其中原因之一是title为空


处理方法可以为msg.title = shareTitle==''?'分享':shareTitle;

附加:微博分享失败的解决方法,在红框下的那句代码。
希望跟我遇到同样的问题的童鞋们有帮助!

收起阅读 »

求收留,想找一份在广州的前端实习生工作

html HTML5 求职 技术支持
   本人18年应届毕业生,大专学历,想在广州找一份前端实习生的工作,对工资没有强烈要求(期待2k+),喜欢安稳,如果可以我原意实习期结束后继续留在公司。  
   之所以这么窘迫.....唉,说起来都是泪  
   之前有企业来我们学校校招,我一直保持观望,直到OPPO出现。高工资,高福利,好的平台,宣讲会结束我就想是被洗脑,尤其是招聘岗位括号里的“专业不限”撩拨我心。我就一咬牙,一跺脚,提交了简历,参加了笔试。哦,这个笔试跟任何专业都不相关,就是一点心理题目跟逻辑题目。然后群面,单面一路绿灯简直顺利得不像话。  
   因为有亲戚在广州,而且OPPO各方面条件都很优越,尤其是他们其他行程都是本科院校,我们学校是唯一一所专科(长沙民政),所以对于学历不够的我来说,简直致命,我脑子一热,放弃了其他岗位,毅然来到广州,来从事一个与我专业差了十万八千里的职业——区域业务。  
   但是.......因为各种原因,来到这边我就迟疑了,这个OPPO并不是生产手机的那个OPPO,而是一家销售公司,叫平实.....OPPO手机高价低配导致我个人内心有点抗拒......balabala这些,我就离开了。  
   这是个很尴尬的时间的,离过年吧还有一个多月,学校的同学都找到实习出去了,又不好一直住在亲戚家,在智联,51job,拉钩投了不少简历,奈何碰上元旦假期,正儿八经的公司没人理我,理我的全是培训机构,心里苦啊。  
   再说一下我专业的问题,我是软件开发专业的,前端跟JAVA是我主要课程,但是吧......能跑去做销售......也能知道我专业水平也就一般般,甚至可以用差来形容,加上长时间不接触。好在我对前端兴趣比较高,也想以后在前端上有所发展,而且我认为我目前接触到的前端知识还是比较容易掌握的,所以我想我能够在实习期间边做变学,尽量弥补之前的差距。而且因为之前的工作,我已经办理了离校手续,可以全职上班。  
   心里着急啊,实在是走投无路了,迫不得已才在论坛发这种帖子.......见谅
继续阅读 »
   本人18年应届毕业生,大专学历,想在广州找一份前端实习生的工作,对工资没有强烈要求(期待2k+),喜欢安稳,如果可以我原意实习期结束后继续留在公司。  
   之所以这么窘迫.....唉,说起来都是泪  
   之前有企业来我们学校校招,我一直保持观望,直到OPPO出现。高工资,高福利,好的平台,宣讲会结束我就想是被洗脑,尤其是招聘岗位括号里的“专业不限”撩拨我心。我就一咬牙,一跺脚,提交了简历,参加了笔试。哦,这个笔试跟任何专业都不相关,就是一点心理题目跟逻辑题目。然后群面,单面一路绿灯简直顺利得不像话。  
   因为有亲戚在广州,而且OPPO各方面条件都很优越,尤其是他们其他行程都是本科院校,我们学校是唯一一所专科(长沙民政),所以对于学历不够的我来说,简直致命,我脑子一热,放弃了其他岗位,毅然来到广州,来从事一个与我专业差了十万八千里的职业——区域业务。  
   但是.......因为各种原因,来到这边我就迟疑了,这个OPPO并不是生产手机的那个OPPO,而是一家销售公司,叫平实.....OPPO手机高价低配导致我个人内心有点抗拒......balabala这些,我就离开了。  
   这是个很尴尬的时间的,离过年吧还有一个多月,学校的同学都找到实习出去了,又不好一直住在亲戚家,在智联,51job,拉钩投了不少简历,奈何碰上元旦假期,正儿八经的公司没人理我,理我的全是培训机构,心里苦啊。  
   再说一下我专业的问题,我是软件开发专业的,前端跟JAVA是我主要课程,但是吧......能跑去做销售......也能知道我专业水平也就一般般,甚至可以用差来形容,加上长时间不接触。好在我对前端兴趣比较高,也想以后在前端上有所发展,而且我认为我目前接触到的前端知识还是比较容易掌握的,所以我想我能够在实习期间边做变学,尽量弥补之前的差距。而且因为之前的工作,我已经办理了离校手续,可以全职上班。  
   心里着急啊,实在是走投无路了,迫不得已才在论坛发这种帖子.......见谅
收起阅读 »

投入更多资源的付费技术服务,帮助开发者更成功

付费 技术支持

付费技术支持不是DCloud的商业模式。

因为DCloud的人工比较贵,如果开发者自己或通过插件作者能解决问题,肯定比找DCloud付费解决问题性价比更高。

但考虑到很多开发者真的有高优先需求,或者有些政企单位,对保障的需求大于对低成本的需求。

那么,可以使用DCloud的点对点付费技术支持。

DCloud的付费技术支持不会低于1000元,如果是原生相关的问题,可能更贵。具体需要开发者把问题详细描述出来后,DCloud来评估。

申请方式:点此咨询

提问时一定要把问题说清楚,哪个平台、什么版本和环境。

继续阅读 »

付费技术支持不是DCloud的商业模式。

因为DCloud的人工比较贵,如果开发者自己或通过插件作者能解决问题,肯定比找DCloud付费解决问题性价比更高。

但考虑到很多开发者真的有高优先需求,或者有些政企单位,对保障的需求大于对低成本的需求。

那么,可以使用DCloud的点对点付费技术支持。

DCloud的付费技术支持不会低于1000元,如果是原生相关的问题,可能更贵。具体需要开发者把问题详细描述出来后,DCloud来评估。

申请方式:点此咨询

提问时一定要把问题说清楚,哪个平台、什么版本和环境。

收起阅读 »

上拉加载,滚条回到顶部

最近用到同页面多上下拉加载,参考样例,使用了样式引用的mui.pullToRefresh.js和mui.pullToRefresh.material.js这两个js文件。并没有使用mui原本里面的方法。后来涉及两个问题,一个是重置上下拉的问题,一个是回到顶部的问题。
第一个问题:上下拉重置,这个比较简单,callback返回函数时,this.refresh(true)。 搞定。根据实际情况有可能调用ajax,此时可以保留this成员或者传参进去进行使用。
第二个问题:mui.pullToRefresh.js里面有个refresh方法,也重置上下拉方法,在里面的最后一行加上$(this.element.parentNode).scroll().refresh();即可解决重置上下拉的同时回到顶部(若有需要),至于parentNode是哪个元素可自行测试查看(建议对于不懂为何可以操作滚条重置的可以看看)。
如果需要独立出来,则可自行新建方行加上上面那句代码。
以上经测试皆无问题。

继续阅读 »

最近用到同页面多上下拉加载,参考样例,使用了样式引用的mui.pullToRefresh.js和mui.pullToRefresh.material.js这两个js文件。并没有使用mui原本里面的方法。后来涉及两个问题,一个是重置上下拉的问题,一个是回到顶部的问题。
第一个问题:上下拉重置,这个比较简单,callback返回函数时,this.refresh(true)。 搞定。根据实际情况有可能调用ajax,此时可以保留this成员或者传参进去进行使用。
第二个问题:mui.pullToRefresh.js里面有个refresh方法,也重置上下拉方法,在里面的最后一行加上$(this.element.parentNode).scroll().refresh();即可解决重置上下拉的同时回到顶部(若有需要),至于parentNode是哪个元素可自行测试查看(建议对于不懂为何可以操作滚条重置的可以看看)。
如果需要独立出来,则可自行新建方行加上上面那句代码。
以上经测试皆无问题。

收起阅读 »

模仿 “流应用管理器” 功能

外包

想自己部署一个我们内部使用的“流应用管理器” 上面都是我们自己的程序。 也就是说需要基于现在的“流应用管理器”进行改造 不知道有没有人能仿造的了 价格不是问题
能做的留下方式

想自己部署一个我们内部使用的“流应用管理器” 上面都是我们自己的程序。 也就是说需要基于现在的“流应用管理器”进行改造 不知道有没有人能仿造的了 价格不是问题
能做的留下方式

新窗口&子页面

Webview plus h5+

如果是第一次制作混合app的话,我觉得第一个比较重要的事情是打包,把之前写的页面以一个app的方式呈现出来,会是一件非常令人兴奋的事情。
其次比较重要的事情是窗口的概念。

这里有一个教程,窗口一窗口二,不是我录的……咳咳,其实我也没看。。。。
这个是mui对于窗口的解释:mui窗口

首先,打开新页面,好几种方式;

  1. 使用a连接的href属性,官方不推荐,我也没有研究
  2. 使用plus.webview.open() 简单的open新窗口
  3. 使用plus.webview.create().show(),经检验,这个方法最靠谱,兼容性很高,在安卓4.4以下可以完美兼容,而且可以定义extras//额外扩展参数

最后,子页面。
其实子页面是一个非常有意思的东西。
普通的html中div可以随意的定位和更改显示层级,js也可以随意的更改这个页面的数据和dom。其实,只使用普通的html制作混合app也是可以的
然后,子页面可以理解为一个普通页面的普通div。只是这个div很特别,它是一个自治区,父界面的话(js,css)它听或者不听,完全看它自己的心情。甚至父页面出现滚动条,子页面也不一定随着滚动条滚动。如果之前学习过vue的话,他的子组件的概念和子页面的概念是非常像的。

为什么使用子页面,效率和布局。
效率,官方解释说,某个html的dom树过深的话,会引发卡顿。切割为不同的子页面会更好,我没有测试过,不知道具体的数值,不过应该是真的,但是效率绝对不会低太多,现在手机的cpu我觉得还是可以的。
布局,现在版本的H5 ,优化的还是比较好的。对于布局挺好的。这个地方需要讲的东西太多,说了也没用。太杂了。
声明子页面:plus.webview.getWebviewById().append(plus.webview.create());

需要特别注意的地方:

  1. 作用域:子页面拥有独立的作用域。这个好理解,都已经是html级别了,当然有自己的作用域
  2. 传值:父子页面间的传值可以通过plus.webview.getWebviewById().evalJS();或者在子页面创建的时候,定义extras属性,后期可以直接当作dom自定义属性点出来。
  3. 归属权:父页面关闭的时候,子页面跟着关闭。其余的事情包括show,close,hide,setStyle,都是自己玩自己的。
  4. 获取当前页面: plus.webview.currentWebview();在安卓4.4,及以下,这个属性显示的是当前正在显示的页面,在其余版本,获取的是本身所在的html
  5. 显示级别:子页面的显示优先级永远高于父页面本身的dom的优先级。//上帝视角?
继续阅读 »

如果是第一次制作混合app的话,我觉得第一个比较重要的事情是打包,把之前写的页面以一个app的方式呈现出来,会是一件非常令人兴奋的事情。
其次比较重要的事情是窗口的概念。

这里有一个教程,窗口一窗口二,不是我录的……咳咳,其实我也没看。。。。
这个是mui对于窗口的解释:mui窗口

首先,打开新页面,好几种方式;

  1. 使用a连接的href属性,官方不推荐,我也没有研究
  2. 使用plus.webview.open() 简单的open新窗口
  3. 使用plus.webview.create().show(),经检验,这个方法最靠谱,兼容性很高,在安卓4.4以下可以完美兼容,而且可以定义extras//额外扩展参数

最后,子页面。
其实子页面是一个非常有意思的东西。
普通的html中div可以随意的定位和更改显示层级,js也可以随意的更改这个页面的数据和dom。其实,只使用普通的html制作混合app也是可以的
然后,子页面可以理解为一个普通页面的普通div。只是这个div很特别,它是一个自治区,父界面的话(js,css)它听或者不听,完全看它自己的心情。甚至父页面出现滚动条,子页面也不一定随着滚动条滚动。如果之前学习过vue的话,他的子组件的概念和子页面的概念是非常像的。

为什么使用子页面,效率和布局。
效率,官方解释说,某个html的dom树过深的话,会引发卡顿。切割为不同的子页面会更好,我没有测试过,不知道具体的数值,不过应该是真的,但是效率绝对不会低太多,现在手机的cpu我觉得还是可以的。
布局,现在版本的H5 ,优化的还是比较好的。对于布局挺好的。这个地方需要讲的东西太多,说了也没用。太杂了。
声明子页面:plus.webview.getWebviewById().append(plus.webview.create());

需要特别注意的地方:

  1. 作用域:子页面拥有独立的作用域。这个好理解,都已经是html级别了,当然有自己的作用域
  2. 传值:父子页面间的传值可以通过plus.webview.getWebviewById().evalJS();或者在子页面创建的时候,定义extras属性,后期可以直接当作dom自定义属性点出来。
  3. 归属权:父页面关闭的时候,子页面跟着关闭。其余的事情包括show,close,hide,setStyle,都是自己玩自己的。
  4. 获取当前页面: plus.webview.currentWebview();在安卓4.4,及以下,这个属性显示的是当前正在显示的页面,在其余版本,获取的是本身所在的html
  5. 显示级别:子页面的显示优先级永远高于父页面本身的dom的优先级。//上帝视角?
收起阅读 »

wap2app引导页的简单制作

引导页 wap2app

许多开发者在开发wap2app时,都提出了引导页如何制作的问题,其实wap2app的引导页和普通5+app的做法是一样的。
5+app的引导页制作

具体实现

1.在client_index.html页面添加如下代码:

<script type="text/javascript">  
    if(window.plus){  
        plusReady()  
    }else{  
        document.addEventListener('plusready',plusReady,false)  
    }  
    function plusReady(){//这里是每次进入应用都会显示引导页,开发中要如何显示引导页视具体的情况而定。  
        var guide = plus.webview.create('guide/guide.html',"guide");  
        guide.show();  
    }  
</script>

2.在manifest.json->splash配置:启动选项改为手动关闭启动界面;
3.引导页guide.html:这个页面需要做到plusready后关闭splash,在引导结束后关闭引导页,开发时可使用mui的引导页看看效果。

注意:

1.由于采用了手动关闭splash的选项,所以如果进来的时候没有打开guide.html,那么需要在client_index.html里调用5+方法关闭splash;
2.在guide页面的back逻辑默认是wap2app的首页返回逻辑,即双击back退出应用,开发者可根据实际需求自己监听back,重写逻辑。

继续阅读 »

许多开发者在开发wap2app时,都提出了引导页如何制作的问题,其实wap2app的引导页和普通5+app的做法是一样的。
5+app的引导页制作

具体实现

1.在client_index.html页面添加如下代码:

<script type="text/javascript">  
    if(window.plus){  
        plusReady()  
    }else{  
        document.addEventListener('plusready',plusReady,false)  
    }  
    function plusReady(){//这里是每次进入应用都会显示引导页,开发中要如何显示引导页视具体的情况而定。  
        var guide = plus.webview.create('guide/guide.html',"guide");  
        guide.show();  
    }  
</script>

2.在manifest.json->splash配置:启动选项改为手动关闭启动界面;
3.引导页guide.html:这个页面需要做到plusready后关闭splash,在引导结束后关闭引导页,开发时可使用mui的引导页看看效果。

注意:

1.由于采用了手动关闭splash的选项,所以如果进来的时候没有打开guide.html,那么需要在client_index.html里调用5+方法关闭splash;
2.在guide页面的back逻辑默认是wap2app的首页返回逻辑,即双击back退出应用,开发者可根据实际需求自己监听back,重写逻辑。

收起阅读 »

启动广告

plus h5+

最开始使用H5+开发混合app 的时候,是没有webview和NativeObj概念的,甚至app启动加载顺序也不知道的,公司也没有老师可以请教,当时的确废了很多周章。

1、用户点击app图标>>

2、展示启动页(在app项目的mainfest.json中配置)(这个过程很短,根据手机性能不同而不同)>>

3、展示index.html,执行index里边的js。(启动完成)

因为:> 如果index的js比较复杂,或者加载的图片比较多,会出现比较长的空白;
所以要尽量减少index的内容。所以启动广告应运而生。//其实现在的手机性能都比较不错,启动广告存在的意义,也就是为了挣钱了。

http://ask.dcloud.net.cn/article/1330 这个是启动加速的,良心帖子

启动广告制作:


function plusReady(a){  
    if(window.plus){  
        a();  
    }else{  
        document.addEventListener('plusready', a, false);  
    }  
}  

plusReady(function(){  
plus.navigator.closeSplashscreen();//干掉启动页  

//声明  
    var view = new plus.nativeObj.View("Splashscreen", {  
                    top: 0,  
                    left: 0,  
                    bottom: 0,  
                    width: plus.screen.resolutionWidth,  
                    height: plus.screen.resolutionHeight  
                });  

//添加图片  
    if(plus.storage.getItem("SplashscreenSrc")){  
        view.drawBitmap(plus.storage.getItem("SplashscreenSrc"), {}, {}, "");                     
    }else{  
        view.drawBitmap("img/mmm.png", {}, {}, "");  
    }  

//显示  
view.show();  
setTimeout(function() {  
    if(view){  
        view.close();//干掉启动广告页  
    }  
}, 3000)  
})
继续阅读 »

最开始使用H5+开发混合app 的时候,是没有webview和NativeObj概念的,甚至app启动加载顺序也不知道的,公司也没有老师可以请教,当时的确废了很多周章。

1、用户点击app图标>>

2、展示启动页(在app项目的mainfest.json中配置)(这个过程很短,根据手机性能不同而不同)>>

3、展示index.html,执行index里边的js。(启动完成)

因为:> 如果index的js比较复杂,或者加载的图片比较多,会出现比较长的空白;
所以要尽量减少index的内容。所以启动广告应运而生。//其实现在的手机性能都比较不错,启动广告存在的意义,也就是为了挣钱了。

http://ask.dcloud.net.cn/article/1330 这个是启动加速的,良心帖子

启动广告制作:


function plusReady(a){  
    if(window.plus){  
        a();  
    }else{  
        document.addEventListener('plusready', a, false);  
    }  
}  

plusReady(function(){  
plus.navigator.closeSplashscreen();//干掉启动页  

//声明  
    var view = new plus.nativeObj.View("Splashscreen", {  
                    top: 0,  
                    left: 0,  
                    bottom: 0,  
                    width: plus.screen.resolutionWidth,  
                    height: plus.screen.resolutionHeight  
                });  

//添加图片  
    if(plus.storage.getItem("SplashscreenSrc")){  
        view.drawBitmap(plus.storage.getItem("SplashscreenSrc"), {}, {}, "");                     
    }else{  
        view.drawBitmap("img/mmm.png", {}, {}, "");  
    }  

//显示  
view.show();  
setTimeout(function() {  
    if(view){  
        view.close();//干掉启动广告页  
    }  
}, 3000)  
})
收起阅读 »

轮播图

h5+ plus mui

2017.11.12立项做混合app,2017.12.20交给测试,毕竟前端开发只有自己一个人,踩了很多坑,立贴记录一下。

第一次轮播图:使用swiper插件
//其实最开始的时候,是打算自己手写轮播图的,但是发现自己写的bug太多,就使用插件了

<!--HTML部分-->

<div class="swiper-container">  
      <div class="swiper-wrapper">  
             <!--图片-->  
                <div class='swiper-slide'>  
                <a href='#'>  
                    <img src=''/>  
                </a>  
            </div>  
      </div>  
      <div class="swiper-pagination"><!-- 分页器 --></div>  
</div>

<!--JS部分-->

function slideshow (dom){  
                //12.27,ajax是自己封装的,后来放弃了,使用mui.get  
        ajax({  
            //type:"get",  
            url:"http://192.000.0.155:8080/getSlideShow",  
            dataType:"json",  
            suc:function(data){  
                var show =[];  
                var list =  data.imglist;  
                for(var i =0; i < list.length; i++){  
                    var j =  "<div class='swiper-slide'><a href='"+list[i].url+"'><img src='"+ list[i].path  +"'/></a></div>"  
                    show.push(j);  
                }  
                dom.innerHTML = show.join("");  
                //开启轮播图  
                var mySwiper = new Swiper ('.swiper-container', {  
                    loop: true, //循环播放  
                    autoplay:true, //自动轮播  
                    disableOnInteraction:false, //使用户点击后继续播放  
                    pagination: {el:'.swiper-pagination'},  
                });  
            }  
        })  

    }  
slideshow(document.querySelector(".swiper-wrapper"));

第二次轮播图:使用MUI
//不是因为swiper做的不好,而是项目中很多地方使用了mui,不想引入过多的插件
//说实话,mui的轮播图和swiper相比,很差,毕竟swiper是专业的

mui的轮播图就不上代码了,臃肿,简单,在HBuilder中,按下ms选择到轮播图就好

第三次轮播图:使用MUI
还是使用了MUI做轮播图,图片轮播代码部分没有改变

因为主页想换成网易云音乐那样左右滑动操作,但是在手指滑动轮播图时,不能阻止事件上传,窗口webview随手指滑动。至今没有找到合适解决办法。
重新更改webvive排布方式,把轮播图当作一个独立的html添加到主页main中,分解ontouchmove监听目标。解决主页滑动与轮播图滑动混淆问题。

/*main.html中js部分代码  */  
self = plus.webview.currentWebview();  

sliderW = plus.webview.create( "slider.html", "slider.html", {top: "0",height:"200px",hardwareAccelerated:true});   
homeW   = plus.webview.create( "home.html", "home.html",{bottom: "50px",top: "200px"});   
newsW   = plus.webview.create( "news.html", "news.html",{bottom: "50px",top:"0",hardwareAccelerated:true});  
userW   = plus.webview.create( "user.html", "user.html",{bottom: "50px",top:"0"});  

self.append(sliderW)  
self.append(homeW)  
self.append(newsW)  
self.append(userW)  

sliderW.show();  
homeW.show();  

function move (webviewID,s,t){  
    /*  s="rtl" = left // "ltr" =right  
        t = followFinger=跟随  || bounce=反弹  
     *   
     * */  
        function get (d){  
            return plus.webview.getWebviewById(d);  
        }  
    get(webviewID).drag(  
        {direction:s,moveMode:t},  
        {},  
        function(e){  
            if(e.result){  
                if(t == "followFinger"){  
                    get(webviewID).back();                    
                }  
            }  
        }  
    )  
}  
moves(homeW   ,newsW,"rtl",function(){  
    news.classList.add("border");  
    home.classList.remove("border");  
})  
······//重复造轮子img。。。  
//之所以没有使用mui的窗口滑动,是因为当初没有找到mui的插件,当后来知道mui的滑动插件的时候,又发现mui兼容Android4.0之下的问题,所以也就没有改

第四次轮播图:使用plus.nativeObj.ImageSlider
在2017.12.11,plus新增了原生图片轮播控件(plus.nativeObj.ImageSlider)支持自动播放属性(autoplay/interval),
2017.12.13,经过老板同意,舍弃主页滑动功能,为了性能,改mui轮播图为plus.nativeObj.ImageSlider

function slideshow (id,top) {  //ajax获取网络图片  
    mui.getJSON(sg("host")+"app/getSlideShow",{userId:sg("userId")},function(data){  
        if(data.code ==0){  
            var li = data.imglist;  
            var imgs =[]; //图片  
            var imghref = []; //需要跳转的页面  
            for(var i=0; i<li.length;i++){  
                imghref.push(li[i].url);  
                var s = {src:sg("fileHost")+li[i].path,height:"100%",width:"100%"};  
                imgs.push(s);  
            }//声明轮播图  
            var slider = new plus.nativeObj.ImageSlider("slider", {  
                                top:top||"0px",left:"0px",  
                                height:"200px",width:"100%",position:"static",  
                                autoplay:true,  
                                fullscreen:false,  
                                loop:true,  
                                images:imgs,  
                        });   

            plus.webview.getWebviewById(id).append(slider);  
            slider.show();  
            slider.addEventListener("click",function(e){  
                var index = e.currentImageIndex; //轮播图索引  
                get("main.html").evalJS("openAd('"+imghref[index]+"')")  
            })  
        }  
    })  
}

第五次轮播图:使用MUI
三天后测试,发现plus.nativeObj.ImageSlider在自动轮播时候当滚动一定次数后,滚动会卡断,手动滑动也是失败,只能向反方向滑动。
无奈重新更换为mui的轮播图。

第六次轮播图:使用MUI
所谓的第六次更改,是想把轮播图的图片做缓存,在ajax发现图片没有更改的时候,使用缓存图片,减少http请求。
后来放弃了。因为发现手机会自动缓存,我要考虑的问题反而是怎么减少缓存。。。。。心好累。。。。

继续阅读 »

2017.11.12立项做混合app,2017.12.20交给测试,毕竟前端开发只有自己一个人,踩了很多坑,立贴记录一下。

第一次轮播图:使用swiper插件
//其实最开始的时候,是打算自己手写轮播图的,但是发现自己写的bug太多,就使用插件了

<!--HTML部分-->

<div class="swiper-container">  
      <div class="swiper-wrapper">  
             <!--图片-->  
                <div class='swiper-slide'>  
                <a href='#'>  
                    <img src=''/>  
                </a>  
            </div>  
      </div>  
      <div class="swiper-pagination"><!-- 分页器 --></div>  
</div>

<!--JS部分-->

function slideshow (dom){  
                //12.27,ajax是自己封装的,后来放弃了,使用mui.get  
        ajax({  
            //type:"get",  
            url:"http://192.000.0.155:8080/getSlideShow",  
            dataType:"json",  
            suc:function(data){  
                var show =[];  
                var list =  data.imglist;  
                for(var i =0; i < list.length; i++){  
                    var j =  "<div class='swiper-slide'><a href='"+list[i].url+"'><img src='"+ list[i].path  +"'/></a></div>"  
                    show.push(j);  
                }  
                dom.innerHTML = show.join("");  
                //开启轮播图  
                var mySwiper = new Swiper ('.swiper-container', {  
                    loop: true, //循环播放  
                    autoplay:true, //自动轮播  
                    disableOnInteraction:false, //使用户点击后继续播放  
                    pagination: {el:'.swiper-pagination'},  
                });  
            }  
        })  

    }  
slideshow(document.querySelector(".swiper-wrapper"));

第二次轮播图:使用MUI
//不是因为swiper做的不好,而是项目中很多地方使用了mui,不想引入过多的插件
//说实话,mui的轮播图和swiper相比,很差,毕竟swiper是专业的

mui的轮播图就不上代码了,臃肿,简单,在HBuilder中,按下ms选择到轮播图就好

第三次轮播图:使用MUI
还是使用了MUI做轮播图,图片轮播代码部分没有改变

因为主页想换成网易云音乐那样左右滑动操作,但是在手指滑动轮播图时,不能阻止事件上传,窗口webview随手指滑动。至今没有找到合适解决办法。
重新更改webvive排布方式,把轮播图当作一个独立的html添加到主页main中,分解ontouchmove监听目标。解决主页滑动与轮播图滑动混淆问题。

/*main.html中js部分代码  */  
self = plus.webview.currentWebview();  

sliderW = plus.webview.create( "slider.html", "slider.html", {top: "0",height:"200px",hardwareAccelerated:true});   
homeW   = plus.webview.create( "home.html", "home.html",{bottom: "50px",top: "200px"});   
newsW   = plus.webview.create( "news.html", "news.html",{bottom: "50px",top:"0",hardwareAccelerated:true});  
userW   = plus.webview.create( "user.html", "user.html",{bottom: "50px",top:"0"});  

self.append(sliderW)  
self.append(homeW)  
self.append(newsW)  
self.append(userW)  

sliderW.show();  
homeW.show();  

function move (webviewID,s,t){  
    /*  s="rtl" = left // "ltr" =right  
        t = followFinger=跟随  || bounce=反弹  
     *   
     * */  
        function get (d){  
            return plus.webview.getWebviewById(d);  
        }  
    get(webviewID).drag(  
        {direction:s,moveMode:t},  
        {},  
        function(e){  
            if(e.result){  
                if(t == "followFinger"){  
                    get(webviewID).back();                    
                }  
            }  
        }  
    )  
}  
moves(homeW   ,newsW,"rtl",function(){  
    news.classList.add("border");  
    home.classList.remove("border");  
})  
······//重复造轮子img。。。  
//之所以没有使用mui的窗口滑动,是因为当初没有找到mui的插件,当后来知道mui的滑动插件的时候,又发现mui兼容Android4.0之下的问题,所以也就没有改

第四次轮播图:使用plus.nativeObj.ImageSlider
在2017.12.11,plus新增了原生图片轮播控件(plus.nativeObj.ImageSlider)支持自动播放属性(autoplay/interval),
2017.12.13,经过老板同意,舍弃主页滑动功能,为了性能,改mui轮播图为plus.nativeObj.ImageSlider

function slideshow (id,top) {  //ajax获取网络图片  
    mui.getJSON(sg("host")+"app/getSlideShow",{userId:sg("userId")},function(data){  
        if(data.code ==0){  
            var li = data.imglist;  
            var imgs =[]; //图片  
            var imghref = []; //需要跳转的页面  
            for(var i=0; i<li.length;i++){  
                imghref.push(li[i].url);  
                var s = {src:sg("fileHost")+li[i].path,height:"100%",width:"100%"};  
                imgs.push(s);  
            }//声明轮播图  
            var slider = new plus.nativeObj.ImageSlider("slider", {  
                                top:top||"0px",left:"0px",  
                                height:"200px",width:"100%",position:"static",  
                                autoplay:true,  
                                fullscreen:false,  
                                loop:true,  
                                images:imgs,  
                        });   

            plus.webview.getWebviewById(id).append(slider);  
            slider.show();  
            slider.addEventListener("click",function(e){  
                var index = e.currentImageIndex; //轮播图索引  
                get("main.html").evalJS("openAd('"+imghref[index]+"')")  
            })  
        }  
    })  
}

第五次轮播图:使用MUI
三天后测试,发现plus.nativeObj.ImageSlider在自动轮播时候当滚动一定次数后,滚动会卡断,手动滑动也是失败,只能向反方向滑动。
无奈重新更换为mui的轮播图。

第六次轮播图:使用MUI
所谓的第六次更改,是想把轮播图的图片做缓存,在ajax发现图片没有更改的时候,使用缓存图片,减少http请求。
后来放弃了。因为发现手机会自动缓存,我要考虑的问题反而是怎么减少缓存。。。。。心好累。。。。

收起阅读 »