各位同学，苏宁广告研发中心前端组招聘啦~

微信小程序 nodejs Vue 招聘

团队介绍：
苏宁广告研发中心前端开发组，负责线上和线下广告业务，前端涉及面比较广，需要有扎实的前端基础，以应对不同平台不同客户端的项目

招聘要求：

拥有两年以上pc开发经验，一年以上wap开发经验
有过硬的切图能力，能完美还原设计稿
要求扎实的js基础，熟悉面向对象，异步编程，函数式编程等
脚手架要求熟悉webpack gulp fis3中的一种或几种
前端框架要求熟悉vue, react, angular中的一种或几种，对组件间的数据通信有一定的理解
具备一定的抽象能力，对前端架构有很好的想法
加分项：nodejs，weex，小程序开发

简历发邮箱：liuyfj@cnsuning.com

招聘长期有效

继续阅读 »

h5+、mui、app开发基础+实战教程都在这儿！

mui

《JavaScript 快速提高视频教程》 js基础快速提高课程【免费】
http://www.hcoder.net/course/info_229.html

《MUI 视频教程》【免费】
http://www.hcoder.net/course/info_211.html

《h.js 视频教程》【免费】
http://www.hcoder.net/tutorials/info_147.html

《HTML 5 开发教程》【免费】
http://www.hcoder.net/course/info_212.html

《APP开发实例教程 - 窗口切换》【免费】
http://www.hcoder.net/course/info_218.html

《HBuilder 8.0.1 APP开发 - 新功能全接触》【免费】
http://www.hcoder.net/course/info_227.html

--------- 实战收费教程 ------------------------
《仿腾讯新闻客户端》- MUI+VUE.JS H5+ APP 实战教程
http://www.hcoder.net/course/info_240.html

MUI、H5 APP 实战教程 - 仿《有道词典》
https://ke.qq.com/course/194834

H5 跨平台APP开发电商项目实战教程 -《仿京东优选商城》

https://ke.qq.com/course/225830

更多课程中心
http://www.hcoder.net/course

继续阅读 »

过程

本人，是一个比较懒，

不喜欢学习原生开发，所以入局了HTML5+
不喜欢放肆复制粘贴，所以入局了Vuejs

在论坛寻找了很久，也google了很久，一直没有一个Vue-cli构建SPA开发HTML5+应用的完美例子。

论坛里面有一个 vue-cli template for Hbuilder的例子，但是编译完成之后，生成的文件并不能使得基座页面刷新，需要手动重启基座才能看到最新的效果
论坛中也有人提到，在mainfast.json文件中将入口文件设置为[your own id]:8080,但是没有具体的步骤，经过一番探索，已经成功掌握了这一方式

在论坛的解决方案【2】中，能够直接使用官方的 webpcak 模板，并且保证了热更新能够正常使用，也能够掉起HTML5+的API，下面将具体步骤贴出，用以方便论坛中有需要的人

结果

如果想要使用vue-cli构建基于Vue的SPA程序，并且能够在真机调试的时候能够顺利的调用HTML5+的接口，而且要能够通过Chrome远程调试的话，那么您的照着下面的步骤慢慢来

修改Vue-cli的webpack配置

1、修改 config/index.js

{  
    build:{  
        assetsPublicPath:'./'  
    }  
}

打包前修改html里面静态资源的路径，代码中网络资源一定要加上https、http

修改src/main.js文件


//为每个组件都混入一个plusready的状态标识，方便在组件中安全的调用plus接口,如果你想在组件中安全的调用puls接口也可以用混入方法拓展Vue对象原型，将plus注入到Vue对象的原型链上去  

Vue.mixin({  
    computed: {  
        plusReady() {  
            return this.$store.state.isplusReady;  
        }  
    }  
})  

// 配置html plus 环境  
document.addEventListener('plusready', function () {  
    // 设置一个全局plusready状态  
    store.state.isplusReady = true;  

    // 监听返回按键  
    let now = false;  
    let time = null;  
    plus.key.addEventListener('backbutton', function () {  
        // 如果是首页则执行退出操作  
        if (app.$route.path === "/home" || app.$route.path === "/my-center") {  
            time = null;  
            if (now) {  
                now = false;  
                plus.runtime.quit();  
            } else {  
                now = true;  
                plus.nativeUI.toast("再按一次退出", { duration: 'short' });  
                time = setTimeout(() => {  
                    now = false;  
                }, 1000);  
            }  
            // 如果是内页则执行路由返回操作  
        } else {  
            router.go(-1);  
        }  

    })  
})

app项目配置

新建一个app项目
开发时修改入口为 http://[your own ip]:8080(例：http://192.168.0.1:8080)
打包后，将dist文件夹中所有文件复制到app根目录，入口文件设置为index.html，检查index.html中没有绝对路径，源代码中网络资源文件已经添加http、https协议头

到此结束

如有更加新奇的想法请跟帖讨论，本帖内容不涉及基础知识，vuejs官网,HTML5+API官网

继续阅读 »

过程

本人，是一个比较懒，

不喜欢学习原生开发，所以入局了HTML5+
不喜欢放肆复制粘贴，所以入局了Vuejs

