关于环信WebIM音频文件不使用input file上传的问题

file input 环信

可以使用Blob对象来解决  
function dataURLtoBlob(dataurl) {  
    var arr = dataurl.split(','),  
    mime = arr[0].match(/:(.*?);/)[1],  
    bstr = atob(arr[1]),  
    n = bstr.length,  
    u8arr = new Uint8Array(n);  
    while(n--) {  
        u8arr[n] = bstr.charCodeAt(n);  
    }  
    return new Blob([u8arr], {  
        type: mime  
    });  
}  

function blobToFile(theBlob, fileName) {  
    //A Blob() is almost a File() - it's just missing the two properties below which we will add  
    theBlob.lastModifiedDate = new Date();  
    theBlob.name = fileName;  
    return theBlob;  
}  
// 单聊发送音频消息  
var sendPrivateAudio = function() {  
    var id = conn.getUniqueId(); // 生成本地消息id  
    var msg = new WebIM.message('audio', id); // 创建音频消息  
        //test: blob对象可以通过mui中的io获得  
    var blob = dataURLtoBlob('data:audio/wav;base64,UklGRhwMAABXQVZFZm10IBAAAAABAAEAgD4AAIA+AAABAAgAZGF0Ya4LAACAgICAgICAgICAgICAgICAgICAgICAgICAf3hxeH+AfXZ1eHx6dnR5fYGFgoOKi42aloubq6GOjI2Op7ythXJ0eYF5aV1AOFFib32HmZSHhpCalIiYi4SRkZaLfnhxaWptb21qaWBea2BRYmZTVmFgWFNXVVVhaGdbYGhZbXh1gXZ1goeIlot1k6yxtKaOkaWhq7KonKCZoaCjoKWuqqmurK6ztrO7tbTAvru/vb68vbW6vLGqsLOfm5yal5KKhoyBeHt2dXBnbmljVlJWUEBBPDw9Mi4zKRwhIBYaGRQcHBURGB0XFxwhGxocJSstMjg6PTc6PUxVV1lWV2JqaXN0coCHhIyPjpOenqWppK6xu72yxMu9us7Pw83Wy9nY29ve6OPr6uvs6ezu6ejk6erm3uPj3dbT1sjBzdDFuMHAt7m1r7W6qaCupJOTkpWPgHqAd3JrbGlnY1peX1hTUk9PTFRKR0RFQkRBRUVEQkdBPjs9Pzo6NT04Njs+PTxAPzo/Ojk6PEA5PUJAQD04PkRCREZLUk1KT1BRUVdXU1VRV1tZV1xgXltcXF9hXl9eY2VmZmlna3J0b3F3eHyBfX+JgIWJiouTlZCTmpybnqSgnqyrqrO3srK2uL2/u7jAwMLFxsfEv8XLzcrIy83JzcrP0s3M0dTP0drY1dPR1dzc19za19XX2dnU1NjU0dXPzdHQy8rMysfGxMLBvLu3ta+sraeioJ2YlI+MioeFfX55cnJsaWVjXVlbVE5RTktHRUVAPDw3NC8uLyknKSIiJiUdHiEeGx4eHRwZHB8cHiAfHh8eHSEhISMoJyMnKisrLCszNy8yOTg9QEJFRUVITVFOTlJVWltaXmNfX2ZqZ21xb3R3eHqAhoeJkZKTlZmhpJ6kqKeur6yxtLW1trW4t6+us7axrbK2tLa6ury7u7u9u7vCwb+/vr7Ev7y9v8G8vby6vru4uLq+tri8ubi5t7W4uLW5uLKxs7G0tLGwt7Wvs7avr7O0tLW4trS4uLO1trW1trm1tLm0r7Kyr66wramsqaKlp52bmpeWl5KQkImEhIB8fXh3eHJrbW5mYGNcWFhUUE1LRENDQUI9ODcxLy8vMCsqLCgoKCgpKScoKCYoKygpKyssLi0sLi0uMDIwMTIuLzQ0Njg4Njc8ODlBQ0A/RUdGSU5RUVFUV1pdXWFjZGdpbG1vcXJ2eXh6fICAgIWIio2OkJGSlJWanJqbnZ2cn6Kkp6enq62srbCysrO1uLy4uL+/vL7CwMHAvb/Cvbq9vLm5uba2t7Sysq+urqyqqaalpqShoJ+enZuamZqXlZWTkpGSkpCNjpCMioqLioiHhoeGhYSGg4GDhoKDg4GBg4GBgoGBgoOChISChISChIWDg4WEgoSEgYODgYGCgYGAgICAgX99f398fX18e3p6e3t7enp7fHx4e3x6e3x7fHx9fX59fn1+fX19fH19fnx9fn19fX18fHx7fHx6fH18fXx8fHx7fH1+fXx+f319fn19fn1+gH9+f4B/fn+AgICAgH+AgICAgIGAgICAgH9+f4B+f35+fn58e3t8e3p5eXh4d3Z1dHRzcXBvb21sbmxqaWhlZmVjYmFfX2BfXV1cXFxaWVlaWVlYV1hYV1hYWVhZWFlaWllbXFpbXV5fX15fYWJhYmNiYWJhYWJjZGVmZ2hqbG1ub3Fxc3V3dnd6e3t8e3x+f3+AgICAgoGBgoKDhISFh4aHiYqKi4uMjYyOj4+QkZKUlZWXmJmbm52enqCioqSlpqeoqaqrrK2ur7CxsrGys7O0tbW2tba3t7i3uLe4t7a3t7i3tre2tba1tLSzsrKysbCvrq2sq6qop6alo6OioJ+dnJqZmJeWlJKSkI+OjoyLioiIh4WEg4GBgH9+fXt6eXh3d3V0c3JxcG9ubWxsamppaWhnZmVlZGRjYmNiYWBhYGBfYF9fXl5fXl1dXVxdXF1dXF1cXF1cXF1dXV5dXV5fXl9eX19gYGFgYWJhYmFiY2NiY2RjZGNkZWRlZGVmZmVmZmVmZ2dmZ2hnaGhnaGloZ2hpaWhpamlqaWpqa2pra2xtbGxtbm1ubm5vcG9wcXBxcnFycnN0c3N0dXV2d3d4eHh5ent6e3x9fn5/f4CAgIGCg4SEhYaGh4iIiYqLi4uMjY2Oj5CQkZGSk5OUlJWWlpeYl5iZmZqbm5ybnJ2cnZ6en56fn6ChoKChoqGio6KjpKOko6SjpKWkpaSkpKSlpKWkpaSlpKSlpKOkpKOko6KioaKhoaCfoJ+enp2dnJybmpmZmJeXlpWUk5STkZGQj4+OjYyLioqJh4eGhYSEgoKBgIB/fn59fHt7enl5eHd3dnZ1dHRzc3JycXBxcG9vbm5tbWxrbGxraWppaWhpaGdnZ2dmZ2ZlZmVmZWRlZGVkY2RjZGNkZGRkZGRkZGRkZGRjZGRkY2RjZGNkZWRlZGVmZWZmZ2ZnZ2doaWhpaWpra2xsbW5tbm9ub29wcXFycnNzdHV1dXZ2d3d4eXl6enp7fHx9fX5+f4CAgIGAgYGCgoOEhISFhoWGhoeIh4iJiImKiYqLiouLjI2MjI2OjY6Pj46PkI+QkZCRkJGQkZGSkZKRkpGSkZGRkZKRkpKRkpGSkZKRkpGSkZKRkpGSkZCRkZCRkI+Qj5CPkI+Pjo+OjY6Njo2MjYyLjIuMi4qLioqJiomJiImIh4iHh4aHhoaFhoWFhIWEg4SDg4KDgoKBgoGAgYCBgICAgICAf4CAf39+f35/fn1+fX59fHx9fH18e3x7fHt6e3p7ent6e3p5enl6enl6eXp5eXl4eXh5eHl4eXh5eHl4eXh5eHh3eHh4d3h4d3h3d3h4d3l4eHd4d3h3eHd4d3h3eHh4eXh5eHl4eHl4eXh5enl6eXp5enl6eXp5ent6ent6e3x7fHx9fH18fX19fn1+fX5/fn9+f4B/gH+Af4CAgICAgIGAgYCBgoGCgYKCgoKDgoOEg4OEg4SFhIWEhYSFhoWGhYaHhoeHhoeGh4iHiIiHiImIiImKiYqJiYqJiouKi4qLiouKi4qLiouKi4qLiouKi4qLi4qLiouKi4qLiomJiomIiYiJiImIh4iIh4iHhoeGhYWGhYaFhIWEg4OEg4KDgoOCgYKBgIGAgICAgH+Af39+f359fn18fX19fHx8e3t6e3p7enl6eXp5enl6enl5eXh5eHh5eHl4eXh5eHl4eHd5eHd3eHl4d3h3eHd4d3h3eHh4d3h4d3h3d3h5eHl4eXh5eHl5eXp5enl6eXp7ent6e3p7e3t7fHt8e3x8fHx9fH1+fX59fn9+f35/gH+AgICAgICAgYGAgYKBgoGCgoKDgoOEg4SEhIWFhIWFhoWGhYaGhoaHhoeGh4aHhoeIh4iHiIeHiIeIh4iHiIeIiIiHiIeIh4iHiIiHiIeIh4iHiIeIh4eIh4eIh4aHh4aHhoeGh4aHhoWGhYaFhoWFhIWEhYSFhIWEhISDhIOEg4OCg4OCg4KDgYKCgYKCgYCBgIGAgYCBgICAgICAgICAf4B/f4B/gH+Af35/fn9+f35/fn1+fn19fn1+fX59fn19fX19fH18fXx9fH18fXx9fH18fXx8fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x8e3x7fHt8e3x7fHx8fXx9fH18fX5+fX59fn9+f35+f35/gH+Af4B/gICAgICAgICAgICAgYCBgIGAgIGAgYGBgoGCgYKBgoGCgYKBgoGCgoKDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KCgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGBgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIGAgYCAgICBgIGAgYCBgIGAgYCBgIGAgYCBgExJU1RCAAAASU5GT0lDUkQMAAAAMjAwOC0wOS0yMQAASUVORwMAAAAgAAABSVNGVBYAAABTb255IFNvdW5kIEZvcmdlIDguMAAA');  
    var url = window.URL.createObjectURL(blob);  
    var input = blobToFile(blob, "test.wav");  
    var uri = {  
        url: '',  
        filename: '',  
        filetype: '',  
        data: ''  
    };  
    uri.data = input;  
    uri.url = window.URL.createObjectURL(input);  
    uri.filename = input.name || '';  
    var index = uri.filename.lastIndexOf('.');  
    if(index != -1) {  
        uri.filetype = uri.filename.substring(index + 1).toLowerCase();  
    }  
    var file = uri;  
    var option = {  
        apiUrl: WebIM.config.apiURL,  
        file: file,  
        to: 'test00004', // 接收消息对象  
        roomType: false,  
        chatType: 'singleChat',  
        onFileUploadError: function() { // 消息上传失败  
            console.log('onFileUploadError');  
        },  
        onFileUploadComplete: function() { // 消息上传成功  
            console.log('onFileUploadComplete');  
        },  
            success: function() { // 消息发送成功  
            console.log('Success');  
        },  
        flashUpload: WebIM.flashUpload  
    };  
    msg.set(option);  
    conn.send(msg.body);  
};

