ZYYzyy1993的博客

一、Ionic 调用硬件的能力Ionic 调用原生 api 的能力是基于 cordova 的 ，cordova 是 Adobe 公司的一个开源的框架，诞生于 2008 年，可以让我们用 javascript 调用手机原生的几乎所有的 api，比如：摄像头、麦克风等、重力感应、加速器、声音、震动、网络、视频、音频、地理定位等，原生能实现的所有功能。cordova 目前最新版本是 cordova9.x 的版本。corodova3.x 以后的所有版本使用方法都是一样的。Ionic 在 cordova.

待整理

待整理

待整理

待整理

一、准备工作1、你得有苹果开发者账号个人（$99）、公司（$99）、企业（$299）账号均可。2、能上网的苹果电脑 macos（苹果虚拟机也可以）、Xcode、iOS 设备（iPhone、ipad 均可）3、创建项目sudo ionic start ioniciphone tabscd到项目目录sudo ionic serve 浏览器运行sudo ionic cordova platform add ios添加ios环境sudo ionic build --prod ...

一、Mac安装Nodejs Cordova Ionic1、准备工作升级 Macos 系统为最新系统 安装最新的 Xcode 安装最新的 Nodejs 稳定版本 2、安装 NodejsNodejs 版本：官网下载 Nodejs ：https://nodejs.org/国内网站下载 Nodjs ：http://nodejs.cn/download/注意：建议下载最新稳定版本。3、安装 Ionic Cordovasudo cnpm install -g cord...

一、打包成正式包之前，先修改包名（唯一性）1、【config.xml】2、删除以前的平台cordova platform rmandroid出现这种情况，是android文件夹被占用了：执行命令之前把Android Studio退出，占用Android文件夹正确打开方式：【dshop_android - platforms】文件夹下为空3、重新添加andoird平台cordova platform add android此时的【j...

一、安装Cordova Ionic1、前提：安装Nodejs2、建议使用npm安装cordova ionicnpm install -g cordova ionic（1）安装特定版本npm install -g cordova@8.1.1npm install -g ionic@4.10.2（2）删除命令npm uninstall cordova -gnpm uninstall ionic -g（3）安装成功3、如果npm安装不成功，尝试用cnpm

一、下载 android studio1、网址：https://developer.android.google.cn/studio我们当前电脑的版本 Android Studio 3.2.1二、安装 Android Studio 环境1. 双击打开，下一步打开的时候如果报错，点击取消到这一步等待一段时间红色报错是模拟器的问题，虚拟机里没有模拟器，不用管...

一、安装Nodejs1、网址：https://nodejs.org/en/Nodejs版本：选择最新稳定版本2、cmd终端敲命令node -v，npm -v二、安装JDK（JAVA编译环境）1、网址：https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html选择适合的版本进行下载：本项目里用的是（推荐使用）：双击下一步下一步安装jdk.

1. 安装 Nodejshttps://nodejs.org/en/安装最新版本的 Nodejs 稳定版本这里安装的是node -v版本是10.15.02. 安装 JDK 配置 JDK 环境变量https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html3. 安装 Android Studio 工具https://developer.androi...

点击“立即下单”按钮，把信息提交到服务器，成功则跳转到支付方式页面 => 一、去支付页面制作1、创建新页面ionic g page payment2、页面结构【payment.page.html】【payment.page.ts】效果：为什么没有默认选择支付宝支付？点击后：双向数据绑定是否成功？验证：在dopay()方法里打印出payType...

一、路由守卫1、概念——当用户满足一定条件才被允许进入或者离开一个路由。2、路由守卫场景：只有当用户登录并拥有某些权限的时候才能进入某些路由。 一个由多个表单组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。 当用户未执行保存操作而试图离开当前导航时提醒用户。3、路由守卫Angular 提供了一些钩子帮助控制进入或离开路由。这些钩子就是路由守卫，可以通过这些钩子实现上面场景。CanActivate: 处理导航到某路由的情况。判断用户有没

一、删除收货地址1、长按出现是否删除的弹窗（和删除搜索历史记录类似，找出【search.page.html】和【search.page.ts】手势事件）知识点：重要！！！！！要在ionic4里使用手势事件：（1）安装hammerjsnpminstallhammerjs--save若npm有问题，用cnpm（2）一定要在app.module上导入import{HammerModule}from'@angular...

一、修改默认收货地址1、接口信息请求方式：post 地址：域名/api/changeDefaultAddress 传参说明：参数 说明 备注 uid 用户 id 必传 sign 签名 验证地址是否合法 id 当前收获地址的 id 返回参数：参数 说明 备注 success true/false 是否成功 message 提示信息 2、写代码【addresslist...

