SUI Mobile 开发总结

向右看齐 2021-11-23 08:31 233阅读 0赞

## 框架介绍 ##

*  自适应功能 `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">
    
    
    <span class="iconhui iconhui-check-square-fill active"></span>
    <span class="iconhui iconhui-check-square-fill"></span>