注册 登录
HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次，多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

关于TopTalk开发团队使用UniApp开发的一些规范协议

关于团队Uni项目开发的一些协议（持续完善中...）：

1、长度、大小单位均使用rpx；
2、关于命名：

文件名、方法名、变量等名称命名一律使用英文，太长可缩减至前两个英文单词。

  • 包名全部小写
  • 变量名、方法名首字母小写，如果名称由多个单词组成，首单词小写其余单词的首字母都需大写

3、css样式语言的lang属性设置为scss，如 

<style lang="scss">

4、组件引入遇到多页面引入时，需配置到main.js页面中，vue页面即无需再次引入；
5、本地js演示数据一律配置到main.js页面中;
注：main.js 为项目的配置文件。封装方法、js、vue插件、公用常量、服务地址均配置到此文件
6、涉及到单模块页面分包可纳入同一包下，不要层级包嵌套！规范示例如下：

7、减少深层的节点嵌套，避免在页面初始化构建造成内存占用；
8、减少 scroll-view 组件的 scroll 事件监听;
9、尽可能或完全避免在template里直接写view 的style样式！

注：进阶链接
uniMPSDK文档
高效开发技巧
HBuilderX - 高效极客技巧
manifest.json 全概述
uni调用原生的API

继续阅读 »

关于团队Uni项目开发的一些协议（持续完善中...）：

1、长度、大小单位均使用rpx；
2、关于命名：

文件名、方法名、变量等名称命名一律使用英文，太长可缩减至前两个英文单词。

  • 包名全部小写
  • 变量名、方法名首字母小写，如果名称由多个单词组成，首单词小写其余单词的首字母都需大写

3、css样式语言的lang属性设置为scss，如 

<style lang="scss">

4、组件引入遇到多页面引入时，需配置到main.js页面中，vue页面即无需再次引入；
5、本地js演示数据一律配置到main.js页面中;
注：main.js 为项目的配置文件。封装方法、js、vue插件、公用常量、服务地址均配置到此文件
6、涉及到单模块页面分包可纳入同一包下，不要层级包嵌套！规范示例如下：

7、减少深层的节点嵌套，避免在页面初始化构建造成内存占用；
8、减少 scroll-view 组件的 scroll 事件监听;
9、尽可能或完全避免在template里直接写view 的style样式！

注：进阶链接
uniMPSDK文档
高效开发技巧
HBuilderX - 高效极客技巧
manifest.json 全概述
uni调用原生的API

收起阅读 »
machi的奶茶 发表于 : 2020-05-08 18:22 评论 (0) 分享

Hbuilder 多显示下一直有这个问题

HBuilder

[内容]

如附件所示，计算机中安装了三台显示器，

显示器1为4K，分辨率3840x2106 缩放：150%
显示器2为2K,分辨率1920x2160 缩放：150%
显示器3为2K,分辨率1920x2160 缩放：150%

[步骤]
当IDE从显示器1拖到显示器2，或者显示器3之后。

[结果]
无法再拖回去，IDE顶部不响应拖动事件，整个UI窗口无法拖动

[期望]

[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]

[IDE版本号]
2.6.16.20200424

[windows版本号]
Windows 10专业版

继续阅读 »

[内容]

如附件所示，计算机中安装了三台显示器，

显示器1为4K，分辨率3840x2106 缩放：150%
显示器2为2K,分辨率1920x2160 缩放：150%
显示器3为2K,分辨率1920x2160 缩放：150%

[步骤]
当IDE从显示器1拖到显示器2，或者显示器3之后。

[结果]
无法再拖回去，IDE顶部不响应拖动事件，整个UI窗口无法拖动

[期望]

[如果语言难以表述清晰，拍一个视频或截图，有图有真相]

IDE运行环境说明

[HBuilder 或 HBuilderX。如果你用其他工具开发uni-app，也需要在此说明]

[IDE版本号]
2.6.16.20200424

[windows版本号]
Windows 10专业版

收起阅读 »
easywong 发表于 : 2020-05-08 14:33 评论 (0) 分享

小团队开发uniapp、uniapp定制开发

uniapp

uniapp定制开发
uniapp所需资料都是那些？
1.功能需求沟通，前期明确需求可以确定工期和报价；
2.UI设计图确认

  1. 前端搭建
  2. 后台搭建
  3. 填写内容上线
  4. 上线测试
  5. 158-3211-5099

uniapp定制开发
uniapp所需资料都是那些？
1.功能需求沟通，前期明确需求可以确定工期和报价；
2.UI设计图确认

  1. 前端搭建
  2. 后台搭建
  3. 填写内容上线
  4. 上线测试
  5. 158-3211-5099
app定制开发 发表于 : 2020-05-08 14:26 评论 (0) 分享

HTML5+表单新增、删除、预览、上传图片

图片预览 
第一种方法：表单提交，使用jquery的Ajax  
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">    
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />  
        <meta name="apple-mobile-web-app-capable" content="yes" />  
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
    </head>  
    <body>  
        <style>  
            .preview ul {  
                margin: 0;  
                padding: 0;  
            }  
            .preview ul li {  
                position: relative;  
                display: inline-block;  
                margin-top: 10px;  
                margin-bottom: 10px;  
                margin-right: 10px;  
                float: left;  
                list-style: none;  
            }  
            .preview ul li img {  
                width: 50px;  
                height: 50px;  
                border-radius: 5px;  
            }  
            .preview ul li input {  
                display: inline-block;  
                position: absolute;  
                width: 50px;  
                height: 50px;  
                left: 0;  
                top: 0;  
                opacity: 0;  
            }  
            .del {  
                display: inline-block;  
                position: absolute;  
                top:6px;  
                right: 0px;  
                width: 12px;  
                height: 2px;  
                background: #ED544D;  
                line-height: 0;  
                font-size: 0;  
                vertical-align: middle;  
                -webkit-transform: rotate(45deg);  
            }  
            .del:after {  
                content: "/";  
                display: block;  
                width: 12px;  
                height: 2px;  
                background: #ED544D;  
                -webkit-transform: rotate(-90deg);  
            }  
        </style>  
    <header class="mui-bar mui-bar-nav" >  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <div class="mui-title">图片预览上传</div>  
    </header>  
    <div class="mui-content" >  
        <form id='from1' enctype = "multipart/form-data">  
            <div style="margin-top: 16px;margin-bottom: 10px;">  
                <span class="title">添加照片（选填）</span>  
                <span id="picnum" style="float: right;margin-right: 20px;font-size: 12px; color: #666666;">0/4</span>  
            </div>  
            <div class="preview" style="background-color: #ffffff;height: 70px;width: 100%;padding-left: 15px;padding-right: 15px;">  
                <ul class="row mui-input-row">  
                    <li>  
                        <input id="file"  type="file" name="upload" accept="image/*"  
                               onchange="setImagePreviews();"  multiple="true" />  
                        <img src="../images/adddd.png"/>  
                    </li>  
                </ul>  
            </div>  
            <div style="margin-top: 16px;width: 100%;text-align: center;">  
                <button style="background-color: #169BD5;height: 40px;width: 266px;font-size: 14px;color: #FFFFFF;border-radius: 5px;border: 0px;" type="button" onclick="trans()">提交</button>  
            </div>  
        </form>  
    </div>  

    </body>  
