{"id":18548588,"url":"https://github.com/yinshuxun/weex-start-kit","last_synced_at":"2026-03-06T02:05:58.112Z","repository":{"id":122222391,"uuid":"90472834","full_name":"yinshuxun/weex-start-kit","owner":"yinshuxun","description":"A weex-based reconstruction","archived":false,"fork":false,"pushed_at":"2017-09-29T02:56:27.000Z","size":36399,"stargazers_count":8,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-11T18:24:41.398Z","etag":null,"topics":["weex","weex-toolkit"],"latest_commit_sha":null,"homepage":"","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/yinshuxun.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":"2017-05-06T15:33:58.000Z","updated_at":"2021-07-03T17:08:57.000Z","dependencies_parsed_at":null,"dependency_job_id":"f72542d2-6be1-4967-84d1-1707c7af1873","html_url":"https://github.com/yinshuxun/weex-start-kit","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/yinshuxun/weex-start-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yinshuxun%2Fweex-start-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yinshuxun%2Fweex-start-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yinshuxun%2Fweex-start-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yinshuxun%2Fweex-start-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yinshuxun","download_url":"https://codeload.github.com/yinshuxun/weex-start-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yinshuxun%2Fweex-start-kit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30158923,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-05T22:39:40.138Z","status":"online","status_checked_at":"2026-03-06T02:00:08.268Z","response_time":250,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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","weex-toolkit"],"created_at":"2024-11-06T20:35:03.009Z","updated_at":"2026-03-06T02:05:58.094Z","avatar_url":"https://github.com/yinshuxun.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# weex-vue-starter-kit \n\t这个项目是个人重构mic触屏列表页的版本\n\n[weex入门文档，个人总结](https://github.com/yinshuxun/weex-start-kit/blob/master/sharing/share.md)\n\n\u003e 吐槽：复制粘贴了一波 weex-toolkit 的配置\n\n## 运行demo\n\n```bash\nyarn # 也可以使用npm install\n\n#run web\nnpm run dev\nnpm run ss(demo中search模块用到的后台服务)\nopen http://0.0.0.0:8080/\n\n# run android\nweexpack platform add android\nweexpack run android\n\n# run ios\nweexpack platform add ios\nweexpack run ios\n\n```\n\n## 手机调试\n\n```\nopen http://0.0.0.0:8080/qrcode.html （使用weex-playground扫描图中二位码，即可预览demo）\n```\n\n## 使用说明\n\n可以使用所有的 `weex-pack` 和 `weex` 相关命令，可见：\n\n- [weex-pack](https://github.com/weexteam/weex-pack)\n- [weex-toolkit](https://github.com/weexteam/weex-toolkit)\n\n## 目录结构\n\n```\n├── yarn.lock\n├── README.md\n├── android.config.json\n├── config.xml\n├── hooks\n│   └── README.md\n├── ios.config.json\n├── package.json\n├── platforms     // 平台模版目录\n├── plugins       // 插件下载目录\n│   └── README.md\n├── src           // 业务代码（vue文件）目录\n│   └── index.vue\n├── index.tpl\n├── qrcode.tpl\n└── webpack.config.js\n```\n\n\n\n\n\n# 以下是个人总结的入门文档\n## 一、weex介绍\n\nWeex 是一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 native 应用。在最新的weex版本中，已经将vue作为默认的上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API，这样一来，你就可以体验到基于vue的webapp的开发体验，打造三端一致的 native 应用。\n\n### 几种APP开发模式\n| NativeApp                                | RN                                       | weex                                     | WebApp                                   | Hybird                                   |\n| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---------------------------------------- |\n| 即传统的原生APP开发模式,Android基于Java语言,底层调用Google的 API;iOS基于OC或者Swift语言,底层调用App官方提供的API。 | Facebook发起的开源的一套新的APP开发方案,使用JS+部分原生语法来实现功能。初次学习成本较高,但是在入门后,经过良好的封装也能够实现大部分的跨平台。 | Weex最底层的原理是和React-Native相同的，就是将JS代码渲染成原生组件只不过在业务代码层面，Weex和React-Native有差别 | 即移动端的网站,将页面部署在服务器上,然后用户使用各大浏览器访问。一般泛指 SPA(Single Page Application)模式开发出的网站。 | 即混合开发,由Native通过JSBridge等方法提供统一的API,然后用Html5+JS来写实际的逻辑,调用API,这种模式下,由于Android,iOS的API一般有一致性,而且最终的页面也是在webview中显示,所有有跨平台效果 |\n| 体验最好                                     | 体验很好                                     | 体验很好                                     | 体验最差                                     | 体验不错                                     |\n[更详细的对比](http://www.jianshu.com/p/20a3d10a4d57) / [rn和weex更详细对比脑图](http://naotu.baidu.com/file/1eb556f3380e8189be859348527ec518?token=a5a049eb4c618e70) \n\n## 二、如何搭建weex项目\nWeex也和前端项目一样，拥有它自己的脚手架全家桶。weex-toolkit + weexpack + playground + code snippets + weex-devtool。\n\n[weex-toolkit](https://weex.apache.org/cn/guide/tools/toolkit.html) 是官方提供的一个脚手架命令行工具，你可以使用它进行 Weex-pack 项目的创建，调试等功能。\n\n安装，使用npm进行安装，确保你的node版本\u003e=6\n​    \n    $ npm i -g weex-toolkit。\n\n1、初始化 weex 项目\n\n    $ weex init weex-demo\n\n执行完命令后，在 weex-demo 目录中就创建了一个使用 Weex 和 Vue 的模板项目。然后我们进入项目所在路径，weex-toolkit 已经为我们生成了标准项目结构。在 package.json 中，已经配置好了几个常用的 npm script，分别是：\n\n    build: 源码打包，生成 JS Bundle\n    dev: webpack watch 模式，方便开发\n    serve: 开启静态服务器\n    debug: 调试模式\n\n2、项目的运行\n\n    $ npm run build\n\n    $ npm run serve\n\n​    \n3、weex项目调试：\n\n这里需要下载一个weex-playground,是一个上架的App，ios直接在扫码，安卓可以[点击这里](http://appdownload.alicdn.com/publish/weex_playgroud/latest/weex_playgroud_10006024.apk)这个可以用来通过扫码实时在手机上显示出实际的页面。\n\n     $ npm run debug\n\n使用手机上的weexplayground扫描浏览器打开的二维码。\n\n![debug01](./sharing/debug01.jpg)\n\n单纯启动一个调试服务器，并同时唤起Chrome浏览器打开调试主页。\n\n![debug02](./sharing/debug02.jpg)\n\n这个调试主页上会有一个二维码，使用 Playground App 扫这个二维码可以开启 Playground 调试。开启调试后,设备列表中会出现您的设备，根据提示进行后续的调试操作。其中：  \n\n    Inspector 能够用来查看 Element \\ NetWork \\ Console log \\ ScreenCast \\ BoxModel \\ Native View 等。\nnative组件树：\n![debug03](./sharing/debug03.jpg) \nhtml组件数：\n![debug05](./sharing/debug05.jpg) \n​    \n ![debug04](./sharing/debug04.jpg)  \n\n    Debugger 用来调试 Weex 中的 JS 代码，能够设置断点、查看调用栈。     \n[weex-pack](https://github.com/weexteam/weex-pack)：\nweexpack 是新一代的weex应用工程和插件工程开发套件，是基于weex快速搭建应用原型的利器。它能够帮助开发者通过命令行创建weex应用工程和插件工程，快速打包 weex 应用并安装到手机运行，同时对于开发者而言还能够创建weex插件模版并发布插件到[weex应用市场](https://market.dotwe.org/ext/list.htm#15)。 使用weexpack 能够方便的在在weex工程和native工程中安装插件。\n\n目前weex-toolkit集成对weexpack的命令调用支持，你可以使用weex-toolkit命令来实现weexpack具备的功能。比如我们要实现添加iOS应用模板：\n\n    首先，全局安装 weex-pack 命令：\n    $ npm install -g weexpack\n    \n    初始化项目\n    $ weexpack create \u003cproject name\u003e\n    \n    添加应用模版，官方提供的模版默认支持 weex bundle 调试和插件机制，注意模版名称均为小写，模版被安装到platforms目录下：\n    $ weexpack platform add ios # 使用weexpack 命令\n    $ weex platform add  ios # 使用weex-toolkit，添加native模板\n    \n    打包应用并安装运行\n    $ weexpack run ios \n    $ weexpack run android\n    \n    更详细的的打包以及插件机制，见https://github.com/weexteam/weex-pack\n\n### weex toolkit 与 weex-pack 的区别\n\nweex-toolkit 初始化的项目是针对开发单个 Weex 页面而设计的，也就是说这样的项目只包括单个页面开发需要的东西，比如前端页面源文件、webpack 配置、npm 脚本等。项目产生的输出就是一个 JS Bundle 文件，可以自由的进行部署。\n\nweex-pack 是初始化一个完整的 App 工程，包括 Android 和 iOS 的整个 App 起步，前端页面只是其中的一部分。这样的项目最终产出是一个 Android App 和一个 iOS App。\n\n官方最近在考虑整合，无限等待....\n\n\n\n## 三、weex中vue的应用\n\n```js\n1、weex中默认使用.vue 文件,基于template, style, script 快速构建组件化的应用。\n\n2、支持vue大部分的api，除了一些dom有关的，比如一些键盘事件的修饰符（{keyCode|keyAlias}）、v-text\n\n3、页面状态之间的共享和隔离\n\n所有的weex页面，不管是基于vue和rax，都公用了一个weex runtime，其中js引擎只初始化一次，除非重启，这种情况下，如果共享全局状态很有可能造成内存泄漏，因此最好是隔离页面状态。因此weex在原生应用中大多是以'多页的实现存在'，因此不支持Vue的一些全局功能，如Vue.config、Vue.filter、Vue.mixin、Vue.use，不过依然可以在一个单页中使用，每一个单页中还是用的同一个实例的\n\n4、另外针对vue-router和vuex大部分在weex中都能完整应用，部分差异可见[weex中使用vue全家桶的差异性](https://weex.apache.org/cn/references/vue/difference-of-vuex.html)。\n\n在演示项目中，使用的是web端完整单页，通过路由跳转，但是native端，复杂单页中使用vue-router,多页场景是使用navigator模块，[点击查看跳转逻辑](https://github.com/yinshuxun/weex-start-kit/blob/master/src/mixins/index.js)\n\n5、编译环境 \n\n针对 Web 平台，和普通 Vue 2.X 项目一样，可以使用任意官方推荐的方式编译源文件，如 Webpack + vue-loader 或者 Browserify + vueify 。\n针对 Android 和 iOS 平台，我们使用 weex-loader 工具支持编译 .vue 格式的单文件组件；也就是说，目前只能使用 Webpack + weex-loader 来生成原生端可用的 js bundle。\n```\n\n## 四、weex与web平台的差异\n* BOM \u0026 DOM\n\n    1、不支持dom操作\n    \n    2、仅支持部分事件类型，\n    \n    3、没有window/location/document/history/navigator等等对象。但是提供了诸如\n    WXEnvironment对象，可以获取到当前设备的屏幕或者环境信息。\n    \n    4、weex SDK \u003e= 0.10.0 的才支持事件冒泡\n\n* 布局 \u0026 css\n\n    1、只支持flex\n    \n    2、不允许使用id，只允许用class\n    \n    3、不支持后代选择器或者继承\n    \n    4、样式必须写完整 如background:red; =\u003e background-color =\u003e red;\n    \n    5、不能设置背景图片\n    \n    6、动态绑定class需要使用数组形式\n* 组件 \n\n    1、只有scroll/list组件有滚动效果\n\n    等等 ....\n\n\n\n\n##  五、weex基本工作原理\n\n![process](./sharing/weex-process.png)\n​    \n    工作流\n    we\\vue 文件 ————–前端(we\\vue源码) \n    ↓ (转换) ——————前端(构建过程) \n    JS Bundle —————–前端(JS Bundle代码) \n    ↓ (部署) ——————服务器 \n    在服务器上的JS bundle —-服务器 \n    ↓ (编译) —————— 客户端(JS引擎)\n    虚拟 DOM 树 ————— 客户端(Weex JS Framework) \n    ↓ (渲染) —————— 客户端(渲染引擎) \n    Native视图 ————— 客户端(渲染引擎) \n    \n    和如今 web 开发的最佳实践一样，Weex 会把一个页面的源代码全部编译打包成一个 JS bundle，在浏览器中，我们需要把这个 JS bundle 作为一段 \u003cscript\u003e 载入网页，在客户端里，我们把这段 JS bundle 载入本地，并通过 WeexSDK 直接执行。\n\n## 六、 weex项目中webpack打包的方式\n\n和传统的vue项目不同的是，weex项目中的webpack打包需要区分打包web端以及native端，在web端，直接使用vue-loader加载器，将所有组件进行单页打包即可，并且为了使用weex官方分装的组件，需要在入口安装weex-vue-render模块\n而native端是需要使用weex-loader加载器，根据多页分别进行打包。[详情可见配置](https://github.com/yinshuxun/weex-start-kit/blob/master/_build/prod.js)\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyinshuxun%2Fweex-start-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyinshuxun%2Fweex-start-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyinshuxun%2Fweex-start-kit/lists"}