在论坛寻找了很久，也google了很久，一直没有一个Vue-cli构建SPA开发HTML5+应用的完美例子。

论坛里面有一个 vue-cli template for Hbuilder的例子，但是编译完成之后，生成的文件并不能使得基座页面刷新，需要手动重启基座才能看到最新的效果
论坛中也有人提到，在mainfast.json文件中将入口文件设置为[your own id]:8080,但是没有具体的步骤，经过一番探索，已经成功掌握了这一方式

在论坛的解决方案【2】中，能够直接使用官方的 webpcak 模板，并且保证了热更新能够正常使用，也能够掉起HTML5+的API，下面将具体步骤贴出，用以方便论坛中有需要的人

结果

如果想要使用vue-cli构建基于Vue的SPA程序，并且能够在真机调试的时候能够顺利的调用HTML5+的接口，而且要能够通过Chrome远程调试的话，那么您的照着下面的步骤慢慢来

修改Vue-cli的webpack配置

1、修改 config/index.js

{  
    build:{  
        assetsPublicPath:'./'  
    }  
}

打包前修改html里面静态资源的路径，代码中网络资源一定要加上https、http

修改src/main.js文件


//为每个组件都混入一个plusready的状态标识，方便在组件中安全的调用plus接口,如果你想在组件中安全的调用puls接口也可以用混入方法拓展Vue对象原型，将plus注入到Vue对象的原型链上去  

Vue.mixin({  
    computed: {  
        plusReady() {  
            return this.$store.state.isplusReady;  
        }  
    }  
})  

// 配置html plus 环境  
document.addEventListener('plusready', function () {  
    // 设置一个全局plusready状态  
    store.state.isplusReady = true;  

    // 监听返回按键  
    let now = false;  
    let time = null;  
    plus.key.addEventListener('backbutton', function () {  
        // 如果是首页则执行退出操作  
        if (app.$route.path === "/home" || app.$route.path === "/my-center") {  
            time = null;  
            if (now) {  
                now = false;  
                plus.runtime.quit();  
            } else {  
                now = true;  
                plus.nativeUI.toast("再按一次退出", { duration: 'short' });  
                time = setTimeout(() => {  
                    now = false;  
                }, 1000);  
            }  
            // 如果是内页则执行路由返回操作  
        } else {  
            router.go(-1);  
        }  

    })  
})

app项目配置

新建一个app项目
开发时修改入口为 http://[your own ip]:8080(例：http://192.168.0.1:8080)
打包后，将dist文件夹中所有文件复制到app根目录，入口文件设置为index.html，检查index.html中没有绝对路径，源代码中网络资源文件已经添加http、https协议头

到此结束

如有更加新奇的想法请跟帖讨论，本帖内容不涉及基础知识，vuejs官网,HTML5+API官网

收起阅读 »

第三方登陆微信真机调试成功，发布app后登陆无法发起

这几天app中集成第三方微信的登陆，在真机调试中安卓和ios都没问题；但是打包后安卓出现登陆无法发起的情况；

app中sdk已经配置了，后来才发现原来是集成微信开放平台中有个签名的值；

需要将app的配置文件中的signature签名填写到微信开放平台中关于该应用的签名中；

注：微信开放平台中应用签名的修改，应该是需要等待24后才会生效的；修改后可能不会马上生效；

继续阅读 »

手机端原生js滑动验证

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
/ 滑动控件容器,亮灰色背景 /

dragContainer {

        position: relative;  
        display: inline-block;  
        background: #e8e8e8;  
        width: 100%;  
        height: 100px;  
        border: 2px solid #e8e8e8;  
    }  
    /* 滑块左边部分,绿色背景 */  
    #dragBg {  
        position: absolute;  
        background-color: #7ac23c;  
        width: 0px;  
        height: 100%;  
    }  
    /* 滑动验证容器文本 */  
    #dragText {  
        position: absolute;  
        width: 100%;  
        height: 100%;  
        /* 文字水平居中 */  
        text-align: center;  
        /* 文字垂直居中,这里不能用百分比,因为百分比是相对原始line-height的,而非div高度 */  
        line-height: 33px;  
        /* 文本不允许选中 */  
        user-select: none;  
        -webkit-user-select: none;  
        line-height: 100px;  
        font-size: 22px;  
    }  
    /* 滑块 */  
    #dragHandler {  
        position: absolute;  
        width: 100px;  
        height: 100%;  
        cursor: move;  
    }  
    /* 滑块初始背景 */  
    .dragHandlerBg {  
        background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==");  
    }  
    /* 验证成功时的滑块背景 */  
    .dragHandlerOkBg {  
        background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==");  
    }  
