HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

HBuilder中Autoprefixer的配置方法

外部工具 HBuilder

Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer

关于Autoprefixer

当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生:

a {  
background : linear-gradient(to top, black, white);  
display : flex  
}  
::placeholder {  
color : #ccc  
}

编译成:

a {  
background : -webkit-linear-gradient(bottom, black, white);  
background : linear-gradient(to top, black, white);  
display : -webkit-box;  
display : -webkit-flex;  
display : -moz-box;  
display : -ms-flexbox;  
display : flex  
}  
:-ms-input-placeholder {  
color : #ccc  
}  
::-moz-placeholder {  
color : #ccc  
}  
::-webkit-input-placeholder {  
color : #ccc  
}  
::placeholder {  
color : #ccc  
}

Autoprefixer 同样会清理过期的前缀,因此下面的代码:

a {  
-webkit-border-radius : 5px;  
border-radius : 5px  
}

编译成:

a {  
border-radius : 5px  
}

因为经过Autoprefixer处理,CSS将仅包含实际的浏览器前缀。

安装node.js

(略)

安装Autoprefixer,

见https://github.com/postcss/autoprefixer:
npm install autoprefixer -g
mac下可能需要加sudo,或者是不是全局安装(-g)那就看你自己的环境了。
如npm太慢,可使用 NPM 镜像的https://npm.taobao.org/

安装postcss-cli

Autoprefixer其实是postcss的插件,见https://github.com/code42day/postcss-cli
npm install postcss-cli -g

配置外部工具

打开HBuilder,运行-外部工具-外部工具配置,如图:


新建一个外部工具配置
名称填写autoprefixer(这个随意,就是起个名字)
要执行的命令或文件填写npm安装目录\postcss.cmd(mac下应为npm安装目录\postcss)如

C:\Users\wu\AppData\Roaming\npm\postcss.cmd

工作目录填写${project_loc}
参数填写-u autoprefixer -o ${resource_loc} ${resource_loc}
然后点击应用,如下图

使用autoprefixer

点击你的css、sass文件,然后右键,依次点击外部工具-autoprefixer(此处为你新建外部工具的名称)等待编译,编译完毕即可

配置快捷键

工具-选项-常规-快捷键,搜索autoprefixer(此处为你新建外部工具的名称),设置快捷键即可

继续阅读 »

Autoprefixer是一个后处理程序,不象Sass以及Stylus之类的预处理器。它适用于普通的CSS,可以实现css3代码自动补全。也可以轻松跟Sass,LESS及Stylus集成,在CSS编译前或编译后运行。详情见,https://github.com/postcss/autoprefixer

关于Autoprefixer

当Autoprefixer添加前缀到你的CSS,还不会忘记修复语法差异。这种方式,CSS是基于最新W3C规范产生:

a {  
background : linear-gradient(to top, black, white);  
display : flex  
}  
::placeholder {  
color : #ccc  
}

编译成:

a {  
background : -webkit-linear-gradient(bottom, black, white);  
background : linear-gradient(to top, black, white);  
display : -webkit-box;  
display : -webkit-flex;  
display : -moz-box;  
display : -ms-flexbox;  
display : flex  
}  
:-ms-input-placeholder {  
color : #ccc  
}  
::-moz-placeholder {  
color : #ccc  
}  
::-webkit-input-placeholder {  
color : #ccc  
}  
::placeholder {  
color : #ccc  
}

Autoprefixer 同样会清理过期的前缀,因此下面的代码:

a {  
-webkit-border-radius : 5px;  
border-radius : 5px  
}

编译成:

a {  
border-radius : 5px  
}

因为经过Autoprefixer处理,CSS将仅包含实际的浏览器前缀。

安装node.js

(略)

安装Autoprefixer,

见https://github.com/postcss/autoprefixer:
npm install autoprefixer -g
mac下可能需要加sudo,或者是不是全局安装(-g)那就看你自己的环境了。
如npm太慢,可使用 NPM 镜像的https://npm.taobao.org/

安装postcss-cli

Autoprefixer其实是postcss的插件,见https://github.com/code42day/postcss-cli
npm install postcss-cli -g

配置外部工具

打开HBuilder,运行-外部工具-外部工具配置,如图:


新建一个外部工具配置
名称填写autoprefixer(这个随意,就是起个名字)
要执行的命令或文件填写npm安装目录\postcss.cmd(mac下应为npm安装目录\postcss)如

C:\Users\wu\AppData\Roaming\npm\postcss.cmd

