菠菜盼娣-CSDN博客

原创 vue-cli3.0创建项目相关

创建项目使用步骤：npm i -g @vue/cli//基于交互式命令行的方式，创建新版vue项目vue create my-project//基于图形化界面的方式，创建新版vue项目vue ui//基于2.x的旧模板，创建旧版vue项目npm i -g @vue/cli-initvue init webpack my-project脚手架的自定义配置vue.config.js“vue”:{ "devServer":{ "port": "8888"，//配置

2021-04-12 13:23:52 97

原创 webpack基础

webpack是一种前端构建工具，叫静态模块打包工具，所有得构建工具都是基于nodejs平台运行得，模块化采用common.jswebpack特点：1，能处理js,json文件不能处理css,img资源2，生产环境和开发环境能将es6模块化编译成浏览器识别得模块化，3，生产环境比开发环境多一个压缩js代码，所以体积小例如：前端引入JQ import $ from 'jquery', import './index.less',因为浏览器不能识别less,需要使用构建工具转换成浏览器识别得cssj

2021-04-12 11:43:33 137

原创 vue-route

vue-routevue-route详解基础用法//被vm实例所控制的区域<router-link to="/user">user</router-link>//路由占位符<router-view></router-view>//创建路由实例对象const router = new VueRouter({//所有的路由规则 routes:[ {path:'/',redirect:'/user'}, //路由重定向 {

2021-04-12 11:23:25 153

原创 Fetch与axios对比用法