一、增加收货地址1、数据双向绑定【addressadd.page.html】【addressadd.page.ts】2、向服务器提交新增地址数据（1）接口信息请求方式：post（用到CommonService，引入并声明）地址：域名/api/addAddress 传参说明：参数 说明 备注 uid 用户 id 必传 sign 签名 验证地址是否合法 name 用户姓名 phone ..

一、为什么要签名验证通过httpPost或者Get方式请求服务器的时候，会面临着许多的安全性问题，例如：1.请求来源（身份）是否合法？2.请求参数被篡改？3.请求的唯一性（不可复制）项目中用户登录以后才能访问的信息，请求api接口的时候为了安全，需要做签名验证。二、签名验证实现原理1、用户登录成功后服务器会返回用户信息以及saltsalt（私钥）——是用户注册的时候随机生成的字符串然后通过md5加密得到的，每个用户的salt不一样2 、 请求接口的时候在接..

一、确认订单页面、用户中心页面 跳转到 登录页面，并返回到对应页面确认订单 => 登录页面 => 【checkout.page.html】routerLink跳转到登录页面【login.page.ts】返回到确认订单页面二、收货地址页面布局1.新建收货地址、增加收获地址页面ionic g page addresslistionic g page addressadd2.配置路由（1）收货地址和...

一、新建确认订单页面ionic g page checkout二、配置路由----------- tab3与checkout-----------1. 从tab3的购物车点击去结算，跳到确认订单页面【tab3.page.html】为什么不用routerlink，这里不单单是页面的跳转，还涉及到数据的处理【tab3.page.ts】doCheckout()里要做的事情：navController跳转页面并get传值重要！！！获取选中的要去结算的商品，判断有没...

效果：点击右上角“编辑”，按钮”去结算“变成”删除“，勾选商品点击删除（合计和总价没有）点击右上角”取消“，按钮变回”去结算“一、购物车页面右上角加按钮、去结算&删除按钮切换注意：购物车页面现在有两个tab3和cart1.购物车右上角”编辑“、“取消”按钮【tab3.page.ts】【tab3.page.html】2.“去结算”、“删除”按钮去结算有总计价格，删除没有总计价格二、删除购物车操作1.思路：=> 获取...

一、全选反选1.实现刚进来时，若商品前面的checkbox都选中，则全选按钮选中，只要有一个未选中，全选按钮未选中思路：购物车里的商品数量 和 选中的商品数量进行对比，若相等，则全选 => 要封装一个获取选中的商品数量的函数（1）在【cart.service.ts】里封装 获取选中的商品数量 的函数（2）【tab3.page.ts】里定义一个变量isCheckedAll，默认为true，表示全选比较购物车数量和选中商品的数量，相等则全选为true，反之全选为false

一、checkbox选中状态的数据绑定1.【pcontent.page.ts】在addCart()方法里，productJson里增加字段checked，默认为true（选中）2.【tab3.page.html】里<ion-checkbox>用ng-model数据双向绑定二、数量加减1.【tab3.page.html】2.【tab3.page.ts】三、计算总价1.数据双向绑定（1）【tab3.page.ts】定义一个总价变量，用于双向..

两种方法：把商品数据放在本地存储localstorage里，此方法不需要登录 把商品数据和用户信息一起传给服务器，服务器存在表里，进入购物车页面，再向服务器请求数据，进行显示，此方法需要登录才可以此处演示第一种本地存储的方法一、思路和步骤（点击“添加购物车”按钮后，商品信息和属性信息保存到localStorage）1.准备工作（1）新建一个购物车服务ionic g service services/cart（2）在【app.module.ts】里配置CartServic.

一、商品属性选择1.【pcontent.page.html】找到attr这个div，整个用一个div包裹住，命名为myAttr，监听点击事件叫changeAttr($event)，传入事件对象event2.【pcontent.page.ts】（1）看看e到底是什么将e.srcElement打印出来，控制台输出：（获取到当前点击的元素的节点，原生JS）将e.srcElement.nodeName打印出来，控制台输出：（获取到当前点击的元素的节点的标签名，原生JS）

一、账户管理页面，路由跳转1.新建账户管理页面ionic g page personal2.改标题，加返回按钮【personal.page.html】3.tab4右上角设置按钮（1）效果：（2）快捷键i4-button-icon-only （3）修改按钮样式： 定位：外面的position:relative，里面的settings的position:absolute4.路由跳转【tab4.page.html】二、...

最终目的：上一章留下的bug-----修复后达到：点击登录按钮，回到tab4页面，立即显示用户名，普通会员，而不是刷新后才能显示一、生命周期函数1. Ionic4 中内置的生命周期函数：ionViewWillEnter—当进入一个页面时触发(如果它从堆栈返回) ionViewDidEnter—进入后触发 ionViewWillLeave—如果页面将离开触发 ionViewDidLeave—在页面离开后触发 ionViewWillUnload—页面卸载的时候会触发，如果无法触发使.