工作目录填写${project_loc}
参数填写-u autoprefixer -o ${resource_loc} ${resource_loc}
然后点击应用,如下图

使用autoprefixer

点击你的css、sass文件,然后右键,依次点击外部工具-autoprefixer(此处为你新建外部工具的名称)等待编译,编译完毕即可

配置快捷键

工具-选项-常规-快捷键,搜索autoprefixer(此处为你新建外部工具的名称),设置快捷键即可

收起阅读 »

跨平台APP开发零基础入门必学课程

mui HBuilder

东翌学院创办于2011年,所属HTML5中国产业联盟企业,专注IT互联网职业教育,借助HTML5中国产业联盟和自身团队技术力量,Dcloud权威合作培训机构!在国内首推跨平台APP开发专业培训课程,腾讯课堂网络教育平台授课,线上学习全国就业。有实力、有信誉,要培训就选专业技术型培训机构!暑期班马上就开课了,国内首推零基础到实战开发APP,小班授课,直播教学,学跨平台App开发就在这里>>>

继续阅读 »

东翌学院创办于2011年,所属HTML5中国产业联盟企业,专注IT互联网职业教育,借助HTML5中国产业联盟和自身团队技术力量,Dcloud权威合作培训机构!在国内首推跨平台APP开发专业培训课程,腾讯课堂网络教育平台授课,线上学习全国就业。有实力、有信誉,要培训就选专业技术型培训机构!暑期班马上就开课了,国内首推零基础到实战开发APP,小班授课,直播教学,学跨平台App开发就在这里>>>

收起阅读 »

Android开机自启应用

问题场景

最近开发一个展示类应用项目,展示设备为若干个24小时运行的Android广告机。考虑到停电的情况该应用需要开机自启动

背景知识

  • 当Android启动时,会发出一个系统广播,内容为ACTION_BOOT_COMPLETED,它的字符串常量表示为 android.intent.action.BOOT_COMPLETED。

  • android开发中的基本概念:Activity。Activity简单的理解为android的视图,承载着android的人机交互。一个应用程序可以有多个Activity,其中有一个Activity为应用程序启动时最先启动的。 该Activity在AndroidManifest.xml中的具体形式如下。intent-filter中两项android.intent.action.MAIN android.intent.category.LAUNCHER表示该activity为应用程序启动主界面。

    <activity android:name=".MainActivity" android:label="@string/app_name">  
    <intent-filter>  
        <action android:name="android.intent.action.MAIN" />  
        <category android:name="android.intent.category.LAUNCHER" />  
    </intent-filter>  
    </activity>

到这里解决问题的思路就完整了,我们监听ACTION_BOOT_COMPLETED广播,并在监听逻辑中启动应用的对应的Main Activity

前提条件

由于我们需要自己写广播接收逻辑,所以应用的打包只能采用“离线打包”,这样我们才能调用android原生的api。

示例

  • 本地离线打包项目导入,环境配置。(略,请参考 Android离线打包

  • AndroidMainfest.xml中添加开机启动权限

    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
  • 创建一个广播接收类

package io.dcloud.yourapp;  
import android.content.BroadcastReceiver;  
import android.content.Context;  
import android.content.Intent;  
import io.dcloud.PandoraEntry;  

public class BootBroadcastReceiver extends BroadcastReceiver {  

    static final String action_boot="android.intent.action.BOOT_COMPLETED";  

    @Override  
    public void onReceive(Context context, Intent intent) {  

        if (intent.getAction().equals(action_boot)){  

            // 注意H5+SDK的Main Activity为PandoraEntry(见AndroidMainfest.xml)  
            Intent bootMainIntent = new Intent(context, PandoraEntry.class);  

            // 这里必须为FLAG_ACTIVITY_NEW_TASK  
            bootMainIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);  

            context.startActivity(bootMainIntent);  
        }  

    }  
}
  • 在AndroidMainfest.xml中注册该广播接收类
    <!--开机自启动-->  
    <receiver android:name=".BootBroadcastReceiver">  
    <intent-filter>  
         <action android:name="android.intent.action.BOOT_COMPLETED" />  
         <category android:name="android.intent.category.LAUNCHER"></category>  
    </intent-filter>  
    </receiver>
  • 编译,调试

注意事项

  • 请注意BootBroadcastReceiver的命名空间,要保证AndroidMainfest.xml中receiver可以找的到我们创建的BootBroadcastReceiver类。

  • 应用程序必须在Android中启动一次,下次才可以开机启动。

