IONIC - 技术教程文章
安卓平台ionic2微博和QQ登录
1:将config.xml里面的<widget id="app包的名字" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">里面的id改为你的app包的名字(如:org.cadm.app)2:将ionic.config.json里面的name改为你的app的名字(如:cadm),app_id改为app包的名字(如:org.cadm.app)3,修改package_name*** a,修改ionic.config.json中app_id(PACKAGE_NAME):你的app包的名字(com.dengdd.sdkd...
Ionic介绍以及搭建环境、新建和运行项目【代码】【图】
场景Ionic介绍Ionic 是一个开源的移动应用程序开发框架,它可以轻松地使用web 技术构建高质量的跨平台的移动应用。可以让我们快速开发移动App、移动端WEB 页面、微信公众平台应用,混合app web 页面等。Ionic 基于Web Components,具有更好的运行速度,相比以前版本的Ionic 框架性能提升很多。Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web 应用中使用它们。目前WE...
ionic开发环境搭建【图】
Advanced HTML5 mobile development framework and SDK. Build incredible mobile apps with web technologies you already know and love. Best friends with AngularJS.ionic为当下比较热的一个移动端hybird框架。github:https://github.com/driftyco/ionic官网:http://ionicframework.com/在参照官网Start building with Ionic之前需要安装开放环境,这里记录下在windows上安装环境的几个步骤和问题:1. 安装java JDKjdk是Java...
ionic4 添加自定义字体图标【图】
在angular.json中的style中引入css文件:然后在variables.scss中添加内容: 原文:https://www.cnblogs.com/rjwx60/p/10453509.html
ionic 发送请求返回一直都是404
在web端调试一直都没有问题,生成app之后发现所有的请求返回的都是404,断掉wifi和4G之后发送的也是404原因是未引入插件解决方法http://stackoverflow.com/questions/30060534/ajax-requests-fail-after-upgrading-to-cordova-5-0-cordova-android4-0原文:http://www.cnblogs.com/happen-/p/5615122.html
Ionic3学习笔记(十二)拍照上传图片以及从相册选择图片上传【代码】
本文为原创文章,转载请标明出处目录安装插件导入 app.module.ts创建 provider更多效果图1. 安装插件终端运行:ionic cordova plugin add cordova-plugin-camera npm install --save @ionic-native/cameraionic cordova plugin add cordova-plugin-telerik-imagepicker --variable PHOTO_LIBRARY_USAGE_DESCRIPTION="your usage message" npm install --save @ionic-native/image-picker2. 导入 app.module.ts... import {Camera} f...
ionic1 添加百度地图插件 cordova-plugin-baidumaplocation【代码】
cordova-plugin-baidumaplocation 这个插件返回的数据是 json 格式的 可以直接获取 android 和 ios 都可用1.先去百度地图平台去创建应用 获取访问应用AK android 和 ios 是分开的 不同的 http://lbsyun.baidu.com/2.创建的时候需要发布版SHA1和开发板SHA1 参考链接:https://blog.csdn.net/lhg_55/article/details/52139277 (亲测有效)3.添加插件 " " 里面直接写值 不需要 < > 括号cordova plugin add cordova-plugin...
ionic3 生命周期
ionic3 总共有8个钩子函数,分别是:onPageLoaded,onPageWillEnter,onPageDidEnter,onPageWillLeave,onPageDidLeave,onPageWillUnload,onPageDidUnload还有两个钩子不太一样,上面的钩子函数都没有返回值,以下两返回布尔值:ionViewCanEnter,ionViewCanLeave // 页面被加载完成后调用的函数,切换页面时并不会进行重新加载,因为有cache的存在 onPageLoaded() { console.log(‘page 1: page loaded.‘); } // 页面...
Ionic 安装JPush过程【代码】【图】
1.在官网注册App帐号,完成后会生成对应的AppKey2. 进行在线安装 cordova plugin add https://github.com/jpush/jpush-phonegap-plugin.git --variable API_KEY=XXXXXX安装成功之后会看到对应的插件和生成的cn.jpush.android.api.JPushInterface类 这个版本如果根据别名发送通知,在登录的时候保存别名的格式如下:window.plugins.jPushPlugin.setAlias(‘别名‘);不同于与之前的var params = { alias:‘别名‘ };var data...
后台提醒数字(应用程序applicationIcon上的数字)【图】
@property(nonatomic) NSInteger applicationIconBadgeNumber; // set to 0 to hide. default is 0. In iOS 8.0 and later, your application must register for user notifications using -[UIApplication registerUserNotificationSettings:] before being able to set the icon badge. 发现8.0以后,要先写-[UIApplication registerUserNotificationSettings:]这个方法 于是: [[UIApplication sharedApplication] registerUse...
ionic tab导航在android 真机测试中 导航在顶部解决办法
在 iOS中, tabs 一直处于底部. 在android中 ionic tabs 一直在顶部,如果要改我们可以通过配置$ionicConfigProvider .config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) { $ionicConfigProvider.platform.ios.tabs.style(‘standard‘); $ionicConfigProvider.platform.ios.tabs.position(‘bottom‘); $ionicConfigProvider.platform.android.tabs.style(‘standard‘); ...
ionic打包到手机
1、配置java Jdk环境变量2、下载安装android SDK3、配置android SDK环境变量4、命令行打adb查看是否安装5、进入项目文件,执行命令ionic build android 打包apk文件 ionic run android 打包 debug.apk调试 chrome://inspect/#devices 原文:http://www.cnblogs.com/cutone/p/5735542.html
XUbuntu18.04(Bionic河狸)正式发布,系统安装升级记录
XUbuntu18.04(Bionic河狸)正式发布,系统安装升级记录详细介绍:https://blog.pythonwood.com/2018/04/XUbuntu18.04(Bionic河狸)正式发布,系统安装升级记录/原文:https://www.cnblogs.com/weishun/p/8966490.html
ionic3 关于屏幕方向问题
关于屏幕方向问题使用ionic-native中的screen-orientationionic cordova plugin add cordova-plugin-screen-orientationnpm install --save @ionic-native/screen-orientationapp.module.ts 的 providers 进行引用 ScreenOrientation。在真机中才会看到效果,可以配合页面的生命周期进行设置,也可以在app.component.ts中全局设置设置: import { ScreenOrientation } from ‘@ionic-native/screen-orientation‘; constructor(pr...
ionic项目使用weinre调试移动端【代码】【图】
怎样调试ionic开发的hybridApp web view在一篇歪国人的博文中,偶然发现weinre这个词。然后就与他结下了不解之缘。weinre是什么weinre是远程web调试器,可以调试web页面。如果你用过FF的FireBug和chrome的调试工具对它那会有熟悉的即视感。weinre也是Codova项目的一份子,所以用它来调试ionic开发的app最合适不过了。如何安装weinre?使用npm命令安装1.这种方法需要你先安装好node,Windows的安装方法网上太多,自行查找,这里有一...
ionic3 生命周期钩子【代码】
ionViewDidLoad页面加载完成触发,这里的“加载完成”指的是页面所需的资源已经加载完成,但还没进入这个页面的状态(用户看到的还是上一个页面)。需要注意的是它是一个很傲娇的钩子,全程只会调用一次,即第一次进入页面时被调用,此后你无论怎样进进出出它都冷冷清清凄凄惨惨戚戚不再理你了。除非你把它的后台杀了,重新进入这个软件(在网页调试的时候按刷新也是可以的)。因此这个钩子适合你做一些一次性的处理,比如从服务器...
ionic-angular项目中,插件升级问题.【代码】
ionic-angular项目中,插件升级问题.原来的package.json文件: 1 "dependencies": {2 "@angular/common": "2.2.1",3 "@angular/compiler": "2.2.1",4 "@angular/compiler-cli": "2.2.1",5 "@angular/core": "2.2.1",6 "@angular/forms": "2.2.1",7 "@angular/http": "2.2.1",8 "@angular/platform-browser": "2.2.1",9 "@angular/platform-browser-dynamic": "2.2.1", 10 "@angular/platform-se...
ionic cordova 集成 crosswalk【代码】
参考ionic官方博客http://blog.ionic.io/crosswalk-comes-to-ionic/ionic browser add crosswalk ionic run androidcordova集成crosswalkhttps://crosswalk-project.org/documentation/cordova/cordova_4.htmlcordova plugin add cordova-plugin-crosswalk-webview cordova build android生成apk: platforms/android/build/outputs/apkplatforms/android/build/outputs/apk/android-x86-debug.apk platforms/android/build/outputs...
ionic新手教程第三课-在项目中使用requirejs分离controller文件和server文件【代码】【图】
继上篇教程中提到的,我们新建一个简单的tabs类型的Ionic项目。依据文件夹文件我们知道,系统自己主动创建了一个controller文件和server文件,而且把全部的控制器和服务都写到这两个文件中面。这是一个简单的项目,业务逻辑代码也非常少。这样子实现并没有什么问题。可是当我们的项目越写越多。业务逻辑越来越复杂。假设我们还是把全部的控制器写到同一个文件中面。那可能我们将要面对的就是一个有着上万行代码的文件。每次编辑仅仅...
ionic上拉加载组件 ion-infinite-scroll自动调用多次的问题【代码】
参考文章地址:http://www.cnblogs.com/luleixia/p/6402418.htmlionic 一个上拉刷新的组件 ion-infinite-scroll,如果页面未填充满页面高度,会自动检测并无限调用多次加载更多的函数;当然,主要会导致首次调用的时候,会执行几次加载更多的函数;解决方法: 在ion-infinite-scroll标签中,设置 immediate-check="false"; 这个属性设置了: 是否在页面加载后立刻触发on-infinite的方法, 设为false后,则只有滚动...
Ionic 弹出窗【代码】【图】
Ionic弹窗服务允许程序创建、显示弹出窗口,需要用户继续响应。弹窗系统支持更多灵活的构建alert(),prompt()和confirm()功能版本,以及用户习惯,除了允许查看完全自定义内容的的弹窗。angular.module(‘mySuperApp‘, [‘ionic‘]) .controller(function($scope, $ionicPopup, $timeout) {// 触发一个按钮点击,或一些其他目标$scope.showPopup = function() {$scope.data = {}// 一个精心制作的自定义弹窗var myPopup = $ionicP...
ionic 手机端如何嵌入视频iframe【代码】【图】
需求说明:后台提供功能,可以通过富文本编辑器【summernote】上传优酷的视频链接地址(这里需要注意:优酷视频提供多种操作方式 下面截图说明,先做个标记); 客户端是通过ionic开发的;而上传的视频查看后台源码;其实是一段iframe 嵌入代码;问题在于ionic+angularJs怎么把这个html代码解析出来放到客户端呢?先上第一张参考图:此图出处:http://www.thinksaas.cn/group/topic/350702/参考图二:$scope.myURL = URL;页面...
ionic 项目笔记
最近公司在用ionic 做 微站,项目中难免遇到一些问题.总结如下:1. 改了Slidebox 动态绑定图片时,页面会显示一片空白,改变窗口大小的时候,图片就出来了,说明动态绑定图片时,需要手动去重绘页面,即调用$ionicSlideBoxDelegate.Update()方法。2. SideMenu 控件,使用时在菜单上面点来点去,再次访问已经点击过的菜单的时候,SideMenu不会缩回去,而且有时候页面点都点不动,需要调用 menu-close 指令强制将菜单关闭。...
Ionic实战二:购物车【图】
用户名密码都为空此app功能主要有如下1.首页轮播和商品列表展示 2.左侧侧滑页面分类展示 3.商品详情页面展示 以及购买 4.购物车 订单填写 支付等页面??????????原文:http://www.cnblogs.com/quickcodes/p/Ionic-shi-zhan-er-gou-wu-che.html
解决ionic框架tab栏在安卓手机跑到顶部的问题【代码】
在app.js中.config中添加如下代码$ionicConfigProvider.platform.ios.tabs.style(‘standard‘); $ionicConfigProvider.platform.ios.tabs.position(‘bottom‘); $ionicConfigProvider.platform.android.tabs.style(‘standard‘); $ionicConfigProvider.platform.android.tabs.position(‘bottom‘);$ionicConfigProvider.platform.ios.navBar.alignTitle(‘center‘); $ionicConfigProvider.platform.android.navBar.alignTit...
谈谈IONIC版本中加入的React开发方式【代码】
IONIC介绍发现国内前端圈里面,现在知道IONIC的人已经很少了,但毕竟这东西也是一门不错的移动端开发技术,感觉可能大多数人对于新技术的追求和尝试,让这个技术看起来地位略微尴尬。但是,毫无疑问,这门技术,在全球还是相对比较流行的。IONIC是什么?如果在利用前端技术做手机app的起步阶段,大家大概会听到phonegap、Xamarin。其中Xamarin是基于C#的一套移动开发框架,当然,现如今团队已经被微软收购,生命力看起来也并不算多...
Ionic实战 自动升级APP(Android版)【代码】
Ionic 框架介绍 Ionic是一个基于Angularjs、可以使用HTML5构建混合移动应用的用户界面框架,它自称为是“本地与HTML5的结合”。该框架提供了很多基本的移动用户界面范例,例如像列表(lists)、标签页栏(tab bars)和触发开关(toggle switches)这样的简单条目。它还提供了更加复杂的可视化布局示例,例如在下面显示内容的滑出式菜单。Ionic 自动升级APP一、准备工作 1.Cordova插件: cordova plugin add https://g...
Ionic系列——修改应用图标和启动页【代码】
1、在项目的根目录下创建resources文件夹。 2、在文件夹中都放入icon.png(应用图标,最小192x192px,不带圆角),splash.png(启动屏幕,最小2208x2208px,中间区域1200x1200px)(可以是png、psd、ai) 3、在cmd中进入项目所在文件夹执行:ionic resources --icon ionic resources --splash4、项目中的config文件中是这样<platform name="android"> <icon src="resources\android\icon\drawable-ldpi-icon.png" density="...
Ionic学习笔记1_基本布局
<body> <!-- 头部 --> bar里嵌入子元素:title,button,button-bar和 input <div class="bar bar-header bar-dark item-input-inset"> <h1 class="title">Header</h1> 布局? item-input-inset, item-input-wrapper <label class="item-input-wrapper"> <a class="button button-...
Android内核源码bionic目录下的源码的学习笔记
好记性不如烂笔头。今天要做的学习是关于bionic目录下的代码。首先需要看的是_errno.c这份代码。volatile int* __errno( void ) {return &((volatile int*)__get_tls())[TLS_SLOT_ERRNO]; }从上面可以看出,返回的是一个指向int类型的指针。 volatile关键字是一种类型修饰符,用它声明的类型变量表示可以被某些编译器未知的因素更改,比如:操作系统、硬件或者其它线程等。由于访问寄存器的速度要快过RAM,所以编译器一般都会作...