一、获取输入的手机号和密码数据双向绑定【login.page.ts】【login.page.html】二、点击登录按钮，doLogin()方法1.测试，是否可以获取到input的用户名和密码2.请求服务器的登录接口（1）接口信息请求方式：post地址：http://jd.itying.com/api/doLogin传参说明：参数 说明 备注 username 用户名、手机号 必传 passwor...

一、获取手机号和验证码【register-step3.page.ts】1.引入StorageService并声明2.在构造函数里读取存储的电话号码和验证码，并赋给变量二、密码和确认密码双向数据绑定三、点击完成按钮，执行doRegister()方法，完成注册1.密码的简单验证2.请求服务器接口，完成注册（1）引入CommonService并声明（2）用户注册接口信息请求方式：post 地址：域名/api/registe...

一、倒计时1.倒计时【register-step2.page.ts】【register-step2.page.html】将num渲染到页面上【register-step2.page.ts】初始化的时候调用倒计时方法2.倒计时完善倒计时为0时，此时界面：完善：倒计时为0，按钮变成”发送验证码“，并可点击【register-step2.page.ts】【register-step2.page.html】3.重新发送验证码，sendCod..

一、封装post方法1.准备工作【app.module.ts】，引入并注入HttpClientModule2.在用到的地方【common.service.ts】引入HttpClient、HttpHeaders（非必须），并在构造函数声明HttpClient3.开始封装post方法把ajaxGet()方法复制一份，修改：（1）函数名ajaxGet(url) 改成 ajaxPost(url, json)（2）原来的 this.http.get(api) 改成...

一、配置路由首页【tab1.page.html】跳转到商品详情页，并传递参数id[routerLink]="['/pcontent']"[queryParams]="{id:item._id}"二、商品详情页获取传过来的参数id：获取get传值ActivatedRoute【pcontent.page.ts】三、根据获取到的id向服务器请求数据1.Api接口相关参数（1）Api 接口 http://jd.itying.com/api/pcontent?id=...

一、效果图 商品二、布局：标题 价格效果：三、样式： 标题价格上述结构里有个mb10：表示和底部栏10px距离，在公共样式global.scss里定义【global.scss】效果：四、继续结构布局：属性五、继续样式：属性六、结构布局：运费七、样式：运费效果：详情效果图：结构布局：样式：最终代码：【pcontent.page...

一、效果图 二、新建商品详情页面ionic g page pcontent

一、创建服务并引用1. 创建localStorage的公共服务，存储历史搜索记录ionic g service services/storage2. 【app.module.ts】里做配置import{StorageService}from'./services/storage.service';3.在需要使用的地方【search.page.ts】引入import{StorageService}from'../services/storage.service'...

一、搜索框输入关键词，去服务器获取动态数据1.输入搜索关键词，获取该关键词（1）数据双向绑定【search.page.ts】【search.page.html】（2）点击搜索，获取输入的关键词【search.page.ts】 2.、去服务器获取相关数据（1）商品列表api接口a. 地址 http://jd.itying.com/api/plistb. 传参说明加入search字段c. 返回参数说明（2）...

一、筛选排序1.原来综合销量价格等html，写成后台数据渲染【productlist.page.ts】【productlist.page.html】原来的：改成：2.选中效果【productlist.page.html】点击执行函数subheaderChange()，把subheaderList数组里对象item的id作为参数传过去【productlist.page.ts】subheaderSelected: 定义二级导航列表选中的id，默认第1个...

一、商品列表1. 创建商品列表页面ionic g page productlist2. 页面跳转（点击tab2分类页面右侧的商品分类，跳转到商品列表页面，并把值传过来）（1）实现简单跳转【tab2.page.html】[routerLink]="['/productlist']"【productlist.page.html】返回按钮 i-back-button（2）传值[queryParams]="{cid:item._id}"检验传值是否成功...

一、接口信息1.一级分类（1）.地址：http://jd.itying.com/api/pcate（2）.传参说明：地址后面加上?pid=xxx就是二级分类（3）.返回参数说明：2.二级分类（1）.地址：http://jd.itying.com/api/pcate?pid=59f1e1ada1da8b15d42234e9二、实现一级分类、二级分类的数据获取【tab1.page.ts】1.引入CommonService并声明2.定义变量conf.

一、api接口概览1.信息准备（1）地址：http://jd.itying.com/api/plist（2）传参说明：e.g. 浏览器输入：http://jd.itying.com/api/plist?pageSize=2&page=3表示获取第3页的数据，每一页的数据只有2条e.g. 浏览器输入：http://jd.itying.com/api/plist?cid=xxx分类页面用到，cid参数是分类ide.g. 浏览器输入：http://jd.itying..