继续阅读 »

问题场景

最近开发一个展示类应用项目,展示设备为若干个24小时运行的Android广告机。考虑到停电的情况该应用需要开机自启动

背景知识

  • 当Android启动时,会发出一个系统广播,内容为ACTION_BOOT_COMPLETED,它的字符串常量表示为 android.intent.action.BOOT_COMPLETED。

  • android开发中的基本概念:Activity。Activity简单的理解为android的视图,承载着android的人机交互。一个应用程序可以有多个Activity,其中有一个Activity为应用程序启动时最先启动的。 该Activity在AndroidManifest.xml中的具体形式如下。intent-filter中两项android.intent.action.MAIN android.intent.category.LAUNCHER表示该activity为应用程序启动主界面。

    <activity android:name=".MainActivity" android:label="@string/app_name">  
    <intent-filter>  
        <action android:name="android.intent.action.MAIN" />  
        <category android:name="android.intent.category.LAUNCHER" />  
    </intent-filter>  
    </activity>

到这里解决问题的思路就完整了,我们监听ACTION_BOOT_COMPLETED广播,并在监听逻辑中启动应用的对应的Main Activity

前提条件

由于我们需要自己写广播接收逻辑,所以应用的打包只能采用“离线打包”,这样我们才能调用android原生的api。

示例

  • 本地离线打包项目导入,环境配置。(略,请参考 Android离线打包

  • AndroidMainfest.xml中添加开机启动权限

    <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/>
  • 创建一个广播接收类

package io.dcloud.yourapp;  
import android.content.BroadcastReceiver;  
import android.content.Context;  
import android.content.Intent;  
import io.dcloud.PandoraEntry;  

public class BootBroadcastReceiver extends BroadcastReceiver {  

    static final String action_boot="android.intent.action.BOOT_COMPLETED";  

    @Override  
    public void onReceive(Context context, Intent intent) {  

        if (intent.getAction().equals(action_boot)){  

            // 注意H5+SDK的Main Activity为PandoraEntry(见AndroidMainfest.xml)  
            Intent bootMainIntent = new Intent(context, PandoraEntry.class);  

            // 这里必须为FLAG_ACTIVITY_NEW_TASK  
            bootMainIntent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);  

            context.startActivity(bootMainIntent);  
        }  

    }  
}
  • 在AndroidMainfest.xml中注册该广播接收类
    <!--开机自启动-->  
    <receiver android:name=".BootBroadcastReceiver">  
    <intent-filter>  
         <action android:name="android.intent.action.BOOT_COMPLETED" />  
         <category android:name="android.intent.category.LAUNCHER"></category>  
    </intent-filter>  
    </receiver>
  • 编译,调试

注意事项

  • 请注意BootBroadcastReceiver的命名空间,要保证AndroidMainfest.xml中receiver可以找的到我们创建的BootBroadcastReceiver类。

  • 应用程序必须在Android中启动一次,下次才可以开机启动。

收起阅读 »

使用选项卡+下拉刷新的种种问题

HBuilder

app主页预加载是个页面,分别为a,b,c,d目录的index,也就是a/index.html ; b/index.html ......

其中主页面有个点击事件是获取商家id并传到b目录下的商家产品目录页(这个页面是选项卡+下拉刷新),麻烦来了,传过来的值接收到并把数据封装好了,但弄死就是不显示内容,但是比较奇怪的是,在b目录(产品目录了)点击进入产品详细,里面有个点击事件进入商家店铺页面(也就上面提到的商家产品目录),这下数据能显示,就那么奇怪~~~

在商家产品目录里更奇怪,选项卡+下拉刷新 都知道是什么页面结构,上面产品分类,下面是产品分类列表,如果首次不点击产品分类的话,在下面左右滑动,产品分类选项卡不跟随走,并提示【 Uncaught TypeError: Cannot read property '0' of undefined at js/mui.min.js:7】,这个先不管吗,毕竟可以再次点击产品分类后再左右滑动 就不会提示错误。

但是上下滑动 有出问题了,远程获得数据,啥都可以,就是不显示数据

