APP开发

随着需求的不断更新，与对技术的不断探索，计划在20天之内与团队协作开发一款移动端的app

3.25 会议记录

开发采用HBuilderX（普通版即可）
框架：mui
数据库：sqlite
协同开发：gitee
框架学习时间：3天

下次会议时间：3.27（周日）晚
统一进度，分配任务，着手开发

备用方案：
待定接口：flask/django

miu框架介绍

最接近原生APP体验的高性能前端框架。
MUI是一套前端框架，由DCLOUD公司研发而成，提供大量H5和js语言组成的组件，大大提高了开发效率，可以用于开发web端应用、web APP、混合开发等应用。利用MUI框架，用户在使用APP时可以得到接近原生APP的操作体验。

头部/搜索框：

创建快捷键：头部 mhe
创建搜索框：搜索框 min

<div class="mui-input-row mui-pull-left mui-search"><input type="text" class="mui-input-clear" placeholder="请输入搜索内容" style="background:white;" onfocus="this.style.color='gray'"></div><span class="mui-pull-right">你好</span>

身体>轮播图

创建轮播图：msl

<div class="mui-slider-group mui-slider-loop"><!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) --><div class="mui-slider-item mui-slider-item-duplicate">
......

轮播图设置数据自动跳转：

写一个js：以内嵌js为例。

 <script type="text/javascript">mui.init();//获取当前文档轮播图组件对象var sliderobj = mui("#slider");sliderobj.slider({interval:1000});</script>

目前的样式，每过一秒就会自动切换到下一张图片。

九宫格

九宫格 mgr：

<span class="mui-icon"><svg class="icon" aria-hidden="ture"><use xlink:href="#icon-jifen"></use></svg></span><div class="mui-media-body gr_fort">积分</div>

图标的样式可以选择阿里的矢量库，嵌入代码。
阿里图标矢量库：

https://www.iconfont.cn/

图片九宫格

             <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#"><img src="img/guo1.jpg" width="100%" /><p>国家主席</p></a></li>

图文列表

图文列表 mli

         <div id="arqwasd"><span style="background: red;">&nbsp;&nbsp;</span><span class="xinwen">题库</span><span class="more">更多>></span></div>

底部选项卡

底部选项卡 mta

<a class="mui-tab-item mui-active"><span class="mui-icon mui-icon-home"></span><span class="mui-tab-label">首页</span></a>

按钮选择器

<script type="text/javascript">mui.init()// 底部选项卡切换mui.plusReady(function () {//定义一个容器，存储底部选项卡关联的界面var pages = ["index_dome.html","xiao1.html","xiao2.html","xiao3.html"];//获取当前窗口对象var ws= plus.webview.currentWebview();//设置页面窗口样式var pageStyle={top:"0px",bottom:"50px"};//循环数据，为每个页面创建webview窗口对象。for (var i=0;i<pages.length;i++){//将每次循环体提取的页面创建为view窗口；var item =plus.webview.create(pages[i],pages[i],pageStyle);//将每个webviem窗口对象追加ws.append(item);}//设置默认打开窗口plus.webview.show(pages[0]);//选项卡事件监听mui(".mui-bar-tab").on("tap","a",function(){//获取被点击a标签的href属性值var href = this.getAttribute("href");//展示对应的页面plus.webview.show(href);});});</script>

手机模拟器

调试直接运行到手机模拟器，官方文档的Android Studio挺难调试的，我们可以用 mumu模拟器端口号7555 。

目前样式：

样式：

mui框架从0到1【webapp开发教程】相关推荐

视频教程-spring+springMVC+mybatis（ssm框架）在线考试系统实战开发教程-Java
spring+springMVC+mybatis(ssm框架)在线考试系统实战开发教程软件工程硕士毕业,目前就职于上海电信研究院,有三年Java开发经验,五年PHP开发经验. 李礼强 ¥368.00 ...
光影在线webapp开发教程2 vue-cli集成mui
做前端做久了什么项目首先就是想到用什么框架.webapp的ui框架也是很多.mui是比较小巧灵活而又简单的app ui框架,本来以为在vue中集成mui框架是很轻松的事情,结果集成中发现了不少问题,这 ...
mui框架手机端APP开发
最近项目繁忙一直没有时间回顾,此次梳理一下利用mui框架进行手机端app的开发的具体操作. 首先介绍一下我们需要用到的轻量级开发工具HBuilder,HBuilder最主要的优点就是快 ...
飞桨框架2.0正式版重磅发布，一次端到端的“基础设施”革新
在人工智能时代,深度学习框架下接芯片,上承各种应用,是"智能时代的操作系统".近期,我国首个自主研发.功能完备.开源开放的产业级深度学习框架飞桨发布了2.0正式版,实现了一次跨时代 ...
Android原生集成MUI框架进行混合开发
开发APP中我们经常进行原生结合H5进行混合开发,下面将进行详细讲解Android原生集成MUI框架进行混合开发(项目Demo如下,有需要的可以下载查看),下一篇讲述,Android原生和MUI(也适 ...
连接真机开发安卓(Android)移动app MUI框架完善购物车订单等页面——混合式开发（五）
https://blog.csdn.net/hanhanwanghaha宝藏女孩欢迎您的关注! 欢迎关注微信公众号:宝藏女孩的成长日记如有转载,请注明出处(如不注明,盗者必究) 这周真的太忙了,就 ...
php mui.picker,www MUI框架里边有很多例子教你如何使用开发手机界面 WEB(ASP,PHP,...) 251万源代码下载- www.pudn.com...
文件名称: www下载收藏√ [ 5 4 3 2 1 ] 开发工具: HTML 文件大小: 1362 KB 上传时间: 2016-01-19 下载次数: 0 提供者: ck 详细说明 ...
MUI框架开发HTML5手机APP(一)--搭建第一个手机APP
前言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用HTML5开发手机APP,而随着手机硬件设备配置的不断提升,各种开发框架的不断优化,也使着H5开发的 ...
MUI框架开发HTML5手机APP(一)--搭建第一个手机APP(转)
出处:http://www.cnblogs.com/jerehedu/p/7832808.html 前言 JRedu 随着HTML5的不断发展,移动开发成为主流趋势!越来越多的公司开始选择使用H ...
制作拼多多app网页css,5+App下Mui框架开发仿拼多多App
5+App下Mui框架开发仿拼多多App 一.整体项目介绍说明二.页面展示三.页面实现主要技术和难点四.关键代码讲解五.源码资源一.整体项目介绍说明 "拼多多"App+移 ...

mui框架从0到1【webapp开发教程】

文章目录