跳至主要內容
h5打包
类别 说明
移动 App 使用安卓/iOS/前端技术开发移动端的应用程序,包含原生App混合App
原生 App 使用安卓的 JavaiOSOC 或者 Swift 语言开发出来的应用程序(ReactNative 可以让我们使用前端的技术开发原生AppVue+Weex,Angular+Ionic,Cordova)
混合 App 使用前端的技术开发出来的移动端应用程序
移动 web 移动端运行在浏览器的网页
webApp 一般也指移动web,webApp 也可以离线运行(同样也是运行在浏览器中,但是由于有缓存可以离线运行)

Emilia Zhen大约 2 分钟webApp
mui

项目开发模式类型

  • 混合性模式 前端写好静态页面后台去套模版即可
  • 前后分离模式 前端写好静态页面,前端套模版,完全依赖后台提供好的数据

数据获取展示

按照接口文档来写ajax请求数据,使用art-template模板引擎渲染数据

便携模版:

<script id="test" type="text/html">
  <h1>{{title}}</h1>
  <ul>
        //原生方法
        <% for(var i=0;i<title.length;i++){ %>
        <li data-id="<%=id%>">索引:<%=i+1%>:<%=title[i]%></li>
        <% } %>

     //简单方法
     {{each list as value i}}
     <li data-id="{{id}}">索引{{i+1}}:{{value}}</li>
     {{/each}}
  </ul>
</script>

Emilia Zhen大约 2 分钟webApp
bootstrap

兼容

  • 要兼容media query需要引入respond.js

  • 为了让ie浏览器运行最新的渲染模式需加入

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    

Emilia Zhen大约 2 分钟webApp
zepto

zepto 实现轮播图