继续阅读 »

可以使用Blob对象来解决  
function dataURLtoBlob(dataurl) {  
    var arr = dataurl.split(','),  
    mime = arr[0].match(/:(.*?);/)[1],  
    bstr = atob(arr[1]),  
    n = bstr.length,  
    u8arr = new Uint8Array(n);  
    while(n--) {  
        u8arr[n] = bstr.charCodeAt(n);  
    }  
    return new Blob([u8arr], {  
        type: mime  
    });  
}  

function blobToFile(theBlob, fileName) {  
    //A Blob() is almost a File() - it's just missing the two properties below which we will add  
    theBlob.lastModifiedDate = new Date();  
    theBlob.name = fileName;  
    return theBlob;  
}  
// 单聊发送音频消息  
var sendPrivateAudio = function() {  
    var id = conn.getUniqueId(); // 生成本地消息id  
    var msg = new WebIM.message('audio', id); // 创建音频消息  
        //test: blob对象可以通过mui中的io获得  
    var blob = dataURLtoBlob('data:audio/wav;base64,UklGRhwMAABXQVZFZm10IBAAAAABAAEAgD4AAIA+AAABAAgAZGF0Ya4LAACAgICAgICAgICAgICAgICAgICAgICAgICAf3hxeH+AfXZ1eHx6dnR5fYGFgoOKi42aloubq6GOjI2Op7ythXJ0eYF5aV1AOFFib32HmZSHhpCalIiYi4SRkZaLfnhxaWptb21qaWBea2BRYmZTVmFgWFNXVVVhaGdbYGhZbXh1gXZ1goeIlot1k6yxtKaOkaWhq7KonKCZoaCjoKWuqqmurK6ztrO7tbTAvru/vb68vbW6vLGqsLOfm5yal5KKhoyBeHt2dXBnbmljVlJWUEBBPDw9Mi4zKRwhIBYaGRQcHBURGB0XFxwhGxocJSstMjg6PTc6PUxVV1lWV2JqaXN0coCHhIyPjpOenqWppK6xu72yxMu9us7Pw83Wy9nY29ve6OPr6uvs6ezu6ejk6erm3uPj3dbT1sjBzdDFuMHAt7m1r7W6qaCupJOTkpWPgHqAd3JrbGlnY1peX1hTUk9PTFRKR0RFQkRBRUVEQkdBPjs9Pzo6NT04Njs+PTxAPzo/Ojk6PEA5PUJAQD04PkRCREZLUk1KT1BRUVdXU1VRV1tZV1xgXltcXF9hXl9eY2VmZmlna3J0b3F3eHyBfX+JgIWJiouTlZCTmpybnqSgnqyrqrO3srK2uL2/u7jAwMLFxsfEv8XLzcrIy83JzcrP0s3M0dTP0drY1dPR1dzc19za19XX2dnU1NjU0dXPzdHQy8rMysfGxMLBvLu3ta+sraeioJ2YlI+MioeFfX55cnJsaWVjXVlbVE5RTktHRUVAPDw3NC8uLyknKSIiJiUdHiEeGx4eHRwZHB8cHiAfHh8eHSEhISMoJyMnKisrLCszNy8yOTg9QEJFRUVITVFOTlJVWltaXmNfX2ZqZ21xb3R3eHqAhoeJkZKTlZmhpJ6kqKeur6yxtLW1trW4t6+us7axrbK2tLa6ury7u7u9u7vCwb+/vr7Ev7y9v8G8vby6vru4uLq+tri8ubi5t7W4uLW5uLKxs7G0tLGwt7Wvs7avr7O0tLW4trS4uLO1trW1trm1tLm0r7Kyr66wramsqaKlp52bmpeWl5KQkImEhIB8fXh3eHJrbW5mYGNcWFhUUE1LRENDQUI9ODcxLy8vMCsqLCgoKCgpKScoKCYoKygpKyssLi0sLi0uMDIwMTIuLzQ0Njg4Njc8ODlBQ0A/RUdGSU5RUVFUV1pdXWFjZGdpbG1vcXJ2eXh6fICAgIWIio2OkJGSlJWanJqbnZ2cn6Kkp6enq62srbCysrO1uLy4uL+/vL7CwMHAvb/Cvbq9vLm5uba2t7Sysq+urqyqqaalpqShoJ+enZuamZqXlZWTkpGSkpCNjpCMioqLioiHhoeGhYSGg4GDhoKDg4GBg4GBgoGBgoOChISChISChIWDg4WEgoSEgYODgYGCgYGAgICAgX99f398fX18e3p6e3t7enp7fHx4e3x6e3x7fHx9fX59fn1+fX19fH19fnx9fn19fX18fHx7fHx6fH18fXx8fHx7fH1+fXx+f319fn19fn1+gH9+f4B/fn+AgICAgH+AgICAgIGAgICAgH9+f4B+f35+fn58e3t8e3p5eXh4d3Z1dHRzcXBvb21sbmxqaWhlZmVjYmFfX2BfXV1cXFxaWVlaWVlYV1hYV1hYWVhZWFlaWllbXFpbXV5fX15fYWJhYmNiYWJhYWJjZGVmZ2hqbG1ub3Fxc3V3dnd6e3t8e3x+f3+AgICAgoGBgoKDhISFh4aHiYqKi4uMjYyOj4+QkZKUlZWXmJmbm52enqCioqSlpqeoqaqrrK2ur7CxsrGys7O0tbW2tba3t7i3uLe4t7a3t7i3tre2tba1tLSzsrKysbCvrq2sq6qop6alo6OioJ+dnJqZmJeWlJKSkI+OjoyLioiIh4WEg4GBgH9+fXt6eXh3d3V0c3JxcG9ubWxsamppaWhnZmVlZGRjYmNiYWBhYGBfYF9fXl5fXl1dXVxdXF1dXF1cXF1cXF1dXV5dXV5fXl9eX19gYGFgYWJhYmFiY2NiY2RjZGNkZWRlZGVmZmVmZmVmZ2dmZ2hnaGhnaGloZ2hpaWhpamlqaWpqa2pra2xtbGxtbm1ubm5vcG9wcXBxcnFycnN0c3N0dXV2d3d4eHh5ent6e3x9fn5/f4CAgIGCg4SEhYaGh4iIiYqLi4uMjY2Oj5CQkZGSk5OUlJWWlpeYl5iZmZqbm5ybnJ2cnZ6en56fn6ChoKChoqGio6KjpKOko6SjpKWkpaSkpKSlpKWkpaSlpKSlpKOkpKOko6KioaKhoaCfoJ+enp2dnJybmpmZmJeXlpWUk5STkZGQj4+OjYyLioqJh4eGhYSEgoKBgIB/fn59fHt7enl5eHd3dnZ1dHRzc3JycXBxcG9vbm5tbWxrbGxraWppaWhpaGdnZ2dmZ2ZlZmVmZWRlZGVkY2RjZGNkZGRkZGRkZGRkZGRjZGRkY2RjZGNkZWRlZGVmZWZmZ2ZnZ2doaWhpaWpra2xsbW5tbm9ub29wcXFycnNzdHV1dXZ2d3d4eXl6enp7fHx9fX5+f4CAgIGAgYGCgoOEhISFhoWGhoeIh4iJiImKiYqLiouLjI2MjI2OjY6Pj46PkI+QkZCRkJGQkZGSkZKRkpGSkZGRkZKRkpKRkpGSkZKRkpGSkZKRkpGSkZCRkZCRkI+Qj5CPkI+Pjo+OjY6Njo2MjYyLjIuMi4qLioqJiomJiImIh4iHh4aHhoaFhoWFhIWEg4SDg4KDgoKBgoGAgYCBgICAgICAf4CAf39+f35/fn1+fX59fHx9fH18e3x7fHt6e3p7ent6e3p5enl6enl6eXp5eXl4eXh5eHl4eXh5eHl4eXh5eHh3eHh4d3h4d3h3d3h4d3l4eHd4d3h3eHd4d3h3eHh4eXh5eHl4eHl4eXh5enl6eXp5enl6eXp5ent6ent6e3x7fHx9fH18fX19fn1+fX5/fn9+f4B/gH+Af4CAgICAgIGAgYCBgoGCgYKCgoKDgoOEg4OEg4SFhIWEhYSFhoWGhYaHhoeHhoeGh4iHiIiHiImIiImKiYqJiYqJiouKi4qLiouKi4qLiouKi4qLiouKi4qLi4qLiouKi4qLiomJiomIiYiJiImIh4iIh4iHhoeGhYWGhYaFhIWEg4OEg4KDgoOCgYKBgIGAgICAgH+Af39+f359fn18fX19fHx8e3t6e3p7enl6eXp5enl6enl5eXh5eHh5eHl4eXh5eHl4eHd5eHd3eHl4d3h3eHd4d3h3eHh4d3h4d3h3d3h5eHl4eXh5eHl5eXp5enl6eXp7ent6e3p7e3t7fHt8e3x8fHx9fH1+fX59fn9+f35/gH+AgICAgICAgYGAgYKBgoGCgoKDgoOEg4SEhIWFhIWFhoWGhYaGhoaHhoeGh4aHhoeIh4iHiIeHiIeIh4iHiIeIiIiHiIeIh4iHiIiHiIeIh4iHiIeIh4eIh4eIh4aHh4aHhoeGh4aHhoWGhYaFhoWFhIWEhYSFhIWEhISDhIOEg4OCg4OCg4KDgYKCgYKCgYCBgIGAgYCBgICAgICAgICAf4B/f4B/gH+Af35/fn9+f35/fn1+fn19fn1+fX59fn19fX19fH18fXx9fH18fXx9fH18fXx8fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x7fHt8e3x8e3x7fHt8e3x7fHx8fXx9fH18fX5+fX59fn9+f35+f35/gH+Af4B/gICAgICAgICAgICAgYCBgIGAgIGAgYGBgoGCgYKBgoGCgYKBgoGCgoKDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KDgoOCg4KCgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGCgYKBgoGBgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIGAgYCBgIGAgYCAgICBgIGAgYCBgIGAgYCBgIGAgYCBgExJU1RCAAAASU5GT0lDUkQMAAAAMjAwOC0wOS0yMQAASUVORwMAAAAgAAABSVNGVBYAAABTb255IFNvdW5kIEZvcmdlIDguMAAA');  
    var url = window.URL.createObjectURL(blob);  
    var input = blobToFile(blob, "test.wav");  
    var uri = {  
        url: '',  
        filename: '',  
        filetype: '',  
        data: ''  
    };  
    uri.data = input;  
    uri.url = window.URL.createObjectURL(input);  
    uri.filename = input.name || '';  
    var index = uri.filename.lastIndexOf('.');  
    if(index != -1) {  
        uri.filetype = uri.filename.substring(index + 1).toLowerCase();  
    }  
    var file = uri;  
    var option = {  
        apiUrl: WebIM.config.apiURL,  
        file: file,  
        to: 'test00004', // 接收消息对象  
        roomType: false,  
        chatType: 'singleChat',  
        onFileUploadError: function() { // 消息上传失败  
            console.log('onFileUploadError');  
        },  
        onFileUploadComplete: function() { // 消息上传成功  
            console.log('onFileUploadComplete');  
        },  
            success: function() { // 消息发送成功  
            console.log('Success');  
        },  
        flashUpload: WebIM.flashUpload  
    };  
    msg.set(option);  
    conn.send(msg.body);  
};

