移动开发中的常见问题

作者: 解勾股 | 来源:发表于2019-05-18 17:56 被阅读0次

移动开发中的常见问题
移动端首页模块
移动端开发常见问题
开发APP应该从哪几个方面进行需求分析呢？
【新手快速入门】开发一个APP常见问题+解决方案汇总
移动网页开发常见问题
移动端web开发常见问题
常见问题汇总
java开发实战小参考&常见问题及处理
第13章 SpringBoot开发中的常见问题与解决方案

移动开发中常见问题

利用padding-top，进行占位和宽高自适应
- 容器的高度是基于父级的 padding和margin是基于宽度的
- 比如：父元素宽度是100px, 子元素padding-top:50%，那么padding-top的实际值就是100*50%=50px
  
  padding-top就是进行提前占位，避免资源加载时候的闪烁，还可以让高度自适应。
- 想要自适应屏幕大小，可以设置宽度自适应，width:20%(box-sizing:border-box),但是高度是被内容撑开的，一般不定，通过百分比设置就不适用
- 图片加载时需要时间的，即使网页加载熟读已经很快了，由于高度撑开的过程，不可避免会出现闪烁

padding-top:calc(100%*580/1920)

为图片定位为绝对定位，并为item添加相对定位

 img{
            max-width: 100%;
        }
        html,
        body{
            height:100%;
        }
        .img-wrapper{
            width: 100%;
            height: 0;
            padding-top: calc(100% * 580/1920);
            border: 1px solid #ff0;
            position: relative;
        }
        .img-wrapper img {
            position: absolute;
            left: 0;
            right: 0;
            top: 0 ;
            bottom: 0;
        }

em基于父级的大小 1em是基于本身
- 注意：浏览器的默认字体大小是16px，所以未经调整的浏览器都符合1em=16px,chrome默认的字体大小是12px，也就是12px=0.75em,10px=0.625px
```
div {
  font-size: 40px;
  width: 10em; /* 400px */
  height: 10em;
  border: solid 1px black;
}
p {
  font-size: 0.5em; /* 20px */ 
  width: 10em; /* 200px */
  height: 10em;
  border: solid 1px red;
}
```

rem是基于HTML的大小 62.5%

html {
    font-size: 10px;
    }
div {
    font-size: 4rem; /* 40px */
    width: 30rem;  /* 300px */
    height: 30rem;
    border: solid 1px black;
}

媒体查询断点

@media only screen and (min-width : 480px) {

}

vm布局
- 视图宽度：1vw 等于视图宽度1%，100vw等于视图宽度100%
1个像素
- retina屏1像素实际上是4个像素
  1. 边框宽度设置0.5不生效，box-shadow可以
```
div {
    -webkit-box-shadow: 0 1px 1px -1px rgba(0, 0, 0, 0.5);
}
```

 2. 媒体查询利用设备像素比缩放，设置小数像素

    ```js
    .border { border: 1px solid #999 }
    @media screen and (-webkit-min-device-pixel-ratio: 2) {
        .border { border: 0.5px solid #999 }
    }
    @media screen and (-webkit-min-device-pixel-ratio: 3) {
        .border { border: 0.333333px solid #999 }
    }
    //缺点：对设备有要求，小数像素目前兼容性较差
    ```

Vue-router

需要单独安装，不是集成到vue里的
正常的情况下，需要一个routes的配置文件，并且把这个配置文件作为routes参数传入VueRouter实例化的参数里。VueRouter的实例又将作为参数传递到最外层的Vue实例的router参数
```
//路由的配置文件
//routes
export default [{
    path: '',
    name: '',
    componts: {
        default: 组件
    }
}]
```
```
//index.js
import routes from './routes'

Vue.use(VueRouter)

export default new VueRouter({
  routes
})
```
```
//在main.js中引入

import router from './router/index'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
```
1. router-view,这个组件用于帮路由中的组件占位。可以有一个名字，那就对应组件里的components,没有名字的就对应default这是最容易忽视的地方
2. router-link ,用于跳转，跳转的方式有
  - router-link-active(默认)
  - route-link-exact-active
  - router-link to="/" exact (只会在地址为/的时候被激活)
3. 只要使用了router,每个组件大红就有一个 $route 和$ router,第一个表示当前路由所对应的所有路由信息，第二个是路由的方法
4. 传递参数的时候要注意，有显示传参和隐式传参
  - 隐式传参 params:{}从某个页面跳转过去才有参数
  - 直接访问，没有隐式参数
5. ```
//给出一个路由 
this.$router.push({
                name: 'home'
 }
```
6. name一般和params配合使用，用于隐式传参
```
 <router-link :to="{name: 'category', params: {cateName: 'women', spm: 'xyz'}}">女装</router-link>
```
7. 显示传参
```
<router-link :to="{path: '/products/men', query: {spm: 'abc'}}">男装</router-link>
```