weex开发指南

weex开发指南

在开始开发之前，首先如果是无weex开发经验的开发者可先行前往weex官网阅读了解weex框架的原理及开发方法。如果已有weex开发经验，请继续往下阅读。

1.创建项目

下面简要介绍如何配置开发环境并创建开发项目。

安装weex脚手架weex-tooltik创建项目。
默认已安装nodejs环境，如未安装可前往nodejs官网下载安装。

$ npm install -g weex-toolkit
$ weex -v // 查看当前weex工具版本

初始化项目。
使用weex-tooltik初始化项目。

$ weex create my-project

初始化后即可进行weex的项目开发。

2.项目开发

weex的开发过程中可参照weex官网文档描述，可使用weex内置前端框架Vue或Rax进行项目前端开发。

3.常见开发问题

如果是初次尝试weex开发，那么很有可能会碰上如下一些常见的问题：

3.1. 页面跳转问题

在weex的多页面开发中使用其提供的navigator模块实现页面跳转总是达不到预期的效果。解决方法如下：

  const navigator = weex.requireModule('navigator')

  const getUrl = function(bundleUrl,filePath){
      let nativeBase;
      nativeBase = bundleUrl.split('dist')[0]+'dist/';

      if(WXEnvironment.platform=="Web") {
          let matches = /\/\/([^\/]+?)\//.exec(bundleUrl);
          return 'http:' + matches[0] + filePath.replace('.js','.html');
      }

      return nativeBase+filePath;
  }

/**
  * 页面跳转方法
  * @param {*} path 编译后dist文件下的文件路径
  * @param {*} animated 是否需要动画，需为字符串的 'true' 'false'
  */
  const goPage = function (path = 'index.js', animated = 'true') {
      var url = getUrl(weex.config.bundleUrl, path);
      if (url) {
        navigator.push({
          url: url,
          animated: animated,
        })
      }
      return url;
  }

3.2. css样式

出现和web中的预期不一致的情况，请详细阅读weex通用样式按照其支持的样式书写。

注意

weex中的position样式不支持z-index设置层级关系，请将层级更高元素的置于后面。
Android端的元素背景颜色默认是透明无背景颜色。
Android端overflow现在只支持hidden。

WEEX开发指南