项目整改成single page app总结

最新推荐文章于 2024-08-20 09:47:13 发布

weixin_34306446

最新推荐文章于 2024-08-20 09:47:13 发布

阅读量144

点赞数

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000004572331

本文介绍了一种将微信公众号项目转换为单页App的方法，使用mobilebone和iScroll插件来提升用户体验。mobilebone用于页面管理和导航，iScroll则负责处理滚动效果。文章详细讲解了mobilebone的页面结构及初始化过程，并分享了使用iScroll过程中遇到的问题及其解决方案。

前言

之前项目是嵌入在微信公众号中，页面访问很慢。想提升访问速度，有更好的，类似原生的体验最好的解决方法就是改为单页app.
单页app用到了mobilebone和iScroll插件。

mobilebone

mobilebone的结构是这样的：

body
  #page1.page.out[data-title="page1"]
  #page1.page.out[data-title="page2"]
  #page1.page.out[data-title="page3"]

每个page都要定义一个id,.page表示是个页面, .out表示隐藏，data-title可以定义好每个页面的title.在a标签中定义 <a href="#page1"> 就可以显示该页面。

更详细的资料有：
张鑫旭博客描述
 github地址
 api

iScroll

用iScroll遇到的问题都是通过看demo解决的,主要是结构的问题。所以要看demo里卖弄都很统一。wrapper的第一个子元素不能给定固定的高度。因为是单页app,所以在一个页面要创建多个iScroll对象。在每个页面初始化的时候要调用refresh方法。例如：

Mobilebone.callback = function(page_in, page_out) {
//            foot的active 状态处理
            var id_in = page_in.id, id_out = "";
            if(!id_in) return;
            var ele_link_in = null, ele_link_out = null;
            if(ele_link_in = document.querySelector(".footer a[href$="+id_in+"]")) {
                $(ele_link_in).parents("li").addClass("active");
            };
            if(page_out) {
                id_out = page_out.id;
                ele_link_out = id_out && document.querySelector(".footer a[href$="+ id_out +"]");
                $(ele_link_out).parents("li").removeClass("active");
            };

            iscroll.refresh();
        };

Mobilebone.callback是每个page显示初始化函数。在api中可以看到。
在tab切换的时候如果tab中的内容长度不一样也要记得调用refresh()方法。
http://qbaty.iteye.com/blog/1354380这个解释的api很详细。
iscroll github地址