摘要:解决在文件中,多页面配置默认是单页面效果,首先,真正运行的是,通过作为入口文件文件,通过,将文件打包成进行使用。多页面的重点,就是将独立页面的文件,生成多个文件。的入口和出口配置参考文件,创建一个,作为的入口,用于生成页面。
前言
RN weex hippy taro
1.Weex与RN 比较类型 | React Native | Weex | |
思想 | learn once, write anywhere | write once, run anywhere | |
扩展 | 不同平台可自由扩展 | 为了保证各平台的一致性,一次扩展得在各个平台都实现 | |
组件丰富程度 | 除了自带的,还有js.coach上社区贡献的,还是比较丰富的 | 基本只有自带的10余种 | |
调式 | 有专门的调试工具,chrome调试,较为完善 | 暂时log调试 | |
性能 | 较好 | 较弱 | |
上手难度 | 稍高 | 容易 | |
核心理念 | React | Vue | |
框架程度 | 较重 | 较轻 | |
特点 | 适合开发整体App | 适合单页面 | |
社区 | 丰富,Facebook维护 | 略残念,目前托管apache | |
支持 | Android、IOS | Android、IOS、Web | |
适应性 | 原生开学习成本低 | Web开发学习成本低 | |
JS引擎 | JSCore | V8 |
IMWeb Conf2018 前端大会: Weex内核的原理和演进方向:
https://www.codercto.com/a/32...
http://www.itdks.com/Course/d...
Weex 在饿了么前端的实践
https://www.jianshu.com/p/e14...
以下针对于iOS,编译和运行时报错处理:
添加特定平台的项目
weex platform add ios
安装cocopods
$ sudo gem install cocoapods
终端cd到ios项目,运行pod install 或者pod update
安装好后在执行
$ weex run ios
错误:
./src/index.vue Module build failed: Error: Vue packages version mismatch: - vue@2.5.21 (/Users/admin/.wx/modules/node_modules/_vue@2.5.21@vue/dist/vue.runtime.common.js) - vue-template-compiler@2.6.10 (/Users/admin/.wx/modules/node_modules/_vue-template-compiler@2.6.10@vue-template-compiler/package.json)
解决:
$ weex repair @weex-cli/core@latest $ weex update @weex-cli/doctor $ weex doctor3.调试
运行 weex debug 命令启动调试控制台,必须使用chrome 浏览器调试
4.编译报错运行npm run dev,出现eslint报错。
解决:在config.js文件中,useEslint: false,
https://blog.csdn.net/u012182...
Weex默认是单页面效果,首先,Weex真正运行的是,通过entry.js作为入口文件文件,通过webpack,将.vue文件打包成index.js进行使用。多页面的重点,就是将独立页面的.vue文件,生成多个js文件。
weexConfig的入口和出口配置(iOS/Android):
参考entry.js文件,创建一个listeEntry.js,作为liste.vue的入口,用于webpack生成list.js页面。
const { router } = require("./router") const List = require("@/list.vue") /* eslint-disable no-new */ new Vue(Vue.util.extend({el: "#root", router}, List)) router.push("/")
修改webpack.common.conf.js文件
const weexEntry = {
"index": helper.root("entry.js"), "list": helper.root("listEntry.js"), }
webConfig的入口和出口配置(web)
1.在configs/webpack.common.conf.js下修改getEntryFile()函数
const getEntryFile = () => { const entryFile = path.join(vueWebTemp, config.entryFilePath) const routerFile = path.join(vueWebTemp, config.routerFilePath) fs.outputFileSync(entryFile, getEntryFileContent(helper.root(config.entryFilePath), routerFile)); fs.outputFileSync(routerFile, getRouterFileContent(helper.root(config.routerFilePath))); const listFilePath = "listEntry.js" const listFile = path.join(vueWebTemp, listFilePath) fs.outputFileSync(listFile, getEntryFileContent(helper.root(listFilePath), routerFile)); return { index: entryFile, list: listFile, } }
2.在.temp文件下创建listEntry.js的webConfig入口文件。
const { router } = require("./router") const List = require("@/list.vue") /* eslint-disable no-new */ new Vue(Vue.util.extend({el: "#root", router}, List)) router.push("/")5.页面
Weex仅有Flexbox布局,text无法嵌套,难以实现长文当中样式的混合。
没有Cookies.只能用storage来完成对应信息的存储。
扩展:https://weex.apache.org/zh/gu...
const vvModule = weex.requireModule("VVWeexModule"); vvModule.setGlobalCallback( res => { this.info = res; console.log(JSON.stringify(res)); }); vvModule.logInNative("aaa");三、常用命令
Weex Toolkit:https://weex.apache.org/zh/to...
npm run server:web 端的预览
npm run dev :实时的压缩编译
$ weex compile [资源文件] [产物地址]
$ weex preview [file | folder]
$ weex debug
weex开发小记:https://blog.csdn.net/mht1829...
https://www.jianshu.com/p/ae1...
使用 Devtools调试 Weex页面 https://www.cnblogs.com/hehey...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/54206.html
摘要:解决在文件中,多页面配置默认是单页面效果,首先,真正运行的是,通过作为入口文件文件,通过,将文件打包成进行使用。多页面的重点,就是将独立页面的文件,生成多个文件。的入口和出口配置参考文件,创建一个,作为的入口,用于生成页面。 前言 RN weex hippy taro 1.Weex与RN 比较 showImg(https://segmentfault.com/img/bVbvfFL?w...
摘要:原方式中是经过压缩的脚本文件,预编译后则是二进制文件。两者影响叠加导致整体减小,包大小得到优化。引擎包引擎包官方文档中对内存区的描述您的应用用于处理代码和资源如字节码已优化或已编译的码库和字体的内存。本文首发自普惠出行产品技术 自从 Google 的 Flutter 发布之后,Facebook 对 React-Native 的迭代开始快了起来,优化 React-Native 的性能表现...
摘要:前端日报精选从化的探讨体会团队设计思想导致的跨站漏洞在饿了么前端的实践还是你应该选择哪一个前端框架上手这篇就够了中文网格布局入门上最流行的项目众成翻译的入门教程众成翻译开发,在中配置众成翻译组件间的样式污染掘金核心模块之 2017-08-31 前端日报 精选 从 setState promise 化的探讨 体会 React 团队设计思想jQuery导致的XSS跨站漏洞Weex 在饿了么...
阅读 1115·2021-09-22 15:43
阅读 2315·2021-09-22 15:32
阅读 4280·2021-09-22 15:11
阅读 2095·2019-08-30 15:55
阅读 2477·2019-08-30 15:54
阅读 944·2019-08-30 15:44
阅读 1052·2019-08-29 13:26
阅读 760·2019-08-29 12:54