/*使用zepto实现轮播图*/
$(function () {
  /*1.添加首尾两张图片*/
  /*2.重新设置图片盒子和宽度和图片的宽度*/
  /*3.开启定时器,实现自动轮播*/
  /*4.添加移动端的滑动事件,实现手动轮播*/
  /*5.添加过渡效果结束之后的监听*/
  /*获取轮播图元素*/
  var banner = $('.jd_banner')
  var bannerWidth = banner.width()
  console.log(bannerWidth)
  /*获取图片盒子*/
  var imgBox = banner.find('ul:first-of-type')
  /*获取点标记*/
  var indicators = banner.find('ul:eq(1)').find('li')
  /*获取首尾两张图片*/
  var first = imgBox.find('li:first-of-type')
  var last = imgBox.find('li:last-of-type')
  /*将两张图片添加到首尾位置 first.clone():将first复制一份*/
  imgBox.append(first.clone())
  last.clone().insertBefore(first)
  /*设置图片盒子的宽度*/
  var lis = imgBox.find('li')
  var count = lis.length
  imgBox.width(count * bannerWidth)
  /*设置li标签的宽度*/
  lis.each(function (index, value) {
    $(lis[index]).width(bannerWidth)
  })
  /*设置默认偏移*/
  imgBox.css('left', -bannerWidth)
  /*定义图片索引*/
  var index = 1
  /*图片轮播的动画效果*/
  var imgAnimation = function () {
    imgBox.animate({ left: -index * bannerWidth }, 200, 'ease-in-out', function () {
      //动画执行完毕之后的回调
      /*判断当前索引位置是否是最后一张或者第一张*/
      if (index == count - 1) {
        //最后张
        index = 1
        /*让它瞬间偏移到索引1的位置--非过渡*/
        imgBox.css('left', -index * bannerWidth)
      } else if (index == 0) {
        index = count - 2
        imgBox.css('left', -index * bannerWidth)
      }
      /*设置点标记*/
      indicators
        .removeClass('active')
        .eq(index - 1)
        .addClass('active')
    })
  }
  /*开启定时器*/
  var timerId = setInterval(function () {
    index++
    /*开启过渡*/
    /*设置定位*/
    /*在zepto中直接使用animate函数来实现
     * 1.需要添加动画效果的样式--对象
     * 2.动画的耗时
     * 3.动画的速度函数 animation-timing-function
     * 4.当前动画执行完毕之后的回调*/
    imgAnimation()
  }, 2000)
  /*添加滑动事件*/
  /*左滑动*/
  /*在谷歌浏览器的模拟器中,无法正确的触发swipe相关事件,但是可以触发tap事件*/
  imgBox.on('swipeLeft', function () {
    clearInterval(timerId)
    index++
    imgAnimation()
  })
  /*右滑动*/
  imgBox.on('swipeRight', function () {
    clearInterval(timerId)
    index--
    imgAnimation()
  })
})
/*使用zepto实现轮播图*/
$(function () {
  /*1.添加首尾两张图片*/
  /*2.重新设置图片盒子和宽度和图片的宽度*/
  /*3.开启定时器,实现自动轮播*/
  /*4.添加移动端的滑动事件,实现手动轮播*/
  /*5.添加过渡效果结束之后的监听*/
  /*获取轮播图元素*/
  var banner = $('.jd_banner')
  var bannerWidth = banner.width()
  console.log(bannerWidth)
  /*获取图片盒子*/
  var imgBox = banner.find('ul:first-of-type')
  /*获取点标记*/
  var indicators = banner.find('ul:eq(1)').find('li')
  /*获取首尾两张图片*/
  var first = imgBox.find('li:first-of-type')
  var last = imgBox.find('li:last-of-type')
  /*将两张图片添加到首尾位置 first.clone():将first复制一份*/
  imgBox.append(first.clone())
  last.clone().insertBefore(first)
  /*设置图片盒子的宽度*/
  var lis = imgBox.find('li')
  var count = lis.length
  imgBox.width(count * bannerWidth)
  /*设置li标签的宽度*/
  lis.each(function (index, value) {
    $(lis[index]).width(bannerWidth)
  })
  /*设置默认偏移*/
  imgBox.css('left', -bannerWidth)
  /*定义图片索引*/
  var index = 1
  /*图片轮播的动画效果*/
  var imgAnimation = function () {
    imgBox.animate({ left: -index * bannerWidth }, 200, 'ease-in-out', function () {
      //动画执行完毕之后的回调
      /*判断当前索引位置是否是最后一张或者第一张*/
      if (index == count - 1) {
        //最后张
        index = 1
        /*让它瞬间偏移到索引1的位置--非过渡*/
        imgBox.css('left', -index * bannerWidth)
      } else if (index == 0) {
        index = count - 2
        imgBox.css('left', -index * bannerWidth)
      }
      /*设置点标记*/
      indicators
        .removeClass('active')
        .eq(index - 1)
        .addClass('active')
    })
  }
  /*开启定时器*/
  var timerId = setInterval(function () {
    index++
    /*开启过渡*/
    /*设置定位*/
    /*在zepto中直接使用animate函数来实现
     * 1.需要添加动画效果的样式--对象
     * 2.动画的耗时
     * 3.动画的速度函数 animation-timing-function
     * 4.当前动画执行完毕之后的回调*/
    imgAnimation()
  }, 2000)
  /*添加滑动事件*/
  /*左滑动*/
  /*在谷歌浏览器的模拟器中,无法正确的触发swipe相关事件,但是可以触发tap事件*/
  imgBox.on('swipeLeft', function () {
    clearInterval(timerId)
    index++
    imgAnimation()
  })
  /*右滑动*/
  imgBox.on('swipeRight', function () {
    clearInterval(timerId)
    index--
    imgAnimation()
  })
})

Emilia Zhen大约 4 分钟webApp
web移动端

调试

  • 远程调试
  • 模拟调试 网页中打开开发者模式
  • 真机调试

视口

pc端的视口大小就是浏览器的大小 width:100% 流式布局/百分比布局 pc端的视口有一个默认的尺寸 980px pc的页面在移动端会被缩放

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

Emilia Zhen大约 5 分钟webApp