一、什么是webapp

1、长的像app，交互也像app的H5页面。
webapp不是App，不需要安装，手机网页直接打开。

二、移动端web的布局方案

1、例如：rem布局、vw/vh布局、flexible布局。
推荐使用rem布局，解决不同手机之间的样式兼容性问题。

2、原因
手机像素密度不一样，屏幕宽度、屏幕分辨率不一样。
在移动端写样式一般不用px做单位，px是绝对单位，要用相对单位去做。

3、rem.js

// 作用：重置html的font-size大小
// 让html根字体的大小，等于当前屏幕px像素的10分之1

function resetRootFZ() {
    // 1.通过dom操作，找到html
    var oHtml = document.querySelector('html')
    // 2.获取这个html的宽度
    var w = oHtml.getBoundingClientRect().width // px（当前屏幕的总宽度）
    // 3.设置根字体的大小等于html节点的宽度的十分之一
    oHtml.style.fontSize = w/10 + 'px'
}

// 调用这个方法
resetRootFZ()

// 当window窗口尺寸变化时，重新设置根字体的大小
window.addEventListener('resize', function(){
    // 屏幕发生resize事件，重新设置根字体
    resetRootFZ
})

4、在index.html的<head>引入

<script src="./rem.js"></script>

5、比较
（1）类型一

（2）类型二

6、css的单位
（1）rem: root font size
.box {
    width: 2rem;
}
宽度是html根字体的两倍。

（2）em: 相对于最近一个父元素的fontSize

（3）px: 绝对单位

（4）vw vh

三、UI稿量尺寸

1、量稿子的单位是px

2、例如：移动端的UI稿，一个轮播图，宽度是750px，高度是352px

3、352px怎么转换成rem
750px对应10rem，352px则是：352*10/750 = 352/75

4、vscode里面，以后计算用插件“px to rem”

四、移动端组件库

1、ToC项目样式复杂，有设计稿，组件往往很难自己实现，引入第三方开源组件

2、vant-ui2是经典的移动端组件库，PC端不能用

3、安装
yarn add vant@latest-v2

4、按需加载组件
yarn add babel-plugin-import -D
安装成功后记录在package.json中，-D表示加到devDependencies环境需要的包中

dependencies：表示src代码目录中需要的包
devDependencies：表示环境中需要，src中用不到

5、配置按需加载组件
babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  // 支持vant-ui组件的按需加载
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

6、按需导入代码
上线打包时，都建议按需求导入。一个一个导入并注册。

// 按需导入
import { Button } from 'vant'
Vue.use(Button)

7、本地开发
为了提高开发效率，不按需加载，先一次性注册。

// 本地开发
import Vant from 'vant'
import 'vant/lib/index.css'
Vue.use(Vant)

五、分析页面

1、按组件分析页面

搜索框
品类轮播图
商品轮播图
商品列表（懒加载，类似瀑布流，分页查询）
底部tabbar导航

2、外页内页
外页：通过tabbar、或者菜单就能访问到的页面
内页：在菜单上点不到，通过某些交互进去的，比如商品详情

六、代码方式组织

1、在src/components目录（公共组件目录）下建一个index.js

import JDtabbar from "./tabbar/JDtabbar.vue"

export {
    JDtabbar
}

把所有的公共组件都放在这个目录中，统一的导入、导出：

import { JDtabbar } from '@/components'

路径中@表示src目录。

2、只有某个页面用到的组件，则在该页面下建立components目录
例如：src/pages/home/components

七、CSS处理

1、安装sass编译器
yarn add sass -D
yarn add sass-loader -D

八、栅格系统

1、Layout布局
栅格系统默认把当前row所占的屏幕分成24等份

2、栅格系统里row标签里只能放col标签，所以其他标签要么放在row外面，要么放在col里面

九、小技巧

（1）<template></template>标签中是单节点，一定要加一层<div></div>

（2）浏览器字体最小是12px

（3）导入方式
// 模块化导入
import { JDtabbar } from '@/components'
// 直接导入文件
import NoticeBar from './components/NoticeBar.vue'

（4）改变背景、颜色，能用属性解决就尽量不要用css样式

（5）改变组件结构，常识是用插槽

（6）如果要用插槽，组件标签要改成双闭合标签

（7）插槽建议用template标签包起来
例如：
<template #right-icon>
    <div>xxxxxx</div>
</template>

（8）<style lang="scss">
lang="scss"表示可以使用scss代码

（9）scoped
<style lang="scss" scoped>，scoped属性是一个布尔值，等于真。scoped表示局部样式，这个样式只在当前组件中起作用

（10）组件样式可以用多个style
组件的样式用全局的，自己的样式用scpoed

（11）多个插槽是没有顺序的，随便放

（12）自定义事件是父组件传个事件给子组件，子组件通过emit触发

（13）存储本地数据
写数据：localStorage.setItem('noticeFlag', this.show)
读数据：localStorage.getItem('noticeFlag')
读出的数据格式都是string，布尔值要转换JSON.parse(xxx)

（14）组件内部居中，修改margin（外边距）
margin: 0 auto;
margin上下等于0，左右等于auto。

（15）子组件之间是有顺序的
<NoticeBar v-model='show'></NoticeBar>
<AdSwipe></AdSwipe>
<JDtabbar></JDtabbar>

（16）静态组件可以自己写，有交互感的组件一般不能自己写

（17）组件外面套一层div是二次封装

（18）改组件库的样式，先用全局，再用局部，看看有没有影响
因为很多组件库的样式用全局才能改，局部改不动

（19）ui设计师说你做的不好，在公司是不能打架的

（20）为什么商品列表用计算属性
商品列表是父组件调接口传过来的，对父组件props做计算

（21）有些组件复制不了，必须把逻辑搞明白

（22）拆解项目的能力，基础知识点的能力当成常识，表达能力

（23）扁平化开发：能用符号的尽量用符号，不要用文字

（24）浏览器上是模拟器，如何真机调试，用手机和电脑连同一个WIFI，手机访问http://IP:8080

（25）padding去掉后，就可以加行高和居中

（26）为什么display: block前面会空出来
display: block 元素会占据整行空间，其前后会自然换行，因此会在元素前产生空白

（27）只要是从列表页面进入到详情页面，一定涉及传参

（28）移动端跳转，可以绑以下几个事件
@click
@touchstart、@touchmove、@touchend
 

# 前端
Logo
技术共进，成长同行——讯飞AI开发者社区

技术共进，成长同行——讯飞AI开发者社区

更多推荐

cover

人工智能和数据科学就业市场：到底发生了什么？

avatar 讯飞AI开发者社区
cover

AI智能体第4期——深入了解人工智能智能体的不同类型：反应式、规划式等

avatar 讯飞AI开发者社区
cover

智慧暖通节能系统：AI 驱动的 “按需供能 + 精准控温” 低碳解决方案

avatar 讯飞AI开发者社区