资讯专栏INFORMATION COLUMN

weex初探

Cruise_Chan / 3610人阅读

摘要:解决在文件中,多页面配置默认是单页面效果,首先,真正运行的是,通过作为入口文件文件,通过,将文件打包成进行使用。多页面的重点,就是将独立页面的文件,生成多个文件。的入口和出口配置参考文件,创建一个,作为的入口,用于生成页面。

前言

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
2.weex性能

3.参考

IMWeb Conf2018 前端大会: Weex内核的原理和演进方向:
https://www.codercto.com/a/32...
http://www.itdks.com/Course/d...

Weex 在饿了么前端的实践
https://www.jianshu.com/p/e14...

一、问题 1.安装

以下针对于iOS,编译和运行时报错处理:

添加特定平台的项目
weex platform add ios

安装cocopods
$ sudo gem install cocoapods

终端cd到ios项目,运行pod install 或者pod update

安装好后在执行
$ weex run ios

2.编译失败

错误:

./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 doctor

3.调试

运行 weex debug 命令启动调试控制台,必须使用chrome 浏览器调试

4.编译报错

运行npm run dev,出现eslint报错。
解决:在config.js文件中,useEslint: false,

5.多页面配置

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来完成对应信息的存储。

二、weex与原生交互

扩展: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

相关文章

  • weex初探

    摘要:解决在文件中,多页面配置默认是单页面效果,首先,真正运行的是,通过作为入口文件文件,通过,将文件打包成进行使用。多页面的重点,就是将独立页面的文件,生成多个文件。的入口和出口配置参考文件,创建一个,作为的入口,用于生成页面。 前言 RN weex hippy taro 1.Weex与RN 比较 showImg(https://segmentfault.com/img/bVbvfFL?w...

    biaoxiaoduan 评论0 收藏0
  • RN 技术探索:Hermes Engine 初探

    摘要:原方式中是经过压缩的脚本文件,预编译后则是二进制文件。两者影响叠加导致整体减小,包大小得到优化。引擎包引擎包官方文档中对内存区的描述您的应用用于处理代码和资源如字节码已优化或已编译的码库和字体的内存。本文首发自普惠出行产品技术 自从 Google 的 Flutter 发布之后,Facebook 对 React-Native 的迭代开始快了起来,优化 React-Native 的性能表现...

    Cc_2011 评论0 收藏0
  • 2017-08-31 前端日报

    摘要:前端日报精选从化的探讨体会团队设计思想导致的跨站漏洞在饿了么前端的实践还是你应该选择哪一个前端框架上手这篇就够了中文网格布局入门上最流行的项目众成翻译的入门教程众成翻译开发,在中配置众成翻译组件间的样式污染掘金核心模块之 2017-08-31 前端日报 精选 从 setState promise 化的探讨 体会 React 团队设计思想jQuery导致的XSS跨站漏洞Weex 在饿了么...

    liuhh 评论0 收藏0

发表评论

0条评论

Cruise_Chan

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<