当前位置: 首页 > Web前端 > HTML

weex初探

时间:2023-04-02 21:03:23 HTML

前言RNweexhippytaro1.Weex和RN对比型ReactNativeWeex思想learnonce,writeoncewriteonce,runanywhere扩展不同平台可以自由扩展为了保证每个平台的一致性,可以在每个平台实现一次扩展除了内置的-在组件方面,也有js.coach上的社区贡献,比较丰富。基本上自带的调试模式也就10多种。有专门的调试工具,chrome调试,比较全,临时日志调试性能比较好,比较弱,上手难度有点大,上手比较容易。核心概念比较重。ReactVue框架相对较轻。适用于整体App开发。它适用于单页。社区丰富,Facebook维护有点困难。目前托管apache,支持Android、IOSAndroid、IOS、Web适配原生开发学习成本低Web开发学习成本低JSCoreV82.weexJS引擎性能3.参考IMWebConf2018前端大会:TheprincipleandevolutiondirectionofWeex内核:https://www.codercto.com/a/32...http://www.itdks.com/Course/d...Weex在饿了么的前端实践https://www.jianshu.com/p/e14...1、问题1、iOS安装如下,编译运行报错处理:addSpecificplatformprojectweexplatformaddiostoinstallcocopods$sudogeminstallcocoapodsterminalcd到ios项目,运行podinstall或podupdate安装完成后,执行$weexrunios2。编译失败错误:./src/index.vueModulebuildfailed:Error:Vuepackagesversionmismatch:-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)解决:$weexrepair@weex-cli/core@latest$weexupdate@weex-cli/doctor$weexdoctor3.调试运行weexdebug命令启动调试控制台,必须使用chrome浏览器调试4.编译报错,运行npmrundev,出现eslint错误解决方法:在config.js文件中,useEslint:false,5.多页配置https://blog.csdn.net/u012182...Weex默认是单页效果,首先,Weex实际运行的是使用entry.js作为入口文件,使用webpack打包.vue文件导入到index.js中使用。multi-page的重点是将独立页面的.vue文件生成多个js文件。weexConfig(iOS/Android)的进出配置:参考entry.js文件创建一个listEntry.js作为liste.vue的入口,用于webpack生成list.js页面。const{router}=require('./router')constList=require('@/list.vue')/*eslint-disableno-new*/newVue(Vue.util.extend({el:'#root',router},List))router.push('/')修改webpack.common.conf.js文件constweexEntry={'index':helper.root('entry.js'),'list':helper.root('listEntry.js'),}webConfig的入口和出口配置(web)1.在configs/webpack.common.conf.js下修改getEntryFile()函数constgetEntryFile=()=>{constentryFile=path.join(vueWebTemp,config.entryFilePath)constrouterFile=path.join(vueWebTemp,config.routerFilePath)fs.outputFileSync(entryFile,getEntryFileContent(helper.root(config.entryFilePath),routerFile));fs.outputFileSync(routerFile,getRouterFileContent(helper.root(config.routerFilePath)));constlistFilePath='listEntry.js'constlistFile=path.join(vueWebTemp,listFilePath)fs.outputFileSync(listFile,getEntryFileContent(helper.root(listFilePath),routerFile));退役urn{index:entryFile,list:listFile,}}2.在.temp文件下创建listEntry.js的webConfig入口文件const{router}=require('./router')constList=require('@/list.vue')/*eslint-disableno-new*/newVue(Vue.util.extend({el:'#root',router},List))router.push('/')5.PageWeexonlyFlexbox布局,文本不能嵌套,长文本难以混合样式。没有Cookie。存储只能用于完成相应信息的存储。2.Weex与原生交互扩展:https://weex.apache.org/zh/gu...constvvModule=weex.requireModule('VVWeexModule');vvModule.setGlobalCallback(res=>{this.info=res;console.log(JSON.stringify(res));});vvModule.logInNative('aaa');3.WeexToolkit常用命令:https://weex.apache.org/zh/to...npmrunserver:web端预览npmrundev:实时压缩编译$weexcompile[资源文件][产品]地址]<选项>:编译$weex预览[文件|folder]:编译和预览$weexdebug:调试4.参考weex开发笔记:https://blog.csdn.net/mht1829...https://www.jianshu.com/p/ae1...使用Devtools调试Weex页面https://www.cnblogs.com/hehey...

最新推荐
猜你喜欢