低成本跨平台方案-Cordva

前端泥瓦匠
1,460 阅读4分钟

我正在参加跨端技术专题征文活动，详情查看：juejin.cn/post/710123…

场景思考胜于技术体验

  在这个时代，前端开发者更加关注的是fultter、react-native、uni-app这样的新型技术方案，但是从技术的角度来思考一个问题，是否Cordva应该被淘汰呢?

  当你有一套h5(react、vue、jq、Angular)的页面，或许已经是这个团队，小半年的成果展示。从运营的角度思考，公司决定要开始将h5转化成一个app技术。你进入公司后，大肆渲染说，咱们应该做fultter，虽然你也不知道为什么，但是市场上新啊，体验好啊。那么对你的团队而言，是否会需要做一场大的重构呢?

产品是用出来的，不是想出来的

任何没有投入使用的设想，成为优秀的产品，都是耍流氓

作为前端而言，我认为在无法确定市场价值的时候，盲目的追求体验，最后吃亏的一定是公司。我认为这时候

cordva+X的设计方案，就可以体验出这样设计的价值。

技术是从做开始

创建项目

cordova create cordovaApp 
// 增加ios、android
cordova platforms add ios 
cordova platforms add android
// 打包
cordova build ios 
cordova build android
// 删除某个平台
cordova platforms rm android

跨平台设计方案最终要解决是什么?

  所以开发者都在说，手机跨平台解决方案，当然是为了解决手机可以使用咯。谜底就在谜面上，废话文学嘛。我认为不是，跨平台的解决方案，最终要解决的是web应用无法直接使用硬件设备的问题。JavaScript+html+css布局的形式，其实是很大程度上，目前我认为构建页面布局最简单的方式没有之一。(如果你不信，可以用安卓、ios)的原生应用写一些页面，就可以知道)。

那么既然跨平台最终解决的是调用原生插件，那么cordova能做到什么程度呢?

cordova-android适配安卓
cordova-hot-code-push-plugin热更新
cordova-ios适配ios
cordova-plugin-brightness可以调整设备亮度
cordova-plugin-contacts导入手机联系人
cordova-plugin-device获取设备信息整理
cordova-plugin-dialogs调用本地的对话框
cordova-plugin-inappbrowser打开新的浏览器窗口（设备默认浏览器）
cordova-plugin-jcore极光核心内核
cordova-plugin-splashscreen设置启动页面和图标
cordova-plugin-whitelist协议白名单配置整理
jpush-phonegap-plugin极光推送