</style>  
<script>  
    window.onload = function() {  
        var dragContainer = document.getElementById("dragContainer");  
        var dragBg = document.getElementById("dragBg");  
        var dragText = document.getElementById("dragText");  
        var dragHandler = document.getElementById("dragHandler");  

        //滑块最大偏移量  
        var maxHandlerOffset = dragContainer.clientWidth - dragHandler.clientWidth;  
        //是否验证成功的标记  
        var isVertifySucc = false;  
        initDrag();  

        function initDrag() {  
            dragText.textContent = "拖动滑块验证";  
            dragHandler.addEventListener("touchstart", onDragHandlerMouseDown);  
        }  

        function onDragHandlerMouseDown() {  
            document.addEventListener("touchmove", onDragHandlerMouseMove);  
            document.addEventListener("touchend", onDragHandlerMouseUp);  
        }  

        function onDragHandlerMouseMove(ev) {  
            /*  
            html元素不存在width属性,只有clientWidth  
            offsetX是相对当前元素的,clientX和pageX是相对其父元素的  
            */  
            var left = ev.touches[0].clientX - dragHandler.clientWidth / 2;  
            if(left < 0) {  
                left = 0;  
            } else if(left > maxHandlerOffset) {  
                left = maxHandlerOffset;  
                verifySucc();  
            }  
            dragHandler.style.left = left + "px";  
            dragBg.style.width = dragHandler.style.left;  
        }  
        function onDragHandlerMouseUp() {  
            document.removeEventListener("touchmove", onDragHandlerMouseMove);  
            document.removeEventListener("touchend", onDragHandlerMouseUp);  
            dragHandler.style.left = 0;  
            dragBg.style.width = 0;  
        }  

        //验证成功  
        function verifySucc() {  
            isVertifySucc = true;  
            dragText.textContent = "验证通过";  
            dragText.style.color = "white";  
            dragHandler.setAttribute("class", "dragHandlerOkBg");  
            dragHandler.removeEventListener("touchstart", onDragHandlerMouseDown);  
            document.removeEventListener("touchmove", onDragHandlerMouseMove);  
            document.removeEventListener("touchend", onDragHandlerMouseUp);  
        };  
    }  
</script>

</head>
<body>
<div id="dragContainer">
<div id="dragBg"></div>
<div id="dragText"></div>
<div id="dragHandler" class="dragHandlerBg"></div>
</div>
</body>
</html>

继续阅读 »

<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<style>
/ 滑动控件容器,亮灰色背景 /

dragContainer {

        position: relative;  
        display: inline-block;  
        background: #e8e8e8;  
        width: 100%;  
        height: 100px;  
        border: 2px solid #e8e8e8;  
    }  
    /* 滑块左边部分,绿色背景 */  
    #dragBg {  
        position: absolute;  
        background-color: #7ac23c;  
        width: 0px;  
        height: 100%;  
    }  
    /* 滑动验证容器文本 */  
    #dragText {  
        position: absolute;  
        width: 100%;  
        height: 100%;  
        /* 文字水平居中 */  
        text-align: center;  
        /* 文字垂直居中,这里不能用百分比,因为百分比是相对原始line-height的,而非div高度 */  
        line-height: 33px;  
        /* 文本不允许选中 */  
        user-select: none;  
        -webkit-user-select: none;  
        line-height: 100px;  
        font-size: 22px;  
    }  
    /* 滑块 */  
    #dragHandler {  
        position: absolute;  
        width: 100px;  
        height: 100%;  
        cursor: move;  
    }  
    /* 滑块初始背景 */  
    .dragHandlerBg {  
        background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTEyNTVEMURGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTEyNTVEMUNGMkVFMTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2MTc5NzNmZS02OTQxLTQyOTYtYTIwNi02NDI2YTNkOWU5YmUiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+YiRG4AAAALFJREFUeNpi/P//PwMlgImBQkA9A+bOnfsIiBOxKcInh+yCaCDuByoswaIOpxwjciACFegBqZ1AvBSIS5OTk/8TkmNEjwWgQiUgtQuIjwAxUF3yX3xyGIEIFLwHpKyAWB+I1xGSwxULIGf9A7mQkBwTlhBXAFLHgPgqEAcTkmNCU6AL9d8WII4HOvk3ITkWJAXWUMlOoGQHmsE45ViQ2KuBuASoYC4Wf+OUYxz6mQkgwAAN9mIrUReCXgAAAABJRU5ErkJggg==");  
    }  
    /* 验证成功时的滑块背景 */  
    .dragHandlerOkBg {  
        background: #fff no-repeat center url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0ZDhlNWY5My05NmI0LTRlNWQtOGFjYi03ZTY4OGYyMTU2ZTYiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDlBRDI3NjVGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDlBRDI3NjRGMkQ2MTFFNEI5NDBCMjQ2M0ExMDQ1OUYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDphNWEzMWNhMC1hYmViLTQxNWEtYTEwZS04Y2U5NzRlN2Q4YTEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NGQ4ZTVmOTMtOTZiNC00ZTVkLThhY2ItN2U2ODhmMjE1NmU2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+k+sHwwAAASZJREFUeNpi/P//PwMyKD8uZw+kUoDYEYgloMIvgHg/EM/ptHx0EFk9I8wAoEZ+IDUPiIMY8IN1QJwENOgj3ACo5gNAbMBAHLgAxA4gQ5igAnNJ0MwAVTsX7IKyY7L2UNuJAf+AmAmJ78AEDTBiwGYg5gbifCSxFCZoaBMCy4A4GOjnH0D6DpK4IxNSVIHAfSDOAeLraJrjgJp/AwPbHMhejiQnwYRmUzNQ4VQgDQqXK0ia/0I17wJiPmQNTNBEAgMlQIWiQA2vgWw7QppBekGxsAjIiEUSBNnsBDWEAY9mEFgMMgBk00E0iZtA7AHEctDQ58MRuA6wlLgGFMoMpIG1QFeGwAIxGZo8GUhIysmwQGSAZgwHaEZhICIzOaBkJkqyM0CAAQDGx279Jf50AAAAAABJRU5ErkJggg==");  
    }  
