文中使用vue.js+mui,重写返回方法，返回上一页前执行方法。
监听 参数变化，true时调用返回方法。
主要代码：

//重写返回方法  
var oldback = mui.back;  

mui.back = function() {  

    rockVue.savaBeforBack();  

};  

var rockVue = new Vue({  
    el: '#rockdeep',  
    data: {  
        issave : false,  
    },  
    methods : function(){  

         savaBeforBack : function(){  
                 var self = this;  
                 mui.confirm('有数据未保存，是否保存', '提示', ['取消', '确认'], function(e) {  
            if(e.index) {  
                self.issave = true;               
            } else {                  
                   self.issave = true;  
            }  

        }, 'div');  

          },  

    },  
    watch : {  
        issave : function(val){  
           if(val){  
                oldback();  
            }  

        },      

    }  
})

金华地区，工作室、个人兼职接单 uniapp h5+、网站、原生app外包接单

案例：http://withtime.net
QQ：261732321

uniApp安卓多环境配置

1. Build.gradle
2. AndroidMainfest.xml
3. libs
4. assets

Build.gradle

apply plugin: 'com.android.application'  

android {  
    compileSdkVersion 29  
    buildToolsVersion "29.0.1"  
    defaultConfig {  
        applicationId "com.testapp.uniappandroid"  
        minSdkVersion 16  
        targetSdkVersion 29  
        versionCode 1  
        versionName "1.0"  
        flavorDimensions ""  
        ndk {  
            abiFilters 'x86','armeabi-v7a'  //使用uniapp时必须同时选择二者或选其一  
        }  
    }  

    buildTypes {  
        release {  
            minifyEnabled false  
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'  
        }  
    }  

    //使用uniapp时，需复制下面代码  
    /*代码开始*/  
    aaptOptions {  
        additionalParameters '--auto-add-overlay'  
        //noCompress 'foo', 'bar'  
        ignoreAssetsPattern "!.svn:!.git:.*:!CVS:!thumbs.db:!picasa.ini:!*.scc:*~"  
    }  

    productFlavors {  

        first {  
            applicationId "com.demo.first"  
            manifestPlaceholders = [  
                    APP_ICON:"@drawable/icon",  
                    APP_NAME:"First"  
            ]  

        }  

        second {  
            applicationId "com.demo.second"  
            manifestPlaceholders = [  
                    APP_ICON:"@drawable/icon",  
                    APP_NAME:"Second"  
            ]  

        }  

    }  

    applicationVariants.all {variant ->  
        variant.outputs.all {output ->  
            output.outputFileName = "${variant.name}.apk"  
        }  
    }  
    /*代码结束*/  
}  

dependencies {  
    implementation fileTree(dir: 'libs', include: ['*.jar'])  

    /*uniApp依赖库*/  
    implementation fileTree(include: ['*.aar'], dir: 'libs')  
    implementation 'com.android.support:appcompat-v7:26.1.0'  
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'  
    /*uniapp所需库-----------------------开始*/  
    implementation 'com.android.support:recyclerview-v7:26.1.0'  
    implementation 'com.alibaba.android:bindingx-core:1.0.3'  
    implementation 'com.alibaba.android:bindingx_weex_plugin:1.0.3'  
    implementation 'com.squareup.okhttp:okhttp:2.3.0'  
    implementation 'com.squareup.okhttp:okhttp-ws:2.3.0'  
    implementation 'com.alibaba:fastjson:1.1.46.android'  
    implementation 'com.facebook.fresco:fresco:1.13.0'  
    implementation "com.facebook.fresco:animated-gif:1.13.0"  
    /*uniapp所需库-----------------------结束*/  
    // 基座需要，必须添加  
    implementation 'com.github.bumptech.glide:glide:4.9.0'  
}  

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>  
<manifest xmlns:android="http://schemas.android.com/apk/res/android"  
    package="com.testapp.uniappandroid">  

    <application  
        android:name="io.dcloud.application.DCloudApplication"  
        android:allowClearUserData="true"  
        android:icon="${APP_ICON}"  
        android:label="${APP_NAME}"  
        android:largeHeap="true"  
        >  
        <activity  
            android:name="io.dcloud.PandoraEntry"  
            android:configChanges="orientation|keyboardHidden|keyboard|navigation"  
            android:label="${APP_NAME}"  
            android:launchMode="singleTask"  
            android:hardwareAccelerated="true"  
            android:screenOrientation="user"  
            android:windowSoftInputMode="adjustResize" >  
            <intent-filter>  
                <action android:name="android.intent.action.MAIN" />  

                <category android:name="android.intent.category.LAUNCHER" />  
            </intent-filter>  
        </activity>  
    </application>  

</manifest>

3 libs

lib.5plus.base-release.aar  
uniapp-release.aar

4 assets

apps/   
data/

西安招聘多端APP开发者，要求会Hbuildx，uniapp,mui，联系QQ：103249 TEL:17899105917

出现问题，主要是以下两个方面导致：
1、fixed 定位问题
2、软键盘把viewport page整个高度缩小了。导致顶部去了

=====================================
知道了原理后，解决起来其实就很简单了；
1、 把 fixed 改成absolute
2、通过js计算，把父元素的高度，直接固定； 就可以解决了

当应用内，需要把图片或视频或压缩文件等等文件，发给第三方应用时，可以使用Native.js调用系统自带的分享功能来实现.

var main = plus.android.runtimeMainActivity();  
var Intent = plus.android.importClass("android.content.Intent");  
var Uri = plus.android.importClass("android.net.Uri");  
var File = plus.android.importClass("java.io.File");  
var shareIntent = new Intent(Intent.ACTION_SEND);  

var filePath=plus.io.convertLocalFileSystemURL("img/3.jpg"); //把应用内的文件路径转化为手机绝对路径  

shareIntent.putExtra(Intent.EXTRA_STREAM,Uri.fromFile(new File(filePath)));  
shareIntent.setType("*/*");//此处可发送多种文件  
//shareIntent.setType("application/pdf");//只发送pdf文件  

main.startActivity(Intent.createChooser(shareIntent,"分享文件"));  

原文链接

此贴会持续更新，记录iOS离线集成常见编译报错及解决方案，方便大家排查问题

Q: Undefined symbols for architecture ... 如下图

Q: 'xxx' file not found

解决方法见最后

解决代码见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的值