可能是史上最全的weex踩坑攻略

import weexVueRenderer from 'weex-vue-render'
Vue.use(weexVueRenderer)

import App from './App.vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter)
var router = new VueRouter({
  routes
})
/* eslint-disable no-new */
new Vue({
  el: '#root',
  router,
  render: h => h(App)
})

router.push('/')

<template>
  <transition name="fade" mode="out-in">
    <router-view class=".container" />
  </transition>
</template>
<script>
export default {
    // ...
}
</script>
<style>
// ...
</style>

const webConfig = merge(getConfig('vue'), {
  entry: {
    app: ['./src/render.js', './src/app.js']
  },
  output: {
       path: path.resolve(distpath, './web'),
       filename: 'js/[name].[chunkhash].js',
       chunkFilename: 'js/[id].[chunkhash].js'
  },
    ...
 module: {
     rules: [
         {
             test: /\.vue$/,
             loader: 'vue-loader'
         }
     ]
 }
})

// build-entry.js
require('shelljs/global')
const path = require('path')
const fs = require('fs-extra')

const srcPath = path.resolve(__dirname, '../src/views') // 每个.vue页面
const entryPath = path.resolve(__dirname, '../entry/') // 存放入口文件的文件夹
const FILE_TYPE = '.vue'

const getEntryFileContent = path => {
  return `// 入口文件
import App from '${path}${FILE_TYPE}'
/* eslint-disable no-new */
new Vue({
  el: '#root',
  render: h => h(App)
})

  `
}
// 导出方法
module.exports = _ => {
  // 删除原目录
  rm('-rf', entryPath)
  // 写入每个文件的入口文件
  fs.readdirSync(srcPath).forEach(file => {
    const fullpath = path.resolve(srcPath, file)
    const extname = path.extname(fullpath)
    const name = path.basename(file, extname)
    if (fs.statSync(fullpath).isFile() && extname === FILE_TYPE) {
    //写入vue渲染实例
      fs.outputFileSync(path.resolve(entryPath, name + '.js'), getEntryFileContent('../src/views/' + name))
    }
  })
  const entry = {}
    // 放入多个entry
  fs.readdirSync(entryPath).forEach(file => {
    const name = path.basename(file, path.extname(path.resolve(entryPath, file)))
    entry[name] = path.resolve(entryPath, name + '.js')
  })
  return entry
}

const buildEntry = require('./build_entry')
// ..
// weex配置
const weexConfig = merge(getConfig('weex'), {
  entry: buildEntry(), // 写入多入口
  output: {
    path: path.resolve(distPath, './weex'),
    filename: 'js/[name].js' // weex环境无需使用hash名字
  },
  module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'weex-loader'
            }
        ]
  }
})

module.exports = [webConfig, weexConfig]

{
    test: /\.vue$/,
    loader: 'vue-loader',
    options: {
        loaders: {
          scss: 'vue-style-loader!css-loader!sass-loader', // <style lang="scss">
          sass: 'vue-style-loader!css-loader!sass-loader?indentedSyntax' // <style lang="sass">
        }
    }
}

<style lang="sass">
    @import './index.scss'
</style>

<style lang="sass">
    @import './common.scss'
    @import './variables.scss'
    // ...
</style>

安卓和苹果方面可以在原生代码接管`navigator`这个模块，安卓方面只需要实现`IActivityNavBarSetter`，苹果方面好像是`WXNavigatorProtocol`,然后在app启动初始化weex时注册即可。

   {
     test: /\.(png|jpe?g|gif|svg)$/,
     loader: 'url-loader',
     query: {
       limit: 1,
       name: 'images/[hash:8].[name].[ext]'
     }
   }

- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void (^)(UIImage *, NSError *, BOOL))completedBlock{
    if ([url hasPrefix:@"//"]) {
        url = [@"http:" stringByAppendingString:url];
    }
    // 加载本地图片
    if ([url hasPrefix:@"file://"]) {
        NSString *newUrl = [url stringByReplacingOccurrencesOfString:@"/images/" withString:@"/"];
        UIImage *image = [UIImage imageNamed:[newUrl substringFromIndex:7]];
        completedBlock(image, nil, YES);
        return (id<WXImageOperationProtocol>) self;
    } else {
        // 加载网络图片
        return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager]downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
        } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
            if (completedBlock) {
                completedBlock(image, error, finished);
            }
        }];
    }
}

  [@Override](/user/Override)
  public void setImage(final String url, final ImageView view,
                       WXImageQuality quality, final WXImageStrategy strategy) {

    WXSDKManager.getInstance().postOnUiThread(new Runnable() {

      [@Override](/user/Override)
      public void run() {
        if(view==null||view.getLayoutParams()==null){
          return;
        }
        if (TextUtils.isEmpty(url)) {
          view.setImageBitmap(null);
          return;
        }
        String temp = url;
        if (url.startsWith("//")) {
          temp = "http:" + url;
        }
        if (temp.startsWith("/images/")) {
          //过滤掉所有相对位置
          temp = temp.replace("../", "");
          temp = temp.replace("./", "");
          //替换asset目录的配置
          temp = temp.replace("/images/", "file:///android_asset/weex/images/");
          Log.d("ImageAdapter", "url:" + temp);
        }
        if (view.getLayoutParams().width <= 0 || view.getLayoutParams().height <= 0) {
          return;
        }

        if(!TextUtils.isEmpty(strategy.placeHolder)){
          Picasso.Builder builder=new Picasso.Builder(WXEnvironment.getApplication());
          Picasso picasso=builder.build();
          picasso.load(Uri.parse(strategy.placeHolder)).into(view);

          view.setTag(strategy.placeHolder.hashCode(),picasso);
        }

        Picasso.with(WXEnvironment.getApplication())
                .load(temp)
                .into(view, new Callback() {
                  [@Override](/user/Override)
                  public void onSuccess() {
                    if(strategy.getImageListener()!=null){
                      strategy.getImageListener().onImageFinish(url,view,true,null);
                    }

                    if(!TextUtils.isEmpty(strategy.placeHolder)){
                      ((Picasso) view.getTag(strategy.placeHolder.hashCode())).cancelRequest(view);
                    }
                  }

                  [@Override](/user/Override)
                  public void onError() {
                    if(strategy.getImageListener()!=null){
                      strategy.getImageListener().onImageFinish(url,view,false,null);
                    }
                  }
                });
      }
    },0);
  }