</style>  
<script>  
    window.onload = function() {  
        var dragContainer = document.getElementById("dragContainer");  
        var dragBg = document.getElementById("dragBg");  
        var dragText = document.getElementById("dragText");  
        var dragHandler = document.getElementById("dragHandler");  

        //滑块最大偏移量  
        var maxHandlerOffset = dragContainer.clientWidth - dragHandler.clientWidth;  
        //是否验证成功的标记  
        var isVertifySucc = false;  
        initDrag();  

        function initDrag() {  
            dragText.textContent = "拖动滑块验证";  
            dragHandler.addEventListener("touchstart", onDragHandlerMouseDown);  
        }  

        function onDragHandlerMouseDown() {  
            document.addEventListener("touchmove", onDragHandlerMouseMove);  
            document.addEventListener("touchend", onDragHandlerMouseUp);  
        }  

        function onDragHandlerMouseMove(ev) {  
            /*  
            html元素不存在width属性,只有clientWidth  
            offsetX是相对当前元素的,clientX和pageX是相对其父元素的  
            */  
            var left = ev.touches[0].clientX - dragHandler.clientWidth / 2;  
            if(left < 0) {  
                left = 0;  
            } else if(left > maxHandlerOffset) {  
                left = maxHandlerOffset;  
                verifySucc();  
            }  
            dragHandler.style.left = left + "px";  
            dragBg.style.width = dragHandler.style.left;  
        }  
        function onDragHandlerMouseUp() {  
            document.removeEventListener("touchmove", onDragHandlerMouseMove);  
            document.removeEventListener("touchend", onDragHandlerMouseUp);  
            dragHandler.style.left = 0;  
            dragBg.style.width = 0;  
        }  

        //验证成功  
        function verifySucc() {  
            isVertifySucc = true;  
            dragText.textContent = "验证通过";  
            dragText.style.color = "white";  
            dragHandler.setAttribute("class", "dragHandlerOkBg");  
            dragHandler.removeEventListener("touchstart", onDragHandlerMouseDown);  
            document.removeEventListener("touchmove", onDragHandlerMouseMove);  
            document.removeEventListener("touchend", onDragHandlerMouseUp);  
        };  
    }  
</script>

</head>
<body>
<div id="dragContainer">
<div id="dragBg"></div>
<div id="dragText"></div>
<div id="dragHandler" class="dragHandlerBg"></div>
</div>
</body>
</html>

收起阅读 »

企业app开发与运营中，需要与郑州app开发沟通什么

5 App开发

　　对于目前郑州app开发市场来说，其趋势正在呈直线上升，而且不仅做app开发的企业逐渐在增加，app开发公司的数量也在不断的增加，那么对于app开发过程中，企业投资者一般比较关心的问题与注意的事项还是非常多的，下面就详细跟大家分析一下。

　　1、解决目标用户难题

　　一款受欢迎app的打造，首先对用户来说是有价值的，能够满足用户的某些需求，否则便没有市场。解决用户的问题越多，问题越大，你app发挥的功能就越大，用户的粘性就随之增强了。因此，企业在开发和维护自己的移动app时，一定要多交流、多调研、多搜集用户反馈，及时更新和完善自己的不足，争取为用户创造更大的价值。

　　2、关注目标用户需求

　　目标用户的需要贯穿于app开发、推广、运营等全过程。研发前，你需要通过调查和确定目标用户，来设计开发你的app功能;推广中，你需要结合用户的关注点有针对性的撰写广告内容，吸引更多用户的眼球;运营时，需要不断与用户交流、沟通、反馈，完善自身的服务和产品。企业时刻做好这一点，有利于自身品牌的树立和信誉度提升。

　　3、借助推广让用户尽快找到你

　　只有更多人使用你的app，才能发挥它更大的价值，为企业带来收益。app开发好后，企业一定要加大市场营销推广力度，通过各种主流媒体如微博微信等推广自己的app，让用户有问题能迅速找到你，并且你能很好的解决他的问题。如果不做广告推广，用户很难找到你，你的app不仅无法更好的更新跌倒，其价值意义也不大，可能白白浪费研发的成本。

　　4、做好企业的运营服务

　　一款app开发成功之后，企业的工作并没有结束，除了时常通过用户反馈优化和完善自身的产品外，app运营服务便是之后的重点工作。如果不进行有效维护运营，app很有可能马上死掉。企业的运营服务重在专业度和责任心，两者缺一不可，需要专业懂运营的人去维护自己的客户，通过app为客户带来更多的价值，在此过程中就需要运营人员保持高度的责任心和耐心，认真回答客户的疑问。