收起阅读 »

学习笔记自我小结（3）

做一个实际项目，必然会涉及到多个页面的跳转刷新数据，所以建议页面跳转用mui.fire 进行传参，到另一个页面监听执行事件，然后执行数据
请求的逻辑函数，当然这里会有一些不注意的地方，重复绑定事件函数，比如obj.addEventListener(“click”, function() {}), 页面在来回跳转
的时候，必然会导致重复绑定类似于这样的事件，所以一定要解绑。

mui("父级元素").off("tap").on("tap", "子元素", function() {  

})

页面来回切换还有个别的问题，比如黑屏的情况，查了会资料，不晓得怎么更好的去解决，临时用了plus.webview.create(“index.html”)，
objWebview.close(); 来替代 objWebview.hide() 。。这非常的耗损性能。。

注意点：
一个页面跳转到一个页面再跳转到另一个页面，在第三个页面返回，或者操作完毕返回时，别忘了要 plus.webview.currentWebview().hide()。
来回监听函数绑定事件，要先解绑再绑定，不然会绑定多次，也就导致同一个事件会执行多次。
如果用click点击无法触发的时候，换成tap试试。
当前webview创建或者预加载一个webview，在跳转到创建或者预加载的那个webview时，不能hide()当前的webview，否则预加载的webview不能显示
出来，因为预加载webview 与当前webview 是捆绑到一起的。

