移动应用前端问题汇总

1.浙里办适老化前端样式解决方案

1.方案1：动态绑定样式

示例：

<span :class="(isElder ? 'elder_' : '') + 'title'">xxx</span>

// 样式
.title {
    font-size: 10rem;
}

.elder_title {
    font-size: 20rem;
}

2.vue.js引入外部样式

方式1：less文件

<style lang="less" scoped>
    @import "./index.less";
    @import "./indexOld.less";
</style>

方式2：scss文件

<style lang="scss" scoped>
@import "~./index.scss";
@import "~./indexOld.scss";
</style>

3.H5移动端开发中不同屏幕的设配

通常以rem为单位，它相对根元素html的字体大小来。例如大部分浏览器的默认字体大小为16px，所以1rem = 16px
在移动端开发中，UI设计的设计稿通常为375px或者750px。可以将根元素html的字体大小设置为100px。这样1rem=100px。可以根据UI设计稿的px单位直接得到以rem为单位的大小。

px / 100 = rem

假设UI设计稿屏幕宽度为750px，需要设置1rem = 100px。如下所示：原理是使用js动态改变html的font-size大侠，以适应不同尺寸屏幕设备能够正常显示。

<script>
    (function(doc, win) {
        // 根元素html
        var docEl = doc.documentElement,
            // orientationchange方向改变事件(横屏或者是竖屏)
            // 判断窗口有没有orientationchange这个方法，有就赋值给一个变量，没有就返回resize方法。
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                //把document的fontSize大小设置成跟窗口成一定比例的大小，从而实现响应式效果。
                //docEl.style.fontSize = 100 * (调试设备宽度 / 设计图宽度) + 'px';
                // 在写页面的过程中保持 调试设备宽度 等于 设计图宽度 就可以。
                // 这样就又可以愉快的使用123px是1.23rem的计算了
                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
            };
        if (!doc.addEventListener) return;
        //addEventListener事件方法接受三个参数：第一个是事件名称比如点击事件onclick，第二个是要执行的函数，第三个是布尔值
        win.addEventListener(resizeEvt, recalc, false);
        //绑定浏览器缩放与加载时间
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
</script>

4.less变量

定义less变量：

@grey-text-size: 0.9rem;

使用：

 .info-argent {
    color: #666666;
    font-size: @grey-text-size;
    line-height: 1.5;
}

5.vue项目中修改vux组件的样式

方式1：使用样式变量修改主题的颜色，参考https://doc.vux.li/zh-CN/development/theme.html

方式2：全局样式层级覆盖

示例：

// 注意不能加scoped
<style lang="less">
    @import './vux-component.less';
</style>

// vux-component.less示例如下
@normal-text-size: 1rem;
// vux中的XHeader组件相关的样式修改
.vux-header {
    background-color: #FFFFFF !important;
    .vux-header-title {
        font-size: @normal-text-size !important;
        color: black !important;
    }
}

只修改当前页面中vux组件的样式，而不会影响到其他页面中的vux组件的样式：使用vux组件最外层的class包裹。

// root_div是index.vue的根元素
.root_div {
    .vux-header {
        background-color: #FFFFFF !important;
        .vux-header-title {
            font-size: @normal-text-size !important;
            color: black !important;
        }
    }
}

6.vue中的数组变化侦测

在开发中应当注意到数组的变化侦测问题：比如说数组内部的数据通过赋值语句成功修改，但是页面上未渲染成最新的数组数据。
调用下面数组的方法，vue才能够侦测到数组的变化。这些方法如下：
1. push
2. pop
3. shift
4. unshift
5. splice
6. sort
7. reverse

7.自适应问题

使用百分比
使用rem：相对根元素html计算
使用vw：vw是视口宽度的百分之一。

8.移动端中显示图片

a标签嵌套img标签：a标签默认是行内元素，所以需要将其改为行内块或者块元素。

a {
    height: 100%;
    display: inline-block;
    // line-height设置为0时，基线与底线间距离为0，空白消除
    line-height: 0;
    img {
        width: 100%;
        height: 100%;
    }
}

使用div标签包裹图片，div标签根据设计图中的图片的宽高设置width和height。示例如下：

.urgent-note-icon {
  width: 0.56rem;
  height: 0.6rem;
  margin-right: 0.42rem;
  display:flex;
  img {
    width: 100%;
    height: 100%;
  }
}

9.给div元素添加阴影效果

使用box-shadow属性

// 示例
box-shadow: 0px 0px 10px rgba(0, 0, 0, .3);

10.滚动条

禁止页面出现的滚动条水平移动，允许垂直方向上显示滚动条

body {
    overflow-x: hidden;
    overflow-y: auto;
}

11.文本不换行

通常使用span标签装载文字，设置文本不换行

.text_2 {
    white-space: nowrap;
}

12.行内元素设置宽度

默认给行内元素设置宽度是不生效的，需要将行内元素设置为行内块或者块元素。

13.获取用户设备位置信息

1.方式1：使用原生高德地图API

注册高德开发者, 注册高德开发者,获取API key
API key的使用：参考https://lbs.amap.com/api/javascript-api/guide/abc/prepare

JS API的加载方式：

异步加载：

import Vue from 'vue'
export default function MapLoader() {
    // 添加script元素
    let aMapScript = document.createElement('script')
    aMapScript.setAttribute('src', 'https://webapi.amap.com/maps?v=1.4.11&key=fa8e8927e15a841310c27fd8a4eaee5b&plugin=AMap.CitySearch')
    document.head.appendChild(aMapScript)
    return aMapScript.onload = function() {
        AMap.plugin('AMap.Geolocation', function() {
            var geolocation = new AMap.Geolocation({
                // 是否使用高精度定位，默认：true
                enableHighAccuracy: true,
                // 设置定位超时时间，默认：无穷大
                timeout: 10000,
                // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)
                buttonOffset: new AMap.Pixel(10, 20),
                //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
                zoomToAccuracy: true,
                //  定位按钮的排放位置,  RB表示右下
                buttonPosition: 'RB'
            })

            geolocation.getCurrentPosition()
            AMap.event.addListener(geolocation, 'complete', onComplete)
            AMap.event.addListener(geolocation, 'error', onError)

            // 定位成功
            function onComplete(data) {
                // 将需要的数据挂载到vue原型对象上
                Vue.prototype.$lat = data.position.lat;
                Vue.prototype.$lng = data.position.lng;
            }
            // 定位出错
            function onError(data) {}
        })
    }
}

同步加载：

在index.html中

<script type="text/javascript">
    window._AMapSecurityConfig = {
        securityJsCode: '安全密钥值'
            // serviceHost:'您的代理服务器域名或地址/_AMapService',  
            // 例如 ：serviceHost:'http://1.1.1.1:80/_AMapService',
    }
</script>
<script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=API key值&plugin=AMap.CitySearch"></script>

在需要引入地图的页面中

import AMap from 'AMap';

// 在生命周期函数mounted中
mounted() {
    AMap.plugin("AMap.Geolocation", () => {
        var geolocation = new AMap.Geolocation({
            // 是否使用高精度定位，默认：true
            enableHighAccuracy: true,
            // 设置定位超时时间，默认：无穷大
            timeout: 10000,
        });

        // 获取当前用户所在城市和城市的经纬度
        geolocation.getCityInfo((status, result) => {
                if (status == "complete") {}
            })
        //获取用户当前的精确位置
        geolocation.getCurrentPosition((status, result) => {
            if (status == "complete") {
                console.log("result", result)

            }
        })
    })
},

在webpack.base.conf.js中，module.exports={}下添加

externals: {
    'AMap': 'AMap'
},

14.地图绘制

https://lbs.amap.com/api/javascript-api/guide/overlays/toolbar

15.一行或者多行显示不下，省略号显示

一行显示不下，就省略号显示

// 一行显示不下，省略号显示
.ellipsis {
    // 不换行
    white-space: nowrap;
    overflow: hidden;
    // 省略号的意思
    text-overflow: ellipsis;
}

两行显示不下，就省略号显示

 span {
    display: -webkit-box; // 将对象作为弹性伸缩盒子模型显示。
    -webkit-box-orient:vertical;//从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
    -webkit-line-clamp: 2; // 表示显示的行数。
    /*值可设置*/
    overflow: hidden;
}

文本提示：使用title属性

<div class="response-text ellipsis" :title="warningDetail.responseInfo">{{
    warningDetail.responseInfo
}}</div>

16.渐变背景

线性渐变：使用linear-gradient元素。线性渐变在一条直线上从一个颜色过渡到另一个颜色。语法为：background-image:linear-gradient(角度，颜色)

background: linear-gradient(90deg, #A0DCFF 0%, #1880FF 100%);

17.div的设置

一般将盒子尺寸的计算方式设置为border-box，表示宽度和高度用来设置整个盒子可见框的大小，即width和height指的是内容区和内边距和边框的总大小。在这个前提下能用padding就用padding，不用margin。

div {
    box-sizing:border-box;
}

18.公众号获取code换取openid

获取方式有两种：静默授权和非静默授权。
1. 静默授权：没有弹窗
2. 非静默授权：有弹窗，需要用户手动点击确认登录。非静默授权可以获取openid、用户的头像、昵称等。

19.文字滚动效果

transform属性：对元素进行旋转、缩放、移动、倾斜。其值有很多：
1. translateX：表示在二维平面上水平向右移动元素
@keyframes属性：用于定义关键帧。关键帧设置了动画执行的每一个步骤
使用动画实现文字向左滚动的效果示例：

<div class="line1-right">
    <div>{{ weather.info }}&nbsp;{{
            weather.weatherMin
        }}~{{ weather.weatherMax }}</div>
</div>
.line1-right {
    display: flex;
    align-items: center;
    height: 100%;
    width: 3.6rem;
    overflow: hidden;
    div {
        @keyframes roll {
            // 0%表示动画的开始时间
            0% {
                transform: translateX(3.6rem);
            }
            // 100%：表示动画的结束时间
            100% {
                transform: translateX(-100%);
            }
        }
        // 第一个值指定动画名称
        // infinite表示动画执行的次数为无限执行
        // linear表示动画的速度曲线
        // 10s表示动画的执行时间
        animation: roll linear 10s infinite;
        font-size: 0.26rem;
        font-family: PingFangSC-Regular,
        PingFang SC;
        font-weight: 400;
        color: #363a44;
        white-space: nowrap;
        width: max-content;
    }
}

posted on 2023-10-18 20:46 scrutiny-span 阅读(30) 评论(0) 编辑收藏举报

刷新页面返回顶部

导航

移动应用前端问题汇总

1.浙里办适老化前端样式解决方案

1.方案1：动态绑定样式

2.vue.js引入外部样式

3.H5移动端开发中不同屏幕的设配

4.less变量

5.vue项目中修改vux组件的样式

6.vue中的数组变化侦测

7.自适应问题

8.移动端中显示图片

9.给div元素添加阴影效果

10.滚动条

11.文本不换行

12.行内元素设置宽度

13.获取用户设备位置信息

1.方式1：使用原生高德地图API

14.地图绘制

15.一行或者多行显示不下，省略号显示

16.渐变背景

17.div的设置

18.公众号获取code换取openid

19.文字滚动效果