　　关于企业需要在app开发过程中注意的问题和注意事项了，如果想要了解郑州app开发公司哪家好或者报价等问题的话，也可以咨询我们。本文由郑州app开发http://www.appsaa.com整理发布，如需转载请注明出处！

继续阅读 »

　　对于目前郑州app开发市场来说，其趋势正在呈直线上升，而且不仅做app开发的企业逐渐在增加，app开发公司的数量也在不断的增加，那么对于app开发过程中，企业投资者一般比较关心的问题与注意的事项还是非常多的，下面就详细跟大家分析一下。

　　1、解决目标用户难题

　　一款受欢迎app的打造，首先对用户来说是有价值的，能够满足用户的某些需求，否则便没有市场。解决用户的问题越多，问题越大，你app发挥的功能就越大，用户的粘性就随之增强了。因此，企业在开发和维护自己的移动app时，一定要多交流、多调研、多搜集用户反馈，及时更新和完善自己的不足，争取为用户创造更大的价值。

　　2、关注目标用户需求

　　目标用户的需要贯穿于app开发、推广、运营等全过程。研发前，你需要通过调查和确定目标用户，来设计开发你的app功能;推广中，你需要结合用户的关注点有针对性的撰写广告内容，吸引更多用户的眼球;运营时，需要不断与用户交流、沟通、反馈，完善自身的服务和产品。企业时刻做好这一点，有利于自身品牌的树立和信誉度提升。

　　3、借助推广让用户尽快找到你

　　只有更多人使用你的app，才能发挥它更大的价值，为企业带来收益。app开发好后，企业一定要加大市场营销推广力度，通过各种主流媒体如微博微信等推广自己的app，让用户有问题能迅速找到你，并且你能很好的解决他的问题。如果不做广告推广，用户很难找到你，你的app不仅无法更好的更新跌倒，其价值意义也不大，可能白白浪费研发的成本。

　　4、做好企业的运营服务

　　一款app开发成功之后，企业的工作并没有结束，除了时常通过用户反馈优化和完善自身的产品外，app运营服务便是之后的重点工作。如果不进行有效维护运营，app很有可能马上死掉。企业的运营服务重在专业度和责任心，两者缺一不可，需要专业懂运营的人去维护自己的客户，通过app为客户带来更多的价值，在此过程中就需要运营人员保持高度的责任心和耐心，认真回答客户的疑问。

　　关于企业需要在app开发过程中注意的问题和注意事项了，如果想要了解郑州app开发公司哪家好或者报价等问题的话，也可以咨询我们。本文由郑州app开发http://www.appsaa.com整理发布，如需转载请注明出处！

收起阅读 »

Android平台离线打包定位报has not amap appkey 错误

离线打包

下载了H5+SDK配置了百度地图插件在本地跑起来以后
plus.geolocation.getCurrentPosition(function(p) {
alert(JSON.stringify(p))
})//提交位置信息
}, function(e) {
alert(JSON.stringify(e))
console.log('Geolocation error: ' + e.message);
},{provider:'baidu'});

提示has not amap appkey
这时要把libs 目录下所有关于高德地图的jar 删掉，map-amap.jar, AMap_3DMap_V2.4.1.jar, AMap_Services_V2.4.0.jar,AMap_Location_V3.3.0_20170118.jar，map-amap.jar，geolocation-amap.jar

继续阅读 »

分享一套漂亮的MUI移动端商城模板

mui

分享一套漂亮的MUI移动端商城模板

MUI

下载地址：http://www.sucaihuo.com/templates/1588.html

继续阅读 »

周报（20180330）：今天你打包了么？

云端打包清单周报

开源项目

uni-migration：统一转换器，可实现将小程序项目转换为快应用、UniApp项目。

无论是使用 HBuilderX 还是 uni-migration，转换或运行时出现问题后，请尽可能提供可以重现问题的示例项目。如果因为是公司的项目，请向领导反馈后提供一个简单的 demo，否则拿不到代码没有办法定位问题。

关于应用中的广告，下载广告演示示例 App 体验 DCloud 广告平台的广告。除了这个示例里面的广告形式外，如果出现其它悬浮或者插入的广告多半是被劫持了。

问题清单

小程序转快应用一直有问题：这种情况，请尽可能提供示例项目。
http://dev.dcloud.net.cn/ 页面我创建的应用删除不掉，怎么联系管理员？：按照帖子中的回复，邮件反馈。
UNIAPP开发遇到一下几点问题：UniApp 还在不断完善中，欢迎各位小伙伴体验并反馈。
关于mui框架跨域问题，很多人说在浏览器上，无法调用后台，在真机上调试可以，但是，我用Android、IOS都试过了，无法调用后台接口。：又是跨域，动动手搜索一下有很多答案的。
怎么调用支付宝沙箱环境：5+API 不支持沙箱环境，一分钱大法好。
wap2app如何整合腾讯X5内核浏览：这个真的不支持，开发中遇到问题重要的是想办法解决。

iOS 近期问题