修改配置

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ini.money" version="1.1.4" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>名称</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <author email="xx.com" href="https://cc.com"></author>
     // 此处写代码的地址
    <content src="pages/index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="res/icon/android/ldpi.png" />
        <icon density="mdpi" src="res/icon/android/mdpi.png" />
        <icon density="hdpi" src="res/icon/android/hdpi.png" />
        <icon density="xhdpi" src="res/icon/android/xhdpi.png" />
        <icon density="xxhdpi" src="res/icon/android/xxhdpi.png" />
        <icon density="xxxhdpi" src="res/icon/android/xxxhdpi.png" />
        <splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png" />
        <splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png" />
        <splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png" />
        <splash density="port-xxhdpi" src="res/screen/android/splash-port-xxhdpi.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <config-file parent="CFBundleURLTypes" target="*-Info.plist">
            <array>
                <dict>
                    <key>NSContactsUsageDescription</key>
                    <string>拒绝可能导致申请失败哦!</string>
                    <key>NSLocationAlwaysUsageDescription</key>
                    <string>拒绝可能导致申请失败哦!</string>
                </dict>
            </array>
        </config-file>
        <icon height="180" src="res/icon/ios/icon-60@3x.png" width="180" />
        <icon height="120" src="res/icon/ios/icon-60@2x.png" width="120" />
        <icon height="60" src="res/icon/ios/icon-60.png" width="60" />
        <icon height="76" src="res/icon/ios/icon-76.png" width="76" />
        <icon height="152" src="res/icon/ios/icon-76@2x.png" width="152" />
        <icon height="40" src="res/icon/ios/icon-40.png" width="40" />
        <icon height="80" src="res/icon/ios/icon-40@2x.png" width="80" />
        <icon height="57" src="res/icon/ios/icon-57.png" width="57" />
        <icon height="114" src="res/icon/ios/icon-57@2x.png" width="114" />
        <icon height="72" src="res/icon/ios/icon-72.png" width="72" />
        <icon height="29" src="res/icon/ios/icon-29.png" width="29" />
        <icon height="58" src="res/icon/ios/icon-29@2x.png" width="58" />
        <icon height="50" src="res/icon/ios/icon-50.png" width="50" />
        <icon height="100" src="res/icon/ios/icon-50@2x.png" width="100" />
        <splash height="960" src="res/screen/ios/640_960.png" width="640" />
        <splash height="1136" src="res/screen/ios/640_1136.png" width="640" />
        <splash height="1334" src="res/screen/ios/750_1334.png" width="750" />
        <splash height="2208" src="res/screen/ios/1242_2208.png" width="1242" />
    </platform>
    <preference name="Orientation" value="portrait" />
    <preference name="ShowSplashScreenSpinner" value="false" />
    <preference name="WebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />
    <preference name="loadUrlTimeoutValue" value="700000" />
    <allow-navigation href="http://*/*" />
    <allow-navigation href="https://*/*" />
    <allow-navigation href="data:*" />
    <engine name="android" spec="~6.4.0" />
    <engine name="ios" spec="~4.5.5" />
    <plugin name="cordova-plugin-whitelist" spec="1" />
    <plugin name="cordova-plugin-splashscreen" spec="~5.0.2" />
    <plugin name="cordova-plugin-inappbrowser" spec="custom_plugins/cordova-plugin-inappbrowser" />
    <plugin name="cordova-plugin-geolocation" spec="~2.4.3">
        <variable name="GEOLOCATION_USAGE_DESCRIPTION" value=" " />
    </plugin>
    <plugin name="cordova-plugin-device" spec="~2.0.2" />
    <plugin name="cordova-plugin-dialogs" spec="^1.3.4" />
    <plugin name="cordova-plugin-contacts" spec="~3.0.0" />
    <plugin name="cordova-plugin-brightness" spec="~0.1.5" />
    <plugin name="ToSafari" spec="custom_plugins/cordova-plugin-tosafari" />
    <plugin name="cordova-plugin-smslog" spec="~1.0.0" />
</widget>

JSBridge 让你有更多的可能

image.png

var exec = require('cordova/exec');

//修改后
//exports.toast的toast为js中调用的方法名，其中传递的参数可以任意多个 如：(arg0,arg1,arg2...,success,error)
exports.toast = function (arg0, success, error) {
    //ToastDemo与plugin.xml中feature节点的name属性值相同
    //这里的toast是java代码中用于判断调用方法的action参数
    exec(success, error, 'ToastDemo', 'toast', [arg0]);
};

package cordova.plugin.toastdemo;
import android.widget.Toast;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
/**
 * This class echoes a string called from JavaScript.
 */
public class ToastDemo extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        //这里对action进行判断
        if (action.equals("toast")) {
            String message = args.getString(0);
            //调用对应方法
            this.showToast(message, callbackContext);
            return true;
        }
        return false;
    }

	/**
	* 弹出Toast的方法
	**/
    private void showToast(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            Toast.makeText(cordova.getContext(), message, Toast.LENGTH_SHORT).show();
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

技术的迭代

  综上所述当开发者，推动了公司推广的进程，才可以拥有着更好的发展。大多创业公司，他们所需要的并不是性能多么强悍，技术多么优秀。他们希望的是，今天出需求，明天上线，后天推广。
  没有公司不希望更大的推广，而人手紧缺的时候，开发更应该有着一套低成本的方案。毕竟公司有些时候，极有可能是一拍脑袋的想法。当你把数据与价值，能更快的推给公司领导时，那么公司未来的进程才能加快脚步。

avatar
文章
阅读
粉丝
相关推荐
uni-app跨端开发框架介绍
7.9k阅读
 · 
19点赞
鸿蒙 OS 2.0 揭晓，华为必须成功
23k阅读
 · 
7点赞
Hybrid APP混合开发的一些经验和总结
4.9k阅读
 · 
2点赞
React Native —— TextInput 组件与键盘遮挡问题记录
7.1k阅读
 · 
40点赞
vscode的代码提示和自动导入功能
2.1k阅读
 · 
1点赞
前端面试题
555阅读
 · 
5点赞
Google的面试题长啥样？看完被吊打
2.3k阅读
 · 
13点赞
react-native 引入 react-native-vector-icons
662阅读
 · 
0点赞
最全 ECMAScript 攻略
5.7k阅读
 · 
62点赞

友情链接：