• OnsenUI和AngularJS配合搭建混合应用基本步骤


    1.安装nodejs,(自动生成npm)。

    2.在cmd命令行中通过npm npm -install -g cordova安装cordova(若网络连接失败,设置代理npm config --global set registry http://registry.cnpmjs.org)。

    3.在命令行中创建cordova混合项目,cordova create lxf com.jredu.helloworld HelloWrold,lxf项目文件夹,com.jredu.helloworld项目包名称,HelloWorld 项目名称。

    4.进入到文件夹  cd lxf,通过 cordova platform add android为创建的项目添加android运行平台。

    5.添加完成后,还需要添加调用手机底层组件的一系列插件cordova  plugin add cordova-plugin-device等,见上篇cordova自定义插件

    6.项目创建成功,用开发工具导入项目(eclipse,Android Studio),导入项目后需要注意跳转SDK版本5.1以上,并且,把同时导入的jar包和项目关联起来

    7.项目正常运行,项目结构中,需要注意的是assets文件夹,包含了以后项目开发需要维护修改的全部文件

    8.assets中的index页面是项目启动的首页,在index页面指明页面的编码方式以后,其他页面的编码方式与index页面编码方式一致

    <meta charset="utf-8" />

    9.想要实现OnsenUI和AngularJS协作的混合项目,需要进行以下配制。

      因为项目是单页面应用(SPA),所以,项目运行期间用到的CSS和js文件,需要全部声明在index.html中。

      (1).引入的两个css文件,onsenui.css(组件)onsen-css-components-blue-basic-theme.css(主题)

      (2).引入必须引入的js文件:angular.js、onsenui.js、cordova.js、cordova_plugins.js和自定义的app_modal.js。注:cordova.js、cordova_plugins.js调用手机底层功能时有用,浏览器运行时,屏蔽两个文件,app_modal.js里的内容只写一句话即可:var app = angular.module('app', ['onsen']);

    10.在index页面的html标签里引用在app_modal里声明的模块<html lang="en" ng-app="app">

    11.这时候,创建的项目可以正确的运行onsenui前端框架提供的任何组件,需要注意的是:onsenui里的组件需要放在<ons-page>标签(div,p等)内,不要直接在<ons-page>中写入纯文本

    12.<ons-page>推荐写在<ons-navigator>标签中,以方便页面的跳转

    13.在index的<ons-page>标签内对onsenui提供的各种组件进行显示效果的测试

    14.等熟悉了onsenui提供的各种组件的显示效果以后,就可以通过angularjs的配合实现数据的填充。

  • 相关阅读:
    谎言,
    happy,
    架构,
    休闲游戏随想,
    IOS响应者链
    application 几个方法
    ios block 循环引用
    洛谷 P 1133 教主的花园
    Codevs 1148 == 洛谷 P1057 传球游戏
    Codevs 1169 == 洛谷 P1006 传纸条
  • 原文地址:https://www.cnblogs.com/xiaolei121/p/6061756.html
Copyright © 2020-2023  润新知