HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

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

自定义事件 back

append创建子页面的时候是否应该默认或强制的屏蔽响应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的问题,如有大神,请指教

继续阅读 »

异步拼页面,发现对其绑定事件不起作用,简直是无语,一开始认为是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

求一个成品Demo

求一个成品Demo

广州全职诚招

招聘

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

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

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

更新 App mui

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


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

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

继续阅读 »

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

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

继续阅读 »

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
收起阅读 »

关于ios角标同步服务器的问题

Push Badge iOS Native.JS 个推

问题:
plus.runtime.setBadgeNumber(5);设置角标后,通过个推推送一个消息,然后,角标变成1了,没有在原来5的的基础上+1

解决:
通过咨询个推技术得知,需要在手机端同步一下服务器的角标数,参考个推api:http://docs.getui.com/mobile/ios/api/#16

  1. 设置角标 setBadge:(NSUInteger)value;
    说明:设置角标功能,同步服务器角标计数

于是参考H5+的Native.js,调用ios的类库进行同步服务器操作。代码如下:

    /**  
     * 个推同步服务器角标  
     * @param {Object} badge  
     */  
    setGtBadge4IOS:function(badge){  
        if(mui.os.ios){  
            var GeTuiSdk = plus.ios.importClass('GeTuiSdk');  
            GeTuiSdk.setBadge(badge);  
        }  
    },
继续阅读 »

问题:
plus.runtime.setBadgeNumber(5);设置角标后,通过个推推送一个消息,然后,角标变成1了,没有在原来5的的基础上+1

解决:
通过咨询个推技术得知,需要在手机端同步一下服务器的角标数,参考个推api:http://docs.getui.com/mobile/ios/api/#16

  1. 设置角标 setBadge:(NSUInteger)value;
    说明:设置角标功能,同步服务器角标计数

于是参考H5+的Native.js,调用ios的类库进行同步服务器操作。代码如下:

    /**  
     * 个推同步服务器角标  
     * @param {Object} badge  
     */  
    setGtBadge4IOS:function(badge){  
        if(mui.os.ios){  
            var GeTuiSdk = plus.ios.importClass('GeTuiSdk');  
            GeTuiSdk.setBadge(badge);  
        }  
    },
收起阅读 »

个人工作常见问题汇总0217

一、关于页面设计
1.做完之后发给手机仔细看发现字号太小了,从做好第一个页面开始就要调整好;
2.设计关于表单等的页面时,表单输入的提示文字,例如格式限制提示灯,应该考虑在内。
3.后台已经加上数据之后再摘出来,耗费了一定的时间去还原。以后应该在后台添加数据交互之前就单独保存一份。

二、关于前端样式
1.凡是涉及到图片展示的,就要考虑后台传的图片不是比例正合适的情况,限定特定形状展示时,写在形状内上下左右居中效果;

<!DOCTYPE html >  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <title>图片上下左右居中</title>  
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">  
        <script>  
            var iWidth = document.documentElement.clientWidth;  
            document.getElementsByTagName('html')[0].style.fontSize = iWidth / 20 + 'px';  
        </script>  
        <style>  
            .middle {  
                width: 16vw;  
                float: left;  
                margin-left: 4%;  
            }  

            .middle span {  
                vertical-align: middle;  
                display: table-cell;  
                width: 16vw;  
                height: 16vw;  
                overflow: hidden;  
                text-align: center;  
                /*放圆的logo时加下面三行*/  
                /*border-radius: -moz-calc(50%);  
                border-radius: -webkit-calc(50%);  
                border-radius: 50%;*/  
                border: 1px solid #e5e5e5;  
            }  

            .middle img {  
                max-width: 16vw;  
                max-height: 16vw;  
                vertical-align: middle;  
            }  
        </style>  
    </head>  

    <body>  
        <!--在图片外套span是为了方便div浮动,display: table-cell;时不能浮动-->  
        <div class="middle">  
            <span>  
            <img src="10.png" />  
            </span>  
        </div>  
        <div class="middle">  
            <span>  
            <img src="20.png" />  
            </span>  
        </div>  
    </body>  

</html>

2.凡是涉及带文字列表的,包括价格等小部分文字,都要考虑是否要限定最多显示行数和溢出则变为省略号;

 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; color:#3d4245;}