iOS审核不通过，使用了私有APIxxxx：按照帖子中的回复，尝试发邮件解释下。

再说两句

HBuilder为什么没有Linux版：这个问题真的是老黄历了，但总想说的什么。每个人有自己的想法和意愿，DCloud 无法满足所有开发者的需求。如果你真的认同 DCloud，喜欢 HBuilder，请移步需求墙：http://dev.dcloud.net.cn/wish/。

最后

本周的报告就是这些，希望能对大家有所帮助。同时，也希望更多的小伙伴在社区分享自己的经验心得，交流学习。

祝大家周末愉快。

继续阅读 »

setJsFile与appendJsFile的区别

Webview appendJsFile

最近遇到setJsFile、appendJsFile无效不能注入js文件问题。
经过不断调试，原来这两个是有区别的。
这两个都可以设置js文件加载注入，区别在于：

http://html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.setJsFile
setJsFile：设置新的JS文件后将清空之前设置的值。重点在这句话。也就是后台如果一直setJsFile，那么只有最后一个js文件生效。

appendJsFile：添加多个js文件将按照添加的先后顺序执行。也就是说，这个可以一直追加。如果有多个文件，请用这个，不然，坑死……

话说，这论坛人气真不行。

        var w = plus.webview.getWebviewById(webviewid);  
        if (null == w){  
            w = plus.webview.create(url, webviewid, styles, extras);  
            w.setJsFile('_www/js/mui.min.js');  
            w.appendJsFile('_www/js/mui-ext.js');  
            w.appendJsFile('_www/js/app-config.js');  
            w.appendJsFile('_www/js/app-getdata.js');  
            w.appendJsFile('_www/js/app-page.js');  
            w.appendJsFile('_www/js/app-owner.js');  
            w.appendJsFile('_www/js/md5.min.js');  
        }

附上测试工程，内含Backup V1.4.bat一键打包备份工具（需要安装7z）。

继续阅读 »

最近遇到setJsFile、appendJsFile无效不能注入js文件问题。
经过不断调试，原来这两个是有区别的。
这两个都可以设置js文件加载注入，区别在于：

http://html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject.setJsFile
setJsFile：设置新的JS文件后将清空之前设置的值。重点在这句话。也就是后台如果一直setJsFile，那么只有最后一个js文件生效。

appendJsFile：添加多个js文件将按照添加的先后顺序执行。也就是说，这个可以一直追加。如果有多个文件，请用这个，不然，坑死……

话说，这论坛人气真不行。

        var w = plus.webview.getWebviewById(webviewid);  
        if (null == w){  
            w = plus.webview.create(url, webviewid, styles, extras);  
            w.setJsFile('_www/js/mui.min.js');  
            w.appendJsFile('_www/js/mui-ext.js');  
            w.appendJsFile('_www/js/app-config.js');  
            w.appendJsFile('_www/js/app-getdata.js');  
            w.appendJsFile('_www/js/app-page.js');  
            w.appendJsFile('_www/js/app-owner.js');  
            w.appendJsFile('_www/js/md5.min.js');  
        }

附上测试工程，内含Backup V1.4.bat一键打包备份工具（需要安装7z）。

收起阅读 »

如何开发app软件，郑州app开发认为这些很重要

5 App开发

　　人的记忆有限，不可能能记住所有的事，特别是面对创业。就拿郑州app开发来说，一个app有很多的功能点，不可能全部记住。如果你能根据你的战略、商业模式等把想要实现的app功能列出来，在和外部团队沟通时，不就不会遗漏了吗?所以需要投资者做到以下几点才行。

　　1、让自己的思路变得有条理

　　当看到所有任务都清晰地显示在眼前，对该做的事情也有个底，这样也会慢慢发现，其实开发一个app、创业也没有那么难，一个个的去攻破、实现就可以了。这样不管和外部的供应商还是经销商还是用户、其他合作伙伴，沟通时心里就会有底，而且非常的有条理，和谁见面、什么时候见面、聊什么都会很清晰。

　　2、优化大脑，提高沟通效率

　　大脑就像电脑的C盘，装的东西多了，电脑就变得卡了，所以把一些资料存放在其他硬盘，能让它运行得更快。该记下来的就记下来，不要让大脑太累了，让大脑做真正该做的事。创业者，每天要做的事情很多，要记的事情也很多。如果你想找外部团队开发app时，如果能用思维脑图把你想说的画出来，不就节省了很多你和软件开发公司沟通的问题了吗?而且更高效有效。

　　3、防止记忆或沟通的遗漏

　　有创业者想做电商app，自己思考了一些这个项目怎么来做，供应商、经销商、平台、线下等等每一处怎么来做都有了自己的想法，但是在具体项目找软件开发公司来做的时候，总是会有些人问些问题把自己问住，或者沟通不顺畅，又或者总是沟通有遗漏的地方。最后项目开工了，问题就接踵而至，而究其根本就是创业者自己没有想明白。