<script src="../js/mui.min.js"></script>  
<script src="../js/jquery.min.js"></script>  
<script type="text/javascript">  
    mui.init({  
        swipeBack:true //启用右滑关闭功能  
        });  
    function submit(){  
        var formData = new FormData();  
        formData.append('name',name);  
        if(uploadfile.length>0){  
            for(var i=0;i<uploadfile.length;i++){  
                formData.append("upload", uploadfile[i]); // 文件对象  
            }  
        }  
        var url= ;  
        jQuery.ajax({  
          url: url,  
          type: 'post',  
          async: false,  
          contentType:false,  
          processData: false,  
          data:formData,  
          xhrFields: {  
            withCredentials: true  
          },  
          crossDomain: true,  
          success: function (data) {  
            console.log(JSON.stringify(data));  
            mui.toast("提交成功！",{ duration:'500', type:'div' });  
          },  
          error: function (error) {  
            console.log(JSON.stringify(error));  
            mui.toast('页面出错',{ duration:'500', type:'div' });  
          }  
        });  
    }  
    var uploadfile = [];  
    function setImagePreviews() {  
        var docObj = document.getElementById("file");  
        var piclength = uploadfile.length;  
        var fileList = docObj.files;  
        if((Number(piclength) + Number(fileList.length)) > 4) {  
            plus.nativeUI.alert('最多上传四张');  
        } else {  
            document.getElementById("picnum").innerText=Number(piclength) + Number(fileList.length)+'/4';  
            for(var i = 0; i < fileList.length; i++) {  
                uploadfile.push(docObj.files[i]);  
                var picid = Number(piclength) + Number(i);  
                var reader = new FileReader();  
                reader.readAsDataURL(docObj.files[i]);                      
                reader.onload = function(e) {  
                // 图片base64化  
                var newUrl = this.result;  
                $(".preview ul").prepend("<li onclick='delImg(this)'><img src='" + newUrl + "' /><span class='del'></span></li>");  
                };  

            }  
        }  
    }  
    function delImg(obj){  
        var list =document.getElementsByTagName('li');  
        for(var i=0;i<list.length;i++){  
            list[i].index=i;  
        }  
        var idx=2-obj.index;  
        var ul=obj.parentNode;  
        var btnArray=['是','否'];  
        plus.nativeUI.confirm("确定要删除此图?",function(e){  
            if(e.index==0){  
                ul.removeChild(obj);  
                uploadfile.splice(idx,1);  
                document.getElementById("picnum").innerText=Number(uploadfile.length)+'/4';  
            }  
        },{"buttons":btnArray})  
    }  
</script>  
</html>  
第二种：使用plus.uploader  

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">    
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />  
        <meta name="apple-mobile-web-app-capable" content="yes" />  
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
    </head>  
    <body>  
        <style>  
            .dynamic_images ul {  
                margin: 0;  
                padding: 0;  
            }  
            .dynamic_images ul li {  
                position: relative;  
                display: inline-block;  
                margin-top: 10px;  
                margin-bottom: 10px;  
                margin-right: 10px;  
                float: left;  
                list-style: none;  
            }  
            .dynamic_images ul li img {  
                width: 50px;  
                height: 50px;  
                border-radius: 5px;  
            }  
            .del {  
                display: inline-block;  
                position: absolute;  
                top:6px;  
                right: 0px;  
                width: 12px;  
                height: 2px;  
                background: #ED544D;  
                line-height: 0;  
                font-size: 0;  
                vertical-align: middle;  
                -webkit-transform: rotate(45deg);  
            }  
            .del:after {  
                content: "/";  
                display: block;  
                width: 12px;  
                height: 2px;  
                background: #ED544D;  
                -webkit-transform: rotate(-90deg);  
            }  
        </style>  
    <header class="mui-bar mui-bar-nav" >  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <div class="mui-title">图片预览上传</div>  
    </header>  
    <div class="mui-content" >  
        <form id='from1' enctype = "multipart/form-data">  
            <div style="margin-top: 16px;margin-bottom: 10px;">  
                <span class="title">添加照片（选填）</span>  
                <span id="picnum" style="float: right;margin-right: 20px;font-size: 12px; color: #666666;">0/4</span>  
            </div>  
            <div class="dynamic_images" style="background-color: #ffffff;height: 70px;width: 100%;padding-left: 15px;padding-right: 15px;">  
                <ul class="row mui-input-row">  
                    <li>  
                        <img src="../images/adddd.png" id="addnew" onclick="showActionSheet();" />  
                    </li>  
                </ul>  
            </div>  
            <div style="margin-top: 16px;width: 100%;text-align: center;">  
                <button style="background-color: #169BD5;height: 40px;width: 266px;font-size: 14px;color: #FFFFFF;border-radius: 5px;border: 0px;" type="button" onclick="submit()">提交</button>  
            </div>  
        </form>  
    </div>  
    </body>  
