WEEX 踩坑笔记,有上线作品可以体验

笔记有些杂乱,APP经过多个版本,BUG也基本解决得差不多了,本来打算整理一下,可是手头又有事情,结果两个月又过去了,再回头看了看,还是应该好好回顾一下,毕竟WEEX对我来说确实是一项有用的技能。


先说产品

简买,简单买,简买省。

对WEEX有兴趣的朋友,可以安装体验一下,速度方面心里应该就有数了

从设计到布局、实施、后端接口实现,个人独立完成,安卓早就上了应用宝,苹果最后也顺利过审,到如今完善的版本,头尾花了三个月(其实真正开发是一个月多一点而已,被苹果坑惨,审核提交了五次,还被延迟了,唉,都是泪~~)


为什么选择 WEEX

WEEX 出来得比较慢,目前更新到0.16版本,要填的坑还非常多,解决问题能力不足的朋友还是要慎选。

而我是从 CORDOVA 一路打滚过来,我还会怕 WEEX ?曾经 HYBIRD 带来的郁闷这一回终于一扫而空,WEEX 流畅的体验相当舒服,毕竟是真原生。

如果你对 VUE.js 相当熟悉,那么学习成本就降低了不少,可以尝试挑战一下,但是要有困难重重的心理准备,因为WEEX的问答资源实在太少了。

至于跟 ReactNative 比如何?建议找其他有对比的文章看看,我不客观,因为我没用过 ReactNative ,我做点医 APP 的时候 ReactNative 还没有发布,而这一回,我选择了 WEEX。


棘手的问题记录