　　所以，如果你现在也有创业的想法，也想做一个app，现在就不妨用脑图软件把自己脑海里想的全部画出来，可能就会发现很多之前没有想到的盲点。有些创业者也是跟你谈想法，拿一个别人的app或者微信、小程序过来，说要做一个一模一样的，但是问到涉及后台的问题，自己又讲不清了。有歌清晰的app开发思路，和郑州app开发公司合作起来就非常简单了。本文由郑州app开发http://www.appsaa.com编辑整理，如需转载请注明出处。

继续阅读 »

　　人的记忆有限，不可能能记住所有的事，特别是面对创业。就拿郑州app开发来说，一个app有很多的功能点，不可能全部记住。如果你能根据你的战略、商业模式等把想要实现的app功能列出来，在和外部团队沟通时，不就不会遗漏了吗?所以需要投资者做到以下几点才行。

　　1、让自己的思路变得有条理

　　当看到所有任务都清晰地显示在眼前，对该做的事情也有个底，这样也会慢慢发现，其实开发一个app、创业也没有那么难，一个个的去攻破、实现就可以了。这样不管和外部的供应商还是经销商还是用户、其他合作伙伴，沟通时心里就会有底，而且非常的有条理，和谁见面、什么时候见面、聊什么都会很清晰。

　　2、优化大脑，提高沟通效率

　　大脑就像电脑的C盘，装的东西多了，电脑就变得卡了，所以把一些资料存放在其他硬盘，能让它运行得更快。该记下来的就记下来，不要让大脑太累了，让大脑做真正该做的事。创业者，每天要做的事情很多，要记的事情也很多。如果你想找外部团队开发app时，如果能用思维脑图把你想说的画出来，不就节省了很多你和软件开发公司沟通的问题了吗?而且更高效有效。

　　3、防止记忆或沟通的遗漏

　　有创业者想做电商app，自己思考了一些这个项目怎么来做，供应商、经销商、平台、线下等等每一处怎么来做都有了自己的想法，但是在具体项目找软件开发公司来做的时候，总是会有些人问些问题把自己问住，或者沟通不顺畅，又或者总是沟通有遗漏的地方。最后项目开工了，问题就接踵而至，而究其根本就是创业者自己没有想明白。

　　所以，如果你现在也有创业的想法，也想做一个app，现在就不妨用脑图软件把自己脑海里想的全部画出来，可能就会发现很多之前没有想到的盲点。有些创业者也是跟你谈想法，拿一个别人的app或者微信、小程序过来，说要做一个一模一样的，但是问到涉及后台的问题，自己又讲不清了。有歌清晰的app开发思路，和郑州app开发公司合作起来就非常简单了。本文由郑州app开发http://www.appsaa.com编辑整理，如需转载请注明出处。

收起阅读 »

在标题栏中设置左右切换按钮功能

在工作中大家可能有这种需求，在一个主页面中镶嵌两个子页面，
这两个子页面可以通过主页面中的一个按钮去控制子页面的切换。
下面有效果图。
==================================================

主页面：

<!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" />
<title>市场分布</title>
<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
<link rel="stylesheet" href="../../css/iconfont.css" />
<style type="text/css">

modeImg{

            color: #C1131D;  
        }  
    </style>  
</head>  
<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">市场分布</h1>  
        <a class="mui-pull-right" id="changeImg"><span id="modeImg" class="mui-icon mui-icon-right-nav iconfont icon-fenbushinengyuanguihuajishu"></span></a>  
    </header>  

    <script type="text/javascript" src="../../js/mui.min.js" ></script>  
    <script type="text/javascript" src="../../js/app.js" ></script>  
    <script type="text/javascript" src="../../js/base.js" ></script>  
    <script type="text/javascript" src="../../js/webviewMapListGroup.js"></script>  
    <script type="text/javascript">  
        var flag = true;  

        mui.init({  
            swipeBack:false  
        });           
        mui.plusReady(function(){  
            var group = new webviewGroup('marketDistribution',{  
                items:[  
                {  
                    id: "marketDistributionList.html",  
                    url: "marketDistributionList.html",  
                    styles:{  
                        top:"40px",  
                        bottom:"0px",  
                        hardwareAccelerated:true //开启硬件加速  
                  },  
                  extras:{}  
                },{  
                    id: "marketDistributionMap.html",  
                    url: "marketDistributionMap.html",  
                    styles:{  
                        top:"40px",  
                        bottom:"0px",  
                        hardwareAccelerated:true //开启硬件加速  
                    },  
                    extras:{}  
                }],  
                onChange: function(obj) {  
                    var index = parseInt(obj.index);  
                    var myimg = document.getElementById("modeImg");  
                    if(index == 1){  
                        //console.log("地图模式="+index);  
                        myimg.classList.remove("icon-fenbushinengyuanguihuajishu");  
                        myimg.classList.add("icon-chazhaobiaodanliebiao");  
                    }else{  
                        //console.log("列表模式="+index);  
                        myimg.classList.remove("icon-chazhaobiaodanliebiao");  
                        myimg.classList.add("icon-fenbushinengyuanguihuajishu");  
                    }  
                }  
            });  
            //图标切换事件  
            document.getElementById("changeImg").addEventListener('tap',function(e) {  
                if(flag){  
                    group.switchTab("marketDistributionMap.html");  
                    flag = false;  
                }else{  
                    group.switchTab("marketDistributionList.html");  
                    flag = true;  
                }  
            });  
        });   
    </script>  
