Hbuilder先提个兴趣(一)

直接先做个例子吧

首先想要一个最简单的东西

0@2x.png

好吧 那就最简单的 先搞成这样
表示先安装软件 http://www.dcloud.io/

好了 然后 创建2个APP项目 如图

1@2x.png

2@2x.png

然后运行2个项目

3@2x.png

然后 我要的是 例子的样子 我根据自己学过的OC 觉得先要有个Tab 所以在模板里找到 然后找到代码位置 后面直接拖到自己的项目里面 如下图


4@2x.png

问题来了 OC里面有个入口application那这个里面呢? 如下图可以设置入口

5@2x.png

记得ctrl+s保存 运行起来

7@2x.png

可以了但是觉得必须有个入口做配置然后跳转到UI界面所以1.先入口还原


6@2x.png

2.再把 index里面的代码改成

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>Hello world</title>
    <script type="text/javascript"> 
// 扩展API是否准备好,如果没有则监听“plusready"事件
if(window.plus){
    plusReady();
}else{ 
    document.addEventListener( "plusready", plusReady, false );
}
// 扩展API准备完成后要执行的操作
function plusReady(){
//  var ws = plus.webview.currentWebview(); //pw回车可输出plus.webview
    // ... code
    var url = "UI(模块)/tab.html"
    var taskList = plus.webview.create(url).show();
}
    </script> 
</head> 
<body>
</body>
</html>

别问我这代码什么意思我就copy网上的具体
https://segmentfault.com/a/1190000005340854
再运行

可以,那我要改图片 怎么改?


8@2x.png

那里句代码改成
<span class="mui-icon custom_home" style="height:5vw;background-image: url(../图片资源/custom_home.png);"></span>

点击事件?大小?间距?这些就要看后面的 html5语法啦

http://www.runoob.com/html/html-tutorial.html

tab好了下面开始其他样式啦

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容