前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >混合开发中拍照和打电话功能的代码

混合开发中拍照和打电话功能的代码

作者头像
王小婷
发布2018-06-05 11:19:56
8030
发布2018-06-05 11:19:56
举报
文章被收录于专栏:编程微刊编程微刊

什么是混合开发: 概述: Hybrid App主要以JS+Native两者相互调用为主,从开发层面实现“一次开发,多处运行”的机制,成为真正适合跨平台的开发。Hybrid App兼具了Native App良好用户体验的优势,也兼具了Web App使用HTML5跨平台开发低成本的优势。 目前已经有众多Hybrid App开发成功应用,比如美团、爱奇艺、微信等知名移动应用,都是采用Hybrid App开发模式。

Image.png

混合开发的优点与缺点: 优点 各平台表现一致: 内容更新不需要内容审查:

缺点: 1.与原生开发有差距 2.前端代码容易被盗取

Image.png

Image.png

混合开发中拍照和打电话功能的代码片段:

代码语言:javascript
复制
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>混合开发</title>
    <style>
     html{font-size:15.625vw;}
     img{width:100%;height:auto;}
    </style>
    <script type="text/javascript">
     
          document.addEventListener('plusready', function(){
              //console.log("所有plus api都应该在此事件发生后调用,否则会出现plus is undefined。"
              
          });
          
          function getCamera(){
              var cam = plus.camera.getCamera( 2);
              var Resolutions = cam.supportedImageResolutions[0]; //: 字符串数组,摄像头支持的拍照分辨率
              var Formats = cam.supportedImageFormats[0]; //: 字符串数组,摄像头支持的拍照文件格式
              
              //capturedfile
              cam.captureImage( function(capturedFile ){
                   //拍照成功
                   //alert('capturedfile');//
                   plus.io.resolveLocalFileSystemURL( capturedFile,
                   function(entry){
                        //成功
                        var img = document.createElement("img");
                        img.src =  entry.toLocalURL();
                        document.documentElement.appendChild(img);
                        
                   }, function(){
                        //失败
                   } );
              
              }, function(){
                   //拍照失败
              }, function(){
                   //拍照参数
                   format : Formats
              } );
          }
          
          //打电话
          function callPhone(){
              document.getElementById("audio").play();
              plus.device.setVolume(1);
              //调用此方法获取程序是否一致保持唤醒状态。
              plus.device.isWakelock();
              //设置设备常亮
              plus.device.setWakelock( true );
              //设置震动事件单位为毫秒
              plus.device.vibrate( 1000 );
              //拨打电话,第一个参数为电话号码,第二个true则打开拨打电话界面,如果false则直接拨打
              plus.device.dial('18330822256',false);
              //
          }
    </script>
</head>
<body>
     <button onclick="getCamera()">照相</button>
     <button onclick="callPhone()">10086</button>
     <audio src="15409355.aac" id="audio"></audio>
</body>
</html>

几个辅助使用的网址: http://ask.dcloud.net.cn/docs/ 组件: http://dev.dcloud.net.cn/mui/ui/#dtpicker http://dev.dcloud.net.cn/mui/ http://dev.dcloud.net.cn/mui/ui/#listview

本文作者祈澈姑娘,转载请标明作者和文章的原文链接,创作不易。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.11.01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档