IONIC - 技术教程文章
Ionic2学习笔记（8）：Local Storage& SQLite【图】
作者：Grey原文地址： http://www.cnblogs.com/greyzeng/p/5557947.html ?? ? ??Ionic2可以有两种方式来存储数据，Local Storage和SQLite?LocalStorage?因为比较容易访问，所以不适合存比较敏感性的数据 比如可以存储: 用户是否登录的信息. 一些session信息等 具体用法： 进入项目目录：cd MyFirstApp 在主页设置一个按钮，点击按钮，获取LocalStorage的数据并打印在控制台 app/pages/home/home.html 在app/pages/home/home.ts中增...
Ionic 常见问题及解决方案【代码】
原文网址：http://mclspace.com/2016/01/16/ionic-problems-and-solutions/前言Ionic是目前较为流行的Hybird App解决方案,在Ionic开发过程中会遇到很多常见的开发问题，本文尝试对这些问题给出解决方案。一些常识与技巧list 有延迟，可以在ion-content处使用 overflow-scroll="true"尝试在<i>上用ng-click上是没效果的<label>标签内的事件会在整个label内被触发，点哪都触发快捷修改背景色能用ng-if就用ng-if,ng-if的效率比ng-show...
VS2015+cordova+ionic安装配置【代码】【图】
VS2015已经出了正式版，想用来试一下cordova方面的开发。最近在看ionic这个框架，于是想能在VS2015里编辑js就好了。下面说一下蛋疼的安装配置过程。一、安装VS2015及Android SDK首先Android的SDK最好提前下好，我是从另一个电脑上把已经下好的sdk复制到D盘Android目录下，这样安装VS2015的时候就不用选择SDK下载了，速度会快点。安装VS2015的时候最好网络FQ一下，不然有些组件有可能会下载失败。安装的组件我没选Xamarin，这玩意太...
ionic项目中实现发短信和打电话【代码】
原文地址：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ionic-sms-and-call/最近做的一个ionic项目中需要实现发短信和打电话，总结了一下遇到的问题和实现的方法。1.关于打电话在html中可以很方便的实现拨打电话先在config.xml中添加：<access origin="tel:*" launch-external="yes"/>然后在html中这样写：<a href="tel:10086”>拨打电话10086</a>但是我想获取点击打电话的时间，所以做了改动：html中：<button ng...
ionic+AnjularJs实现省市县三级联动效果【代码】【图】
建议对ionic和AnjularJs有一定了解的人可以用到，很多时候我们要用到选择省份、城市、区县的功能，现在就跟着我来实现这个功能吧，用很少的代码（我这里是根据客户的要求，只显示想要显示的部分省份和其相对应的城市、区县，并且这些数据将通过后台放入数据库，并没有引用完整的城市js）1.首先在所需要的HTML页面需要这些代码，其中的样式都是自己定义的，不喜欢的可以按照自己喜好来写：<div class="list"><div class="list" styl...
Ionic在Generating ES5 bundles for differential loadind的时候报错
https://blog.csdn.net/qq_41823263/article/details/105084611原文：https://www.cnblogs.com/johnjackson/p/12655318.html
ionic list component【代码】【图】
详见：http://ionicframework.com/docs/css/components 代码一：www/index.html <body ng-app="myreddit" ng-controller="RedditCtrl"><ion-pane><ion-header-bar class="bar-positive"><h1 class="title">My Reddit</h1></ion-header-bar><ion-content><div class="list"><a href="{{story.url}}" target="_blank" class="item item-thumbnail-left" ng-repeat="story in stories"><img ng-src="{{story.thumbnail}}" ng-if="st...
ionic中<ion-scroll>设置为左右滚动，苹果手机端触摸到此标签上时无法上下滚动内容
ionic中<ion-scroll>设置为左右滚动，苹果手机端触摸到此标签上时无法上下滚动内容。如下代码：<ion-scroll direction="x" scrollbar-x="false" style="width:100%"> <ul class="brand-scrollList"> <li ng-repeat="lists in bestProjects" ng-if="$index<10" ng-click="toProject(lists.id)"> <img ng-src="{{lists.image}}" err-src="img/middle.jpg"> <p class="br...
安卓平台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;页面...