项目-开发手机app

最新推荐文章于 2023-06-04 00:18:15 发布

weixin_30481087

最新推荐文章于 2023-06-04 00:18:15 发布

阅读量102

点赞数

文章标签： ui 前端 ViewUI

原文链接：http://www.cnblogs.com/sunxiuwen/p/10040823.html

版权

一. 安装Hbuilder，和夜神安卓模拟器

注：夜神模拟器，如过windows中安装了hyper-v，需要卸载，不然会死机

二. Hbuilder简介

官网：http://www.dcloud.io/

文档：http://dev.dcloud.net.cn/mui/

1. 创建移动app ： http://dev.dcloud.net.cn/mui/getting-started/

2. 页面框架架构

2.1 、建立一个html的空模板，将内容全部删掉，通过mdo快速创建页面

2.2、一定要指定body，不然容易将主页index覆盖，注所有的页面都是入口文件index.html的子页面

代码块快捷键：http://dev.dcloud.net.cn/mui/snippet/

　　mdo 生成html框架html

　　mhe 生成页首标题header

　　mbo　生成主体body

　　mta　生成底部

2.3. 创建子页面，一般都是定义好入口文件index.html的底部，然后让子页面在主页显示，如下例，让home.html页面，在index.html中显示！

官网模板：http://dev.dcloud.net.cn/mui/window/#pageinit

mui.init({
    subpages:[{
      url:your-subpage-url,//子页面HTML地址，支持本地地址和网络地址
      id:your-subpage-id,//子页面标志
      styles:{
        top:subpage-top-position,//子页面顶部位置
        bottom:subpage-bottom-position,//子页面底部位置
        width:subpage-width,//子页面宽度，默认为100%
        height:subpage-height,//子页面高度，默认为100%
        ......
      },
      extras:{}//额外扩展参数
    }]
  });

应用：

2.4. 打开新页面，如点击按键，打开登录页面

官网模板打开新页面：http://dev.dcloud.net.cn/mui/window/#openwindow

mui.openWindow({
    url:new-page-url,
    id:new-page-id,
    styles:{
      top:newpage-top-position,//新页面顶部位置
      bottom:newage-bottom-position,//新页面底部位置
      width:newpage-width,//新页面宽度，默认为100%
      height:newpage-height,//新页面高度，默认为100%
      ......
    },

2.5、页面间传值：http://ask.dcloud.net.cn/article/63，用的也是mui.openWindow函数，用的是参数extras

需求： signin.html 向 user_info.html页面发送消息

发送方通过mui.openWindow函数中的extras传递