weex

<tmplate>
	// 最外层必须是div
	<div>
		<text class="text">块级文本容器, 文本只能放在这里</text>
		<input /> // input 标签必须用 / 结束
	</div>
</tmplate>


<script>
	// 引入文件
	weex.requireModule('xxx')	
</script>


<style scoped>
	// css样式   强制使用scoped
	// css必须用id 或 类名  其他选择器不起作用
	.text {
		// 超出显示省略号
		lines: 1
	}
</style>















// 安装 weex 工具
	npm install weex-toolkit -g

// 创建一个空的模板
	weex create my-app


npm install
npm start



// 生成一个 ios 项目
	weex platform add ios

// 生成一个 android 项目
	weex platform add android 


// 发布成 Android 应用
	weex run android



// 修改图标
	Android
		android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png



注意事项
	使用 flex 布局
	不支持百分比布局
	border 设置分开写
	长度单位只支持px  此处的px和html的px不一样
	input 标签要用 / 结束  


	宽：720px=100%         高：1250px =100%
		750 ?


	列表
		list  ul
		cell  li



image 的 resize 属性   控制图片的拉伸方式的，它有三种拉伸方式。
	stretch：默认值，指定图片按照容器拉伸，有可能使图片产生形变。
	cover：指定图片可以被调整到容器，以使图片完全覆盖背景区域，图片有可能被剪裁。
	contain：指定可以不用考虑容器的大小，把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域



调用内建模块
	weex.requireModule(‘xxx’)

	const animation = weex.requireModule('animation')
	animation.transition()

weex-ui
	// 安装
	npm i weex-ui -S

	// 安装插件
	npm i babel-preset-stage-0 babel-plugin-component  -D

	1
		import { WxcComponent1, WxcComponent2 } from "weex-ui"
	2
		import WxcComponent1 from "weex-ui/packages/wxc-component1"
		import WxcComponent2 from "weex-ui/packages/wxc-component2"


	在 .babelrc 文件中添加插件配置
		{
		  "presets": [
		    "es2015",
		    "stage-0"
		  ],
		  "plugins": [
		    [
		      "component",
		      {
		        "libraryName": "weex-ui",
		        "libDir": "packages"
		      }
		    ]
		  ]
		}


热更新
	npm run dev
	npm run serve 



手机要和电脑在同一个网络中	

命令行 weex  we文件路径.we --qr

生成页面的二维码

用手机的playground客户端扫描，再修改we文件后保存，手机屏幕会闪一下，页面就更新了


ios

	安装   cocoapods
		 gem install -n /usr/local/bin cocoapods 
	安装   weexSDK
		 pod install
	




	-licucore




安装返回按键 

android

app3\platforms\android\app\src\main\java\com\weex\app\AbsWeexActivity.java

public void onBackPressed(){
Map<String,Object> params=new HashMap<>();
params.put("name","back");
mInstance.fireGlobalEventCallback("androidback",params);
}


weex

backListener() {
	let that = this
	const globalEvent = weex.requireModule('globalEvent')
	globalEvent.addEventListener("androidback", (e) => {
		// 安装范返回键监控   后期处理
		// console.log(e)
		// that.$router.go(-1)
	})
}	

this.backListener()



加载 sass

npm install node-sass -S
npm install sass-loader -S

package.json
  "node-sass": "^4.5.2",
 "sass-loader": "^6.0.3",

vue-loader.conf.js

module.exports = (options) => {
    return {
        loaders: utils.cssLoaders({
            // sourceMap: use sourcemao or not.
            sourceMap: options && sourceMapEnabled,
            // useVue: use vue-style-loader or not
            useVue: options && options.useVue,
            // usePostCSS: use postcss to compile styles.
            usePostCSS: options && options.usePostCSS
        }),
        cssSourceMap: sourceMapEnabled,
        cacheBusting: config.dev.cacheBusting,
        lang: {
            scss: ['sass-loader']
        }
    }
}


安装 bui-ui

npm install -g bui-weex-toolkit

// 更新
npm update -g bui-weex-toolkit