zoukankan      html  css  js  c++  java
  • 浅尝MUI-序

    初探MUI

    MUI是一个HTML5前端框架,主要用于手机APP开发。附MUI官方文档。以下内容均围绕MUI进行讨论,欢迎骚扰^^

    浅谈MUI

    当然,学习一门东西之前肯定需要先了解他,知道这个东西是干什么的。简单的来说,MUI是一个轻量级的HTML5前端框架,用它可以写出轻量级的APP应用,但根据我自己探索出来的区间是:
    1.安卓手机:4.4以下卡顿比较明显(ps:极有可能是自身代码问题),安卓5.0能够流畅运行;
    2.苹果手机:测试机使用的苹果6,对于一般应用能够完美运行(ps:苹果5s仅使用chrome浏览器模拟测试过)。
    (注:以上数据仅为自己测试,测试数据一定不准确 ^^ 哈哈!)

    学习MUI

    无论是学习一门语言,还是学习一个框架,必然第一步是看官方文档,唯有熟悉官方文档后,才能谈使用。而我学习的步骤如下:
    1.全览MUI文档,对MUI框架有一个简单的认识,知道这个框架大概有哪些东西,一般用于什么情况,此为第一次浏览。
    2.熟悉文档后,打开Hbuilder,文件->新建->移动APP,在弹出框中选中Hello mui,并输入应用名称,此时会有一个项目出现在左侧栏,里面便是整个MUI框架的源码。
    (注:为什么这步写的这么详细呢,因为我发现很多小伙伴用了几个月时间的Hbuilder居然不知道这个编译器还可以写手机APP,Hbuilder最初不是和MUI配套发布的吗?表示不理解~)
    3.拿到源码后,先看一遍整个demo,很多文档上面提到的东西,在源码里面都有体现,当然,我学到这一步时,脑袋里也只有一点最初的概念,这时,我觉得就没必要再去深究了。因为代码这种东西必须要多敲,所以,自己新建一个项目,模仿一个APP来写页面。那么,重点来了,各种复制粘贴MUI源码里面的东西来修改吧,建议调试使用(chrome浏览器)。
    4.或许有人不理解为什么要模仿,但是我感觉模仿是最简单,也是最节省精力的一种方法,因为不用考虑布局本身,只需要把框架内的东西复制粘贴出来,似拼图一般,搭建一个属于自己的第一个APP界面,当然,在这个过程中肯定会遇到很多的问题,我的建议是自己去网上找资料并且看源码。网上资料的话可以去MUI的问答社区,感觉这个社区已经足够解决大部分问题了,如果还有不能解决的问题,那么我感觉大部分原因在自身(1.忘记引入相关文件 ),这个时候就需要更加耐心的检查代码。

    后记

    只要反复练习上面的第四点,我相信对MUI框架和HTML5在手机端的布局就会有一个明确的认识,这个时候再去浏览一遍官方文档和demo肯定会有新的收获。毕竟身为程序员,逃不掉的始终是敲代码,唯有多练习,才能更加熟悉,唯有动手,才能知道自己哪些知识点还不足,从而更加针对性的去补足。
    上面的内容,虽然对代码只字未提,但是我想无论是编程语言还是框架等都只是一个工具,在学习时,更多的是找到自己学习的节奏和方法,编程时,更多的是思路和想法。
    以上内容仅为自己的学习过程,欢迎大家取其精华,丢其糟粕,找到自己的学习状态。若对以上内容有不同简介或看法,欢迎一起探讨。
    企鹅号:1041415167 邮箱地址:zth1041415167@outlook.com

    附部分学习资料地址:

    1. forked from dcloudio DCloud开源项目集锦
    2. 问答社区
    3. forked from 小青年 github
    4. MUI框架视频教程地址

    (ps:第一次写这个,写的不好还请多多见谅!终于领悟一个道理,知道容易,想要很好的说出来真的好难- - 以上内容可能会不定期修改更新,下一篇笔记正式开始MUI的学习之旅,工欲善其事,必先利其器,下一节将会详细的讲解Hbuilder编译器的使用,希望有兴趣的小伙伴多多关注!)

  • 相关阅读:
    bzoj2595 / P4294 [WC2008]游览计划
    bzoj4698 / P2463 [SDOI2008]Sandy的卡片
    [bzoj3514]Codechef MARCH14 GERALD07加强版
    [bzoj2440][中山市选2011]完全平方数
    [bzoj2243][SDOI2011]染色
    [bzoj2589]Spoj 10707 Count on a tree II
    [bzoj1452] [JSOI2009]Count
    [bzoj2588][Spoj 10628] Count on a tree
    [bzoj2434][Noi2011]阿狸的打字机
    Codeforces Round #408(div.2)
  • 原文地址:https://www.cnblogs.com/zhangtinghang/p/8303220.html
Copyright © 2011-2022 走看看