软键盘顶起父级webview的tab问题：
个人觉得是这样，首先官方讲的是软键盘下面是不可能覆盖元素的，软键盘导致了webview高度压缩，而子webview的bottom预先设定是50px, 因为这父webview的tab才得以显示出来，只要子webview设定为bottom为0，就会重新将父级webview覆盖起来，因为子webview的z-index层级比父级webview高。

var oldH = plus.android.invoke(plus.android.currentWebview(),"getHeight") ;  
window.addEventListener("resize", function() {  
            var newH = plus.android.invoke(plus.android.currentWebview(),"getHeight") ;  
            if(oldH - newH > 100) { //监控当前webview的变化  
                plus.webview.currentWebview().setStyle({top: '0px',bottom: '0px'});  
            } else {  
                plus.webview.currentWebview().setStyle({top: '0px',bottom: '50px'});  
            }  
        })

继续阅读 »

做一个实际项目，必然会涉及到多个页面的跳转刷新数据，所以建议页面跳转用mui.fire 进行传参，到另一个页面监听执行事件，然后执行数据
请求的逻辑函数，当然这里会有一些不注意的地方，重复绑定事件函数，比如obj.addEventListener(“click”, function() {}), 页面在来回跳转
的时候，必然会导致重复绑定类似于这样的事件，所以一定要解绑。

