外卖案例_第一讲_搭建页面框架


1 第一讲 搭建页面框架
1.1 概要
外卖案例_第一讲_搭建页面框架_第1张图片
1.2 新建页面
外卖案例_第一讲_搭建页面框架_第2张图片
1.3 制作上下两端固定的页面
外卖案例_第一讲_搭建页面框架_第3张图片
1.4 在页面上端放标题栏
外卖案例_第一讲_搭建页面框架_第4张图片
1.5 在页面下端放导航栏
外卖案例_第一讲_搭建页面框架_第5张图片
外卖案例_第一讲_搭建页面框架_第6张图片
外卖案例_第一讲_搭建页面框架_第7张图片
外卖案例_第一讲_搭建页面框架_第8张图片

风格 = x-card 卡片风格,表示 中间 有条横线。。。。
排列方式 可以把按钮 横向 撑满屏幕。。。。
外卖案例_第一讲_搭建页面框架_第9张图片

在按钮上 增加相应图片和文字。。。。
外卖案例_第一讲_搭建页面框架_第10张图片
上下排列 可以调整 class属性。。。图标位置。。。
外卖案例_第一讲_搭建页面框架_第11张图片

1.6 在页面中部放多个内容页
外卖案例_第一讲_搭建页面框架_第12张图片
外卖案例_第一讲_搭建页面框架_第13张图片
外卖案例_第一讲_搭建页面框架_第14张图片

按钮关联Content
外卖案例_第一讲_搭建页面框架_第15张图片

1.7 打包成App
外卖案例_第一讲_搭建页面框架_第16张图片

模式3 有利于本地调试。。。。
外卖案例_第一讲_搭建页面框架_第17张图片

注: waimai 目录不打勾,表示 不把目录打包到 app里去。。。
外卖案例_第一讲_搭建页面框架_第18张图片
外卖案例_第一讲_搭建页面框架_第19张图片

外卖案例_第一讲_搭建页面框架_第20张图片
外卖案例_第一讲_搭建页面框架_第21张图片
外卖案例_第一讲_搭建页面框架_第22张图片
外卖案例_第一讲_搭建页面框架_第23张图片
外卖案例_第一讲_搭建页面框架_第24张图片

创建的结果 是在 Native目录 下 多了个 waimai 目录。。。。
外卖案例_第一讲_搭建页面框架_第25张图片
外卖案例_第一讲_搭建页面框架_第26张图片

生成的App 就可以用 手机 进行 二维码扫描。。。
外卖案例_第一讲_搭建页面框架_第27张图片
外卖案例_第一讲_搭建页面框架_第28张图片

推荐使用 UC浏览器 里头的 扫一扫。。。
外卖案例_第一讲_搭建页面框架_第29张图片

这里 使用 夜神模拟器 来测试。。。。
外卖案例_第一讲_搭建页面框架_第30张图片

你可能感兴趣的:(Wex5)