weex入门篇
weex入门篇
Weex 致力于使开发者能基于当代先进的 Web 开发技术，使用同一套代码来构建 Android、iOS 和 Web 应用。
weex SDK 集成了vueJS，Rax,不需要额外引入。
一）环境的搭建
1）搭建android环境：首先安装搭建好AndroidStudio，参照react-native 官网环境搭建（比较清楚），适用于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需要将图片资源放置在 \platforms\android\app\src\main\res\ drawable-**文件中，
ios: platforms\ios\images
下面给出一段拷贝图片的具体实现：
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
"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)
},