mui("父级元素").off("tap").on("tap", "子元素", function() {  

})

页面来回切换还有个别的问题，比如黑屏的情况，查了会资料，不晓得怎么更好的去解决，临时用了plus.webview.create(“index.html”)，
objWebview.close(); 来替代 objWebview.hide() 。。这非常的耗损性能。。

注意点：
一个页面跳转到一个页面再跳转到另一个页面，在第三个页面返回，或者操作完毕返回时，别忘了要 plus.webview.currentWebview().hide()。
来回监听函数绑定事件，要先解绑再绑定，不然会绑定多次，也就导致同一个事件会执行多次。
如果用click点击无法触发的时候，换成tap试试。
当前webview创建或者预加载一个webview，在跳转到创建或者预加载的那个webview时，不能hide()当前的webview，否则预加载的webview不能显示
出来，因为预加载webview 与当前webview 是捆绑到一起的。

软键盘顶起父级webview的tab问题：
个人觉得是这样，首先官方讲的是软键盘下面是不可能覆盖元素的，软键盘导致了webview高度压缩，而子webview的bottom预先设定是50px, 因为这父webview的tab才得以显示出来，只要子webview设定为bottom为0，就会重新将父级webview覆盖起来，因为子webview的z-index层级比父级webview高。

var oldH = plus.android.invoke(plus.android.currentWebview(),"getHeight") ;  
window.addEventListener("resize", function() {  
            var newH = plus.android.invoke(plus.android.currentWebview(),"getHeight") ;  
            if(oldH - newH > 100) { //监控当前webview的变化  
                plus.webview.currentWebview().setStyle({top: '0px',bottom: '0px'});  
            } else {  
                plus.webview.currentWebview().setStyle({top: '0px',bottom: '50px'});  
            }  
        })

