weex入门篇

weex入门篇

Weex 致力于使开发者能基于当代先进的 Web 开发技术，使用同一套代码来构建 Android、iOS 和 Web 应用。

weex SDK 集成了vueJS，Rax,不需要额外引入。

一）环境的搭建

1）搭建android环境：首先安装搭建好AndroidStudio，参照react-native 官网环境搭建（比较清楚），适用于weex。

2）安装weex环境

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

3）初始化一个项目

$ weex create 项目名字

4）我们先通过 npm install 安装项目依赖。之后运行根目录下的 npm run dev & npm run serve开启 watch 模式和静态服务器。

然后我们打开浏览器，进入 http://localhost:8080/index.html 即可看到 weex h5 页面。

二）真机调试

首先安装一个adb,下载地址 http://adbshell.com/downloads ， 正确安装adb，https://jingyan.baidu.com/article/22fe7cedf67e353002617f25.html ,

通过usb链接手机，电脑，执行命令 weex run android

三）开发注意

1）关于全局对象：

在开发h5项目的时候会经常性的使用到document，history，location，navigator，window，screen等一些全局变量，但是在开发三端兼容的项目的时候不能使用。

window、screen -----> WXEnvironment或者weex.config.env.platform

document -----> weex.requireModule("dom")

2）关于导航：

weex集成了vueRouter，但是使用vueRouter只是单页面，在浏览器中的vue应用，通过浏览器的“前进”，”后退“仍然会处于同一个页签，但是在原生应用中的”前进“，”后退“则会跳出这个页签到其他页面。因此建议使用weex的提供的navigator进行页面跳转。

3）关于css样式：

weex适配默认是iphone6 (750)的物理像素宽的等比缩放方式，无视屏幕分辨率和尺寸，采用flex流式布局。

weex 不支持样式嵌套多层查询，例如 .outer-wrapper .inner-item 这种多类嵌套查询。

不支持样式继承，例如color，fontSize。

image元素要给出width,height不然无法显示图片。

不识别样式属性的简写 margin: 0 0 10px 10px，要写成margin-top:0；margin-right:0margin-bottom:10px; margin-left:10px; color: #888 -> #888888； blue -> #0000FF

4）静态资源图片的加载web，android，ios三个平台的加载方式有不同，要做代码处理，

android需要将图片资源放置在 platformsandroidappsrcmain es drawable-**文件中，

ios: platformsiosimages

 

下面给出一段拷贝图片的具体实现：

copyFile.js

// @fun 针对于weex框架image静态资源加载web,ios,android的加载方式不同做的特殊处理
'use strict'
const mkdirp = require('mkdirp')
const filecopy = require('filecopy')
// google play上上架
/**
*google play会根据不同的手机density来打不同的apk包（举个栗子，如果是hdpi的机器，下载下来的就只有hdpi的资源）
*如果是在国内的市场话。建议只放一套（h或者xhpdi），因为国内市场是没有上面那种机制的，放多套资源会导致安装包变得很大。
*此外： Android在没有找到相应dpi的图片时，会用其他density的图片进行缩放处理。
*/

// 获取命令行参数
let paltformDefine = process.argv.slice(2)[0]
let filePath = 'src/assets/icons/*.png'
let androidIconPlatform = ['drawable-hdpi', 'drawable-mdpi', 'drawable-xhdpi', 'drawable-xxhdpi']

if (paltformDefine === 'android') {
  let androidPath = 'platforms/android/app/src/main/res/'
  mkdirFile(androidPath).then(res => {
    androidIconPlatform.forEach((item, index) => {
      copyIcon(`${androidPath}` + `${item}`)
    })
  }).catch(err => {
    return err
  })
} else if (paltformDefine === 'ios') {
  let iosPath = 'platforms/ios/images/'
  mkdirFile(iosPath).then(res => {
    copyIcon(iosPath)
  }).catch(err => {
    return err
  })
}

function copyIcon (fileDestPath) {
  filecopy(filePath, fileDestPath, {
    mkdirp: true
  }).then(() => {
    return ''
  }).catch(() => {
    console.log('file copy fail')
  })
}

function mkdirFile (fileName) {
  return new Promise((resolve, reject) => {
    mkdirp(fileName, function (err) {
      if (err) {
        return reject(err)
      }
      return resolve(true)
    })
  })
}

getImageFile:

module.exports = {
  getImageFile: function (imageName) {
    if (!weex || !weex.config || !weex.config.env) {
      return
    }
    let _dotPoint = (imageName + '').lastIndexOf('.')
    let _pureFileName = (imageName + '').slice(0, _dotPoint)
    // let _imageFormat = (imageName + '').slice(_dotPoint)
    // 平台信息
    let _platform = weex.config.env.platform
    if (_platform === 'android') {
      let _filePrefix = 'local:///'
      return _filePrefix + _pureFileName
    }
    if (_platform === 'iOS') {
      let _filePrefix = 'local://'
      return _filePrefix + _pureFileName
    }
    if (_platform === 'Web') {
      let _filePrefix = '../../src/assets/icons/'
      return _filePrefix + imageName
    }
  }
}

npm command

"scripts": {

 "copyFile:android": "node src/utils/copyFile.js android",
  "copyFile:ios": "node src/utils/copyFile.js ios",
  "copy": "npm run copyFile:android && npm run copyFile:ios"

执行 npm run copy即可，完成图片资源的复制

具体在页面上使用

  <image class="player-icon" :src="_getImageFile('player.png')"/>

   // 获取image 路径
    _getImageFile (ImageName) {
      return commonFun.getImageFile(ImageName)
     },

 

参考： https://www.sunzhongwei.com/weex-android-ios-loaded-local-pictures