解决方法见最后

解决代码见github,点我跳转

在项目中使用了es6新方法

如, ./src/pages/index/index.vue中使用了es6的Array.prototype.flatMap

一、尝试过在./src/main.js中写

import "core-js/fn/array/flat-map"

这种方式最终打包出来的代码 有 flatMap相关兼容代码
上传到体验版 却没有flatMap方法
(见下图)

二、尝试过在./babel.config.js中的@vue/app配置中写polyfills

module.exports = {  
  presets: [  
    [  
      '@vue/app',  
      {  
        modules: 'commonjs',  
        useBuiltIns: 'entry',  
        polyfills: [  
          'es7.array.flat-map'  
        ]  
      }  
    ]  
  ],  
  plugins  
}

但是最终打包出来的代码 没有 flatMap相关兼容代码
(见下图)

三、解决办法

舍弃上面的解决过程
直接安装如下两个npm库

• uni-app-polyfills-presets
• uni-app-core-js

重要:在上面两个依赖的github里 点一下star 有利于解决bug :)

npm install uni-app-polyfills-presets@1.0.0  
npm install uni-app-core-js@1.0.0

然后在./babel.config.js里写

module.exports = {  
  presets: [  
    // 上面的代码略...  
    [  
      'module:uni-app-polyfills-presets',  
      {  
        // 如果写usage那么将是按实际使用情况引入兼容库  
        // 参数具体解释请前往https://babeljs.io/docs/en/babel-preset-env查看  
        useBuiltIns: 'usage'  
      }  
    ]  
    // 下面的代码略...  
  ],  
  plugins  
}

最终打包&上传到小程序平台之后

本人在杭州，5年前端经验，空闲时间多，找uniapp项目兼职，其他前端项目也可以，擅长小程序、H5、Vue、React等等

本人联系方式微信:wangzehu12

Css打字机效果

github地址，喜欢的可以star下哦

插件预览图

使用教程

代码展示

• vue页面使用

<template>  
    <view class="typewriter">  
        <view class="text">The cat and the hat.</view>  
    </view>  
</template>

• Style

<style>  
    .typewriter {  
        width: 390upx;  
        margin: auto;  
    }  

    .typewriter .text {  
        font-size: 40upx;  
        overflow: hidden;  
        border-right: 2upx solid orange;  
        white-space: nowrap;  
        margin: 0 auto;  
        letter-spacing: 2;  
        animation:typing 3.5s steps(40, end),blink-caret .75s step-end infinite;  
    }  

    @keyframes typing {  
        from {  
            width: 0  
        }  

        to {  
            width: 100%  
        }  
    }  

    @keyframes blink-caret {  

        from,  
        to {  
            border-color: transparent  
        }  

        50% {  
            border-color: orange;  
        }  
    }  
</style>  

兼容性

全平台兼容

前言
最近在使用uniapp制作支付宝小程序，遇到一个很有意思却让人苦恼的BUG，支付宝小程序对vue的支持并不友好，以至于部分vue指定在经过uniapp编译打包成小程序后，小程序并不支持。
问题：
我们在做登录页面需要在 input 里输入值，v-model 双向绑定到 data中，

<input type="text" value="" class="username" placeholder="请填写手机号" v-model="username"/>  
<input type="text" value="" class=" password" placeholder="请输入你的密码" v-model="passWord"/>

 到这里时原以为自写的代码天衣无缝，运行H5端没问题，运行在微信小程序没问题，真机测试没问题，支付宝小程序IDE也没问题，担当用支付宝小程序IDE的真机调试，完犊子了，输入框的光标出现跳动，删除时不能全部删除，总之输入体验极其不好，可是在慢速输入下没有问题。  
 为解决这个问题，我下载了uniapp官方的登录模板在支付宝小程序IDE下真机调试，还是会出现这种问题。  
 这里再调侃一下支付宝小程序的社区那是真的 “好” “好的不得了” 当天提出问题，回答问题的客服 “热情高涨” “恢复信息也很快” 解决办法让我 **使用支付宝小程序支持的代码*重写***  
 这个问题看似都不是问题的问题，造就了输入体验极差。究其根本就是支付宝小程序对vue的支持不友好导致的。我们需要绕过**v-model**使用其他办法 **@input**  

献上代码

<input type="text" value="" class="username" placeholder="请填写手机号"  @input="getUsername"/>  
<input type="text" value="" class=" password" placeholder="请输入你的密码" @input="getPassWord"/>  

// data中  
data() {  
        return {  
            ischecked: false,  
            userName : '',  
            passWord : ''  
        }  
    }  
//methods中  
methods:{  

        getUsername:function(event){  
            // 绕过v-model 获取input输入框的值  
            this.userName = event.detail.value  
            console.log(this.userName)  
        }

即可不使用v-model获取input的值

• 基于vue-cli配置多页开发，适用于多混合开发平台，GitHub。

• 已运用于多个项目开发，觉得有用可以点个小星星

我是一名懂一点点前端开发的UI设计师，使用HB还是有很长一段时间啦，但是总觉得HB的图标在我的Mac里都显的那么的格格不入，所以今天抽了点时间重绘了一下HB的图标，有喜欢的就拿去用吧。

--

我就想说一句，坑的一逼~~！能好好整个文档？

无聊时间，帮忙集成各种第三方插件，5+ ，uniapp 阿里百川 百度Ar 等等 android ios 均可，指导离线打包 技术交流， 开发技巧等等
时间就是金钱，简单问题熬个几天划不来，花点钱说不定分分钟就可以搞定，能理解得就使劲问我，知无不言
同时可以承接各种前端短期任务

            setInterval(()=>{  
                var animation = uni.createAnimation({  
                    duration:500,  
                    delay:0,  
                })  
                if(num === -20){  
                    num = 0  
                }else if(num ===0){  
                    num = -20  
                }  
                this.animation = animation  
                animation.translateY(num).rotate(90).step()  
                this.animationData = animation.export()  
            }, 500)```  
注意```if(num === -20){  
                    num = 0  
                }else if(num ===0){  
                    num = -20  
                }```