⑴ 小白入门 webApp开发中如何进行相册/拍照
点击用户头像后，弹出actionSheet，选着从相册或是拍照；选着图片后就调用上传方法，上传图片；在上传之前先压缩了一下图片。
使用流程
弹出actionSheet
/
*点击头像触发*/
document.getElementById('headImage').addEventListener('tap', function() {
if (mui.os.plus) {
var a = [{
title: "拍照"
}, {
title: "从手机相册选择"
}];
plus.nativeUI.actionSheet({
title: "修改用户头像",
cancel: "取消",
buttons: a
}, function(b) { /*actionSheet 按钮点击事件*/
switch (b.index) {
case 0:
break;
case 1:
getImage(); /*拍照*/
break;
case 2:
galleryImg();/*打开相册*/
break;
default:
break;
}
})
}
}, false);
拍照上传
//拍照
function getImage() {
var c = plus.camera.getCamera();
c.captureImage(function(e) {
plus.io.resolveLocalFileSystemURL(e, function(entry) {
var s = entry.toLocalURL() + "?version=" + new Date().getTime();
uploadHead(s); /*上传图片*/
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(s) {
console.log("error" + s);
}, {
filename: "_doc/head.png"
})
}
从相册选图上传
//本地相册选择
function galleryImg() {
plus.gallery.pick(function(a) {
plus.io.resolveLocalFileSystemURL(a, function(entry) {
plus.io.resolveLocalFileSystemURL("_doc/", function(root) {
root.getFile("head.png", {}, function(file) {
//文件已存在
file.remove(function() {
console.log("file remove success");
entry.To(root, 'head.png', function(e) {
var e = e.fullPath + "?version=" + new Date().getTime();
uploadHead(e); /*上传图片*/
//变更大图预览的src
//目前仅有一张图片，暂时如此处理，后续需要通过标准组件实现
},
function(e) {
console.log(' image fail:' + e.message);
});
}, function() {
console.log("delete image fail:" + e.message);
});
}, function() {
//文件不存在
entry.To(root, 'head.png', function(e) {
var path = e.fullPath + "?version=" + new Date().getTime();
uploadHead(path); /*上传图片*/
},
function(e) {
console.log(' image fail:' + e.message);
});
});
}, function(e) {
console.log("get _www folder fail");
})
}, function(e) {
console.log("读取拍照文件错误：" + e.message);
});
}, function(a) {}, {
filter: "image"
})
};
图片上传和压缩
//上传头像图片
function uploadHead(imgPath) {
console.log("imgPath = " + imgPath);
mainImage.src = imgPath;
mainImage.style.width = "60px";
mainImage.style.height = "60px";
var image = new Image();
image.src = imgPath;
image.onload = function() {
var imgData = getBase64Image(image);
/*在这里调用上传接口*/// mui.ajax("图片上传接口", {// data: {// // },// dataType: 'json',// type: 'post',// timeout: 10000,// success: function(data) {// console.log('上传成功');// },// error: function(xhr, type, errorThrown) {// mui.toast('网络异常，请稍后再试！');// }// });
}
}
//将图片压缩转成base64
function getBase64Image(img) {
var canvas = document.createElement("canvas");
var width = img.width;
var height = img.height;
// calculate the width and height, constraining the proportions
if (width > height) {
if (width > 100) {
height = Math.round(height *= 100 / width);
width = 100;
}
} else {
if (height > 100) {
width = Math.round(width *= 100 / height);
height = 100;
}
}
canvas.width = width; /*设置新的图片的宽度*/
canvas.height = height; /*设置新的图片的长度*/
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height); /*绘图*/
var dataURL = canvas.toDataURL("image/png", 0.8);
return dataURL.replace("data:image/png;base64,", "");
}
总结
在使用中，我们可以发现，使用流程是非常清晰的；某种程度来说比原生iOS的使用还要简单一些。
⑵ web前端怎样入门
先说一下自学前端如何入门吧。
方法：
第一：理清Web前端的知识结构。要想高效学习Web前端知识，首先应该搞清楚Web前端都包括哪些技术结构。Web前端开发虽然技术难度并不高，但是技术细节却比较多，内容也比较杂。Web前端的基础包括三大部分，包括Html、CSS和JavaScript，其中JavaScript是学习的重点，也是难点。另外，vue等框架也是需要熟练掌握的。
第二：紧跟技术发展趋势。目前Web前端的技术发展趋势有三个，其一是前端开发数据化;其二是前端开发高效化;其三是前端开发全栈化。前端开发数据化主要是大数据发展的影响，在大数据的推动下，Web前端逐渐涉及到了大量的数据展示任务。前端开发高效化主要体现在Web前端正在进行独立部署，前端与后端的沟通主要通过资源接口的方式来进行。前端开发全栈化也是一个比较明显的趋势，比如Nodejs的应用。
路线：
第1阶段：前端页面重构(4周)
内容包含了：(PC端网站布局项目、HTML5+CSS3基础项目、WebApp页面布局项目)
第2阶段：JavaScript高级程序设计(5周)
内容包含：(原生JavaScript交互功能开发项目、面向对象进阶与ES5/ES6应用项目、JavaScript工具库自主研发项目)
第3阶段：PC端全栈项目开发(3周)
内容包含：(jQuery经典交互特效开发、HTTP协议、Ajax进阶与PHP/JAVA开发项目、前端工程化与模块化应用项目、PC端网站开发项目、PC端管理信息系统前端开发项目)
第4阶段：移动端项目开发(6周)
内容包含：(Touch端项目、微信场景项目、应用Angular+Ionic开发WebApp项目、应用Vue.js开发WebApp项目、应用React.js开发WebApp项目)
第5阶段：混合(Hybrid,ReactNative)开发(1周)
内容包含：(微信小程序开发、ReactNative、各类混合应用开发)
第6阶段：Node.js全栈开发(1周)
内容包括：(WebApp后端系统开发、一、Node.js基础与Node.js核心模块；二、Express；三、noSQL数据库)
至于视频教程，我这里有很多前端的全套教程，如果你需要的话，可以加一下我的学习交流裙裙，找我要就行了！
⑶ 简单粗暴，详细得不要不要的 JavaWeb快速入门
1. 实验环境准备
（假设你已经装好了jdk，如果不会安装jdk，请参考这篇文章）
1.1 安装一个eclipse或者MyEclipse（本文以eclipse为例），其实所谓的安装就是网上去下载一个eclipse，然后解压一下就好了。
1.2安装tomcat，网上下载一个，然后解压一下。我这次使用的tomcat容器配的是8080端口。
1.3 将tomcat配置到eclipse中。具体步骤为：Window -- Preferences -- Server -- Runtime Environment -- Add 将tomcat解压后的路径配置上去就行了。
本文假设读者已经对tomcat，eclipse有一定的了解。
2. 新建web项目
首先，一言不合就打开eclipse
Paste_Image.png
我们新建一个项目，File -- new -- Dynamic Web Project。
项目名称是web，点击Next
Paste_Image.png
Paste_Image.png
build\classes是默认的编译目录，还是点击Next
Paste_Image.png
好的，最后点击Finish，一个web项目就建立好了。
目录结构
Paste_Image.png
2.啥叫JavaWeb项目，它能干嘛？
JavaWeb项目就是一个应用程序，你不要以为它有多么神秘。你每天打开的QQ就一个应用程序，你在手机上打开的微信，网络地图等等，这些都是应用程序。
不同的是，QQ是一个本地客户端程序，它需要你在自己的电脑上安装一个客户端，然后你打开QQ，可以登录，聊天。
QQ肯定也分客户端和服务端，我们电脑上装的就是客户端，你要知道的一点是，我们发送消息，发送到哪里去了呢？
没错，肯定是发送到QQ的服务器上了，那里保存着我们的所有数据。
想想也不可能在本地，因为我们在电脑上发送的消息，在手机QQ上不是也能看到吗？这就说明，肯定是上传到它的服务器然后保存下来了。
而Web项目是什么呢？
它也是一个应用程序，只不过它的客户端是运行在浏览器上的。
我们打开浏览器，访问一个地址，比如 http://www.jianshu.com/
这个就是我们的访问路径，我们通过这个URL向简书的服务器提交请求，然后服务器进行处理，给你回应。
接下来，我们就看到出来一个网页。
我们在这个网页上可以写文章，点赞，收藏，等等。
我们的每一步操作，其实都和服务器做了一个交互。
比如一个登录功能，当我们鼠标点击那个登录按钮，浏览器就向服务器提交了一个请求，服务器进行处理，然后操作数据库。最终，它会得出一个结果，就是说，到底能不能让你登录，总会有个说法。
如果你密码写错了，它可能就会得出一个用户名或密码错误的结论。然后，这个信息会从服务器返回到前台，前台就是浏览器。
所谓的前台就是你的浏览器，没什么神秘的。
前台接受到后台传过来的信息后，进行一些处理，然后给你个提示，比如，告诉你用户名或密码错误。
这就是一个完整的交互过程。
现在随着网速越来越好，浏览器的性能越来越强大，我想web肯定是未来的大趋势。毕竟，谁都不希望在电脑上安装一大堆客户端吧。
只用一个浏览器多好。
有了web，我只需要有一个浏览器，然后就能通过互联网获取我想要的资源了。这样不是很美妙吗？
近几年H5非常流行，尤其是移动端，因为手机浏览器基本上都支持css3。一样的道理，我们肯定也不希望在手机上安装一大堆应用，卡都卡死了，如果能直接访问一个网页，就能获得我想要的服务就好了。
而且现在WIFI也普遍了，如果以后流量能没有限制，那么APP的热度很可能会逐渐被web取代。
当然，现在是不太可能的，毕竟访问网页要流量啊，而我在手机上安装了APP，就好像电脑的QQ一样，大部分资源文件就在我本地，我不需要每次都去联网下载。比如图片，app就没事，因为就在本地，可是如果用web，我每次访问那个网页，就需要把图片重新下载一遍。这样不是很浪费流量吗？
3. 手工搭建web项目
现在，为了说明服务器和web项目的概念，我们先不用eclipse，来手工搭建一个web项目。
服务器，正常情况下就是一台配置高一点的电脑，除非是那种大型的专用服务器。
一般来说，所谓的服务器，就是电脑。
比如我现在有一台电脑，给他装了一个linux系统或者windos系统，然后我说，好了，从今以后，这就是服务器了。现在服务器一般都是用linux系统的。
那么tomcat又是什么？
tomcat其实也是一个应用程序，你网上下载的tomcat往往是一个压缩包，然后我们解压以后就相当于安装好了。
可以这么理解：
服务器就是一台电脑，而tomcat是一个容器，专门存放web项目的容器。
以下我都将tomcat称为tomcat容器。
我们看到在tomcat容器根目录下，有一个webapps文件夹
里面是这样的：
Paste_Image.png
好的，现在我要发布一个项目了，我只需要把一个已经做好的web项目往里面一丢就行了。
除了webapps，我们还发现一个bin目录。一般来说，可执行的文件都放在bin目录下。
Paste_Image.png
打开bin，找到一个startup.bat文件。这就是启动tomcat的东西，双击它，tomcat就被启动了。
然后，浏览器可以访问tomcat里面的项目。
现在我们来手工搭建一个web项目，首先，在webapps目录下新建一个文件夹，是的，就是文件夹，不管你项目是什么，肯定还是放在文件夹里面的。
Paste_Image.png
项目名称就叫做webapp。
打开webapp，根据web项目的规范，我们需要有一个WEB-INF文件夹。
Paste_Image.png
然后，在WEB-INF文件夹里面，必须要有一个web.xml文件。
xml文件，就是一个描述性的文件，我现在的观点如下：
XML = JavaBean = Json = HashMap
它无非就是描述一些东西，保存一些数据而已。
好的，我们在里面新建一个web.xml。这个文件非常重要，正因为它的存在，tomcat容器才会知道这个文件夹里面竟然是一个web项目。
否则，tomcat容器是不知道这个web项目的，它只会将myapp文件夹看做是一个文件夹而已。
Paste_Image.png
我们用记事本打开web.xml，将以下代码拷贝进去。
<?xml version="1.0" encoding="UTF-8"?>
<web-app>
<display-name>web</display-name>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
<welcome-file>index.htm</welcome-file>
<welcome-file>index.jsp</welcome-file>
<welcome-file>default.html</welcome-file>
<welcome-file>default.htm</welcome-file>
<welcome-file>default.jsp</welcome-file>
</welcome-file-list>
</web-app>
<?xml version="1.0" encoding="UTF-8"?>表示这是一个1.0版本的XML文件，编码为UTF-8。
<web-app></web-app>就是这个XML文件的一个根节点，就是告诉你，我这个xml文件里面，有一个东西叫做web-app。
XML的一个作用就是配置文件，web.xml本身就是一个配置文件。在web项目中，我们应用xml最多的也就是配置一些参数。
配置参数，就是给属性赋值嘛，没什么神秘的。
包括我们学习JavaSE，归根到底，一直在做的一件事就是new对象，然后调用方法，调用方法的目的一方面是做一些事情，另一方面不还是给属性赋值嘛。
你可以把web.xml看做是一个java类，类名叫做 webApp。它里面有两个属性，分别是display-name和welcome-file-list。
display-name是发布名称，也就是项目的名字。
welcome-file-list 是欢迎页面，就是说，当你在浏览器直接访问这个myapp项目，默认跳转的页面。
想象一下，应该会变得非常好理解。
⑷ WebApp如何入门，需要用到哪些技术
前端HTML+CSS没啥好说的，
js框架方面不推荐jQuery和jQuerymobile，一个jQuery就差不多80k 还让不让2G用户活了（没错我就是） 推荐zepto 体积很小也很实用，如果你更在意性能并且只需要很小一部分DOM操作的话，不妨试试sprintjs..
别的感觉没啥了 无非就是一个针对手机端的design和responsive的页面 然后就是压缩压缩 优化 优化 这两点比搞页面费劲的多
至于后端语言……会啥用啥吧 没啥区别
⑸ web初学者都需要了解学习些什么
web前端初学者刚开始肯定要知道web前端是用来做什么的，后期的发展，薪资这些都要了解。一个重中之重就是确认自己是否真的能学下去，下面我给你具体介绍一下：
web前端开发的的功能主要是用来制作网页，将文字、图片、动画等元素放到页面上，让网页的内容更加丰富和生动，让用户能有更好的浏览体验。那么这些都是通过什么来实现的呢?主要是通过html5、css3、JavaScript来做到的，html是写页面上的内容，css是用来为html页面提供布局和格式，例如大小，颜色等，JavaScript是行为。我们开始学习的阶段是html+css，入门是非常简单的，想要学习了解web前端的小伙伴都可以通过相关书籍和一些免费的课程学习，会给自己很大的成就感和自信心，这个阶段一般学习要两周的时间左右，如果是想要更深入的理解，可能会需要更多的时间。之后要学习的web前端知识点会相对第一阶段难一点儿，JavaScript的学习和能够熟练的 Touch、jQuery、Zepto，
掌握Vue基础语法和指令; 掌握Vue计算属性和监听的使用方法; 掌握Vue组件的定义和基本使用，以及常见浏览器的兼容，讲这些东西学会，一般所需要的时间至少要两三个月的时间了，将这些知识掌握，也可以间接的说明web前端已经入门了，可以通过这些来去找到一份工作。但这肯定不是学习的终点，之后其它的web前端知识我们也可以一边工作一边进行学习。
如果你是没有基础的话，建议你先自学打打基础，后边还是报班学习效率会更高，学习会更系统，也会学到现在企业运用比较多的技术，积累更多的实战经验，找工作才更容易
⑹ web前端怎么入门学习
入门标准很简单
就一条：达到能参与 Web 前端实际项目的开发水平。请注意，是实际项目，这就需要了解如今的实际项目开发都用了哪些技术栈。HTML/CSS/JavaScript 这三大基础技术栈肯定是需要掌握的，但要能参与实际项目开发，肯定还要掌握其他一些主流的框架体系。
几年前，jQuery + Bootstrap可以说是一统江湖，是前端领域的绝对霸主。而这几年，随着Angular、React、Vue等框架的兴起，变成了百家争鸣的局面。这几年，Web 前端的技术发展真是太快了，相应地，技术栈也就变得非常多，除了最基本的HTML/CSS/JavaScript，以及Vue/React/Angular等这些 JavaScript 框架和各自的生态体系，还有 CSS 预处理器Sass/Less/Stylus，还有TypeScript，还有grunt/webpack/gulp等各种打包构建工具，还有其他一大堆技术栈。
这么多技术栈，我们不可能全都掌握，就算是资深的前端工程师，也只是精通其中一部分，比如，有些精通 Angular，有些掌握 React，有些则熟悉 Vue，很少有人对三种框架生态体系都非常了解。因此，我们入门也没必要每种框架都学习，只要挑选一种就够了。而且，作为全栈，我们学习一门技术更重要的是要学习技术背后的编程思想、设计思想、架构思想等。而不管是 Angular、React 还是 Vuew，其背后的核心设计思想都是组件化的设计，因此只要掌握一种框架，我们也就能学习到前端技术的核心思想了。
那么，我们应该学哪种框架体系呢？我的建议是从 Vue 开始，因为 Vue 的学习成本是最低的，入门简单，而且这两年 Vue 可以说是出现了爆发式的增长，已经直逼 React。React 的主要学习成本在于要掌握 JSX 语法，而且文档还大多都是英文。Vue 因为是国人开发和维护的，自然对国内的开发者更友好。Angular 则是个大而全的框架，显得太重，学习成本自然最高。至于 jQuery + Bootstrap 这套，已经过时了，建议没必要去学习了，毕竟我们的时间很宝贵，还有一大堆更有价值的东西等着我们去学。
因此，我们要入门 Web 前端开发的话，除了要学习 HTML/CSS/JavaScript 三大基础技术栈，还要了解 Vue 体系。而 Vue 体系，除了 Vue 框架本身，还包括其他技术栈。
下方是学习前端开发的学习路线：
⑺ web前端零基础该怎么去学习
web前端作为互联网相关的重要岗位，许多互联网大厂（如阿里腾讯等）在招聘时会作出要求。学好web前端对于将来掌握前端后端开发、成为全栈架构师的学习很有帮助。
想学习web前端需要掌握的内容也是不少的，对于自学的同学来说会有一些难度，不推荐自学能力差的人。我们在学习的时候需要分阶段进行，做到有计划的学习与训练，具体的学习顺序如下：
web前端学习顺序：
①计算机基础以及PS基础
②前端开发基础（HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架）
③移动开发
④前端高级开发（ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等）
⑤小程序开发
⑥全栈开发（MySQL数据库、Python编程语言、Django框架等）
⑦就业拓展（网站SEO与前端安全技术）
想要系统学习，你可以考察对比一下开设有IT专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，建议实地考察对比一下。
祝你学有所成，望采纳。
⑻ WebAPP入门先学什么
WebApp是针对NativeApp而产生的，Webapp最直接明了的定义就是一个针对Iphone、Android优化后的移动网站，它使用的技术无非就是HTML或HTML5、CSS3、JavaScript，服务端技术JAVA、PHP、ASP等。慕课网自学。
⑼ 学习Web前端 如何快速的从入门到精通
前端开发可以自学，也可以选择口碑好、信誉佳的机构学。
互联网的发展带动了多种行业的发展，Web前端在互联网行业也发挥着越来越重要的作用。Web前端开发不仅在形式、内容和功能上也有了极大的丰富，而且对前端开发人员的要求越来越高。
web全栈工程师5.0课程学习内容包括：
①计算机基础以及PS基础
②前端开发基础（HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架）
③移动开发
④前端高级开发（ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等）
⑤小程序开发
⑥全栈开发（MySQL数据库、Python编程语言、Django框架等）
⑦就业拓展（网站SEO与前端安全技术）
互联网行业目前还是最热门的行业之一，学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的，发展前景非常好，普通人也可以学习。
想要系统学习，你可以考察对比一下开设有相关专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，能够在校期间取得大专或本科学历，中博软件学院、南京课工场、南京北大青鸟等开设相关专业的学校都是不错的，建议实地考察对比一下。
祝你学有所成，望采纳。
⑽ WebAPP怎么入门
WebApp是一种新出现的基于WEB形式的类应用程序，运行在高端的移动终端设备上，其应用范围会越来越广。
都知道在高端智能手机系统中有两种应用程序：一种是基于本地（操作系统）运行的APP；一种是基于高端机的浏览器运行的WebApp。