3.凡是涉及可能要展示英文的,要考虑英文的不自动换行问题;

 {word-wrap:break-word; overflow:hidden;/*如果单词超过宽度了,整个单词整体换到下一行*/  
word-break:break-all; /*如果单词超过宽度了,整个单词打散,超过的部分换行 */

4.输入地址等较长的内容时不能用只给一行的input标签,容易显示不全,用textarea就好;
5.PC页面不同宽度的自适应,解决了之后导致手机端无法适应,可以直接给固定范围宽度单独写样式即可,如:

 @media (min-width:320px) and (max-width:900px) {.类名 { 单独声明的样式}};

6.链接调用

 <a onclick="window.location.href='链接地址'"></a>

三、关于后台合作
1.写静态页面的时候链接要全部链上,走通,方便后台浏览做功能。
2.php文件编码格式导致样式出现错误,注意选择UTF-8无BOM编码格式。

四、关于js
1.引用的插件在放到项目代码前就先单独修改好,多测试几次再引入,包括兼容性,比如5s等;以便于引入前就解决;
2.在ecshop里引用js比较特殊,容易丢失效果;引用js时候,要紧挨着效果引用,不能在头部直接引用,并且注意可能需要再次引用jquery。
3.js路径错了导致效果不出来还误以为是js错误,遇到问题可先检查路径有没有错。
4.样式修改完了发现功能不能实现了,改样式的时候应该边改边测试功能,以功能为主;

继续阅读 »

一、关于页面设计
1.做完之后发给手机仔细看发现字号太小了,从做好第一个页面开始就要调整好;
2.设计关于表单等的页面时,表单输入的提示文字,例如格式限制提示灯,应该考虑在内。
3.后台已经加上数据之后再摘出来,耗费了一定的时间去还原。以后应该在后台添加数据交互之前就单独保存一份。

二、关于前端样式
1.凡是涉及到图片展示的,就要考虑后台传的图片不是比例正合适的情况,限定特定形状展示时,写在形状内上下左右居中效果;

<!DOCTYPE html >  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <title>图片上下左右居中</title>  
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">  
        <script>  
            var iWidth = document.documentElement.clientWidth;  
            document.getElementsByTagName('html')[0].style.fontSize = iWidth / 20 + 'px';  
        </script>  
        <style>  
            .middle {  
                width: 16vw;  
                float: left;  
                margin-left: 4%;  
            }  

            .middle span {  
                vertical-align: middle;  
                display: table-cell;  
                width: 16vw;  
                height: 16vw;  
                overflow: hidden;  
                text-align: center;  
                /*放圆的logo时加下面三行*/  
                /*border-radius: -moz-calc(50%);  
                border-radius: -webkit-calc(50%);  
                border-radius: 50%;*/  
                border: 1px solid #e5e5e5;  
            }  

            .middle img {  
                max-width: 16vw;  
                max-height: 16vw;  
                vertical-align: middle;  
            }  
        </style>  
    </head>  

    <body>  
        <!--在图片外套span是为了方便div浮动,display: table-cell;时不能浮动-->  
        <div class="middle">  
            <span>  
            <img src="10.png" />  
            </span>  
        </div>  
        <div class="middle">  
            <span>  
            <img src="20.png" />  
            </span>  
        </div>  
    </body>  

</html>

2.凡是涉及带文字列表的,包括价格等小部分文字,都要考虑是否要限定最多显示行数和溢出则变为省略号;

 { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; overflow:hidden; color:#3d4245;}

3.凡是涉及可能要展示英文的,要考虑英文的不自动换行问题;

 {word-wrap:break-word; overflow:hidden;/*如果单词超过宽度了,整个单词整体换到下一行*/  
word-break:break-all; /*如果单词超过宽度了,整个单词打散,超过的部分换行 */

4.输入地址等较长的内容时不能用只给一行的input标签,容易显示不全,用textarea就好;
5.PC页面不同宽度的自适应,解决了之后导致手机端无法适应,可以直接给固定范围宽度单独写样式即可,如:

 @media (min-width:320px) and (max-width:900px) {.类名 { 单独声明的样式}};

6.链接调用

 <a onclick="window.location.href='链接地址'"></a>

三、关于后台合作
1.写静态页面的时候链接要全部链上,走通,方便后台浏览做功能。
2.php文件编码格式导致样式出现错误,注意选择UTF-8无BOM编码格式。

四、关于js
1.引用的插件在放到项目代码前就先单独修改好,多测试几次再引入,包括兼容性,比如5s等;以便于引入前就解决;
2.在ecshop里引用js比较特殊,容易丢失效果;引用js时候,要紧挨着效果引用,不能在头部直接引用,并且注意可能需要再次引用jquery。
3.js路径错了导致效果不出来还误以为是js错误,遇到问题可先检查路径有没有错。
4.样式修改完了发现功能不能实现了,改样式的时候应该边改边测试功能,以功能为主;

收起阅读 »