</body>

</html>
子页面1：
<!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" />
<title>市场分布-列表</title>
<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
<link rel="stylesheet" href="../../css/iconfont.css" />
</head>
<body>
<div class="mui-content">
<div class="two-nav">
<div id="distributor" data-f="11" class="pan-title mui-pull-left onclick-title">
经销商列表
</div>
<div id="customer" data-f="22" class="pan-title mui-pull-right">
客户列表
</div>
</div>

    </div>  
    <div class="pan-content">  
        <ul class="mui-table-view" id="listCust">  
        </ul>  
    </div>              
</body>

</html>
子页面2：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
<title></title>
</head>
<body>
<div id="allmap"></div>
</body>
<script type="text/javascript" src="../../js/mui.min.js"></script>
<script type="text/javascript" src="../../js/app.js"></script>
<script type="text/javascript" src="../../js/base.js"></script>
</html>

继续阅读 »

在工作中大家可能有这种需求，在一个主页面中镶嵌两个子页面，
这两个子页面可以通过主页面中的一个按钮去控制子页面的切换。
下面有效果图。
==================================================

主页面：

<!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" />
<title>市场分布</title>
<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
<link rel="stylesheet" href="../../css/iconfont.css" />
<style type="text/css">

modeImg{

            color: #C1131D;  
        }  
    </style>  
</head>  
<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">市场分布</h1>  
        <a class="mui-pull-right" id="changeImg"><span id="modeImg" class="mui-icon mui-icon-right-nav iconfont icon-fenbushinengyuanguihuajishu"></span></a>  
    </header>  

    <script type="text/javascript" src="../../js/mui.min.js" ></script>  
    <script type="text/javascript" src="../../js/app.js" ></script>  
    <script type="text/javascript" src="../../js/base.js" ></script>  
    <script type="text/javascript" src="../../js/webviewMapListGroup.js"></script>  
    <script type="text/javascript">  
        var flag = true;  

        mui.init({  
            swipeBack:false  
        });           
        mui.plusReady(function(){  
            var group = new webviewGroup('marketDistribution',{  
                items:[  
                {  
                    id: "marketDistributionList.html",  
                    url: "marketDistributionList.html",  
                    styles:{  
                        top:"40px",  
                        bottom:"0px",  
                        hardwareAccelerated:true //开启硬件加速  
                  },  
                  extras:{}  
                },{  
                    id: "marketDistributionMap.html",  
                    url: "marketDistributionMap.html",  
                    styles:{  
                        top:"40px",  
                        bottom:"0px",  
                        hardwareAccelerated:true //开启硬件加速  
                    },  
                    extras:{}  
                }],  
                onChange: function(obj) {  
                    var index = parseInt(obj.index);  
                    var myimg = document.getElementById("modeImg");  
                    if(index == 1){  
                        //console.log("地图模式="+index);  
                        myimg.classList.remove("icon-fenbushinengyuanguihuajishu");  
                        myimg.classList.add("icon-chazhaobiaodanliebiao");  
                    }else{  
                        //console.log("列表模式="+index);  
                        myimg.classList.remove("icon-chazhaobiaodanliebiao");  
                        myimg.classList.add("icon-fenbushinengyuanguihuajishu");  
                    }  
                }  
            });  
            //图标切换事件  
            document.getElementById("changeImg").addEventListener('tap',function(e) {  
                if(flag){  
                    group.switchTab("marketDistributionMap.html");  
                    flag = false;  
                }else{  
                    group.switchTab("marketDistributionList.html");  
                    flag = true;  
                }  
            });  
        });   
    </script>  
</body>

</html>
子页面1：
<!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" />
<title>市场分布-列表</title>
<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
<link rel="stylesheet" href="../../css/iconfont.css" />
</head>
<body>
<div class="mui-content">
<div class="two-nav">
<div id="distributor" data-f="11" class="pan-title mui-pull-left onclick-title">
经销商列表
</div>
<div id="customer" data-f="22" class="pan-title mui-pull-right">
客户列表
</div>
</div>

    </div>  
    <div class="pan-content">  
        <ul class="mui-table-view" id="listCust">  
        </ul>  
    </div>              
</body>

</html>
子页面2：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="../../css/mui.min.css"/>
<title></title>
</head>
<body>
<div id="allmap"></div>
</body>
<script type="text/javascript" src="../../js/mui.min.js"></script>
<script type="text/javascript" src="../../js/app.js"></script>
<script type="text/javascript" src="../../js/base.js"></script>
</html>

收起阅读 »

过程

结果

修改Vue-cli的webpack配置

修改src/main.js文件

app项目配置

到此结束

过程

结果

修改Vue-cli的webpack配置

修改src/main.js文件

app项目配置

到此结束

dragContainer {

dragContainer {

热门话题

开源项目

问题清单

iOS 近期问题

再说两句

最后

热门话题

开源项目

问题清单

iOS 近期问题

再说两句

最后

主页面：

modeImg{

主页面：

modeImg{

热门文章