2021/9/23 工作记录(惑)

小程序

路由接口的实现(page)

全部作为静态资源处理

组件

1. 在components下 创建

;(function(global) {
  global.slideTip = {
    template: ` <div class="slide-tip-box" v-if="!isPCopen&&!isShowSlideTip">
     </div>`,
    data() {
      return {
        isShowSlideTip: ''
      }
    },
    computed: {
      isPCopen() {
        return this.isPC()
      }
    },
    created() {
      this.isShowSlideTip = storage.get('is_first_open_question')
    },
    methods: {
      knowTip() {
        this.isShowSlideTip = '1'
        storage.set('is_first_open_question', '1')
      }
    }
  }

  Vue.component('zl-debug', zlDebug) // 将该组件注册为全局组件
})(window)

2. 在需要的page下导入

  <link rel="stylesheet" href="../widget/components/answersCard/index.css" />
  <script src="../widget/components/answersCard/index.js"></script>

3. 使用
   必须加zl-

 <zl-answers-card
          :questions-list="questionsList"
          :exam-score="examInfo.exam_score"
          :is-show-score="isShowScore"
          @close-answers-card="closeAnswersCard"
          @answer-card-score="saveAnswerCardScore"
        ></zl-answers-card>

4. 区分全局组件和局部组件的注册

// 全局组件
Vue.coponent('zl-video', window.zlVideo)

// 局部组件
let app = {
  components: {
    'zl-video': window.zlVideo
  }
}

css 规范

rem

1rem = 设置在根节点上font-size

    Vue.prototype.openFontSizeLimit = function() {
      win.setFontSize = function() {
        // 获取window 宽度
        // zepto实现 $(window).width()就是这么干的
        // var winWidth = window.innerWidth;

        var winWidth = document.body.offsetWidth
        var size = (winWidth / designWidth) * 100
        doc.documentElement.style.fontSize = size + 'px'
      }
      win.setFontSize()
}

语义化

其他

• id应该为驼峰式命名 userName；
• class只能为中划线text-success，有些老的浏览器不支持_。

文字行高

一般情况下不设置width、height，通过padding来撑+文字设置行高；

针对iphoneX安全区域

通过设置padding或者直接用div设置高度来撑高；

悬浮的盒子

如果有需要悬浮的盒子，不能让滚动元素成为他的父级，在ios上悬浮的盒子会跟着滚动；

position:fixed

面向用户端，禁止使用position:fixed,用absolute代替

font rem大小

禁止使用以奇数结尾，如：0.01rem

按钮要加上disabled属性

防止交互时，多次重复点击，弱网情况下，导致多次写入数据等问题

class中不能定义display:flex，

使用公共类flex-wrap、flex-center-wrap、flex-center替代

class一些属性必须带webkit

v-for属性的标签，必须有key属性

class类名不能使用驼峰命名，page-sound-xxx

使用 overflow-y:auto

需要添加 -webkit-overflow-scrolling:touch 来提高用户体验

vue

img加载错误

<img :src="imgUrl"  @error="handleError" alt=""/>

样式穿透

.vue 下的scss

.page-content {
  ::v-deep .kl-box {
    background-color: red;
  }
}

移动端调试