var createFragment = function(ul, index,itemid) {  
                        var length = ul.querySelectorAll('li').length;  
                        var fragment = document.createDocumentFragment();  
                        var li;  
                        loaddatelist.usershoplist(length,id,itemid, function(rs) {  
                            if(rs){  
                                var len=rs.length;  
                                for (var ii = 0; ii < len; ii++) {  
                                    li = document.createElement('li');    
                                    li.className = 'mui-table-view-cell mui-media';  
                                    li.id =rs[ii]['id'];  
                                    li.innerHTML+='<img class="mui-media-object mui-pull-left" data-lazyload-id="'+rs[ii]['id']+'" src="'+rs[ii]['picurl']+'" onerror="src=\'../images/no_logo.png\'">';  
                                    li.innerHTML+='<div class="mui-media-body">'+rs[ii]['title'];  
                                    li.innerHTML+='<p class="mui-ellipsis-2">'+rs[ii]['description']+'</p>';  
                                    li.innerHTML+='<p><span class="mui-pull-left">¥'+rs[ii]['price']+'元</span><span class="mui-pull-right"><span class="mui-icon mui-icon-eye mygz"></span>'+rs[ii]['oncl']+'</span></p>';  
                                    li.innerHTML+='</div>';  
                                    fragment.appendChild(li);  
                               }  
                            }  
                        });  
                        return fragment;  
                    };

然后把这个换成官方提供的demo,嘿,居然可以了,但数据不是想要的数据~~~

继续阅读 »

app主页预加载是个页面,分别为a,b,c,d目录的index,也就是a/index.html ; b/index.html ......

其中主页面有个点击事件是获取商家id并传到b目录下的商家产品目录页(这个页面是选项卡+下拉刷新),麻烦来了,传过来的值接收到并把数据封装好了,但弄死就是不显示内容,但是比较奇怪的是,在b目录(产品目录了)点击进入产品详细,里面有个点击事件进入商家店铺页面(也就上面提到的商家产品目录),这下数据能显示,就那么奇怪~~~

在商家产品目录里更奇怪,选项卡+下拉刷新 都知道是什么页面结构,上面产品分类,下面是产品分类列表,如果首次不点击产品分类的话,在下面左右滑动,产品分类选项卡不跟随走,并提示【 Uncaught TypeError: Cannot read property '0' of undefined at js/mui.min.js:7】,这个先不管吗,毕竟可以再次点击产品分类后再左右滑动 就不会提示错误。

但是上下滑动 有出问题了,远程获得数据,啥都可以,就是不显示数据

var createFragment = function(ul, index,itemid) {  
                        var length = ul.querySelectorAll('li').length;  
                        var fragment = document.createDocumentFragment();  
                        var li;  
                        loaddatelist.usershoplist(length,id,itemid, function(rs) {  
                            if(rs){  
                                var len=rs.length;  
                                for (var ii = 0; ii < len; ii++) {  
                                    li = document.createElement('li');    
                                    li.className = 'mui-table-view-cell mui-media';  
                                    li.id =rs[ii]['id'];  
                                    li.innerHTML+='<img class="mui-media-object mui-pull-left" data-lazyload-id="'+rs[ii]['id']+'" src="'+rs[ii]['picurl']+'" onerror="src=\'../images/no_logo.png\'">';  
                                    li.innerHTML+='<div class="mui-media-body">'+rs[ii]['title'];  
                                    li.innerHTML+='<p class="mui-ellipsis-2">'+rs[ii]['description']+'</p>';  
                                    li.innerHTML+='<p><span class="mui-pull-left">¥'+rs[ii]['price']+'元</span><span class="mui-pull-right"><span class="mui-icon mui-icon-eye mygz"></span>'+rs[ii]['oncl']+'</span></p>';  
                                    li.innerHTML+='</div>';  
                                    fragment.appendChild(li);  
                               }  
                            }  
                        });  
                        return fragment;  
                    };

然后把这个换成官方提供的demo,嘿,居然可以了,但数据不是想要的数据~~~

收起阅读 »

承接整套网站建设(前后台都可),UI设计,webAPP建设,微信公众平台等

生活不易
生活不易
生活不易
承接整套网站建设(前后台都可),UI设计,webAPP建设,微信公众平台等项目。
能力足够,可以先加Q看我的成品
QQ46174188646

生活不易
生活不易
生活不易
承接整套网站建设(前后台都可),UI设计,webAPP建设,微信公众平台等项目。
能力足够,可以先加Q看我的成品
QQ46174188646

最新bh没得法配置支付参数了

HBuilder

最新bh没得法配置支付参数了

最新bh没得法配置支付参数了

请问hbuilder如何支持typescript和react?

HBuilder React Native

请问hbuilder如何支持typescript和react?

请问hbuilder如何支持typescript和react?