收起阅读 »

提个不成熟的小建议，关于子页面back事件

自定义事件 back

append创建子页面的时候是否应该默认或强制的屏蔽响应back按键监听事件吧

纯粹个人的不成熟小建议，呵呵！

mui-关于侧滑菜单中无法应用点击(click)事件的解决方法

异步拼页面，发现对其绑定事件不起作用，简直是无语，一开始认为是jquery对append进来的标签无法绑定事件的问题,前后试了百度各种方法,用过on,用过live,用过bind,,,,最后发现这根本不是问题所在,后来在侧滑菜单主容器固定写了个click发现根本就不能用,这才发现原来只支持mui的tap事件.我真是醉了.耗费n时间.
如有类似问题的同仁,请使用一下方法:
.mui-off-canvas-wrap:侧滑菜单容器.
mui(".mui-off-canvas-wrap").on('tap','h2' ,function(){
$(this).parent().hide();
});

ps:不知是我没用对,还是mui的问题,如有大神,请指教

继续阅读 »

求一个成品Demo

广州全职诚招

招聘

创业公司招HB程序员，懂后端优先。详情私聊。

hbuilder 8.0 更新重要内容相关视频教程已经发布，涵盖：原生导航、原生侧滑菜单、原生滑动窗口切换、附 app开发视频教程汇总