<script src="../js/mui.min.js"></script>  
<script src="../js/jquery.min.js"></script>  
<script type="text/javascript">  
    mui.init({  
        swipeBack:true //启用右滑关闭功能  
        });  

    function submit(){  
        var url= ;  
        var task = plus.uploader.createUpload( url,   
            { method:"POST",blocksize:204800,priority:100 },  
            function ( t, status ) {  
                // 上传完成  
                if ( status == 200 ) {   
                    wt.close();  
                    console.log( "Upload success: " + JSON.stringify(t));  
                } else {  
                    wt.close();  
                    console.log( "Upload failed: " + JSON.stringify(status));  
                }  
            });  
            for(var i = 0; i < files.length; i++) {    
                var f = files[i];    
                task.addFile(f.path,{  
                    key: f.name,  
                    name:'upload',  
                });  
            }  
            task.addData('name',name);  
            task.start();  
    }  

    var files = [];  
    // 添加文件  
    var index = 1;  
    var newUrlAfterCompress;  
    function appendFile(p) {  
        files.push({  
            name: "uploadkey" + index,//这个值服务器会用到，作为file的key  
            path: p  
        });  
        index++;  
    }  
    function showActionSheet() {  
        if($(".dynamic_images ul li").length<5){  
            var bts = [{  
                title: "拍照"  
            }, {  
                title: "从相册选择"  
            }];  
            plus.nativeUI.actionSheet({  
                    cancel: "取消",  
                    buttons: bts  
                },  
            function(e) {  
                    if (e.index == 1) {  
                        getImage();  
                    } else if (e.index == 2) {  
                        galleryImgs();  
                    }  
                }  
            );  
        }else{  
            plus.nativeUI.alert('最多上传四张图片!');  
        }  
    }  
    // 产生一个随机数  
    function getUid() {  
        return Math.floor(Math.random() * 100000000 + 10000000).toString();  
    }  
    //拍照  
    function getImage() {  
        var cmr = plus.camera.getCamera();  
        cmr.captureImage(function(p) {  
            plus.io.resolveLocalFileSystemURL(p, function(entry) {  
                var localurl = entry.toLocalURL(); //  
                $(".dynamic_images ul").prepend("<li onclick='delImg(this)'><img src='" + localurl + "' /><span class='del'></span></li>");  
                var dstname="_downloads/"+getUid()+".png";//设置压缩后图片的路径  
                newUrlAfterCompress=compressImage(localurl,dstname);  
                appendFile(dstname);  
                document.getElementById("picnum").innerText=files.length+'/4';  
            });  
        });  
    }  
    function galleryImgs() {  
        // 从相册中选择图片  
        var num=4;  
        if(5-$(".dynamic_images ul li").length>=1){  
            num=5-$(".dynamic_images ul li").length;  
        }  
        plus.gallery.pick(function(e) {  
            for (var i = 0; i < e.files.length; i++) {  
                $(".dynamic_images ul").prepend(  
                    "<li  onclick='delImg(this)'><img  src='" + e.files[i] + "'/><span class='del'></span></li>");  
                    var dstname="_downloads/"+getUid()+".png";//设置压缩后图片的路径  
                    newUrlAfterCompress=compressImage(e.files[i],dstname);  
                    appendFile(dstname);  
            }  
            document.getElementById("picnum").innerText=files.length+'/4';  
        }, function(e) {   
            console.log("取消选择图片");  
        }, {  
            filter: "image",  
            multiple: true,  
            maximum:num,  
            system:false,  
            onmaxed:function(){  
                plus.nativeUI.alert('最多只能选择四张图片');  
            }  
        });  
    }  
    //压缩图片，这个比较变态的方法，无法return  
    function compressImage(src,dstname) {  
        //兼容  
        if (0 != src.toString().indexOf("file://")) {  
            src = "file://" + src;  
        }  
        plus.zip.compressImage({  
                src: src,  
                dst: dstname,  
                overwrite:true,  
                quality: 5  
            },  
            function(event) {  
                //console.log("Compress success:"+event.target);  
                return event.target;  
            },  
            function(error) {  
                console.log(error);  
                return src;  
            });  

    }  
     function delImg(obj)  
     {  
        var list =document.getElementsByTagName('li');  
        for(var i=0;i<list.length;i++){  
            list[i].index=i;  
        }  
        var idx=2-obj.index;  
        var ul=obj.parentNode;  
        var btnArray=['是','否'];  
        plus.nativeUI.confirm("确定要删除此图?",function(e){  
            if(e.index==0){  
                ul.removeChild(obj);  
                files.splice(idx,1);  
                document.getElementById("picnum").innerText=Number(files.length)+'/4';  
            }  
        },{"buttons":btnArray})  
     }  
</script>  
</html>
继续阅读 » 
第一种方法：表单提交，使用jquery的Ajax  
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">    
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />  
        <meta name="apple-mobile-web-app-capable" content="yes" />  
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
    </head>  
    <body>  
        <style>  
            .preview ul {  
                margin: 0;  
                padding: 0;  
            }  
            .preview ul li {  
                position: relative;  
                display: inline-block;  
                margin-top: 10px;  
                margin-bottom: 10px;  
                margin-right: 10px;  
                float: left;  
                list-style: none;  
            }  
            .preview ul li img {  
                width: 50px;  
                height: 50px;  
                border-radius: 5px;  
            }  
            .preview ul li input {  
                display: inline-block;  
                position: absolute;  
                width: 50px;  
                height: 50px;  
                left: 0;  
                top: 0;  
                opacity: 0;  
            }  
            .del {  
                display: inline-block;  
                position: absolute;  
                top:6px;  
                right: 0px;  
                width: 12px;  
                height: 2px;  
                background: #ED544D;  
                line-height: 0;  
                font-size: 0;  
                vertical-align: middle;  
                -webkit-transform: rotate(45deg);  
            }  
            .del:after {  
                content: "/";  
                display: block;  
                width: 12px;  
                height: 2px;  
                background: #ED544D;  
                -webkit-transform: rotate(-90deg);  
            }  
        </style>  
    <header class="mui-bar mui-bar-nav" >  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <div class="mui-title">图片预览上传</div>  
    </header>  
    <div class="mui-content" >  
        <form id='from1' enctype = "multipart/form-data">  
            <div style="margin-top: 16px;margin-bottom: 10px;">  
                <span class="title">添加照片（选填）</span>  
                <span id="picnum" style="float: right;margin-right: 20px;font-size: 12px; color: #666666;">0/4</span>  
            </div>  
            <div class="preview" style="background-color: #ffffff;height: 70px;width: 100%;padding-left: 15px;padding-right: 15px;">  
                <ul class="row mui-input-row">  
                    <li>  
                        <input id="file"  type="file" name="upload" accept="image/*"  
                               onchange="setImagePreviews();"  multiple="true" />  
                        <img src="../images/adddd.png"/>  
                    </li>  
                </ul>  
            </div>  
            <div style="margin-top: 16px;width: 100%;text-align: center;">  
                <button style="background-color: #169BD5;height: 40px;width: 266px;font-size: 14px;color: #FFFFFF;border-radius: 5px;border: 0px;" type="button" onclick="trans()">提交</button>  
            </div>  
        </form>  
    </div>  

    </body>  
<script src="../js/mui.min.js"></script>  
<script src="../js/jquery.min.js"></script>  
<script type="text/javascript">  
    mui.init({  
        swipeBack:true //启用右滑关闭功能  
        });  
    function submit(){  
        var formData = new FormData();  
        formData.append('name',name);  
        if(uploadfile.length>0){  
            for(var i=0;i<uploadfile.length;i++){  
                formData.append("upload", uploadfile[i]); // 文件对象  
            }  
        }  
        var url= ;  
        jQuery.ajax({  
          url: url,  
          type: 'post',  
          async: false,  
          contentType:false,  
          processData: false,  
          data:formData,  
          xhrFields: {  
            withCredentials: true  
          },  
          crossDomain: true,  
          success: function (data) {  
            console.log(JSON.stringify(data));  
            mui.toast("提交成功！",{ duration:'500', type:'div' });  
          },  
          error: function (error) {  
            console.log(JSON.stringify(error));  
            mui.toast('页面出错',{ duration:'500', type:'div' });  
          }  
        });  
    }  
    var uploadfile = [];  
    function setImagePreviews() {  
        var docObj = document.getElementById("file");  
        var piclength = uploadfile.length;  
        var fileList = docObj.files;  
        if((Number(piclength) + Number(fileList.length)) > 4) {  
            plus.nativeUI.alert('最多上传四张');  
        } else {  
            document.getElementById("picnum").innerText=Number(piclength) + Number(fileList.length)+'/4';  
            for(var i = 0; i < fileList.length; i++) {  
                uploadfile.push(docObj.files[i]);  
                var picid = Number(piclength) + Number(i);  
                var reader = new FileReader();  
                reader.readAsDataURL(docObj.files[i]);                      
                reader.onload = function(e) {  
                // 图片base64化  
                var newUrl = this.result;  
                $(".preview ul").prepend("<li onclick='delImg(this)'><img src='" + newUrl + "' /><span class='del'></span></li>");  
                };  

            }  
        }  
    }  
    function delImg(obj){  
        var list =document.getElementsByTagName('li');  
        for(var i=0;i<list.length;i++){  
            list[i].index=i;  
        }  
        var idx=2-obj.index;  
        var ul=obj.parentNode;  
        var btnArray=['是','否'];  
        plus.nativeUI.confirm("确定要删除此图?",function(e){  
            if(e.index==0){  
                ul.removeChild(obj);  
                uploadfile.splice(idx,1);  
                document.getElementById("picnum").innerText=Number(uploadfile.length)+'/4';  
            }  
        },{"buttons":btnArray})  
    }  
