在工作中用到原生小程序的次数稍微少一些，主要还是基于mpvue对于小程序的开发，这篇文章主要记录一下开发中遇到的问题以及对应的解决方案。

    其他说明：我个人在开发小程序的体验上非常不好、非常的不开心，但是不能否认小程序具有一定的商业价值和便捷性，导致在工作中无可避免需要开发小程序，所以以下记录主要是为自己涨涨记性，减少麻烦。

    1. 小程序需要使用特定的【微信小程序开发工具】进行开发，我们常常会通过他的模拟器来看样式问题，然而实际会发现【模拟器】的样式和【实体机/自己的手机】的样式往往会有很大的出入，一切都要以【实体机】的样式为准。

    【需求介绍】
    普通的抽奖活动，但是页面有很多特别样式字体的卡片，由于页面中图片数量过多，所以准备 使用特殊字体来实现卡片中的字的效果。
    【测试实现】
    实现一：将字体文件转化为css文件，然后再页面内引入。
    优点：可以完成需求
    缺点：打包体积太大，无法上传小程序
    结果：× 不能采纳 ×

    1. <style lang="scss" scoped>
    2.   @import('../../asset/font/zihun95hao-shoukesong.css')
    3. </style>

    实现二：将字体文件放在cdn，然后引入页面。
    优点：小程序开发工具的模拟器可以实现当前效果
    缺点：实体机没有获取到样式文件
    结果：× 无法实现 ×

    1. <style lang="scss" scoped>  
    2.   @font-face {
    3.       font-family: 'zihun95hao-shoukesong';
    4.       src: url('https://cdn.133.cn/gtgjwap/Image/eightYear/zihun95hao-shoukesong.woff2') format('woff2');
    5.       font-weight: normal;
    6.       font-style: normal;
    7.       font-display: swap;
    8.   }
    9. </style>

    【最后实现】
    老老实实改用图片吧，哥！

    1. 小程序实现animation动画效果。

    这里有个坑，animation 的第一个子属性必须是name，不然动画不生效。

    1. <style lang="scss" scoped>
    2.   .rolling-list {
    3.     animation: rolling 20s ease-in 1s infinite both running;
    4.   }
    6.   @keyframes rolling {
    7.     from { transform: translateY(0px); }
    8.     to   { transform: translateY(-100%); }
    9.   }
    10. </style>
    1. 标签内的计算参数不能太复杂，能帮着加“（括号）”分隔，就加上括号（方便小程序正确解析）。

    这里还有一个坑，在vue里面 v-for=”x in 4” 的x是从1开始的，但是小程序是从0开始的。

    1. <template>
    2.   <div class="drawer-helper-wrapper">
    3.     <OIcon v-for="index2 in 4" :key="index2" myClass="avatar" 
    4.            type="img" :url="(helper && helper[index] && helper[index].helpUserHeadUrl) || defaultAvatar" :width="46" :height="46"/>
    5.     </div>
    6. </template>
    1. 如果你在小程序里面写了几个组件，那你需要注意：
      1. 如果你在引用的地方给组件新增了class属性，这是 不可以的，你最好改个名名字（例如myClass），并且把这个参数作为props传递到组件，组件再将它并入:class里面。
      2. 并且此种情况写样式（默认为scoped）需要用到 /deep/ ```vue 

    1. ```css
    2.     .popup-wrapper  /deep/ .mask {
    3.       width: 130 * $px;
    4.     }
    6.     .popup-wrapper  /deep/ .bg-mask-wrapper {
    7.       width: 130 * $px;
    8.     }

    1. 项目中小程序的启动问题。

      • 清空打包的dist目录 ：npx gulp clean-dist
      • 整体打包 ：npm run build
      • 开发eventV2特性模块：npm run dev “mpvuePages/eventsV2”
      • 开发mpvue内容，编译过程中出现app.json文件不存在：npm run mix-simple-dev
      • 如果开发过程中出现莫名其妙的错误，那就重启微信开发者工具

    2. 开发中的像素问题。小程序主要采用的是rpx（responsive pixel），可以根据屏幕宽度自适应，默认屏幕长度为750rpx。所以开发的时候不要使用px等绝对长度单位，那样不同的手机自适应效果会很差。

    所以对于一般的375px的屏幕来说，375px = 750rpx，so 1px = 2rpx。
    。。。。。。。414px。。。。。。414px = 750rpx，。。1px = 1.815942rpx
    。。。。。。。750px。。。。。。750px = 750rpx，。。1px = 2rpx

    平时在开发的时候，设计给出的设计稿一般是参照375px的尺寸，为了适配其他的尺寸，比如414px的尺寸，内容稿也会动态改变，但是转换后的rpx却是类似的。例如：

    同一个内容，375px下的36px 和 414px下的40px 效果是一样的。
    36 2 ≈ 40 1.816 = 72rpx
    所以在项目中设置（scss）变量 $px = 2rpx，平时开发的时候（以375px设计稿为例的话） 36 * $px 就可以满足不同尺寸下的像素要求（不想使用变量的话，也可以用loader进行转换）。