HBuilder+移动APP开发实例

mui:

官网:http://dcloudio.github.io/mui/

说明:一般要把官网内容通读一遍,这是开发的基础

开始

    1、新建项目

    在首页点击新建移动App,如下:

     

      或者在项目管理器内右键新建,或者快捷键ctrl+n+a

      

    2、选择模版

    这里选择mui项目,会自动引入mui的js和css,如下:

    

    

   3、文件结构

   默认有以下几个文件夹:css,fonts,js,如下

   

   

  基础开发

   代码如下:

   

复制代码
 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
 6     <title></title>
 7     <script src="js/mui.min.js"></script>
 8     <link href="css/mui.min.css" rel="stylesheet"/>
 9     <script type="text/javascript" charset="utf-8">
10           mui.init();
11     </script>
12 </head>
13 <body>
14     <header class="mui-bar mui-bar-nav">
15         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
16         <h1 class="mui-title">我的标题</h1>
17     </header>
18     <div class="mui-content">    
19         <ul class="mui-table-view" id="my_list">
20             <li class="mui-table-view-cell">
21                 <div class="mui-slider-right mui-disabled">
22                     <a class="mui-btn mui-btn-red">删除</a>
23                 </div>
24                 <div class="mui-slider-handle">
25                     待办事项1
26                 </div>
27             </li>
28             <li class="mui-table-view-cell">
29                 <div class="mui-slider-right mui-disabled">
30                     <a class="mui-btn mui-btn-red">删除</a>
31                 </div>
32                 <div class="mui-slider-handle">
33                     待办事项2
34                 </div>
35             </li>                           
36         </ul>
37     </div>
38 </body>
39 </html>
View Code
复制代码

 

  运行:

  直接连接真机运行(插入USB调试即可:)

  选择运行——手机运行——在xx设备上运行

  或者使用快捷键ctrl+r

  

  运行结果:

  

 这就是简单的应用了!!!

 

打包

dcloud证书打包

  选择发行——App打包——选择Android以及dcloud公用证书,如下

  

  

参数配置

可能有时候会提示参数配置错误,这是你需要打开项目下manifest.json文件,并去掉第三方插件,如下:

   

   

等待

返回上一步的发行打包,点击打包后会提示你已经到云端打包,你只需要等待了,

一小会之后就打包好了,这时你就可以把apk拷贝到自己手机使用了,

 

相关的app免费打包推荐:应用之星

 

posted on   木乃伊人  阅读(44618)  评论(1编辑  收藏  举报

编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
< 2025年2月 >
26 27 28 29 30 31 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 1
2 3 4 5 6 7 8

导航

统计

点击右上角即可分享
微信分享提示