</script>  
</html>  
第二种：使用plus.uploader  

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8">    
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />  
        <meta name="apple-mobile-web-app-capable" content="yes" />  
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />  
    </head>  
    <body>  
        <style>  
            .dynamic_images ul {  
                margin: 0;  
                padding: 0;  
            }  
            .dynamic_images ul li {  
                position: relative;  
                display: inline-block;  
                margin-top: 10px;  
                margin-bottom: 10px;  
                margin-right: 10px;  
                float: left;  
                list-style: none;  
            }  
            .dynamic_images ul li img {  
                width: 50px;  
                height: 50px;  
                border-radius: 5px;  
            }  
            .del {  
                display: inline-block;  
                position: absolute;  
                top:6px;  
                right: 0px;  
                width: 12px;  
                height: 2px;  
                background: #ED544D;  
                line-height: 0;  
                font-size: 0;  
                vertical-align: middle;  
                -webkit-transform: rotate(45deg);  
            }  
            .del:after {  
                content: "/";  
                display: block;  
                width: 12px;  
                height: 2px;  
                background: #ED544D;  
                -webkit-transform: rotate(-90deg);  
            }  
        </style>  
    <header class="mui-bar mui-bar-nav" >  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <div class="mui-title">图片预览上传</div>  
    </header>  
    <div class="mui-content" >  
        <form id='from1' enctype = "multipart/form-data">  
            <div style="margin-top: 16px;margin-bottom: 10px;">  
                <span class="title">添加照片（选填）</span>  
                <span id="picnum" style="float: right;margin-right: 20px;font-size: 12px; color: #666666;">0/4</span>  
            </div>  
            <div class="dynamic_images" style="background-color: #ffffff;height: 70px;width: 100%;padding-left: 15px;padding-right: 15px;">  
                <ul class="row mui-input-row">  
                    <li>  
                        <img src="../images/adddd.png" id="addnew" onclick="showActionSheet();" />  
                    </li>  
                </ul>  
            </div>  
            <div style="margin-top: 16px;width: 100%;text-align: center;">  
                <button style="background-color: #169BD5;height: 40px;width: 266px;font-size: 14px;color: #FFFFFF;border-radius: 5px;border: 0px;" type="button" onclick="submit()">提交</button>  
            </div>  
        </form>  
    </div>  
    </body>  
<script src="../js/mui.min.js"></script>  
<script src="../js/jquery.min.js"></script>  
<script type="text/javascript">  
    mui.init({  
        swipeBack:true //启用右滑关闭功能  
        });  

    function submit(){  
        var url= ;  
        var task = plus.uploader.createUpload( url,   
            { method:"POST",blocksize:204800,priority:100 },  
            function ( t, status ) {  
                // 上传完成  
                if ( status == 200 ) {   
                    wt.close();  
                    console.log( "Upload success: " + JSON.stringify(t));  
                } else {  
                    wt.close();  
                    console.log( "Upload failed: " + JSON.stringify(status));  
                }  
            });  
            for(var i = 0; i < files.length; i++) {    
                var f = files[i];    
                task.addFile(f.path,{  
                    key: f.name,  
                    name:'upload',  
                });  
            }  
            task.addData('name',name);  
            task.start();  
    }  

    var files = [];  
    // 添加文件  
    var index = 1;  
    var newUrlAfterCompress;  
    function appendFile(p) {  
        files.push({  
            name: "uploadkey" + index,//这个值服务器会用到，作为file的key  
            path: p  
        });  
        index++;  
    }  
    function showActionSheet() {  
        if($(".dynamic_images ul li").length<5){  
            var bts = [{  
                title: "拍照"  
            }, {  
                title: "从相册选择"  
            }];  
            plus.nativeUI.actionSheet({  
                    cancel: "取消",  
                    buttons: bts  
                },  
            function(e) {  
                    if (e.index == 1) {  
                        getImage();  
                    } else if (e.index == 2) {  
                        galleryImgs();  
                    }  
                }  
            );  
        }else{  
            plus.nativeUI.alert('最多上传四张图片!');  
        }  
    }  
    // 产生一个随机数  
    function getUid() {  
        return Math.floor(Math.random() * 100000000 + 10000000).toString();  
    }  
    //拍照  
    function getImage() {  
        var cmr = plus.camera.getCamera();  
        cmr.captureImage(function(p) {  
            plus.io.resolveLocalFileSystemURL(p, function(entry) {  
                var localurl = entry.toLocalURL(); //  
                $(".dynamic_images ul").prepend("<li onclick='delImg(this)'><img src='" + localurl + "' /><span class='del'></span></li>");  
                var dstname="_downloads/"+getUid()+".png";//设置压缩后图片的路径  
                newUrlAfterCompress=compressImage(localurl,dstname);  
                appendFile(dstname);  
                document.getElementById("picnum").innerText=files.length+'/4';  
            });  
        });  
    }  
    function galleryImgs() {  
        // 从相册中选择图片  
        var num=4;  
        if(5-$(".dynamic_images ul li").length>=1){  
            num=5-$(".dynamic_images ul li").length;  
        }  
        plus.gallery.pick(function(e) {  
            for (var i = 0; i < e.files.length; i++) {  
                $(".dynamic_images ul").prepend(  
                    "<li  onclick='delImg(this)'><img  src='" + e.files[i] + "'/><span class='del'></span></li>");  
                    var dstname="_downloads/"+getUid()+".png";//设置压缩后图片的路径  
                    newUrlAfterCompress=compressImage(e.files[i],dstname);  
                    appendFile(dstname);  
            }  
            document.getElementById("picnum").innerText=files.length+'/4';  
        }, function(e) {   
            console.log("取消选择图片");  
        }, {  
            filter: "image",  
            multiple: true,  
            maximum:num,  
            system:false,  
            onmaxed:function(){  
                plus.nativeUI.alert('最多只能选择四张图片');  
            }  
        });  
    }  
    //压缩图片，这个比较变态的方法，无法return  
    function compressImage(src,dstname) {  
        //兼容  
        if (0 != src.toString().indexOf("file://")) {  
            src = "file://" + src;  
        }  
        plus.zip.compressImage({  
                src: src,  
                dst: dstname,  
                overwrite:true,  
                quality: 5  
            },  
            function(event) {  
                //console.log("Compress success:"+event.target);  
                return event.target;  
            },  
            function(error) {  
                console.log(error);  
                return src;  
            });  

    }  
     function delImg(obj)  
     {  
        var list =document.getElementsByTagName('li');  
        for(var i=0;i<list.length;i++){  
            list[i].index=i;  
        }  
        var idx=2-obj.index;  
        var ul=obj.parentNode;  
        var btnArray=['是','否'];  
        plus.nativeUI.confirm("确定要删除此图?",function(e){  
            if(e.index==0){  
                ul.removeChild(obj);  
                files.splice(idx,1);  
                document.getElementById("picnum").innerText=Number(files.length)+'/4';  
            }  
        },{"buttons":btnArray})  
     }  