更新 App mui

hbuilder 8.0 更新重要内容相关视频教程已经发布，涵盖：原生导航、原生侧滑菜单、原生滑动窗口切换、附 app开发视频教程汇总！

免费的！视频观看地址：
http://www.hcoder.net/course

如果感觉有用，请帮忙顶贴支持谢谢大家！

继续阅读 »

mui h5+ 全套视频

hellomui

HybridAPP开发包含：HTML,CSS,，JS,MUI,H5+,CASTAPP.JS,PHP,MYSQL,混合app开发技术
加老师qq看视频2971611409

iOS流应用对开发者有什么价值？

Appstore 内测流应用

开发者在iOS上有很多烦恼：

内测应用不能方便发布，每天给领导的iPhone安装更新内测应用非常麻烦；
Appstore审核实在麻烦，总是通不过，又着急让用户使用；
数字消费需要给Apple支付30%的抽成；
市场上的原生应用在社交传播时很不方便。

那就试试DCloud的流应用吧。

1.在HBuilder里点发行-发行流应用，提交到流应用平台，会生成一个二维码。
2.把这个二维码发给你的领导，让他去Appstore下载流应用，然后扫此码即可体验你的开发成果。
第二天你更新了流应用，提交后，领导重启app会自动更新，每天方便体验你的进展。

流应用分测试应用和正式应用，测试应用每次启动时会弹个框，你也可以点信任此应用，以后便不再弹框。

想要更新为正式应用，要求是你的app至少在360手助、应用宝、Appstore这3大市场上线过一个。
如果这些市场都拒绝你的app上线，我们也是不敢给你升到正式平台的。
当然如果你跟使用者打好招呼，让他们点击信任倒也不影响使用。

其实现在大多数app上应用市场也未必有多少流量。
流应用还有一个能力叫分享直通车，如果你的app强依赖社交推广，可以利用好此技术，获得的用户会比应用市场更多。
可参考此视频体验：http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_r0171bswy6f.html

如果你会玩流量，一定要学会gostream.js这个神器：
http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/579

最后放一个例子，代练通这个app流量不小，可某天突然被Appstore下架（原因需自行体会最近Apple和微信打架的原因）
幸好有流应用，代练通引导用户使用流应用里的代练通，继续低成本的覆盖了iOS用户。附件是他们的app使用说明书，值得参考。

继续阅读 »

开发者在iOS上有很多烦恼：

内测应用不能方便发布，每天给领导的iPhone安装更新内测应用非常麻烦；
Appstore审核实在麻烦，总是通不过，又着急让用户使用；
数字消费需要给Apple支付30%的抽成；
市场上的原生应用在社交传播时很不方便。

那就试试DCloud的流应用吧。