fetch请求参数get请求方式的参数传递特性：更加简单的数据获取方式，功能更强大，更灵活，可以看作是xhr的升级版。基于promise实现常用配置选项method:HTTP 请求方法，默认GET(GET，POST，PUT，DELETE)body:HTTP的请求参数headers：HTTP请求头默认为{}1，fetch('/abc?id=123').then(data=>{//此处：返回的是promise对象分为两种情况//1 text() 属于fetchAPI的一部分，返回

2021-04-12 10:03:15 256

原创 URL格式总结

url地址格式1，传统形式的url格式： schema://host:port/path?query#fragmentschema:协议，例如http，https,ftp等host: 域名或者ip地址port: 端口 http默认端口80 可以省略path: 路径，query: 查询参数 fragment: 描点（哈希Hash）用于定位页面的某个位置例如： 1 http://www/itcast.cn 2 http://www/itcast.cn/jsva/web 3 http:/

2021-04-12 09:22:17 694

原创 angular8 rxjs，动画

rxjs 异步编程类似promise第三方模块 import {Observable} from 'rxjs' 封装 getRxjsData(){ return new Observable((ob)=>{ settimeout(()=>{var user="123" ob.next(user)},2000) ...

2020-04-21 14:33:47 210

原创 ionic4 轮播图ion-slides，日期控件ion-datetime，侧边栏ion-menu

slide轮播图依赖swiper轮播基础html中<ion-slides pager="true" [options]="slideOpts" #slide1 (ionSlideTouchEnd)="sun()"> <ion-slide> <h1>Slide 1</h1> </ion-sli...

2020-04-21 11:17:33 302

原创 ionic4 ion-button，radio双向数据绑定，checkbox双向数据绑定，select 双向数据绑定，searchbar组件，segment组件

ion-button<ion-button expend="block/full" fill="clear/outline" size="large/small" mode="ios/md" >expend="block/full" 控制宽度有无圆角fill="clear/outline" 设置背景填充size="large/small"...

2020-04-21 10:35:42 818

原创 ionic4 自定义公共模块，共享组件

1 创建组件及模块ionic g module module/slideionic g component module/slide2 公共模块中暴露对应组件import { NgModule } from '@angular/core';import { CommonModule } from '@angular/common';import { SlideComponent } ...

2020-04-21 09:28:08 317

原创 angular8 路由相关

路由使用前提1 创建组件2 引入组件(app.module.ts)3 app.routing.ts中引入组件4 配置路由路由配置const routes:Routes=[{path:'home',component:HomeComponent},{path:'news',component:NewsComponent},{path:'**',redirectTo:'home'},...

2020-04-21 09:12:10 285

原创 ionic1升级到ionic4 需要做的

版本的升级要做的1 升级node.jswindow 下升级需要下载最新的安装包覆盖安装linx 下直接 npm i -g n --forcen --stable2 安装依赖npm install -g @ionic/cliionic start myApp tabsionic serve3 增加模块页面ionic generate page home...

2020-04-20 16:58:47 364

原创 angular8请求公共IP

内置模块 HttpClientget请求app.module.tsimport {HttpClientModlue} from "@angular/common/http"imports:[HttpClientModule]用到的地方引入HttpClientimport {HttpClient } from "@angular/common/http"constructor(pu...

2020-04-20 16:31:39 462

原创 angular8 父子组件之间的通信 @ViewChild @Input

@ViewChild 在父组件中调用子组件头部组件用到新闻组件中news<app-header #header></app-header><button (click)="getChildClick()">new.tsimport {ViewChild} from "@angular/core"@ViewChild('header') heade...

2020-04-20 15:34:47 234

原创 angular8数据持久化获取DOM节点

服务 localstorage1 创建服务ng g service services/storage2 app.modules.t中引入配置import {StorageService} from './services/storage.service'provides:[StorageService] 3 在使用的地方import {StorageService} from ...

2020-04-20 15:10:37 460

原创 angular8组件新增，基本语法，双向数据绑定

angular81 新增组件创建 ng g component components/news引入 import NewsComponent from '../../components/news'使用 <app-news></app-news>2 生明变量public private protected any string 等p...

2020-04-20 14:50:27 728

原创 ionic android升级错误 exposed beyond app through Intent.getData()

应用内自动升级，下载安装包后抛出异常，先贴个错误错误信息Log:android.os.FileUriExposedException: file:///storage/emulated/0/aiyou.apk exposed beyond app through Intent.getData()问题分析：1.版本不支持修改platforms>android中的AndroidMa...

2020-03-23 14:08:29 280

原创 Cordova实现文件创建和读写操作（支持Android和IOS等）

Cordova实现文件操作，本篇文章讲述的是在IOS和Android上实现以下两种需求：1，创建文件夹和文件，从数据库获取数据并写入到文件；2，获取指定目录文件夹下文件，并读取文件数据；先上效果图：创建文件夹和文件，从数据库获取数据并写入到文件获取指定目录文件夹下文件，并读取文件数据进入正题，下面是具体实现过程：文件操作使用了cordova-plugin-file插件，插件地址：ht...

2020-02-18 09:25:38 634

转载 ionic1 页面html渲染完成之后函数封装

ionic1 页面html渲染完成之后函数封装html<ul> <li ng-repeat="item in items" on-finish-render="callMethod()"> dummy Text </li></ul>app.js定义服务指令//angularjs渲染完执行 .directive('o...

2019-07-05 16:49:35 278

原创 git的使用

git 使用方法git 创建一个分支 git pull 拉取线上分支git checkout 分支名进入此分支git status 查看状态git add. 分支上提交git commit -m'123'git pushgit checkout master 切换主分支git merge origin/分支名git push如果分支代码忘记...

2019-06-21 10:00:19 113

转载 ionic1特定页面隐藏tabs

html<ion-tabs class="tabs-icon-top tabs-color-active-positive" ng-class="{'tabs-item-hide': $root.hideTabs}"></ion-tabs>js.run(function ($rootScope) { $rootScope.$on('$stateChangeS...

2019-06-17 14:59:18 142

原创 ionic1 当用户上滑下滑时对应得header得显示与隐藏

html<div id="AreaInfo" on-swipe-up="onSwipeUp()" on-swipe-down="onSwipeDown()"></div>js//通过areaTemp来控制class类得显示隐藏 $scope.areaTemp = false //当用户上滑得时候 $scope.onSwipeUp = functio...

2019-06-17 14:42:39 171

原创 ionic项目打包ios及上线所遇到得问题

修复电话字体修复电话字体，直接另起一行进行设置，否则在原有的name，content下设置无效<meta name = "format-detection" content = "telephone=no">iPhone X底部适配/*ionic适配iPhone X*/@supports (bottom: env(safe-area-inset-bottom)) { ...

2019-04-30 09:08:02 93

原创 ajax

1 远古时代的ajax 做无刷新请求方法1. http协议 204 返回表示无内容，导致后台请求前端页面不刷新header(‘Http/1.1 201 No Content’) 当页面收到204时页面不做跳转方法2 img src 请求后台 var hh = document.createElement('img') 创建img标签 hh.setAttribute('s...

2019-04-29 16:04:00 44

原创 angular7.0用法

一 app.modlue.ts的各个参数@NgModule declarations配置当前项目运行的组件imports 配置当前模块运行依赖的其他模块providers 配置项目所需的服务bootstrap 根组件二创建组件1 ng g component component/header2 使用的时候直接 <app-header></app-h...

2019-04-11 17:03:59 360

原创 ionic3滑动菜单的使用方法

1 先引入swiper<link rel="stylesheet" href="assets/swiper/css/swiper.min.css"><script src="assets/swiper/js/swiper.min.js"></script>2 创建页面模板ionic g page pagemenu13 将pagemenu1引入到对应...

2019-04-11 14:30:35 73

原创 ionic1 滑动表格

1 相关html <div> <div class="biaotou" style="display: flex"> <div class="heads"> <span>姓名</span> </div> <div cl...

2019-03-29 10:04:35 345

原创 ionic3 segments 用法

描述通过次级导航栏点击对应的按钮通过对应的按钮点击传递的参数来显示哪个content下的内容1 相关html<ion-header><ion-toolbar no-border-top> <ion-segment [(ngModel)]="pet"> 双向绑定pet <ion-segment-button ...

2019-03-22 09:53:05 60

原创 ionic3 searchbars用法

1 相关html<ion-searchbar (ionInput)="getItems($event)"></ion-searchbar> <ion-list> <ion-item *ngFor="let item of items"> {{ item }} </ion-item> </ion-...

2019-03-22 09:35:10 570

原创 ionic3 Radio的使用

1 相关html(submit)=“doSubmit($event)” 提交函数[formGroup]=“langForm” 表单组<form (submit)="doSubmit($event)" [formGroup]="langForm"> <ion-list radio-group formControlName="langs"> &l...

2019-03-22 09:14:43 110

原创 ionic3 Form表单的使用

1 相关Html<form (submit)="processForm()" [formGroup]="form"> <ion-list> <ion-item> <ion-input formControlName="firstName" type="text" placeholder="First Name"&g...

2019-03-22 09:11:17 116

原创 ionic3 subtabs使用方法

图片效果：1 具体用法：<ion-tabs SelectedIndex="2"> <ion-tab [root]="tab3Root" tabTitle="" tabIcon=""></ion-tab> 定义样式 <ion-fab bottom center style="border-top: 0.55px solid rgba...

2019-03-21 10:27:42 46

原创 ionic3 sliders轮播图相关知识点

相关html<ion-slides pager (ionSlideTap)="clickItem()" (ionSlideDidChange)="slideChange()" (ionSlidePrevEnd)="preChange()" (ionSlideNextEnd)="nextChange()"> <ion-slide style="background-c...

2019-03-19 14:36:59 105

原创 ionic3权限用法

1 安装cordova plugin add cordova-plugin-android-permissionsnpm install --save @ionic-native/android-permissions2 在app.module.ts导入模块import { AndroidPermissions } from '@ionic-native/android-permissi...

2019-03-15 14:39:56 116

原创 elementui使用

安装：npm i element-ui -s下载最新资源下载相关文件<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"><script src="https://unpk...

2018-12-20 16:12:47 1041 1

原创 ionic Android iOS标题居中，tab在下部

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) { $ionicConfigProvider.platform.ios.navBar.alignTitle('center'); $ionicConfigProvider.platform.android.navBar.alignTitle...

2018-12-13 10:48:41 148

原创 ionic2——ionic3 navigation imagepicker 启动图标数据缓存页面跳转得方式请求下拉刷新

ionic2/3 整体变化总结ionic2/3的navigation用法## A 页面跳转带参数ionic2 父页面用法引入 navController import {NavController} from "ionic-angular" ...

2018-12-07 10:52:07 160

原创 ionic 2 3 生命周期 tab input button list grid input card loading toolbar 随点记上篇

从ionic 2——ionic3 对比变化分析。安装2.0以上的安装 npm install -g ionic@beta 1.0安装 npm install -g ionic 初始化项目ionic start ionicdemo --v2ionic start ionicdedmo tabs --type=ionic1生命周期对比ionic2 声明周期 ...

2018-12-06 18:21:10 164

原创 ionic时间插件(年，月，日，时，分钟)插件

时间插件(分钟，小时，日) ion-datetime-picker1 安装插件npm i ion-datetime-picker --save2 index.html 引入<script src="lib/ion-datetime-picker/release/ion-datetime-picker.min.js"></script><link hre...

2018-12-03 16:33:01 1077

原创 ionic1拨打电话功能

相关html 代码：<div ng-repeat="nu in num" class="col col-25 whiteFore" ng-click="callPhone({{nu.tel}})"> <i class="icon ion-ios-telephone"></i> 电话{{nu.tel

2018-11-28 17:08:04 237

原创 ionic Android和ios从搭建到上线过程及bug修改

1 搭建App 及打包A . 创建项目Ionic提供了三种初始模版，即：tabs、sidemenu、blank，不加模版名时默认创建tabs项目。ionic start demo tabs –-type=ionic1B．添加平台cordova platform add android/ios添加安卓平台时，如果出现downloading:gradle-2.14.1-all.zip类似...

2018-11-28 15:51:37 141

空空如也

空空如也