</script>  
</html>
收起阅读 »
黯厢 发表于 : 2020-05-08 11:15 评论 (0) 分享

现在uni-app感觉很沉寂啊，很不活跃

uniapp

uni-app现在用的人还多吗？感觉没什么人用了啊

uni-app现在用的人还多吗？感觉没什么人用了啊

大话疼 发表于 : 2020-05-08 10:43 评论 (5) 分享

uniAPP定制开发、uniapp团队开发

uniapp模板 uniapp

定制的APP
　　APP开发定制是根据客户需求来进行开发，打造一款全新的APP软件，下面具体说说比较重要的几点。
　　1、APP功能定位
　　想要定制一款app首先一点要知道自己需要哪些功能，然后就是定位(人群、领域)要确认，把这两个部分确立好以后就围绕自己的需求来开展APP的开发。这也是定制开发APP的第一步，只有在明确了自己的需求以后才可以开发出一款自己想要的APP。
　　2、细化功能需求
　　一定要清楚明白的将自己的功能需求表达清楚，尽量细化功能。说的越清楚制作的就越全面，app的开发也就越精细。不过我们钰威软件的团队会提供专业的产品经理和策划人员来帮助客户对功能需求进行完善。前期功能细化说的越清楚对后续APP开发也会越顺利。
　　3、开发团队的选择
　　定制一款APP当然需要找到一家可靠技术过硬的软件开发公司，例如钰威软件。如何判断一个团队是否有足够的能力来开发完善一款APP，需要通过app开发的安全性、APP开发周期、APP开发交付、APP开发后的售后服务等几个方面来考虑。一个正规且完善的开发团队会具备产品经理、策划、工程师、项目经理、iOS程序员、Android程序员、后端程序员和测试等人员。团队技术过硬，人才储备完善都是对APP开发的保障。当然还有一点，无论是前期的APP开发还是后期的APP维护都是很重要的内容。
158-3211-5099

继续阅读 »

定制的APP
　　APP开发定制是根据客户需求来进行开发，打造一款全新的APP软件，下面具体说说比较重要的几点。
　　1、APP功能定位
　　想要定制一款app首先一点要知道自己需要哪些功能，然后就是定位(人群、领域)要确认，把这两个部分确立好以后就围绕自己的需求来开展APP的开发。这也是定制开发APP的第一步，只有在明确了自己的需求以后才可以开发出一款自己想要的APP。
　　2、细化功能需求
　　一定要清楚明白的将自己的功能需求表达清楚，尽量细化功能。说的越清楚制作的就越全面，app的开发也就越精细。不过我们钰威软件的团队会提供专业的产品经理和策划人员来帮助客户对功能需求进行完善。前期功能细化说的越清楚对后续APP开发也会越顺利。
　　3、开发团队的选择
　　定制一款APP当然需要找到一家可靠技术过硬的软件开发公司，例如钰威软件。如何判断一个团队是否有足够的能力来开发完善一款APP，需要通过app开发的安全性、APP开发周期、APP开发交付、APP开发后的售后服务等几个方面来考虑。一个正规且完善的开发团队会具备产品经理、策划、工程师、项目经理、iOS程序员、Android程序员、后端程序员和测试等人员。团队技术过硬，人才储备完善都是对APP开发的保障。当然还有一点，无论是前期的APP开发还是后期的APP维护都是很重要的内容。
158-3211-5099

收起阅读 »
app定制开发 发表于 : 2020-05-07 17:59 评论 (1) 分享

【不看手册硬刚踩坑系列1】微信模拟器白屏事件

*写的啰嗦，着急的朋友直接看最后一行问题解决办法就行

序言

一直是5+的簇拥，三天打鱼两天晒网的摆弄着移动端开发。从uniapp诞生之日就一直关注，但考虑到新框架“坑”会很多，再结合5+时期官方的反应速度，一直处于观望态度。
最近有个微信开发小项目，想起uniapp官方各种横向对比中牛逼的一塌糊涂，就更新了hbuilderX，和微信开发者工具。提刀上阵。
不喜欢看手册，本着有坑采坑没坑记录的心态，出个系列，给自己也给“后浪”一个参考和话题。

正文

本着硬刚的心态，开起hbuilderX，新建项目，找个官方项目hello uniapp，按下新建按钮，建立了第一个uniapp项目。点开运行菜单，比起5+时代有牌面了很多！什么微信，百度，头条，支付宝都给了模拟器。本鸟是要做微信项目，自然点微信，自然也是直接进坑。

1，安全端口
点开微信开发者工具运行后，直接卡住，得益于HbuilderX的人性化提示，得知，要想调用微信开发者工具，要安全端口。按说明，打勾，check！过了~

2，白屏
顺利启动开发者工具，正自鸣得意，直接入坑。白屏，妥妥的loading。可能我这2019老mbp不行了？等等看，刷了n多网页回来看，还是loading。。。，慌了，这尼玛是什么情况，看提示，【检查是否启动多个微信开发者工具，如果是则关闭所有打开的微信开发者工具，然后再重新运行】，启动了多个？看了下微信开发者工具，没有多个！
按照5+时代的尿性，那第一时间是回娘家登录账号，进社区搜索，白屏，一片关键字检索结果，没有我能用的。。。。。。。

  • 祭出百度搜索大发，竟然无从下手，无果。
  • 祭出5+app开发绝技！关hbuilder，关开发者工具，重新运行，依然无果！
  • 祭出乱试三板斧，重开个colorUI，按下运行->微信开发者工具，喵的一声，好用了！

