{"id":20408276,"url":"https://github.com/hanfengsan/easyweex","last_synced_at":"2025-06-25T22:38:45.894Z","repository":{"id":98419180,"uuid":"148142368","full_name":"hanFengSan/EasyWeex","owner":"hanFengSan","description":"A series of simple tools for Weex","archived":false,"fork":false,"pushed_at":"2018-10-19T13:27:20.000Z","size":134,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-15T13:06:49.039Z","etag":null,"topics":["weex"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hanFengSan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-09-10T11:02:54.000Z","updated_at":"2022-04-12T18:43:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"8b9e36a9-4cb3-48d8-ba2d-55ff2c3d564a","html_url":"https://github.com/hanFengSan/EasyWeex","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanFengSan%2FEasyWeex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanFengSan%2FEasyWeex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanFengSan%2FEasyWeex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hanFengSan%2FEasyWeex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hanFengSan","download_url":"https://codeload.github.com/hanFengSan/EasyWeex/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241953013,"owners_count":20048111,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["weex"],"created_at":"2024-11-15T05:29:38.875Z","updated_at":"2025-03-05T02:29:20.225Z","avatar_url":"https://github.com/hanFengSan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# EasyWeex\n一个简单的Weex工具库, 提供一些简单的功能封装.\n\n## Feature\n* 提供rem, dp和px三种单位\n* 提供类似Rect的样式编写体验, 可在方便样式内进行各种单位计算\n* I18n实现\n* 提供一些简单的style支持, 比如border, margin, padding的简写支持\n* 提供一些weex api的便捷封装\n* 便捷的存储实现\n\n## 使用\n安装:\n```JavaScript\n# bash\nnpm install https://github.com/hanFengSan/EasyWeex.git\n# vue文件\nimport EasyWeex from 'EasyWeex';\nexport default {\n    mixins: [EasyWeex()]\n}\n\n```\n\n## 样式编写示例\n```Vue\n\u003ctemplate\u003e\n    \u003cdiv :style=\"styles.container\"\u003e\n        \u003ctext :style=\"styles.text\"\u003e\u003c/text\u003e\n        \u003ctext :style=\"styles.colorText('red')\"\u003e\u003c/text\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport EasyWeex from 'EasyWeex';\n\nexport default {\n    mixins: [EasyWeex()],\n    computed: {\n        styleSheet: {\n            return {\n                container: {\n                    width: '100dp',\n                    height: '100dp',\n                    background: 'red'\n                },\n                text: {\n                    color: 'red'\n                },\n                colorText: (color) =\u003e ({\n                    color\n                })\n            }\n        }\n    }\n}\n\u003c/script\u003e\n\n```\n\n## 样式使用说明\n在`computed`属性中声明styleSheet变量, 并return一个样式表即可在template中使用styles变量去索引对应的样式项.\nEasyWeex会实时将styleSheet里声明的样式表进行运算, 生成可用的style, 注入到styles中供使用.\n### 样式名称格式\n样式名称的命名方式都为小骆驼峰式, EasyWeex在转换样式时, 会将其转换为kebab-case格式.\n例:\n```\nmargin-top =\u003e marginTop\njustify-content =\u003e justifyContent\n```\n### 样式尺寸单位\nEasyWeex支持三种尺寸单位, px/rem/dp.\n* rem的参考iphone6的750px, 即750rem为全屏宽度.\n* dp为逻辑像素, 对应ios上的pt和android上的dp.\n* px为实际像素.\nEasyWeex在底层会将三种单位给转为dp.\n**注意: 字体的尺寸fontSize在android上无法支持小数, 由于EasyWeex底层是转化为dp, 所以实际上设置的fontSize的对应的dp值的四舍五入值**\n### 方便样式计算的全局变量\n以下变量在vue文件中, 是直接注入到this变量中, 可以直接使用:\n```JavaScript\nthis.SCREEN_WIDTH_DP // 屏幕宽度, dp单位, 例:'365dp'\nthis.SCREEN_WIDTH_PX // 屏幕宽度, px单位, 例: '750px'\nthis.global.$viewportSize.height // weex渲染面积的高度, dp单位. 在渲染出weex后获取, 存在延迟, 但这个是vue watch了的值, 可以直接用于computed中, 获取后自动刷新.\nthis.global.$viewportSize.width // weex渲染面积的宽度, dp单位, 异步, 同this.global.$viewportSize.height\n```\n 在js文件中需要使用的话, 需要import:\n ```JavaScript\nimport { Dimens } from 'EasyWeex';\n\nconsole.log(this.SCREEN_WIDTH_DP);\n ```\n ### 尺寸运算\n `this.calc`提供类似css3中calc的计算能力, 通过编写表达式, 数值更新时, 自动变化. 支持简单的四则运算和单位混合运算, 示例:\n ```JavaScript\nstyleSheet: {\n    return {\n        container: {\n            width: this.calc(`${this.SCREEN_WIDTH_DP} / 2`), // 取屏幕的一半宽度\n            height: this.calc(`${this.SCREEN_WIDTH_DP} + 200rem - (40px * 2 + 10dp)`), // 单位混合运算\n            background: 'red'\n        },\n        text: {\n            color: 'red'\n        }\n    }\n}\n ```\n### 字面量声明\n通过`styles.$of`方法, 实现字面量声明EasyWeex的样式.\n```Vue\n\u003ctemplate\u003e\n    \u003cdiv :style=\"styles.$of({ marginTop: '200rem' })\"\u003e\u003c/div\u003e\n\u003c/template\u003e\n```\n\n### 样式方法\n除了定义Object外, 还可以定义Function, 通过传参, 达到动态调整样式的功能. 比如在一个列表项的渲染中需要通过index来判断具体样式时, 这个就很有用, 例如通过index来判断标题颜色:\n```Vue\n\u003ctemplate\u003e\n    \u003cdiv :style=\"styles.list\" v-for=\"(item, index) for array\"\u003e\n        \u003ctext :style=\"styles.colorTitle(index)\"\u003e{{ item.title }}\u003c/text\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\nimport EasyWeex from 'EasyWeex';\n\nexport default {\n    mixins: [EasyWeex()],\n    computed: {\n        styleSheet: {\n            return {\n                colorTitle: (index) =\u003e ({\n                    color: index === 0 ? 'red' : 'green'\n                })\n            }\n        }\n    }\n}\n\u003c/script\u003e\n\n```\n\n### 样式混合\n多种样式, 可通过`styles.$merge`进行混合:\n```Vue\n\u003ctemplate\u003e\n    \u003cdiv :style=\"styles.$merge(styles.test, styles.test2)\"\u003e\u003c/div\u003e // 混合test和test2的样式\n\u003c/template\u003e\n```\n### 支持的样式简写\n* 支持background-color简写为background\n* 支持margin, padding的简写, 例: \n```JavaScript\nstyleSheet: {\n    return {\n        container: {\n            margin: '10dp',\n            margin: '10dp 10dp',\n            margin: '10dp 10dp 10dp 10dp'\n        }\n    }\n}\n```\n* 支持border的简写, 例:\n```JavaScript\nstyleSheet: {\n    return {\n        container: {\n            border: '1px solid #ccc',\n            borderLeft: '1px solid #ccc',\n            borderRight: '1px solid #ccc',\n            borderTop: '1px solid #ccc',\n            borderBottom: '1px solid #ccc'\n        }\n    }\n}\n```\n\n## 多语言支持\nEasyWeex内置了多语言支持, 且支持模板替换, 使用示例:\n```Vue\n// template中\n\u003ctext\u003e{{ $t('MY_LESSONS') }}\u003c/test\u003e\n\u003ctext\u003e{{ $t('LESSON_COUNT', { num: 4 }) }}\u003c/test\u003e\n// js中\nthis.$t('MY_LESSONS');\nthis.$t('LESSON_COUNT', { num: 4 });\n```\n### 多语言文件\n使用EasyWeex的多语言支持, 首先得编写一个js多语言文件:\n```JavaScript\n// 示例js文件:\nexport default {\n    $default: 'en', // 默认的语言种类key\n    $map: {\n        // 语言映射, 传进来的语言种类昵称要映射到哪个简写key\n        Chinese: 'zh',\n        Chinese_yy: 'zh',\n        English: 'en',\n        Japanese: 'jp',\n        Turkish: 'tr',\n        Portuguese: 'pt'\n    },\n    MY_LESSONS: { // key名称\n        en: 'My lesson',\n        zh: '我的课程'\n    },\n    LESSON_COUNT: { \n        en: '{num} lessons', // {num}可以被传进来的{ num: 4 }替换, 若是没有可替换的配置, 默认删除.\n        zh: '共{num}节课'\n    },\n}\n```\nEasyWeex中引入:\n\n```JavaScript\n// vue文件\nimport EasyWeex from 'EasyWeex';\nimport langFile from 'lang.js'; // 编写的js多语言文件\nexport default {\n    mixins: [EasyWeex({ langObj: langFile, lang: 'en' })] // 启用english的多语言翻译\n}\n// 如果要使用的语言种类, 需要异步获取, 可以编写getLang方法, 提供一个promise来取语言种类:\nexport default {\n    mixins: [EasyWeex({ langObj: langFile, getLang: getLang })] // getLang是一个方法, 返回一个promise, promise会resolve一个语言种类字符串\n}\n// getLang比lang的优先级高, 两者共存时, 使用getLang\n```\n\n## storage优化\nEasyWeex提供Promise化的storage操作:\nvue文件下:\n```JavaScript\nawait this.saveItem('key', value); // value值不必是字符串, EasyWeex会序列化Object\nlet value = await this.loadItem('key'); // value值会尝试JSON.parse, 如果可以JSON.parse, 则会返回对应的结果\n```\nJS文件下:\n```JavaScript\nimport { Storage } from 'EasyWeex';\nawait this.saveItem('key', value); // value值不必是字符串, EasyWeex会序列化Object\nlet value = await this.loadItem('key'); // value值会尝试JSON.parse, 如果可以JSON.parse, 则会返回对应的结果\n```\n注意, loadItem时, 如果不存在该key, 会返回undefined, 而不是错误.\n\n## 工具类\n工具类下面有两个方法:\n1. throttle方法\n函数式节流的实现, 默认的节流间隔是300ms\nthrottle(fn)\n```JavaScript\nvue文件:\nimport { default as EasyWeex, Util } from 'EasyWeex';\nmethods: {\n    handleClick: Util.throttle(function (param) {\n        this.handleParam(parm); // 直接写function可以提供有效的作用域支持, 箭头函数的作用域会混乱.\n    }),\n    handleClick2: Util.throttle(function (param) {\n        this.handleParam(parm);\n    }, 500) // 限流间隔, (ms)\n}\nJS文件: \nimport { Util } from 'EasyWeex';\nUtil.throttle(...);\n```\n2. sleep方法\n提供线程sleep的模拟, 本质上是timeout的语法糖, 最好是在async/await中编写.\n```JavaScript\nvue文件:\nimport { default as EasyWeex, Util } from 'EasyWeex';\nmethods: {\n    async test() {\n        await Util.sleep(3000); // 先沉睡3000ms再执行下面的语句\n        do some things...\n    }\n}\nJS文件:\nimport { Util } from 'EazyWeex';\nasync test() {\n    await Util.sleep(3000); // 先沉睡3000ms再执行下面的语句\n    do some things...\n}\n```\n\n## 便捷的weex API封装以及支持\n### alert方法\n弹窗提示消息\nalert(info: String|Object, okTitle: String, duration: Number)\ninfo为字符串或Object格式, 如果是Object, 则会自动序列化, 并添加一些回车字符改善显示效果.\n返回值: void\n```JavaScript\n// vue文件\nthis.alert('info'); // 弹窗提示消息\nthis.alert('info', 'OK'); 确认按钮的文本为OK\nthis.alert('info', 'OK', 3000); // 弹窗提示消息, 持续3000ms\n// JS文件\nimport { WeeAPI } from 'EasyWeex';\nWeexAPI.alert(...);\n```\n### toast方法\ntoast提示消息\ntoast(info: String|Object, duration: Number)\ninfo为字符串或Object格式, 如果是Object, 则会自动序列化, 并添加一些回车字符改善显示效果.\n返回值: void\n```JavaScript\n// Vue文件\nthis.toast('info'); // toast提示消息\nthis.toast('info', 3000); // toast提示消息, 持续3000ms\n// JS文件\nimport { WeeAPI } from 'EasyWeex';\nWeexAPI.toast(...);\n```\n### getComponentRect方法\n获取组件的尺寸\ngetComponentRect(ref)\n返回值: Promise\u003cObject\u003e, Object为{ height, width }. 纯数值, 对应dp单位.\n```JavaScript\n// Vue文件\nawait this.getComponentRect方法(this.$refs.container);\n```\n### noWeb方法\n非Web平台执行方法.\nnoWeb(fn)\n返回值: Void\n```JavaScript\n// vue文件\n\nthis.noWeb(() =\u003e {\n    ... // 非Web平台则执行\n});\n// JS文件\nimport { WeeAPI } from 'EasyWeex';\nWeeAPI.noWeb(() =\u003e {\n    ... // 非Web平台则执行\n});\n```\n### inWeb/inAndroid/inIOS方法\n对应平台执行方法.\ninWeb(fn)/inAndroid(fn)/inIOS(fn)\n返回值: Void\n```JavaScript\n// vue文件\nthis.noWeb(() =\u003e {\n    ... // 非Web平台则执行\n});\n// JS文件\nimport { WeeAPI } from 'EasyWeex';\nWeeAPI.inWeb(() =\u003e {\n    ... // Web平台则执行\n});\nWeeAPI.inAndroid(() =\u003e {\n    ... // Android平台则执行\n});\nWeeAPI.inIOS(() =\u003e {\n    ... // iOS平台则执行\n});\n```\n**注意: 也可以通过this.global.isAndroid/this.global.isIOS/this.global.isWeb这三个Bool值来区分平台**\n### fetch方法\npromise化的stream.fetch方法封装, 如果传入的option没有timeout设置, 则默认设置为15000ms. 自动超时.\nfetch(option) // option对应weex的stream module的fetch方法的option\n```JavaScript\n// vue文件\nthis.fetch(option);\n// JS文件\nimport { WeeAPI } from 'EasyWeex';\nWeexAPI.fetch(option);\n```\n### autoFetch方法\nfetch方法的封装, 自动超时重试, 提供更可靠的网络服务.\nautoFetch(option, retryTimes = 2) // option和fetch方法的一致, retryTimes为自动重试次数, 默认两次\n```JavaScript\n// vue文件\nthis.autoFetch(option);\nthis.autoFetch(option, 5);\n// JS文件\nimport { WeeAPI } from 'EasyWeex';\nWeexAPI.autoFetch(option);\nWeexAPI.autoFetch(option, 5);\n```\n### getEl方法\n获取元素, 提供给bindingX使用. bindingX不能直接对着this.$refs.xxx的变量作用, 所以提供一层封装.\ngetEl(ref)\n```\n// vue文件\nthis.getEl(this.$refs.xxx);\n// JS文件\nimport { WeeAPI } from 'EasyWeex';\nWeexAPI.getEl(this.$refs.xxx);\n```\n### listenGlobalEvent方法\n添加全局事件的监听, 主要是方便操作.\nlistenGlobalEvent(eventName, callback = () =\u003e {})\n```\n// vue文件\nthis.listenGlobalEvent('event', () =\u003e { console.log('event) });\n// JS文件\nimport { WeeAPI } from 'EasyWeex';\nWeeAPI.listenGlobalEvent('event', () =\u003e { console.log('event) });\n```\n\n## 日志调试\n这个并没有直接没打包的发行版中, js文件位于项目的`/build/remoteDebug.js`路径.\n运行`remoteDebug.js`后, 会起一个服务器, 打开对应的网页后, 网页会与服务器保持一个websocket的链接, 并且会定时发送心跳包, 实时显示是否和服务器保持活跃的连接.\n打开后网页后, 在网页的console上, 会接受服务器来的日志, 并打印出来. 服务器接受post过来的日志打印请求, 并推送到网页上, 从而实现移动端日志直接打印到网页的console上, 方便调试.\n### 使用步骤\n1. 运行remoteDebug.js. 示例:\n```\nnode run remoteDebug.js // 添加remoteDebug.js的真实路径\n```\n2. EasyWeex中调用API打印日志:\ninfo/warn/error方法:\ninfo/warn/error(...args) 参数为一下系列字符串或者Object, Object会自动序列化, 并在网页的控制台中自动parse\n返回值: Void\ninfo/warn/error的打印颜色各不一样.\n**注意: remoteDebug.js开启的服务器的域名/ip必须和weex的bundleUrl的一致, 否则接受不到日志消息**\n```JavaScript\n// Vue文件\nthis.info('info')\nthis.warn('info')\nthis.error('info')\n// JS文件\nimport { WeeAPI } from 'EasyWeex';\nWeeAPI.info('info')\nWeeAPI.warn('info')\nWeeAPI.error('info')\n```\n## 富文本组件支持\n这个并没有直接没打包的发行版中, js文件位于项目的`/src/component`路径.\n`TextParser.js`提供简单的富文本解析, 具体可看文件开头的介绍.\n`RichTranslatableText.vue`提供富文本解析加布局实现, 具体可看文件开头的介绍.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhanfengsan%2Feasyweex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhanfengsan%2Feasyweex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhanfengsan%2Feasyweex/lists"}