解决 HBuilder 7.2.1.201606142028 iOS无法真机调试问题

HBuilder

临时解决办法:
1.%HBuilder安装目录%\plugins\com.pandora.tools.android_1.0.0.201606082006\下修改preferences.ini文件中iphone_version=7.2.1 为 iphone_version=7.2.0

  1. 将同目录下base文件夹中的ipa基座替换成附件中的基座

http://pan.baidu.com/s/1eSufLYE

继续阅读 »

临时解决办法:
1.%HBuilder安装目录%\plugins\com.pandora.tools.android_1.0.0.201606082006\下修改preferences.ini文件中iphone_version=7.2.1 为 iphone_version=7.2.0

  1. 将同目录下base文件夹中的ipa基座替换成附件中的基座

http://pan.baidu.com/s/1eSufLYE

收起阅读 »

(iOS)总结一下这几天在使用5+SDK的时候遇到的问题

Payment 5+sdk

我是使用5+webApp加载网络链接,加载的网页是同事用Hbuilder写的(貌似是,对于h5不是太懂,大家不要喷)
遇到的第一个问题就是静态库添加进去会报错,building setting里面搜索search path,然后修改静态库的路径(必要的时候修改frameWork的路径), other link flag添加-ObjC(一定要注意大小写),如果配置都正确还是报错的话,很有可能就是缺少某些静态库
第二个问题就是我在使用payment模块的时候,按照文档上导入了三个支付所用到的静态库以后还是会报错,解决方法是再导入一个liblibpayment.a的静态库,Feature-iOS那个表格里没有写要加这一个(好气啊)。
还再继续摸索使用中,遇到的问题会及时分享。
最后,感谢工程师 DCloud_SDK_骁骑 对我的帮助,谢谢!

继续阅读 »

我是使用5+webApp加载网络链接,加载的网页是同事用Hbuilder写的(貌似是,对于h5不是太懂,大家不要喷)
遇到的第一个问题就是静态库添加进去会报错,building setting里面搜索search path,然后修改静态库的路径(必要的时候修改frameWork的路径), other link flag添加-ObjC(一定要注意大小写),如果配置都正确还是报错的话,很有可能就是缺少某些静态库
第二个问题就是我在使用payment模块的时候,按照文档上导入了三个支付所用到的静态库以后还是会报错,解决方法是再导入一个liblibpayment.a的静态库,Feature-iOS那个表格里没有写要加这一个(好气啊)。
还再继续摸索使用中,遇到的问题会及时分享。
最后,感谢工程师 DCloud_SDK_骁骑 对我的帮助,谢谢!

收起阅读 »

【在线等】发布版本后每个页面都会遮盖电源wifi图标,顶到头上了!【提了好几次的,真的着急】

直接连接数据线运行没有问题。只有生成app,安装后有问题!

直接连接数据线运行没有问题。只有生成app,安装后有问题!

组件

自定义模板组
 <ul class="mui-table-view">   
        <li class="mui-table-view-cell mui-collapse mui-active">  
            <a class="mui-navigate-right" href="#">面板1</a>  
            <div class="mui-collapse-content">  
                <p>面板1子内容</p>  
            </div>  
        </li>  
        <li class="mui-table-view-cell mui-collapse">  
            <a class="mui-navigate-right" href="#">面板</a>  
                <div class="mui-collapse-content">  
                <p>面板2子内容</p>  
            </div>  
        </li>  
        <li class="mui-table-view-cell mui-collapse">  
            <a class="mui-navigate-right" href="#">面板3</a>  
            <div class="mui-collapse-content">  
                <p>面板3子内容</p>  
            </div>  
        </li>   
    </ul>
继续阅读 »
 <ul class="mui-table-view">   
        <li class="mui-table-view-cell mui-collapse mui-active">  
            <a class="mui-navigate-right" href="#">面板1</a>  
            <div class="mui-collapse-content">  
                <p>面板1子内容</p>  
            </div>  
        </li>  
        <li class="mui-table-view-cell mui-collapse">  
            <a class="mui-navigate-right" href="#">面板</a>  
                <div class="mui-collapse-content">  
                <p>面板2子内容</p>  
            </div>  
        </li>  
        <li class="mui-table-view-cell mui-collapse">  
            <a class="mui-navigate-right" href="#">面板3</a>  
            <div class="mui-collapse-content">  
                <p>面板3子内容</p>  
            </div>  
        </li>   
    </ul>
收起阅读 »