见了鬼了，再试hello uninapp 不好用！依然不好用，继续百度，发现行踪，开发者工具论坛有人反映，项目名中文的就会白屏，一看现象一样，赶紧看我的manifest是不是中文，hello uni-app整整齐齐的摆在那，没有中文。。。。。不甘心啊，看看colorUI的项目名，colorUI，没毛病都是英文！

灵光突然一闪，hello uni-app？ 这个空格是什么鬼？？改成hello_uni-app，运行->微信开发者工具，夸嚓！好用，轻松跑起来。

总结：遇到白屏不要慌，知道掉坑里，就赶紧想办法，不抛弃不放弃，总会出坑。

【微信开发者工具白屏解决办法】检查项目名是否中文或含有空格！

继续阅读 »

*写的啰嗦，着急的朋友直接看最后一行问题解决办法就行

序言

一直是5+的簇拥，三天打鱼两天晒网的摆弄着移动端开发。从uniapp诞生之日就一直关注，但考虑到新框架“坑”会很多，再结合5+时期官方的反应速度，一直处于观望态度。
最近有个微信开发小项目，想起uniapp官方各种横向对比中牛逼的一塌糊涂，就更新了hbuilderX，和微信开发者工具。提刀上阵。
不喜欢看手册，本着有坑采坑没坑记录的心态，出个系列，给自己也给“后浪”一个参考和话题。

正文

本着硬刚的心态，开起hbuilderX，新建项目，找个官方项目hello uniapp，按下新建按钮，建立了第一个uniapp项目。点开运行菜单，比起5+时代有牌面了很多！什么微信，百度，头条，支付宝都给了模拟器。本鸟是要做微信项目，自然点微信，自然也是直接进坑。

1，安全端口
点开微信开发者工具运行后，直接卡住，得益于HbuilderX的人性化提示，得知，要想调用微信开发者工具，要安全端口。按说明，打勾，check！过了~

2，白屏
顺利启动开发者工具，正自鸣得意，直接入坑。白屏，妥妥的loading。可能我这2019老mbp不行了？等等看，刷了n多网页回来看，还是loading。。。，慌了，这尼玛是什么情况，看提示，【检查是否启动多个微信开发者工具，如果是则关闭所有打开的微信开发者工具，然后再重新运行】，启动了多个？看了下微信开发者工具，没有多个！
按照5+时代的尿性，那第一时间是回娘家登录账号，进社区搜索，白屏，一片关键字检索结果，没有我能用的。。。。。。。

  • 祭出百度搜索大发，竟然无从下手，无果。
  • 祭出5+app开发绝技！关hbuilder，关开发者工具，重新运行，依然无果！
  • 祭出乱试三板斧，重开个colorUI，按下运行->微信开发者工具，喵的一声，好用了！

见了鬼了，再试hello uninapp 不好用！依然不好用，继续百度，发现行踪，开发者工具论坛有人反映，项目名中文的就会白屏，一看现象一样，赶紧看我的manifest是不是中文，hello uni-app整整齐齐的摆在那，没有中文。。。。。不甘心啊，看看colorUI的项目名，colorUI，没毛病都是英文！

灵光突然一闪，hello uni-app？ 这个空格是什么鬼？？改成hello_uni-app，运行->微信开发者工具，夸嚓！好用，轻松跑起来。

总结：遇到白屏不要慌，知道掉坑里，就赶紧想办法，不抛弃不放弃，总会出坑。

【微信开发者工具白屏解决办法】检查项目名是否中文或含有空格！

收起阅读 »
d***@sina.com 发表于 : 2020-05-07 06:19 评论 (0) 分享

运行到真机失败 报Module build failed怎么解决

[HBuilder] 20:25:37.837 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):
[HBuilder] 20:25:37.837 TypeError: Cannot read property 'value' of undefined
[HBuilder] 20:25:37.842 at genVModel (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\uni-template-compiler\lib\app\service.js:186:78)
[HBuilder] 20:25:37.842 at Array.genData (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\uni-template-compiler\lib\app\service.js:196:3)
[HBuilder] 20:25:37.848 at genData$3 (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4167:32)
[HBuilder] 20:25:37.849 at genElement (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4011:16)
[HBuilder] 20:25:37.855 at genNode (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4423:12)
[HBuilder] 20:25:37.856 at G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4386:55
[HBuilder] 20:25:37.861 at Array.map (<anonymous>)
[HBuilder] 20:25:37.861 at genChildren (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4386:29)
[HBuilder] 20:25:37.866 at genElement (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4014:49)
[HBuilder] 20:25:37.867 at genFor (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4134:42)
[HBuilder] 20:25:37.872 at genElement (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:3996:12)
[HBuilder] 20:25:37.873 at genChildren (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4380:50)
[HBuilder] 20:25:37.879 at genElement (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4014:49)
[HBuilder] 20:25:37.880 at genNode (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4423:12)
[HBuilder] 20:25:37.885 at G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4386:55
[HBuilder] 20:25:37.885 at Array.map (<anonymous>)
[HBuilder] 20:25:37.891 ERROR Build failed with errors.

继续阅读 »

[HBuilder] 20:25:37.837 Module build failed (from ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/templateLoader.js):
[HBuilder] 20:25:37.837 TypeError: Cannot read property 'value' of undefined
[HBuilder] 20:25:37.842 at genVModel (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\uni-template-compiler\lib\app\service.js:186:78)
[HBuilder] 20:25:37.842 at Array.genData (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\uni-template-compiler\lib\app\service.js:196:3)
[HBuilder] 20:25:37.848 at genData$3 (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4167:32)
[HBuilder] 20:25:37.849 at genElement (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4011:16)
[HBuilder] 20:25:37.855 at genNode (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4423:12)
[HBuilder] 20:25:37.856 at G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4386:55
[HBuilder] 20:25:37.861 at Array.map (<anonymous>)
[HBuilder] 20:25:37.861 at genChildren (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4386:29)
[HBuilder] 20:25:37.866 at genElement (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4014:49)
[HBuilder] 20:25:37.867 at genFor (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4134:42)
[HBuilder] 20:25:37.872 at genElement (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:3996:12)
[HBuilder] 20:25:37.873 at genChildren (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4380:50)
[HBuilder] 20:25:37.879 at genElement (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4014:49)
[HBuilder] 20:25:37.880 at genNode (G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4423:12)
[HBuilder] 20:25:37.885 at G:\测试4\fenrunduo_uni\node_modules\@dcloudio\vue-cli-plugin-uni\packages\vue-template-compiler\build.js:4386:55
[HBuilder] 20:25:37.885 at Array.map (<anonymous>)
[HBuilder] 20:25:37.891 ERROR Build failed with errors.

收起阅读 »
OSAT 发表于 : 2020-05-06 20:51 评论 (2) 分享

pc端H5和微信内置浏览器的都可以用的一个小demo

应朋友要求，给他写了一个小项目。大家分享一下。

