混合开发-Vue结合Android/iOS：解决跨平台开发问题
这门课针对使用 Vue 快速开发 App，但需要同时适配 Android 和 iOS 的场景。通过混合开发方案，将 Vue 前端与原生平台结合，解决单一 Web App 无法访问设备原生功能的问题。主要解决：商品展示、自动登录、支付功能等核心模块的跨平台实现。适合已有 Vue 基础，希望提升 App 适配能力的开发者。资料包含混合开发方案对比、原生调用方式及与 Native 交互的完整实例。
适合基础及学习顺序
建议学习者具备 Vue 基础（组件化、Axios 等有经验者更佳），对 Android/iOS 开发有概念即可。学习顺序建议：先理解混合开发原理，学习资料中关于主流方案的对比；接着掌握原生调用方式，重点看原生讲解和交互示例；最后实践自动登录和支付功能，逐步整合。资料通过视频演示结合代码片段，适合边学边练，遇到问题对照代码调试。
学完能独立做什么及资料用法
完成课程后，可独立完成具备以下功能的 App 原型：京东式首页布局、用户自动登录、微信/支付宝支付接入。学完能理解如何将 Vue 页面嵌入原生容器，并调用原生 API 实现设备特有功能。资料适合：先搭建 Vue 项目骨架，参考示例代码实现登录模块的原生存储与自动触发，再扩展支付功能。练习中需关注数据传递和事件反馈的适配问题，资料包含部分效果演示视频可辅助调试。整体以模块制推进，每完成一个功能点（如登录模块）就尝试整合测试，避免到最后堆积问题。建议在练习中记录原生方法调用和 Vue 数据同步的细节，这对后续维护至关重要。
课程目录
课程介绍 混合开发-Vue结合Android/iOS 开发仿京东项目App 属于体系课方向的教程资源，围绕 Vue、Android、iOS 相关内容整理。 内容涵盖：─ 1、2 目前主流的混合开发方案、─ 10、1 原生讲解方式、 10 与 Native 交互、自动登录 自动登录对接 等主题。 适合希望系统学习 Vue、Android、iOS 、需要完整资料对照的同学。 下方为完整资料与目录，可先看目录判断是否符合需要。 ├── 1-2 目前主流的混合开发方案.mp4 ├── 10-1 原生讲解方式.mp4 ├── 10- 10 与 Native 交互-自动登录（自动登录对接.mp4 ├── 10- 11 与 Native 交互-自动登录（退出登录.mp4 ├── 10- 12 与 Native 交互-自动登录（效果演示.mp4 ├── 10-13 微信与支付宝支付对接.mp4 ├── 10- 14 Android 支付功能演示.mp4 ├── 10-2 原生 APP 配置（WEB 端展示.mp4 ├── 10-3 原生 APP 配置（自动登.mp4 ├── 10-4 微信支付基本流程.mp4 ├── 10-5 支付宝支付基本流程.mp4 ├── 10-6 对沉浸式布局的适配.mp4 ├── 10-7 IOS 设备适配问题.mp4 ├── 10-8 与 Native 交互-自动登录（注册功能对接.mp4 ├── 10-9 与 Native 交互-自动登录（登录功能对接.mp4 ├── 11-1 服务器、IP、域名之间的关系 (2).mp4 ├── 11-2 阿里云服务器购买.mp4 ├── 11-3 服务器的 Nginx 配置.mp4 ├── 11-4 单页应用 Nginx 配置注意事项.mp4 ├── 11-5 域名注册与使用.mp4 ├── 11-6 使用 CDN 对域名进行加速.mp4 ├── 11-7 使用 CDN 服务的注意事项.mp4 ├── 11-8 七牛云存储.mp4 ├── 12-1 课程总结.mp4 ├── 2-1 Hybrid App 的本质.mp4 ├── 2-2 Android 与 Web 通讯 - Android 运行流程.mp4 ├── 2-3 Android Studio 的配置.mp4 ├── 2-4 Android 与 Web 通讯 - Android 代码内容.mp4 ├── 2-5 Android 与 Web 通讯 - npm 安装与 http-server.mp4 ├── 2-6 Android 与 Web 的互相调用.mp4 ├── 2-7 IOS 与 Web 通讯 - IOS 代码内容.mp4 ├── 2-8 IOS 与 Web 互相调用.mp4 ├── 2-9 Android 与 IOS 双向通讯对比.mp4 ├── 3-1 Flex 布局.mp4 ├── 3- 10 rem 兼容性设置代码实现.mp4 ├── 3-11 初始化样式引入.mp4 ├── 3-12 错误处理及效果演示.mp4 ├── 3-2 Flex 容器属性之 flex-direction.mp4 ├── 3-3 Flex 容器属性之 flex-wrap.mp4 ├── 3-4 Flex 容器属性之 justify-conten.mp4 ├── 3-5 Flex 容器属性之 align-items.mp4 ├── 3-6 Flex 项目属性.mp4 ├── 3-7 webpack 与 vue-cli.mp4 ├── 3-8 scss 的基本使用.mp4 ├── 3-9 rem 的兼容性设置.mp4 ├── 4-1 组件化开发思想与 toolbar 组件分析.mp4 ├── 4- 10 使用 axios 完成 swiper 数据对接.mp4 ├── 4-11 活动组件开发.mp4 ├── 4- 12 axios 同时发送多个请求.mp4 ├── 4-13 功能选项组件.mp4 ├── 4-2 toolbar 组件开发 - HTML 结构.mp4 ├── 4-3 toolbar 组件开发 - CSS 样式.mp4 ├── 4-4 动态组件切换.mp4 ├── 4-5 swiper 介绍.mp4 ├── 4-6 导入 vue-awesome-swipe.mp4 ├── 4-7 MySwiper 组件实现.mp4 ├── 4-8 swiper 组件分页器效果.mp4 ├── 4-9 axios 和 easyMock 介.mp4 ├── 5-1 秒杀组件开发.mp4 ├── 5-10 瀑布流代码实现.mp4 ├── 5-11 直营、缺货组件开发.mp4 ├── 5- 12 navigationBar 组件设计原则.mp4 ├── 5- 13 navigationBar 默认展示样式.mp4 ├── 5- 14 通过插槽可配置的 navigationBa.mp4 ├── 5- 15 Search 组件开发.mp4 ├── 5- 16 navigationBar 在首页的应用.mp4 ├── 5-2 商品价格过.mp4 ├── 5-3 倒计时组件样式开发.mp4 ├── 5-4 倒计时组件功能开发.mp4 ├── 5-5 时间格式处理.mp4 ├── 5-6 活动组件复用.mp4 ├── 5-7 什么是瀑布流.mp4 ├── 5-8 商品列表组件.mp4 ├── 5-9 生成不同高度的 item.mp4 ├── 6-1 商品列表页面分析.mp4 ├── 6-10 多形态组件在不同应用场景下的调用问题.mp4 ├── 6-11 商品排序功能分析.mp4 ├── 6-12 商品组件排序功能.mp4 ├── 6-13 商品列表排序功能.mp4 ├── 6-2 筛选器功能分析与基本样式.mp4 ├── 6-3 筛选器代码逻辑实现.mp4 ├── 6-4 筛选器动画实.mp4 ├── 6-5 筛选器遮盖层实现.mp4 ├── 6-6 商品列表多形态展示分析.mp4 ├── 6-7 商品垂直列表实现.mp4 ├── 6-8 网格布局实现.mp4 ├── 6-9 多形态展示整合.mp4 ├── 7-1 跳转到 GoodsDetai.mp4 ├── 7-10 过渡动画实现.mp4 ├── 7-11 虚拟任务栈.mp4 ├── 7-12 虚拟任务栈代码实现.mp4 ├── 7-13 页面跳转的状态保存.mp4 ├── 7-14 实现页面跳转的滑动状态保存.mp4 ├── 7-2 NavBar 与 MySwiper 的使用.mp4 ├── 7-3 MySwiper 数字分页器实现.mp4 ├── 7-4 GoodsDetail 样式初始化.mp4 ├── 7-5 GoodsDetail 页面基础布局.mp4 ├── 7-6 NavBar 在 GoodsDetail 中的使用.mp4 ├── 7-7 视差效果分析.mp4 ├── 7-8 视差组件开发.mp4 ├── 7-9 页面跳转过渡动.mp4 ├── 8-1 立即购买页面创建(上.mp4 ├── 8-10 已选商品价格和数量的统计.mp4 ├── 8-2 立即购买页面创建(下.mp4 ├── 8-3 购物车页面组件分析.mp4 ├── 8-4 商品详情跳转到购物车.mp4 ├── 8-5 通过 vuex 来保存加入购物车中的商品.mp4 ├── 8-6 购物车布局实现.mp4 ├── 8-7 购物车商品数量控制器(上.mp4 ├── 8-8 购物车商品数量控制器(下.mp4 ├── 8-9 控制购物车中的商品展示.mp4 ├── 9-1 个人中心在项目中的作用.mp4 ├── 9-2 个人中心页面开发.mp4 ├── 9-3 登录页面开发.mp4 ├── 9-4 注册页面开发.mp4 └── jd_code.7z
