# 基于Vue的移动端app

**Repository Path**: lml123321/vue1102

## Basic Information

- **Project Name**: 基于Vue的移动端app
- **Description**: 基于Vue2.5 +Mint-ui +mui-ui 的移动端新闻资讯，图片分享，商品购买，最新电影视频的多功能APP （依赖接口地址为：http://47.89.21.179:8080/api/getmenus）
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 0
- **Created**: 2018-07-28
- **Last Updated**: 2021-09-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 这是基于 vue mint-ui mui 搭建的移动端新闻资讯，商城购物的app

## 用(传统方式)命令行把修改过后的代码上传到码云
 +  git add.
 +  git commit -m "提交信息"
 +  git push

## 1.制作首页APP组件
1.完成 Header 区域，使用的是 Mint-UI 中的 Header 组件
2.制作底部的 Tabbar 区域，使用的是 MUI 的Table.html
 +  在制作 购物车 小图标的时候 ，步骤如下
 +  先把 扩展图标的 css 样式，拷贝到 项目中
 +  拷贝 扩展字体库 ttf 文件，到项目中
 +  为购物车 小图标 ，添加 如下样式 `mui-icon mui-icon-extra mui-icon-extra-cart`
 
 3.要在中间区域放置一个 router-view 来展示路由匹配到的组件

 ## 2.改造 tabbar 为 router-link

 ## 3.设置路由高亮

 ## 4.点击 tabbar 中的路由链接，展示对应的路由组件

 ## 5.加载首页轮播图数据
  +  获取数据， 使用vue-resource(类似于ajax，axios)
  +  使用 vue-resource 的 this.$http.get 获取数据
  +  获取到的数据，保存至 data 身上
  +  使用 v-for 循环渲染 每个 item 项目

 ## 6.新闻资讯 页面 制作
   + 绘制界面
   + 使用 vue-resource 获取数据
   + 渲染真实数据 
  #### 6.1实现 新闻资讯列表 点击跳转到新闻详情
   + 把列表中的每一项改造为 router-link，同时，在跳转的时候应该提供唯一的id标志符
   + 创建新闻详情的组件页面 NenDetail.vue
   + 在路由模块中，将 新闻详情 的路由地址 和 组件 页面对应起来

  #### 6.2实现 新闻详情 的页面布局 和 数据渲染

## 7.单独封装一个 comment.vue 评论子组件

  + 先创建一个单独的 comment.vue 组件模板
  + 在需要使用 comment 组件的 页面中 ，先手动导入 comment 组件，注册为自己的子组件
  + `import comment from './comment.vue'`
  + 在父组件中，使用 `comments` 属性，将刚才导入 comment 组件 ，注册为自己的 子组件
  + 将注册子组件时候的，注册名称，以标签形式，在页面中 引用即可

  #### 7.1 实现点击加载更多功能  
   + 为加载更多按钮，绑定点击事件，在事件中，请求下一页数据
   + 点击加载更多 ，让 pageIndex++，然后重新调用 this.getComments() 方法 重新获取最新一页的数据
   + 为了防止 新数据 覆盖老数据的情况，我们在 点击加载更多的时候，每当获取到新数据，应该让 老数据调用数组的 concat 方法，拼接上新数组

  #### 7.2 发表评论
   + 把文本框做双向数据绑定
   + 为发表按钮绑定一个事件
   + 校验评论内容是否为空，如果为空，则Toast提示用户 评论内容不能为空
   + 通过 vue-resouer 发送一个请求，把评论内容提交给服务器
   + 当发表评论OK后，重新刷新列表，以查看最新的评论，缺点是每次调用getCommnet只会得到后几页的数据，无法看到最新的数据所以第二种方式
   + 当评论成功后，在客服端 ，手动拼接出一个 最新的评论对象，然后调用 数组 的 unshfit 方法，把最新的评论追加到data中comments的开头，就能完美实现刷新评论列表的需求

 ## 8.改造图片分析 按钮 为 路由的链接并显示对应的组件页面
  
  ## 9绘制 图片列表 组件页面结构并美化样式
 1. 制作 顶部的滑动条
 2. 制作 底部的图片列表
