混合开发之phonegap开发相关知识解析

Posted 2021-10-29 程序员的小傲娇

hybrid app(混合模式移动应用)是指介于web-app、native-app这两者之间的app，兼具"Native App良好用户交互体验的优势"和"Web App跨平台开发的优势"。hybrid app的作用如下：

— 可以安装到手机，Webapp、m站、touch端项目、手机网站;

— 手机浏览器访问nativeapp android、ios语言开发的app。

webview是由原生语言提供的组件(浏览器)，该组件本身需要设定一些属性(设置让其支持javascript，设置链接在本组件WEBVIEW中跳转),让他可以像一个真正的浏览器一样。

让其加载一个网页：

wv.loadUrl(‘地址’) //本地地址/远程地址

android、ios提供一些可供js调用的对象obj和方法fn，js中只需要通过

window.obj.fn // 如果需要传递参数 window.obj.fn(params)

js可以提供android调用的方法test，供android、ios调用

wv.loadUrl(‘javascript:test()’) //如果需要参数wv.loadUrl(‘javascript:test(params)’)

一、介绍

https://phonegap.com/

混合开发

根据需求先写页面，假设你的一个按钮需要调用系统的功能，在你的按钮事件中调用由android工程师提供的相对应的对象和其方法即可，同时前端也会定义一些方法，但是前端自己不调动，android会根据webview的loadUrl方法进行调用，并且传参(根据需求看)

如果将这些对象和方法进一步统一封装，再结合一定的技术可以提供给js调用，就好比我们在写页面的时候引入jquery一样，再结合特定的环境(混合开发所必须的环境)就可以无需原生开发者，只要你懂web技术即可开发需要的app

phonegap ******

DCloud ******

ApiCloud

ReactNative

…

二、如何开发 https://phonegap.com/getstarted/

1、安装桌面版应用程序，用来创建项目

2、安装移动应用

ios，请移驾到appstore进行下载

3、创建新的应用程序

4、项目预览效果，手机和电脑处于同一个局域网，

三、调用系统功能 — 拍照

调用功能：http://www.phonegap100.com/doc/cordova_file_file.md.html

拍照API

receivedEvent: function(id) {

var takePhotoBtn = document.getElementById(“takephoto”);

var getPhotoBtn = document.getElementById(“getphoto”);

takePhotoBtn.onclick = function(){

alert(“拍照”);

navigator.camera.getPicture(onSuccess, onFail, { quality: 50,

destinationType: Camera.DestinationType.FILE_URI });

function onSuccess(imageURI) {

var image = document.getElementById(‘myImage’);

image.src = imageURI;

}

function onFail(message) {

alert('Failed because: ’ + message);

}

}

getPhotoBtn.onclick = function(){

alert(“相册选取”);

navigator.camera.getPicture(onSuccess, onFail, {

quality: 50,

destinationType: Camera.DestinationType.FILE_URI,

sourceType:Camera.PictureSourceType.PHOTOLIBRARY

});

function onSuccess(imageURI) {

var image = document.getElementById(‘myImage’);

image.src = imageURI;

}

function onFail(message) {

alert('Failed because: ’ + message);

}

}

var getUser = document.getElementById(“getUser”);

var list = document.getElementById(“list”)

getUser.onclick = function(){

alert(“通讯录”);

var options = new ContactFindOptions();

options.filter = “”;

options.multiple = true; // return multiple results

filter = [“name”]; // return contact.displayName field

// find contacts

navigator.contacts.find(filter, onSuccess, onError, options);

function onSuccess(contacts) {

// display the address information for all contacts

for (var i = 0; i < contacts.length; i++) {

var oli = document.createElement(“li”);

oli.innerHTML = i + “:”+JSON.stringify(contacts[i].name)

list.appendChild(oli);

}

};

五、打包

https://build.phonegap.com/

点击私有的，上传www文件的压缩文件即可

点击open-source

先写好页面，在你页面需要的部分添加点击事件，事件代码块由phonegap提供，通过事件的回调函数继续操作即可

本文来自千锋教育，转载请注明出处。