javascript - 创建 phonegap 项目的清单 - SomeOne 可以添加更多元素

Question

如需更新列表，请查看此 URL

http://www.aurigait.com/blog/checklist-of-creating-phonegap-project/

我们将做核心 HTML 开发。但是 Jquery Mobile 可以用作平台，因为它具有广泛的设备支持和易于制作表单，并在低端设备上权衡性能。
各种设备不支持 UI 转换，我们可以选择性地应用转换。
iOS 和 android 导航保持相同或不同，因为在 android 中可用后退按钮导航
语言/音频/技术支持
分析 / 通知和强度 [Notificatioin Pages History] / Adwords / 基于地理位置
响应式布局分辨率分解
我们将支持 320*480 及以上的分辨率。（为此，我们可以有一个 320*480（移动纵向）/768*1024（平板纵向）/1280*720（桌面）的 UI 设计
更新和新闻
活动日历和提醒
用户反馈表
滑动手势
共享应用程序中的所有内容
单页应用程序[单页布局有效地实现了这些。（按照 paytm / asana / gmail 的例子）]
直接从服务器获取 html，而 UI 只是一个视图容器。
为此使用 Mobstac 之类的应用程序转换。/xslts/变换
单页应用程序[单页布局有效地实现了这些。（按照 paytm / asana / gmail 的例子）]
直接从服务器获取 html，而 UI 只是一个视图容器。
为此使用 Mobstac 之类的应用程序转换。/xslts/变换。
ios和android共享
后退按钮导航支持
需要应用程序/管理面板的文档
报告的导出选项

(1)android中的后退按钮导航支持非常重要，应该从开发周期的第一天就计划好。在 IOS 中，必须为所需的导航提供返回按钮。记住 android 和 iOS 有不同的导航模式。

 document.addEventListener("backbutton", onBackKeyDown, false); //onBackKeyDown

(2)避免在页面内使用表单元素，因为没有用，你永远不会提交。

(3) 对于 phonegap 闪屏请使用 navigator splash hide() 而不是 autohide=true 和 timeout。

<preference name="auto-hide-splash-screen" value="false" />

(4) 支持android splash Landscape，所以请把landscape splash images 也放入系统中（对于iOS，我们正在研究它）

(5) 当使用 cloud build for phonegap 然后 native build 记得删除 repo 的图像，因为如果使用 cloud build 图像将作为 zip 包上传，会增加应用程序的大小。

(6) android 和 ios 不同的插件 JS 维护单独的文件，记住在 SVN 中只会为 android 和 iOS 保留一个存储库，也不例外。

   <!--iOS / Android cordova
    <script src="js/ios/cordova-2.5.0.js"></script>-->
     <script src="js/android/cordova-2.5.0.js"></script>
     <!--android cordova-->
     <script src="js/android/flurry.js"></script>
     <script src="js/android/PushNotification.js"></script>
     <script src="js/android/AdMobPlugin.js"></script>
     <script src="js/android/share.js"></script>
     <script src="js/android/ExecutePlugin.js"></script>
    <!--iOS / Android cordova  
    <script src="js/ios/AdMobPlugin_iOS.js"></script>
    <script src="js/ios/flurryPlugin_iOS.js"></script>
    <script src="js/ios/PushNotification_iOS.js"></script>
    <script src="js/ios/iOS_Execute.js"></script>
    <script src="js/ios/share.js"></script>-->

(7)不要使用Javascript确认框，警报使用Native框。他们看起来不错

navigator.notification.confirm("Do You want to Exit Km?", function (idx) { if (idx == 2) { navigator.app.exitApp(); } }, 'Exit Application', 'No,Yes');

function Native_Alert(msg) {
    if (navigator.notification != undefined) {
        navigator.notification.alert(msg);
    }
    else
        alert(msg);
}

(8) 使用列表选择时使用原生选项列表和检查列表，因为它们看起来更好。不是 html 选择项

 <select id="Select2" name="Select2" data-role="none" >
                    <option>Town</option>
                </select>

(9)为了去除下面的 android 4.0.3 元素使用的白色覆盖

input{
   -webkit-user-modify: read-write-plaintext-only;}

(10)永远不要优先安装~android 2.2不支持的SD卡

