weex入門篇

Weex 致力于使開(kāi)發(fā)者能基于當(dāng)代先進(jìn)的 Web 開(kāi)發(fā)技術(shù)，使用同一套代碼來(lái)構(gòu)建 Android、iOS 和 Web 應(yīng)用。

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

一）環(huán)境的搭建

1）搭建android環(huán)境：首先安裝搭建好AndroidStudio，參照react-native 官網(wǎng)環(huán)境搭建（比較清楚），適用于weex。

2）安裝weex環(huán)境

$ npm install -g weex-toolkit
$ weex -v //查看當(dāng)前weex版本

3）初始化一個(gè)項(xiàng)目

$ weex create 項(xiàng)目名字

4）我們先通過(guò) npm install 安裝項(xiàng)目依賴。之后運(yùn)行根目錄下的 npm run dev & npm run serve開(kāi)啟 watch 模式和靜態(tài)服務(wù)器。

然后我們打開(kāi)瀏覽器，進(jìn)入 http://localhost:8080/index.html 即可看到 weex h5 頁(yè)面。

二）真機(jī)調(diào)試

首先安裝一個(gè)adb,下載地址 http://adbshell.com/downloads ， 正確安裝adb，https://jingyan.baidu.com/article/22fe7cedf67e353002617f25.html ,

通過(guò)usb鏈接手機(jī)，電腦，執(zhí)行命令 weex run android

三）開(kāi)發(fā)注意

1）關(guān)于全局對(duì)象：

在開(kāi)發(fā)h5項(xiàng)目的時(shí)候會(huì)經(jīng)常性的使用到document，history，location，navigator，window，screen等一些全局變量，但是在開(kāi)發(fā)三端兼容的項(xiàng)目的時(shí)候不能使用。

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

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

2）關(guān)于導(dǎo)航：

weex集成了vueRouter，但是使用vueRouter只是單頁(yè)面，在瀏覽器中的vue應(yīng)用，通過(guò)瀏覽器的“前進(jìn)”，”后退“仍然會(huì)處于同一個(gè)頁(yè)簽，但是在原生應(yīng)用中的”前進(jìn)“，”后退“則會(huì)跳出這個(gè)頁(yè)簽到其他頁(yè)面。因此建議使用weex的提供的navigator進(jìn)行頁(yè)面跳轉(zhuǎn)。

3）關(guān)于css樣式：

weex適配默認(rèn)是iphone6 (750)的物理像素寬的等比縮放方式，無(wú)視屏幕分辨率和尺寸，采用flex流式布局。

weex 不支持樣式嵌套多層查詢，例如 .outer-wrapper .inner-item 這種多類嵌套查詢。

不支持樣式繼承，例如color，fontSize。

image元素要給出width,height不然無(wú)法顯示圖片。

不識(shí)別樣式屬性的簡(jiǎn)寫 margin: 0 0 10px 10px，要寫成margin-top:0；margin-right:0margin-bottom:10px; margin-left:10px; color: #888 -> #888888； blue -> #0000FF

4）靜態(tài)資源圖片的加載web，android，ios三個(gè)平臺(tái)的加載方式有不同，要做代碼處理，

android需要將圖片資源放置在 platformsandroidappsrcmainesdrawable-**文件中，

ios:platformsiosimages

下面給出一段拷貝圖片的具體實(shí)現(xiàn)：

copyFile.js

// @fun 針對(duì)于weex框架image靜態(tài)資源加載web,ios,android的加載方式不同做的特殊處理
'use strict'
const mkdirp = require('mkdirp')
const filecopy = require('filecopy')
// google play上上架
/**
*google play會(huì)根據(jù)不同的手機(jī)density來(lái)打不同的apk包（舉個(gè)栗子，如果是hdpi的機(jī)器，下載下來(lái)的就只有hdpi的資源）
*如果是在國(guó)內(nèi)的市場(chǎng)話。建議只放一套（h或者xhpdi），因?yàn)閲?guó)內(nèi)市場(chǎng)是沒(méi)有上面那種機(jī)制的，放多套資源會(huì)導(dǎo)致安裝包變得很大。
*此外： Android在沒(méi)有找到相應(yīng)dpi的圖片時(shí)，會(huì)用其他density的圖片進(jìn)行縮放處理。
*/

// 獲取命令行參數(shù)
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)
    // 平臺(tái)信息
    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"

執(zhí)行 npm run copy即可，完成圖片資源的復(fù)制

具體在頁(yè)面上使用

  <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

總結(jié)

以上是生活随笔為你收集整理的weex入门篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。