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需要將圖片資源放置在 platformsandroidappsrcmainesdrawable-**文件中，

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

總結

以上是生活随笔為你收集整理的weex入门篇的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。