(11) 移动应用程序的屏幕宽度不能改变，只有垂直滚动可以有一些例外。屏幕有时会移动到区域之外，应注意仅在编写标记和 css 时。

(12) Android 和 iOS 的原生加载面板是首选，因为它们具有阻塞特性。 http://abstractlayers.com/2013/03/09/phonegap-adding-progress-dialogspinner/

(13)动态和评估脚本注册和注销

(14)Phonegap childbrowser 不能信任加载我们可以使用的所有内容，在phonegap 之外的New Browser 中打开窗口，您可以使用InAppbrowser。

function OpenLinkinNewWindow(weblink, sharecontrol, subjectval) {
    try {

        if (global_deviceType == undefined || global_deviceType == "")
            global_deviceType = (navigator.userAgent.match(/iPod/i)) == "iPod" ? "iOS" : (navigator.userAgent.match(/iPad/i)) == "iPad" ? "iOS" : (navigator.userAgent.match(/iPhone/i)) == "iPhone" ? "iOS" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "other";
        switch (sharecontrol) {
            case 'facebook':
                weblink = 'http://www.facebook.com/sharer.php?u=' + encodeURI(weblink) + '&t=' + encodeURI(subjectval);
                break;
            case 'twitter':
                weblink = 'http://twitter.com/share?text=' + encodeURI(subjectval) +'&url=' + encodeURI(weblink);
                break;
            default:
                break;
        }
        consoleLOG('sharer weblink : ' + weblink);
        //incase of videos android and iOS have different problems while loading videos since childbrowser can open vid for on IOS
        if (global_deviceType == "Android")
            navigator.app.loadUrl(weblink, { openExternal: true });
        else if (global_deviceType == "iOS")
            window.open(weblink, '_system', 'location=yes'); //andriod changes
        else
            window.open(weblink); //andriod changes
    }
    catch (ex) { consoleLOG('error in OpenLinkinNewWindow : ' + ex); window.open(weblink); }

}

(15)具有html5特性的应用离线检查

(16) 在创建 iOS Native 构建时，请将引用复制到构建的文件夹中，否则在移植到另一个系统时构建会出现问题。

(17)phonegap 云构建必须锁定到特定版本的phonegap，否则它将为可能有错误的最新RC 版本创建构建。config.xml 文件在使用 phonegap 构建功能之前应该仔细阅读。

(18) 为创建下一个 android 和 iOS 构建版本必须更新到版本 1.0 + 0.1 或合适的版本。

(19) 保持应用程序命名空间，捆绑 id 在第一时刻正确，因为一旦应用程序部署到应用程序/播放商店，你就永远无法更改它。[*不要放 com.demo.demoApp]

(20) 将苹果配置和分发配置文件以及您正在使用的任何 Mac 的开发人员配置文件保存在备份中，因为应用程序代码库和证书、公钥和 p12 文件非常依赖于 Mac。

(21) 禁用 android 和 iOS 的不需要的权限，以避免加载不需要的组件，并且它还显示在应用商店权限选项卡上，安装时用户可能会因为看到应用程序需要不需要的权限而感到困惑。

<plugins>
    <plugin name="App" value="org.apache.cordova.App"/>
    <plugin name="Geolocation" value="org.apache.cordova.GeoBroker"/>
    <plugin name="Device" value="org.apache.cordova.Device"/>
    <!-- commented <plugin name="Accelerometer" value="org.apache.cordova.AccelListener"/>
    <plugin name="Compass" value="org.apache.cordova.CompassListener"/>
    <plugin name="Media" value="org.apache.cordova.AudioHandler"/>
    <plugin name="Camera" value="org.apache.cordova.CameraLauncher"/>
    <plugin name="Contacts" value="org.apache.cordova.ContactManager"/>-->
    <plugin name="File" value="org.apache.cordova.FileUtils"/>
    <plugin name="NetworkStatus" value="org.apache.cordova.NetworkManager"/>
    <plugin name="Notification" value="org.apache.cordova.Notification"/>
    <plugin name="Storage" value="org.apache.cordova.Storage"/>
    <plugin name="FileTransfer" value="org.apache.cordova.FileTransfer"/>
    <plugin name="Capture" value="org.apache.cordova.Capture"/>
    <!-- commented <plugin name="Battery" value="org.apache.cordova.BatteryListener"/>-->
    <plugin name="SplashScreen" value="org.apache.cordova.SplashScreen"/>
    <!--<plugin name="Echo" value="org.apache.cordova.Echo" />-->
    <plugin name="Globalization" value="org.apache.cordova.Globalization"/>
    <plugin name="Share" value="com.schaul.plugins.share.Share"/>
  </plugins>

