Add the Cordova framework to an existing Xcode project

Source: Internet
Author: User

Transferred from: HTTP://WWW.JIANSHU.COM/P/656838AE92BC

We know that UIWebView in Uikit has provided a lot of functionality, such as the communication between JavaScript and OBJC. But given the question, how do you implement JavaScript calls to some local hardware devices, such as cameras, audio, and local storage, in the hybrid app? The first thing to think about is to stipulate some protocols, to receive messages from JavaScript in uiwebviewdelegate and to control the local database access by OBJC code, to control the camera and audio, and so on. However, how to display the local webcam video on WebView is still difficult to achieve. So the question is, how do you implement these protocols, and have a wide range of applicability to allow the vast majority of developers to use this set of frameworks?

The following main introduction of an open source framework: Cordova, its predecessor is PhoneGap, was acquired by Apache after the change to Cordova.

About Cordova: official website

Apache Cordova is an Open-source mobile development framework. It allows the web technologies such as HTML5, CSS3, and JavaScript for Cross-platform development, Avoidin G each mobile platforms ' native development language. Applications execute within wrappers targeted to all platform, and rely on Standards-compliant APIs bindings to access EAC H device ' s sensors, data, and network status.

The main idea: Cordova is an open source mobile development framework. It allows you to use standard Web technologies such as HTML5,CSS3 and JavaScript for cross-platform development, bypassing the different development languages of each mobile platform.

Use Apache Cordova IF-are:a mobile developer interested in mixing native application-with awebview (special browser window) that can access Device-level APIs, or if you want to develop a plugin interface between native a nd WebView components.

The main idea: if you are integrating a WebView that accesses a device-level API into a Native application, or if you want to develop an interface plug-in that implements interaction between navtive and WebView components, you can use Apache Cordova.

In Cordova-enabled WebView, you can provide a complete user interface for your app. It can also be used as a component embedded in the local native application on some platforms. At the same time, we can develop our own plugins.

There are 2 different ways to use Cordova:

1.cross-platform (CLI) WORKFLOW:CLI is a high-level tool that allows you to build only one project on multiple platforms.

2.platform-centered Workflow: With native as the center, embedded in the form of WebView.

So how do you use Cordova under Mac OS?

1. First install a node. js

https://nodejs.org/en/download/

2. Open the terminal and enter the following command

$ sudo npm install–g Cordova


Installing Cordova

3. You can then start building the Cordova project, as follows:

$ CD desktop/

$ Cordova Create Demo Xidx stevin_y

The first parameter above is the project name, the second one is the app ID, the third is the folder name

We can join the iOS project after the establishment is complete.

$ CD stevin_y/

$ Cordova Platform Add iOS

4. Display the installed platform project and the installable platform

$ Cordova Platform LS

5.build iOS Project

$ Cordova Build iOS

6. Use Xcode to open the project and run it with the following effect:

The steps above describe how to build a simple project using Cordova, and then we'll look at how to add Cordova to an existing native project.

How to integrate Cordova components into the native application in webview form:

You can refer to the steps in this URL, but there are some areas that are not right.

Http://cordova.apache.org/docs/en/4.0.0/guide_platforms_ios_webview.md.html

Here's my order to join the project ~

1. Join us already exists named Demo project, the directory structure is as follows:

2. Copy Cordova related files to the demo directory, copy the following directory structure as follows

3. Add Cordovalib.xcodeproj to Demo project, right-click Add Files to Demo

4. Add the WWW directory to the project, remember to tick the Create folder references

5. Follow step three to add Config. C to the project, the directory structure is as follows

6. Select the project build Settings->other Links, set-objc-all_load

7. Select Build phases->new Run script Phase to name the new run script Phase named copy www directory

8.Build phases->target Dependencies Add cordovalib

9.Link Binary with Librarys add libcordova.a, mobilecoreservices,assetslibrary

9. Next you can use Cordova, note other linkers must be set, otherwise you will be prompted similar error

-[__nscfconstantstring Jsonobject]: Unrecognized selector sent to instance

10. Then don't move anything, command + R can see the effect,

In fact, the Cdvviewcontroller in the HTML file configuration address can be defined, but the default is the WWW folder, so we do not have to change to run.

We can insert the following code before loading, specifying the folder and the Start page HTML file:

Self.wwwfoldername = @ "MyFolder";

Self.startpage = @ "mypage.html"

Add the Cordova framework to an existing Xcode project

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.