她的需求是可以在pc端和微信内浏览器都可以登录。然后可以在线进行劳动风险评测这么一个软件，在线收费。管理员可以查看统计。还需要在线下载。
因微信内不让下载，所以也没什么特别的好办法，只能跳转。不知道哪个大神能给个解决方案。在android和ios都已经测试了。

不足地方，欢迎大家留言批评指正。
你可以用手机微信扫码二维码测试，

登录二维码

pc端登录 入口pc端点击登录

继续阅读 »

应朋友要求，给他写了一个小项目。大家分享一下。

她的需求是可以在pc端和微信内浏览器都可以登录。然后可以在线进行劳动风险评测这么一个软件，在线收费。管理员可以查看统计。还需要在线下载。
因微信内不让下载，所以也没什么特别的好办法，只能跳转。不知道哪个大神能给个解决方案。在android和ios都已经测试了。

不足地方，欢迎大家留言批评指正。
你可以用手机微信扫码二维码测试，

登录二维码

pc端登录 入口pc端点击登录

收起阅读 »
8***@qq.com 发表于 : 2020-05-05 11:47 评论 (9) 分享

uni.css样式详解

uniapp

类使用说明
1.uni-padding-wrap：宽度690rpx 左右内边距30rpx ，相当于690/750=92%的宽度。可用于外层包裹

2.单页头，标题和正文
uni-page-head：
uni-page-head-title：
uni-page-body：超出范围隐藏
这三个类的效果

  1. uni-word：上下内边距200rpx 左右100rpx。

过长效果，用在什么地方呢？。

4.uni-title：30rpx行高1.5
uni-title text：24rpx 灰色
可用作正负标题<view class="uni-title">uni-title<text>uni-title text</text></view>

  1. uni-text-gray 灰色#ccc;
  2. uni-text-small 24rpx号字

7.uni-common-mb，uni-common-pb，uni-common-pl，uni-common-mt
上面的common代表通用，后面的第一个字母m代表margin，p代表padding。b代表底部，l代表left，t代表top 他们的距离都是30rpx
.uni-common-mb{
margin-bottom:30rpx;
}
表示uni通用底部外边距30rpx；

8.背景色三个
uni-bg-red，uni-bg-green，uni-bg-blue

9h1-h6效果图

  1. uni-bold 加粗

  2. uni-ellipsis 文本溢出
    不自动换行，文本溢出时显示省略号。

12.uni-btn-v
/ 竖向百分百按钮 /
.uni-btn-v{
padding:10rpx 0;
}
.uni-btn-v button{margin:20rpx 0;}
没明白作者什么意思。

13.表单（from）
uni-form-item 宽度100% 弹性布局，上下内间距10rpx 左右0

附加带有预览效果图。后面的类还没看完。看完再传一遍。

继续阅读 »

类使用说明
1.uni-padding-wrap：宽度690rpx 左右内边距30rpx ，相当于690/750=92%的宽度。可用于外层包裹

2.单页头，标题和正文
uni-page-head：
uni-page-head-title：
uni-page-body：超出范围隐藏
这三个类的效果

  1. uni-word：上下内边距200rpx 左右100rpx。

过长效果，用在什么地方呢？。

4.uni-title：30rpx行高1.5
uni-title text：24rpx 灰色
可用作正负标题<view class="uni-title">uni-title<text>uni-title text</text></view>

  1. uni-text-gray 灰色#ccc;
  2. uni-text-small 24rpx号字

7.uni-common-mb，uni-common-pb，uni-common-pl，uni-common-mt
上面的common代表通用，后面的第一个字母m代表margin，p代表padding。b代表底部，l代表left，t代表top 他们的距离都是30rpx
.uni-common-mb{
margin-bottom:30rpx;
}
表示uni通用底部外边距30rpx；

8.背景色三个
uni-bg-red，uni-bg-green，uni-bg-blue

9h1-h6效果图

  1. uni-bold 加粗

  2. uni-ellipsis 文本溢出
    不自动换行，文本溢出时显示省略号。

12.uni-btn-v
/ 竖向百分百按钮 /
.uni-btn-v{
padding:10rpx 0;
}
.uni-btn-v button{margin:20rpx 0;}
没明白作者什么意思。

13.表单（from）
uni-form-item 宽度100% 弹性布局，上下内间距10rpx 左右0

附加带有预览效果图。后面的类还没看完。看完再传一遍。

收起阅读 »
8***@qq.com 发表于 : 2020-05-05 02:36 评论 (2) 分享

希望文件搜索和编辑器内容搜索分开。

如题：希望文件搜索和编辑器内容搜索分开。
1）希望在项目管理器中增加搜索框，用来搜索文件。
2）在编辑器窗口新增搜索框，专门搜索编辑器代码内容和替换。

如题：希望文件搜索和编辑器内容搜索分开。
1）希望在项目管理器中增加搜索框，用来搜索文件。
2）在编辑器窗口新增搜索框，专门搜索编辑器代码内容和替换。

s***@163.com 发表于 : 2020-05-03 12:56 评论 (0) 分享

uni-app-tempalte 我自己做了一个项目的快速开发模版

技术分享 uniapp插件 uniapp uniCloud

uni-app-templated

项目地址

当时做这个的目的是为了解决如下问题：

  • 1.云函数分散过后冷启动和热启动效率上的巨大差别
  • 2.云函数环境变量的支持，大多数项目都会用到环境变量的配置
    • 由于web的启动是xhbuilder控制的，导致我无法把环境变量植入，需要xhbuilder团队支持。
  • 3.云函数的打包压缩上传
  • 4.本地云函数开发依赖关系，代码检测，如果又需要自己可以集成eslint做代码规范
    • 这块在webpack.config.js中自己可以去配置
  • 4.web开发的时候本地数据mock的支持
    • 这一块写的比较搓，web端由于没有环境变量，我这边数据mock切换需要手动，在App.vue把ajaxMock/ajax 2个方法之间手动切换
  • 5.统一封装的ajax方法，做到格式统一。
  • 6.在web端App.vue直接封装ajax请求，做到页面只要调用处理正确的分之，异常等都统一捕获。

我也不知道接口这块设计的对不对，下面是我的思路。

  • 由于入口函数只有一个函数，所有在函数里面要根据传入的变量去执行不通的方法。
  • 拆解了原来它云公共函数的功能，我觉得打包云公共函数优点xx，而且你云函数打包的时候还是依赖于你本地的云共函数，只不过云公共函数发布可以同步已经依赖的云函数，我觉得有点没用。

  • 我目前构造的是如下

    uniCloud  
.callFunction({  
    name: name,  
    data: {  
        type: type,  
        form: data  
    }  
})  

将原来传入的data放置到data的内容，form字段中，然后type 表示实际调用的方法，具体可以查阅App.vue，然后把返回结果统一的封装处理了下  

// 这块我还没想好要怎么去实现，目前就简易贴下这个。  
async function main(event) {  
    let env = process.env.NODE_ENV  
    if (!event.type) {  
        return ajaxReturn('', -1, '参数传入不正确');  
    }  

    if (!dome[event.type]) {  
        return ajaxReturn('', -1, '未找到云方法');  
    }  
    return await dome[event.type](event)  
}  