(22)在任何情况下，移动应用程序都不会应用悬停css类。悬停不用于移动设备，否则会产生问题。

(23)使用Phonegap进行Native Application开发

score 1 · Accepted Answer

14.. 如果您想将您的应用程序发布到 Apple 商店，请忽略此解决方案。它会被及时拒绝。

重温：从服务器获取原始数据并使用 jQM 应用程序生成前端 GUI

16.. 性能改进取决于平台，主要是在 Android 2.X 上。众所周知，Phonegap 和 jQM 在较旧的 Android 平台上表现不佳。

17.. 使用hammer.js（与jQuery Mobile 兼容）添加更复杂的触摸手势集

18.. 如果可能的话，在 iOS 和 Android 平台上使用 Phonegap 插件作为原生导航/标签栏，让应用看起来更原生（这将有助于让应用在发布过程中更容易被接受）。

score 1 · Accepted Answer

如需更新列表，请查看此 URL http://www.aurigait.com/blog/checklist-of-creating-phonegap-project/

(24)Tap Highlight的已知问题

input
{
   -webkit-user-modify: read-write-plaintext-only;
}

*:hover, *
{
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;
}

(25) 各种设备的调试规范，您可以在 node.js 设置上部署 wienry 远程调试器。Console.log 日志记录、日志传送、错误处理必须放在每个 javascript 函数中。(26)CORS跨域请求必须转换为JSONP请求：移动浏览器不支持CORS，有时我们需要cors来运行应用程序在移动浏览器上进行测试。有一种解决方法可用。GET.PHP 脚本可以放在本地主机上以挑选 JSON 数据。这会将跨域请求重新路由到 localhost 请求，并且不会出现 CORS 错误。

var Global_URL = http://xxxxxx:8080/WWW/local_native/assets/www/get.php?url='http://www.remoteserver.com/JSONDATA?q=12';
<?php
$url = $_GET['url'];
$page = file_get_contents($url);
echo $page;
?>

(27) 备份 android 密钥库并像您的长子一样保护它备份所有 ios 证书并保护它们。

(28)禁用 chrome 的 web 安全批处理文件

cd C:\Program Files\Google\Chrome\Application\
chrome.exe --disable-web-security

(29)应用程序无法在平板电脑上运行

 <!--<supports-screens
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:resizeable="true"
        android:anyDensity="true"
            />-->

(30)禁用所有不需要的权限

(31)Android 2.2 及以上和 IOS 5.1 以上 (32)android 和 iOS 的生产命名空间 (33)应用程序名称 iOS 点点显示问题 (34) <preference name="disallowOverscroll" value="true" /> (35)如果正确的 json 不是来自服务器

function GetJSONifNeeded(data) {
    if (typeof data == "object")
        return data;
    else
        return JSON.parse(data);
}

function GetJSONstringfyifNeeded(data) {
    if (typeof data == "object")
        return JSON.stringify(data);
    else
        return data;
}

(36)如何应用触摸事件而不是点击

href = "<a class='applymenutouch' data-ele='" + i + "' >";
$('.applymenutouch').on('touchstart', function () { alert(render_submenu_link($(this).attr('data-ele'))); })

//SECOND BETTER WAY dynamic click to touch event convert
[a] touchsliderTopNewsMob = '<li><a data-click="javascript:Review_ShowArticle(' + page_id + '  class="classt">'
[b]ApplyTouch('classt');
[c]function ApplyTouch(cssclass) {
    $.each($('.'+cssclass), function (idx, elm) {
        var tapping = false;
        $(elm).on('touchstart', function () { tapping = true; });
        $(elm).on('touchmove', function () { tapping = false; });
        $(elm).on('touchend', function () {
            tapping && eval($(this).attr('data-click'));
        });
        $(elm).removeClass(cssclass);
    });}

javascript - 创建 phonegap 项目的清单 - SomeOne 可以添加更多元素

2 回答 2

Related

Reference