### 10制作顶部滑动条的坑们：
 1. 需要借助于 MUI 中的 tab-top-webview-main.html 
 2. 需要把 slider 区域的 mui-fullscreen 类去掉
 3. 滑动条无法正常触发滑动，通过检查官方文档，发现这是JS组件，需要被初始化一下：
  + 导入 mui.js 
  + 调用官方提供的 方式 去初始化：
  ```
  mui('.mui-scroll-wrapper').scroll({
    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
  });
  ```
 4. 我们在初始化 滑动条 的时候，导入的 mui.js ，但是，控制台报错： `Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed on strict mode`
  + 经过我们合理的推测，觉得，可能是 mui.js 中用到了 'caller', 'callee', and 'arguments' 东西，但是， webpack 打包好的 bundle.js 中，默认是启用严格模式的，所以，这两者冲突了；
  + 解决方案： 1. 把 mui.js 中的 非严格 模式的代码改掉；但是不现实； 2. 把 webpack 打包时候的严格模式禁用掉；
  + 最终，我们选择了 plan B  移除严格模式： 使用这个插件 babel-plugin-transform-remove-strict-mode
 5. 刚进入 图片分享页面的时候， 滑动条无法正常工作， 经过我们认真的分析，发现， 如果要初始化 滑动条，必须要等 DOM 元素加载完毕，所以，我们把 初始化 滑动条 的代码，搬到了 mounted 生命周期函数中；
 6. 当 滑动条 调试OK后，发现， tabbar 无法正常工作了，这时候，我们需要把 每个 tabbar 按钮的 样式中  `mui-tab-item` 重新改一下名字；
 7. 获取所有分类，并渲染 分类列表；

### 11制作图片列表区域
1. 图片列表需要使用懒加载技术，我们可以使用 Mint-UI 提供的现成的 组件 `lazy-load`
2. 根据`lazy-load`的使用文档，尝试使用
3. 渲染图片列表数据

### 12实现了 图片列表的 懒加载改造和 样式美化

## 13实现了 点击图片 跳转到 图片详情页面
1. 在改造 li 成 router-link 的时候，需要使用 tag 属性指定要渲染为 哪种元素

## 14实现 详情页面的布局和美化，同时获取数据渲染页面

## 15实现 图片详情中 缩略图的功能
1. 使用 插件 vue-preview 这个缩略图插件
2. 获取到所有的图片列表，然后使用 v-for 指令渲染数据
3. 注意： img标签上的class不能去掉
4. 注意： 每个 图片数据对象中，必须有 w 和 h 属性

## 16绘制 商品列表 页面基本结构并美化

## 17尝试在手机上 去进行项目的预览和测试
1. 要保证自己的手机可以正常运行；
2. 要保证 手机 和 开发项目的电脑 处于同一个 WIFI 环境中，也就是说 手机 可以 访问到 电脑的 IP
3. 打开自己的 项目中 package.json 文件，在 dev 脚本中，添加一个 --host 指令， 把 当前 电脑的 WIFI IP地址， 设置为 --host 的指令值；
 + 如何查看自己电脑所处 WIFI 的IP呢， 在 cmd 终端中运行 `ipconfig` ， 查看 无线网的 ip 地址

## 18购物车功能
1. 实现购物车页面布局；
2. 利用vuex中的car存储的每项商品的id，请求数据渲染页面
3. 打开自己的 项目中 package.json 文件，在 dev 脚本中，添加一个 --host 指令， 把 当前 电脑的 WIFI IP地址， 设置为 --host 的指令值；
 + 如何查看自己电脑所处 WIFI 的IP呢， 在 cmd 终端中运行 `ipconfig` ， 查看 无线网的 ip 地址