// 固定返回的main，这边无需修改，云函数入口只有唯一的一个。  
export {  
    main  
}

具体功能开发参考文档地址

uniapp官网

项目目录说明

cloudfunctions-dev

main.js入口函数

config

conf.dev.js 开发环境变量配置

conf.prod.js 打包环境变量配置

mock

index.js 数据mock配置文件 具体实现可以参考mocker-api

pages 常规开发页面

static 常规静态资源目录

.babelrc babel7 废弃。

main.js ,manifest.json，uni.scss，pages.json 常规开发页面

package.json 依赖配置

template.h5.html 打包h5的时候用到的页面模版

template.unicloud.html 调试开发模式云函数报错页面，需要在控制台查看（这块到时候完善在页面直接可以查看）

项目功能说明（使用命令）

npm run dev

  • 项目启动云函数本地调试模式，因为无法连接DB，所以这块一般用来做代码调试，依赖关系检测，配合eslint可以做到代码规范检测，变量使用情况，等。
  • 运行命令后，web端同时开启数据mock模式， web里面开发直接可以请求到mock接口，如果不需要mock，App.vue对调下ajax/ajaxMock

npm run build

  • 云函数打包，目前在config.js就配置了1个index，如果需要支持多文件的话，手动配置 
    entry: {  
    index: ['./cloudfunctions-dev/main.js']  
    xxxx: ['./cloudfunctions-dev/xxxx.js']  
},
  • 打包是product模式，代码回进行压缩，这块遵循webpack打包策略

项目版本管理

v1.0.1

  • 搭建初始化版本
  • 待做内容
    • 1.云函数DB的数据模拟,把数据mock这块跟db的数据返回关联起来，模拟db后可以本地调用接口
    • 2.公共方法的拓展，吧一些token的调用，加解密等公共方法封装起来。
待做内容 预计版本 预计完成版本/时间
云函数DB的数据模拟 v1.0.2 v1.0.3
云函数的本地调用 v1.0.2 v1.0.4
小程序服务端api封装 v1.0.2 v1.0.2
继续阅读 »

uni-app-templated

项目地址

当时做这个的目的是为了解决如下问题：

  • 1.云函数分散过后冷启动和热启动效率上的巨大差别
  • 2.云函数环境变量的支持，大多数项目都会用到环境变量的配置
    • 由于web的启动是xhbuilder控制的，导致我无法把环境变量植入，需要xhbuilder团队支持。
  • 3.云函数的打包压缩上传
  • 4.本地云函数开发依赖关系，代码检测，如果又需要自己可以集成eslint做代码规范
    • 这块在webpack.config.js中自己可以去配置
  • 4.web开发的时候本地数据mock的支持
    • 这一块写的比较搓，web端由于没有环境变量，我这边数据mock切换需要手动，在App.vue把ajaxMock/ajax 2个方法之间手动切换
  • 5.统一封装的ajax方法，做到格式统一。
  • 6.在web端App.vue直接封装ajax请求，做到页面只要调用处理正确的分之，异常等都统一捕获。

我也不知道接口这块设计的对不对，下面是我的思路。

  • 由于入口函数只有一个函数，所有在函数里面要根据传入的变量去执行不通的方法。
  • 拆解了原来它云公共函数的功能，我觉得打包云公共函数优点xx，而且你云函数打包的时候还是依赖于你本地的云共函数，只不过云公共函数发布可以同步已经依赖的云函数，我觉得有点没用。

  • 我目前构造的是如下

    uniCloud  
.callFunction({  
    name: name,  
    data: {  
        type: type,  
        form: data  
    }  
})  

将原来传入的data放置到data的内容，form字段中，然后type 表示实际调用的方法，具体可以查阅App.vue，然后把返回结果统一的封装处理了下  

// 这块我还没想好要怎么去实现，目前就简易贴下这个。  
async function main(event) {  
    let env = process.env.NODE_ENV  
    if (!event.type) {  
        return ajaxReturn('', -1, '参数传入不正确');  
    }  

    if (!dome[event.type]) {  
        return ajaxReturn('', -1, '未找到云方法');  
    }  
    return await dome[event.type](event)  
}  

// 固定返回的main，这边无需修改，云函数入口只有唯一的一个。  
export {  
    main  
}

具体功能开发参考文档地址

uniapp官网

项目目录说明

cloudfunctions-dev

main.js入口函数

config

conf.dev.js 开发环境变量配置

conf.prod.js 打包环境变量配置

mock

index.js 数据mock配置文件 具体实现可以参考mocker-api

pages 常规开发页面

static 常规静态资源目录

.babelrc babel7 废弃。

main.js ,manifest.json，uni.scss，pages.json 常规开发页面

package.json 依赖配置

template.h5.html 打包h5的时候用到的页面模版

template.unicloud.html 调试开发模式云函数报错页面，需要在控制台查看（这块到时候完善在页面直接可以查看）

项目功能说明（使用命令）

npm run dev

  • 项目启动云函数本地调试模式，因为无法连接DB，所以这块一般用来做代码调试，依赖关系检测，配合eslint可以做到代码规范检测，变量使用情况，等。
  • 运行命令后，web端同时开启数据mock模式， web里面开发直接可以请求到mock接口，如果不需要mock，App.vue对调下ajax/ajaxMock

npm run build

  • 云函数打包，目前在config.js就配置了1个index，如果需要支持多文件的话，手动配置 
    entry: {  
    index: ['./cloudfunctions-dev/main.js']  
    xxxx: ['./cloudfunctions-dev/xxxx.js']  
},
  • 打包是product模式，代码回进行压缩，这块遵循webpack打包策略

项目版本管理

v1.0.1

  • 搭建初始化版本
  • 待做内容
    • 1.云函数DB的数据模拟,把数据mock这块跟db的数据返回关联起来，模拟db后可以本地调用接口
    • 2.公共方法的拓展，吧一些token的调用，加解密等公共方法封装起来。
待做内容 预计版本 预计完成版本/时间
云函数DB的数据模拟 v1.0.2 v1.0.3
云函数的本地调用 v1.0.2 v1.0.4
小程序服务端api封装 v1.0.2 v1.0.2
收起阅读 »
CChiaki 发表于 : 2020-05-02 03:28 评论 (0) 分享
友情链接
优势智云 黑马程序员 程序员客栈 个推 锐亚教育 即速应用 DCloud新闻 InfoQ 蓝莺IM HeapDump性能社区 diygw可视化 艾普阳科技 申请友链

DCloud 即数字天堂(北京)网络技术有限公司是W3C成员及HTML5中国产业联盟发起单位

京ICP备12046007号-4 | 京公网安备：11010802035340号 | 国家信息安全等级保护三级，证书编号：11010813802-20001

| | 违法违规信息举报