官网教程和手册还挺完善的,入门必须先看API,但上手还是得靠自己实战,棘手问题就必须记一记,因为我相信踩过的坑肯定会再踩。。。

  1. 在父容器高度正常的情况下,子容器flex:1无效

    即使父容器面积正常,子容器flex:1仍然失效,计算方式可能与css有差异,需要一层一层往上找,并补上样式,边补边测,补到成功为止

  2. icon 字体出现X

    这个问题在IOS上现在还未能很好地解决,因为字体文件没法像安卓一下直接保存在SD卡里,但可以通过制造时间差来减少icon字体出现X的情况

    参考:https://segmentfault.com/q/1010000009357817

    在独立组件上制造时间差:

     storage.getItem('fontVersion', (r) => {
       if (r.result === 'success' && r.data === weex.config.env.appVersion) {
         // 当前版本已加载过
         this.icon = this.getFontName()
       } else {
         // 当前版本首次打开
         setTimeout(() => {
           this.icon = this.getFontName()
         }, 2000)
         storage.setItem('fontVersion', weex.config.env.appVersion)
       }
     })
    
  3. vue-router 只针对单文件,使用 navigator 可以得到原生切换的体验,但是使用navigator就需要多文件,需要修改webpack的配置

    我改得比较彻底,直接把入口都改了,修改webpack.config.js,把entry变成对象,把所有单页面加入,然后修改assets/url.js,改入口为page/Main.js

     const weexConfig = {
       entry: weexEntry,
       output: {
         path: pathTo.join(__dirname, 'dist'),
         filename: '[name].js',
       },
       module: {
         rules: [
           {
             test: /\.js$/,
             use: [{
               loader: 'babel-loader',
             }],
             exclude: /node_modules/
           },
           {
             test: /\.vue(\?[^?]+)?$/,
             use: [{
               loader: 'weex-loader'
             }]
           },
           {
             test: /\.we(\?[^?]+)?$/,
             use: [{
               loader: 'weex-loader'
             }]
           }
         ]
       },
       plugins: plugins,
     };
    

    多个bundle间需要通过BroadcastChannel来通讯,这里需要看文档学习,然后替换掉单页面的vuex+watch

  4. ios下<scroller>refresh动作会在第一次触摸时立即触发,应该是个BUG,尝试了无数方法无法解决,最后只能把<scroller>全部换成listcell的结构

  5. 如果使用weex-axios处理http请求,返回空值会报错,即使200也不能返回空值,需返回空对象{}

  6. 如果使用weex-axios处理http请求,timeout参数失效,3秒左右必报超时

    经检查代码,是源码中timeout被写死了,需要手动修改node_modules/weex-axios/lib/adapters/fetch.js

    这么大个问题网上找不到有人解决,还是得靠自己,鬼知道我经历了什么。。。

  7. ios下<slider>的无法实现首尾交接的循环,infinite会无效

    <slider>改为<cycleslider>可解决

  8. picker 在安卓上无响应

    picker 崩溃的原因是 platforms/android/app/src/main/res/values/styles.xml 里,根本没有 Theme.NoTitleBar 这个主题

    参考:http://www.sunzhongwei.com/weex-picker-on-android-collapse-or-no-response

  9. build出来的安卓项目,会默认使用com.taobao.android.intent.category.WEEX这个category,所以切换bundle时会出现应用选择框(因为本机还装了weex playground,如果还有其他weex项目,则更多选项)

    这是一个棘手的问题,需要去github里自己把下载sdk下来,修改build.gradle以使用本地sdk,然后替换本地sdk里面所有的com.taobao.android.intent.category.WEEX

    sdk放到android目录下,改目不名为weex_sdk
    修改项目根目录下的build.gradle

     ext {
         compileSdkVersion=23
         buildToolsVersion="23.0.3"
         minSdkVersion=14
         appMinSdkVersion=15
         targetSdkVersion=23
         supportLibVersion="23.4.0"
         fastjsonLibVersion="1.1.46.android"
     }
    

    修改项目根目录下的project.properties文件,加入android.library.reference.1=weex_sdk(序号按自己情况修改)

    这个问题我也是服了,WEEX默认开发者都是原生高手,所以在发布方面简直是随便得不得了。。。

    替换参考:https://www.sunzhongwei.com/weex-android-avoid-switch-page-pops-up-application-selection-box

  10. build ios时ATSDK-Weex找不到

    修改Podfile,把ATSDK-Weex改为ATSDK(其实后面我把ATSDKWXDevtool都去掉了,因为在生产上没有意义,但需要同时删除相关的代码,这里不做过多说明)

    参考:https://github.com/weexteam/weex-pack/issues/133

  11. ios的状态栏在多js文件(即多bundle)的情况下会出现渲染的差异,除了首页是有状态栏的,其他页面都遮罩了

    修改platforms/ios/WeexDemo/WeexScanner/WXDemoViewController.m

    _weexHeight = self.view.frame.size.height - 64;
    修改为
    _weexHeight = self.view.frame.size.height - 20;
    
    
    _instance.frame = CGRectMake(self.view.frame.size.width-width, 0, width, _weexHeight);
    修改为
    _instance.frame = CGRectMake(self.view.frame.size.width-width, 20, width, _weexHeight);
    

    在 viewDidLoad 函数的 self render 前加入

    [UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent;
    UIView *statusBar = [[[UIApplication sharedApplication] valueForKey:@"statusBarWindow"] valueForKey:@"statusBar"];
    
    if ([statusBar respondsToSelector:@selector(setBackgroundColor:)]) {
        statusBar.backgroundColor = [UIColor colorWithRed:1.00 green:0.40 blue:0.00 alpha:1.0];
    }
    

    项目完整以后,路径名和文件名建议都改一下,把这个所谓的业余的DEMO私有化。。。

    参考:https://www.sunzhongwei.com/weex-ios-tabbar-didnt-stick-at-bottom-after-compiled

  12. ios 项目release后除了入口的 bundlejs,其他都打不开,跳转为空白

    这是第3点修改后的连琐反应,需要修改WeexConfig/WeexSDKManager.m

    WeexBundleUrlLoder *loader = [WeexBundleUrlLoder new];
    url = [loader jsBundleURL];
    if (!url) {
        url = [NSURL URLWithString:BUNDLE_URL];
    }
    

还有一些老版本的问题这里就不记录了,当时还赶上IOS11的更新,各种莫名其妙的小问题,内牛泪面。总的来说,这一次WEEX实战还是可以的,问题虽然不少,但总是有办法解决的,作为对VUEJS很熟悉的前端,编程和重构基本可以说没有难度,这项技能我收下了。

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