Dcloud开发webApp踩过的坑

Dcloud开发webApp踩过的坑

1、总结

一句话总结：HTML5+扩展了JavaScript对象plus，使得js能够调用各类浏览器没法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。其实我只要把js拿到手，就能够很方便用在手机开发的网站上面了。

 

一、Dcloud能够作mobile web项目么？

能够，并且感受会比浏览器多调用点api

但这就是一个普通的web项目，b/s方式，不可脱线运行，不能调用HTML5Plus的增长api。

其实感受可以把dcloud里面访问原生应用的js代码拿到手，那么web项目一样具备了这样的功能。

 

 

2、Dcloud开发webApp踩过的坑

使用dcloud开发webApp有一段时间了，其中也踩了很多坑，如今总结一些（mui.js版本号，V2.9.0）。

 

1，app启动后选择进入那个页面。

能够在manifest.json中设置页面入口，一般设置为index.html.但有时须要根据业务须要进入其余页面。应用场景：根据用户登陆状态来选择进入不一样的页面，若是用户已经登陆，则进入index.html页面。若是用户没有登陆，则进入登陆页面。

mui.plusReady(function(){

var  CurrentWebview=plus.webview.currentWebview();

if(!logined){

 CurrentWebview.loadURL（"login.html"）;

}

});   最开始尝试这样写，可是效果并很差。后改为 if(!loggined){

      window.location.href="login.html"; 

      }.达到了预期效果。为了更加明显，能够在启动设置里面，设置延时1秒启动。

 

2，在使用mui弹窗时，若是想自定义样式，须要使用div模式，即便用h5模式的对话框，能够对mui.css进行样式覆盖。

mui.confirm(str_audit,title, btnArray, function(e) {}，“div”);

 

3，使用mui弹窗时，在弹窗上面滑动，弹窗下面的内容也跟着滚动。

解决办法，

function setStopContentScroll(){
$("body,html").css({"overflow":"hidden"});
}
function setContentScroll(){
$("body,html").css({
"overflow-y":"scroll",
"overflow-x":"hidden"
});
}

当弹窗出现时，setStopContentScroll().弹窗关闭时，setContentScroll().

 

4，弹窗出现时，禁用手机返回键。

 mui.back=function(){

    return false;

 }

当弹窗关闭时，从新设置mui.back为

     mui.back=function(){

             var currentWebviwe=plus.webview.currentWebview();

             plus.webview.close(currentWebviwe);

        }

 

5，使用miui.closePopup()能够关闭当前打开的弹窗。使用mui.closePopups()能够关闭多有对话框。

 

6，mui页面默认侧滑返回。能够禁止此功能。

var cv=plus.webview.currentWebview();

cv.setStyle({'popGesture':'none'})

 

 

3、dcloud从入门到入坑

dcloud从入门到入坑

 

1、简介

dcloud是一个webapp云打包平台，你能够经过他扩展你的网页功能
官方叫他们的产品名字为

HTML5 Plus移动App，简称5+App，是一种基于HTML、JS、CSS编写的运行于手机端的App，这种App能够经过扩展的JS API任意调用手机的原生能力，实现与原生App一样强大的功能和性能。

 

嗯，是一种基于HTML、JS、CSS编写的运行于手机端的App，那么具体是怎么作的呢？
继续看文档

HTML5+扩展了JavaScript对象plus，使得js能够调用各类浏览器没法实现或实现不佳的系统能力，设备能力如摄像头、陀螺仪、文件系统等，业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。

 

扩展了一个plus对象啊，就是说能够经过dcloud实现的plus对象来调用原生api。
可是dcloud并非把全部的原生api都封装到时plus对象中。
dcloud把api分为两部分

 

1.HTML5Plus规范

经常使用的扩展能力，好比二维码、语音输入，都封装到了规范中，同时实现了Android和iOS的解析引擎，使得开发者的代码编写一次，可跨平台运行。只要调用plus.对象(html5plus规范的对象，详细请看文档)
html5plus是常见的原生api，并非全部的原生api，原生的api太多了。可是dcloud也能够调用其余api，就是第二部分

2.natave.js

Native.js把几十万原生API映射成了js对象，经过js能够直接调ios和android的原生API。这部分就再也不跨平台，写法分别是plus.ios和plus.android，好比调ios game center，或在android手机桌面建立快捷方式，这些都是平台专有的api。Native.js把几十万原生API映射成了js对象，经过js能够直接调ios和android的原生API。这部分就再也不跨平台，写法分别是plus.ios和plus.android，好比调ios game center，或在android手机桌面建立快捷方式，这些都是平台专有的api。

 

2、5+ App概念解析

首先开发者须要清楚你要作什么，是一个mobile web项目，运行里浏览器里？仍是要作一个app，安装和运行在手机上？或者要把一个mobile web项目打包成app？

1. 作一个mobile web项目

 

在这个模式下，开发者用不到HTML5Plus，使用标准的HTML5语法，运行在浏览器里。这不算5+ App。 此时开发者仍然可使用HBuilder这个开发工具，新建项目时选择web项目。 开发者也仍然能够使用DCloud提供的mui开源框架，来简化ui的开发。 但这就是一个普通的web项目，b/s方式，不可脱线运行，不能调用HTML5Plus的增长api。

 

2. 作一个正统的app

 

传统意义上的app，是c/s方式的，它的程序要安装和运行在手机上，不经过浏览器在线下载。 此时开发者在HBuilder里新建项目时，选择“移动App”。 在移动App项目下编写的HTML、js等文件，是会被打包到原生的安装包（Android是apk包、iOS是ipa包）里的。 此时本地的js和服务器经过ajax交互，由服务器按接口方式给出数据（通常是json），而后客户端的js文件解析json，并根据本地的业务逻辑来渲染页面和执行功能。 因此请不要新建一个移动App项目，而后把原本运行在服务器端的php等文件也都丢到这个项目下。 web项目始终是web项目，哪怕要在app项目里某个界面里，在线加载一个远程的网页，也要把这个远程网页的代码，放到web项目下。 移动App项目下，只有能有html、js、css、json以及一些图片或数据文件，不能包括php、jsp、py等服务器页面。

 

3. 使用wap2app打包mobile web项目为app

 

若是开发者想把一个作好的mobile web站，方便快速的打包成app，那么要使用DCloud的wap2app框架。 在HBuilder中新建项目时，选wap2app项目，把mobile web站的url输入进去，参考框架的教程来配置。 wap2app不一样于普通的web打包技术，wap2app可真正作达到原生应用的功能和性能体验。 具体教程另见：文档中心-wap2app，http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/1244 wap2app属于5+app，它底层也是强大的HTML5Plus规范和Native.js在支撑。 wap2app项目下的全部文件，也都是打包在本机运行的。 4. 若是你想开发一次，全端覆盖，那么须要使用mui框架 具体参考：http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/591

官方入门 我拿dcloud都是用来把vue打包后的文件，放到dcloud进行打包，作一些原生api处理，如返回按纽啥的。代码都写在index.html里