SUI Mobile 开发总结

框架介绍

• 自适应功能

  rem

  ，默认在

  375px

  的宽度上设置了

  font-size: 20px

  ，所以

  1rem=20px

  ；在小于这个宽度时，不会缩放；在大于这个宽度时，设置了媒体查询宽度，适当的放大了一点。
• 可替换的自适应功能

  rem

  ，通过脚本控制

  font-size

  ，实现动态的缩放，建议缩放的范围控制在屏幕宽度为

  320px-750px

  之间，因为手机的屏幕最小宽度为

  320px

  ，而设计图一般以

  750px

  为宽度；为了配合框架的设置，在

  375px

  时设置了

  font-size: 20px

  ，所以

  750px

  时应该为

  font-size: 40px

  ；在写页面代码时，设计图如果宽度为

  750px

  ，那

  1rem==40px

  ，以下是参考的脚本代码：

// 宽度限制在 320-750 之间；宽度 750 时，基准像素是 40
!function(n){
    var e=n.document,
        t=e.documentElement,
        i=750,
        d=i/40,
        o="orientationchange"in n?"orientationchange":"resize",
        a=function(){
            var n=t.clientWidth||320;n>750&&(n=750);n<320&&(n=320);
            $('html').css('font-size',n/d+'px!important');
        };
        e.addEventListener&&n.addEventListener(o,a,!1),e.addEventListener("DOMContentLoaded",a,!1))
}(window);
      
           

• 内置的路由功能有两种，一种是在当前的文件里面查找

  class="page"

  的模块，这种是作为一个页面显示的，类似于单页应用，不过会造成代码太多，其实有很多单页应用的框架可以选择，比如：

  vue

  全家桶，跨多个平台的框架

  uni-app

  ；另外一种是通过异步调用其它页面代码到当前页面中，这样很容易造成代码冲突，这种情况可以改成服务器控制路由比较方便；所以建议禁用内置的路由功能，否则在写路由地址时要多写一些参数控制，禁用路由的配置必须在框架脚本之前写入，参考代码如下：

// 禁用内置的 Router 功能
$.config = {
  router: false  
}
      
           

• 框架初始化，必须在框架脚本之后执行，初始化调用后，会初始化页面的组件，然后触发框架的自定义事件，如果自定义事件存在的话，以下是参考的代码：

// 确保在所有的 pageInit 事件绑定之后再调用 $.init() 方法
$.init();
      
           

• 小图标的引入，框架自带的小图标很少，建议引入自家开发的图标库

  iconfont

  ，这个和框架一样都是阿里开发的，而且可以选择官方或者第三方提供的小图标设计，然后加入到自己的图标项目里，可以生成在线的文件引用，样式文件或者脚本文件，还可以配置使用的命名空间，避免和其它的小图标库冲突，以下是参考的代码：

<!-- 图标项目生成的样式文件 -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_1307985_1vyf818fyei.css">

<!-- 通过类名使用，命名空间是 iconhui ，类名 active 修改了图标的颜色 -->
<span class="iconhui iconhui-check-square-fill active"></span>
<span class="iconhui iconhui-check-square-fill"></span>