# mobile-shop **Repository Path**: wangyfax/master ## Basic Information - **Project Name**: mobile-shop - **Description**: 移动端vue项目 后续需求待更新 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 0 - **Created**: 2020-02-19 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # 移动端vue项目 ## 实用技术vue、mui、mint-ui、bootstrap、es6 ## 使用webpack node 等前端构建工具 ## 主流开源协议之间有何异同？ https://www.zhihu.com/question/19568896 ## 将修改的代码上传到代码库(码云) ### 1、git add . ### 2、git commit -m '提交信息' ### 3、git push -u origin master ## 开发过程： 1、制作`首页`APP组件 ------ > ### 1.1、完成Header 区域，使用的是Mint-UI中的Header组件 > ### 1.2、制作底部的Tabbar 区域，使用的是MUI 的 Tabbar.html * > 1.2.1、制作购物车小图标的时候，首先要把扩展图标的CSS样式拷贝到项目中 * > 1.2.2、拷贝扩展字体库 ttf 文件到项目中 * > 1.2.3、为购物车小图标添加如下样式"mui-icon-extra mui-icon-extra-cart" > ### 1.3、要在中间区域放置一个 router-view来展示路由匹配的组件 2、改造tabbar为router-link ------ 3、设置路由高亮 ------ 4、点击tabbar中的路由链接，展示对应的路由组件 ------ 5、制作首页轮播图布局 ------ 6、加载首页轮播数据 ------ > ### 6.1、获取数据，如果获取数据？使用vue-resource (cnpm i vue-resource -S) > ### 6.2、使用vue-resource的this.$http.get获取数据 > ### 6.3、获取到的数据，要保存在data身上 > ### 6.4、使用v-for 循环渲染每个item项上 7、改造九宫格区域的样式 ------ 8、改造`新闻资讯`路由链接 ------ > ### 8.1、绘制界面，使用MUI中的meadia-list.html > ### 8.2、使用vue-resource获取数据 > ### 8.3、渲染真实数据 9、实现新闻资讯列表 点击跳转到新闻详情 ------ > ### 9.1、把列表中的每一项改造为诶router-link，同时在跳转的时候应该提供一个唯一的ID标识符 > ### 9.2、创建新闻详情的组件页面 NewsInfo.vue > ### 9.3、在路由模块中，将新闻详情的路由地址和组件页面对应起来 10、实现新闻详情的页面布局和数据渲染（注意：返回的图片地址已经失效） ------ 11、单独封装一个common.vue评论子组件 ------ > ### 11.1、西安创建一个单独的common.vue组件模板 > ### 11.2、在需要使用common.vue组件的页面中，手动导入common组件
import common from './common.vue' > ### 11.3、在父组件中使用 components属性将当前导入的common组件，注册为自己的子组件 > ### 11.4、将注册子组件时的注册名称，以标签的形式在页面中引用即可 12、获取所有的评论数据，渲染到页面中 ------ 13、实现点击“加载更多”，显示更多评论的功能 ------ > ### 13.1、为“加载更多”按钮绑定点击事件，在事件中，请求下一页 > ### 13.2、点击加载更多，让pageIndex++,然后重新调用getComments()方法重新获取最新一页的数据 > ### 13.3、为了方式新数据覆盖老数据，在加载更多的时候，每当获取到新数据的时候，老数据应该调用数组的concat方法，
拼接新数组this.coments = this.coments.concat(res.body.message); 14、发表评论 ------ > ### 14.1、把文本框做双向绑定 > ### 14.2、为发表按钮绑定一个事件 > ### 14.3、校验评论内容是否为空，如果为空，则Toast提示用户”评论内容不能为空“ > ### 14.4、通过vue-resource发送一个请求，把评论内容提交给服务器 > ### 14.5、当评论OK后，重新刷新列表，查看最新的评论 * > 14.5.1、如果调用getComments方法重新舒心评论别表的话，只能得到最后一页的评论，前几页的内容无法获取 * > 14.5.2、所有当评论成功之后，在客户端，手动拼接一个最新的评论对象，然后调用数组的unshift方法，把最新的评论追加到data中comments的起始
位置，这样就可以实现列表刷新的需求了 15、改造`图片分享`点击 路由的链接并显示对应的组件页面 ------ 16、绘制图片列表组件页面结构，并优化样式 ------ > ### 16.1、制作顶部的滑动条 > ### 16.2、制作底部图片列表 17、制作顶部滑动条出现的问题： ------ > ### 17.1、需要借助于MUI中的tab-top-webview-main.html > ### 17.2、需要把slider区域的mui-fullscreen类去掉 > ### 17.3、滑动条无法正常触发华东，通过检查官方文档需要初始化JS组件 * > 17.3.1、导入mui.js * > 17.3.2、调用官方提供的方式去初始化 ``` mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006 }); ``` * > 17.3.3、在初始化滑动条的时候，导入了mui.js，但是控制台报错了 ``` bundle.js:49401 Uncaught TypeError: 'caller', 'callee', and 'arguments' properties may not be accessed
on strict mode functions or the arguments objects for calls to them ``` * > 17.3.4、经过分析，可能是mui.js中用到了'caller','callee' and 'arguments'相关的东西，但是wabpack打包好的bundle.
js中默认启用的是严格模式，所以这两者冲突了 * > 17.3.5、安装 cnpm install babel-plugin-transform-remove-strict-mode -D 插件来解决这种问题 移除严格模式 > ### 17.5、从首页进入图片分享页面时，顶部华东条无法正常工作，经过分析发现，如果要初始化 滑动条，则必须要等DOM元素加载\
完毕，所以我们把初始化滑动条的代码写到mounted生命周期钩子函数中。 > ### 17.6、当滑动条调试成功之后，发现tabbar无法正常工作，此时，我们发现是mui中'mui-tab-item'这个类名和其他类名冲突\
了，所以我们需要修改一下名字，同时重新把样式添加一下即可。 > ### 17.7、获取所有分类，渲染分类列表 18、制作图片列表 ------ > ### 18.1、图片列表需要使用懒加载技术，可以使用mint-ui提供的Lazyload 组件 import { Lazyload } from 'mint-ui'; > ### 18.2、根据'lazy-load'的使用文档，使用 > ### 18.3、渲染图片列表数据 19、实现图片的懒加载 ------ 20、实现点击图片跳转到图片详情页面 ------ > ### 20.1、在改造li成router-link的时候，需要使用tag属性指定要渲染为哪种元素 21、实现详情页面的布局和美化，同时获取数据渲染页面 ------ 22、实现`图片详情`中缩略图的功能 ------ > ### 22.1、使用插件 vue-preview 这个缩略图插件 > ### 22.2、该插件已经更新，[请查看官方vue-preview用法](https://github.com/LS1231/vue-preview) * > 注意：必须使用vue-preview标签 * > 注意：每个图片数据对象中，必须有w、h、msrc、src属性 * > 注意：同时必须设置一个全局的样式 ``` //这是html
//js代码 res.body.message.forEach(item => { item.w = 600; item.h = 400; item.src = item.src; item.msrc = item.src; }); //scss .thumbs { .imgPrev { display: flex; width: 100%; .my-gallery { display: flex; flex-wrap: wrap; figure { display: flex; flex-wrap: wrap; margin: 5px; box-shadow: 0 0 10px #ccc; } img { border: 0; vertical-align: middle; width: 94px; } } } } ``` 23、绘制 `商品列表` 页面基本结构并美化 ------ 24、尝试在手机上去进行项目的预览和测试 ------ > ### 24.1、要保证自己的手机可以正常运行 > ### 24.2、要保证手机和开发项目的电脑处于同一个局域网 > ### 24.3、打开自己项目中的package.pson文件，在dev脚本中添加一个 --host指令，把当前电脑的IP设置
为--host的指令值 * > 注意：查看电脑的ip，在cmd终端中输入ipconfig 25、开始做`商品专区`页面基本结构 ------ > ### 25.1、点击“商品专区”，可以不使用的形式，我们用编程式导航来实现。 * > 25.1.1、商品专区的每个goods-list用flex布局，改变株洲的方向为纵向，让每一项的盒子贴上下边对齐 ``` @click="goDetail(item.id)" //使用js的形式实现路由的跳转 /** * 注意：一定要区分this.$route和this.$router * 1、this.$route：是路由【参数对象】，所有路由中的参数，params,query都属于它。 * 2、this.$router：是一个【路由导航对象】，用它可以方便的使用JS代码，实现路由的
前进、后退、跳转到新的URL地址 */ //方式一：字符串 //this.$router.push('/home/goodsInfo/'+id); //方式二：对象 //this.$router.push({path:'/home/goodsInfo/'+id}); //方式三：命名的路由 name为路由名称 this.$router.push({ name: 'goodsInfo', params: { id: id }}) ``` > ### 25.2、商品信息页面分为三个部分：`商品轮播区域`、商品购买区域、商品参数区域 * > 25.2.2、商品轮播区域 和 首页的 图片轮播我们共用一个组件，但是 * > 25.2.3、首页中的图片，宽和高都是用了100%； * > 25.2.4、在商品详情页面中，轮播图的图片如果也是用宽高为100%，页面比较丑； * > 25.2.5、我们期望在商品详情页面中，轮播图的高度100%，宽度为自适应 * > 25.2.6、所以问题出现在：首页中的轮播图和详情中的轮播图分歧点是：宽度该如何设置？ * > 25.2.7、解决方案：首页和商品详情中的轮播图其他都一样，只是宽度有冲突点，所以我门应该
设置了一属性，来控制是否来显示100% :isfull > ### 25.3、`商品购买区域` 中市场价格可以用标签实现被划掉的效果 * > 25.3.1、购买数量使用mui的numBox组件 ``` //导入数字选择框 import numBox from '../subcomponents/goodsinfo_numbox.vue'; components:{ swiper, numBox } ``` * > 25.3.2、购买数量和加入购物车之间牵扯到父子组件之间传值的问题，需要注意 * > 25.3.3、点击`加入购物车`需要做一个小球半场动画，注意这里我们要适配不同分辨率的手机位移的情况 * > 25.3.4、小球动画优化（需要适配不同的分辨率）思路： * > 25.3.5、导致动画不准确的本质原因“我们把小球最终位移的位置，写死了； * > 25.3.6、只要分辨率和测试的时候不一样，或者滚动条有一定的距离之后就不准确的了。 * > 25.3.7、所以我们不能把位移的的位置坐标写死了，应该根据不同的情况动态计算 * > 25.3.8、如何实现坐标的计算： * > 25.3.9、先得到最下方购物车徽标的坐标，然后再得到小球的坐标，然后求坐标差，
得到的结果就是小球需要位移的距离。 * > 25.3.10、获取购物车徽标和小球的位置？ domObject.getBoundingClientRect() ``` //获取小球在页面中的位置 const ballPosition = this.$refs.ball.getBoundingClientRect(); //获取购物车徽标的位置 const badge = document.getElementById('badge').getBoundingClientRect(); const xDist = badge.left - ballPosition.left; const yDist = badge.top - ballPosition.top; //插值表达式 el.style.transform = `translate(${xDist}px, ${yDist}px)`; el.style.transition = 'all 1s cubic-bezier(0.4,-0.3,1,0.68)'; //这里的done其实就是afterEnter函数 done(); ``` > ### 25.3、`商品参数区域` 有两个路由按钮，包括`图文介绍`和`商品评论` * > 25.3.1、`商品评论`可以使用公共组件 ``` 商品评论 goComment(id){ //点击使用编程式导航，跳转到评论页面 this.$router.push({ name:"GoodsComment", params:{ id:id } }) } ``` * > 25.3.2、`图文介绍`页面使用v-html指令来处理返回的html 26、使用`Vuex`来处理购物车数据 ------