avalon如安在挪动端运用

2019年8月31日 197次阅读 来源: 司徒正美

挪动端与PC端最大的区别是事宜体系不一样，而且挪动端上的浏览器对新API支撑比较好。由于我们可以用avalon.modern.js作为中心，加上挪动事宜构建avalon.mobile.

avalon2在这个目次下供应了很多事宜，并非我们都邑用到的。因而遴选用到的模块加上就行。

比方我们用到swipe事宜。

点击下载zip，然后翻开src 文件夹，建一个avalon.mobile.js

var avalon = require('../dist/avalon')
require('../src/gesture/swipe')

module.exports = avalon

然后翻开webpack.config.js

entry设置项改成

entry: {
        avalon: './src/avalon', //我们开辟时的进口文件
        'avalon.modern': './src/avalon.modern',
        'avalon.test': './src/avalon.test',
        'avalon.next': './src/avalon.next',
        'avalon.mobile': './src/avalon.mobile'
    },

实行webpack敕令就可以胜利打包

perf目次下竖立一个html测试文件

<!DOCTYPE html>
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="../dist/avalon.mobile.js"></script>
        <script>
            avalon.define({
                $id: 'test',
                fn: function(e){
                    console.log(e)
                }
            })
        </script>
        <style>
            .aaa{
                width:200px;
                height:200px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div ms-controller="test" ms-on-swipe="@fn" class="aaa">TODO write content</div>
    </body>
</html>

注重挪动端的事宜都只能以ms-on-xxx 或:on-xxx体式格局绑定。 事宜对象里应该有人人想要的属性。

《avalon如安在挪动端运用》

趁便一提，avalon在挪动端最大两个项目是吉野家与银联钱包APP，都上亿级别的东西。

    原文作者：司徒正美
    原文地址: https://segmentfault.com/a/1190000006012676
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