1.在HBuilder里点发行-发行流应用，提交到流应用平台，会生成一个二维码。
2.把这个二维码发给你的领导，让他去Appstore下载流应用，然后扫此码即可体验你的开发成果。
第二天你更新了流应用，提交后，领导重启app会自动更新，每天方便体验你的进展。

流应用分测试应用和正式应用，测试应用每次启动时会弹个框，你也可以点信任此应用，以后便不再弹框。

想要更新为正式应用，要求是你的app至少在360手助、应用宝、Appstore这3大市场上线过一个。
如果这些市场都拒绝你的app上线，我们也是不敢给你升到正式平台的。
当然如果你跟使用者打好招呼，让他们点击信任倒也不影响使用。

其实现在大多数app上应用市场也未必有多少流量。
流应用还有一个能力叫分享直通车，如果你的app强依赖社交推广，可以利用好此技术，获得的用户会比应用市场更多。
可参考此视频体验：http://v.qq.com/boke/gplay/c17d8789e7dd8a208cd6e6189ae90664_nst000001qufah3_r0171bswy6f.html

如果你会玩流量，一定要学会gostream.js这个神器：
http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/579

最后放一个例子，代练通这个app流量不小，可某天突然被Appstore下架（原因需自行体会最近Apple和微信打架的原因）
幸好有流应用，代练通引导用户使用流应用里的代练通，继续低成本的覆盖了iOS用户。附件是他们的app使用说明书，值得参考。

收起阅读 »

HBuilder今天刚接触，使用蛮不错的！

HBuilder

大大提高工作效率，哈哈

h5混合 mui 开发课程-react native课程

mui Native.JS

HybridAPP开发包含：HTML,CSS,，JS,MUI,H5+,CASTAPP.JS,PHP,MYSQL,混合app开发技术
React Native混合app开发 : HTML5,CSS3,Javascript,ECMscript6,PHP,MYSQL,React Native
进入教室：http://crm.dongyixueyuan.com/cu/a2JvhfFZ

继续阅读 »

使用Vue单文件，开发Html5+应用

Vue

vue-template-for-hbuilder

使用Vue单文件，开发Html5+应用

说明：

该模板生成自 vue-cli，对其dev模式进行了修改，用来使用hbuilder的开发

项目背景，自己之前开发了一个 app，使用的mui，后来引入了Vue，由于Hbuilder，还没编译es6的功能，及hbuilder有自己的web服务器，如果我们自己启动web服务的话，又不能将编译结果实时的推送到真机调试模式下，所以产生了修改vue项目模板的需求。

使用方法：

$ npm install -g vue-cli  
$ vue init aOrz/vue-template-for-hbuilder my-project  
$ cd my-project  
$ npm install  
$ npm run dev

使用Hbuilder打开my-project/dist中的目录，打开 manifest.json 点击云端获取，获取appid，并同步到 src/manifest.json 中，然后真机运行。
npm run dev 后代码会自动更新到 dist 目录，请不要用 Hbuilder 打开编译后的文件，以免影响真机测试

Build Setup

# install dependencies  
npm install  

# serve with hot reload at localhost:8080  
npm run dev  

# build for production with minification  
npm run build  

# build for production and view the bundle analyzer report  
npm run build --report

继续阅读 »

vue-template-for-hbuilder

使用Vue单文件，开发Html5+应用

说明：

该模板生成自 vue-cli，对其dev模式进行了修改，用来使用hbuilder的开发

项目背景，自己之前开发了一个 app，使用的mui，后来引入了Vue，由于Hbuilder，还没编译es6的功能，及hbuilder有自己的web服务器，如果我们自己启动web服务的话，又不能将编译结果实时的推送到真机调试模式下，所以产生了修改vue项目模板的需求。

使用方法：

$ npm install -g vue-cli  
$ vue init aOrz/vue-template-for-hbuilder my-project  
$ cd my-project  
$ npm install  
$ npm run dev

使用Hbuilder打开my-project/dist中的目录，打开 manifest.json 点击云端获取，获取appid，并同步到 src/manifest.json 中，然后真机运行。
npm run dev 后代码会自动更新到 dist 目录，请不要用 Hbuilder 打开编译后的文件，以免影响真机测试

Build Setup

# install dependencies  
npm install  

# serve with hot reload at localhost:8080  
npm run dev  

# build for production with minification  
npm run build  

# build for production and view the bundle analyzer report  
npm run build --report

收起阅读 »

vue-template-for-hbuilder

说明：

使用方法：

Build Setup

vue-template-for-hbuilder

说明：

使用方法：

Build Setup

热门文章