weex+android原生开发学习笔记（三）
1、weex长度单位只支持px 参考（https://www.cnblogs.com/wuyougougou970301/p/9263240.html）
长度单位有 rem,em,pt weex:px
dpi=dp=px
了解原生应用的dpi单位，那这里的px是和dpi单位相对应的。所以你也不用纠结。使用就可以了，需要注意的是请不要再使用我们的rem,em,pt进行布局了
2、weex开发，使用input的type=date，在移动端android，点击使用的时候，崩溃
解决：1》、使用weex-ui的日历控件wxc-page-calendar 参考：https://alibaba.github.io/weex-ui/#/cn/packages/wxc-page-calendar/
问题就是，这个加载起来特别慢，10秒以上才能弹出来
2》、因为赶进度，果断换原生：（参考：https://www.cnblogs.com/whycxb/p/9163456.html）
//日期选择
implementation 'com.contrarywind:Android-PickerView:4.1.6'
public void selectDate(String title){
//控制时间范围(如果不设置范围，则使用默认时间1900-2100年，此段代码可注释)
//因为系统Calendar的月份是从0-11的,所以如果是调用Calendar的set方法来设置时间,月份的范围也要是从0-11
Calendar selectedDate = Calendar.getInstance();
//设置最小日期和最大日期
Calendar startDate = Calendar.getInstance();
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");
try {
startDate.setTime(df.parse("1970-01-01"));//设置为2006年4月28日
} catch (java.text.ParseException e) {
e.printStackTrace();
}
Calendar endDate = Calendar.getInstance();//最大日期是今天
//时间选择器
TimePickerView timePickerBuilder = new TimePickerBuilder((Activity)mWXSDKInstance.getContext(), new OnTimeSelectListener() {
@Override
public void onTimeSelect(Date date, View v) {//选中事件回调
// 这里回调过来的v,就是show()方法里面所添加的 View 参数，如果show的时候没有添加参数，v则为null
SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd");
String format = df.format(date);
Map
mapParams.put("dateSelectedKey",format);
mWXSDKInstance.fireGlobalEventCallback("datePickerKey",mapParams);
}
}) .setDecorView((RelativeLayout)((Activity)mWXSDKInstance.getContext()).findViewById(R.id.activity_rootview))//必须是RelativeLayout，不设置setDecorView的话，底部虚拟导航栏会显示在弹出的选择器区域
//年月日时分秒 的显示与否，不设置则默认全部显示
.setType(new boolean[]{true, true, true, false, false, false})
.setLabel("", "", "", "", "", "")
.isCenterLabel(false)//是否只显示中间选中项的label文字，false则每项item全部都带有label。
.setTitleText(title)//标题文字
.setTitleSize(20)//标题文字大小
.setTitleColor(((Activity)mWXSDKInstance.getContext()).getResources().getColor(R.color.pickerview_title_text_color))//标题文字颜色
.setCancelText("取消")//取消按钮文字
.setCancelColor(((Activity)mWXSDKInstance.getContext()).getResources().getColor(R.color.pickerview_cancel_text_color))//取消按钮文字颜色
.setSubmitText("确定")//确认按钮文字
.setSubmitColor(((Activity)mWXSDKInstance.getContext()).getResources().getColor(R.color.pickerview_submit_text_color))//确定按钮文字颜色
.setContentTextSize(20)//滚轮文字大小
.setTextColorCenter(((Activity)mWXSDKInstance.getContext()).getResources().getColor(R.color.pickerview_center_text_color))//设置选中文本的颜色值
.setLineSpacingMultiplier(1.8f)//行间距
.setDividerColor(((Activity)mWXSDKInstance.getContext()).getResources().getColor(R.color.pickerview_divider_color))//设置分割线的颜色
.setRangDate(startDate, endDate)//设置最小和最大日期
.setDate(selectedDate)//设置选中的日期
.build();
timePickerBuilder.show();
}
3、weex中，通过id获取一个组件
this.$refs.img.src='';
4、weex调用android原生选择图片时，展示出的拍照按钮，点击崩溃报错：exposed beyond app through ClipData.Item.getUri()
解决：（参考：https://blog.csdn.net/qq_23179075/article/details/70314473?locationNum=5&fps=1）
private void initImagePicker() {
// android 7.0系统解决拍照(崩溃)的问题
StrictMode.VmPolicy.Builder builder = new StrictMode.VmPolicy.Builder();
StrictMode.setVmPolicy(builder.build());
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN_MR2) {
builder.detectFileUriExposure();
}
ImagePicker imagePicker = ImagePicker.getInstance();
//设置图片加载器
imagePicker.setImageLoader(new PicassoImageLoader());
//显示拍照按钮
imagePicker.setShowCamera(true);
//允许裁剪（单选才有效）
imagePicker.setCrop(true);
//是否按矩形区域保存
imagePicker.setSaveRectangle(true);
//选中数量限制
imagePicker.setSelectLimit(9);
//裁剪框的形状
imagePicker.setStyle(CropImageView.Style.RECTANGLE);
//裁剪框的宽度。单位像素（圆形自动取宽高最小值）
imagePicker.setFocusWidth(800);
//裁剪框的高度。单位像素（圆形自动取宽高最小值）
imagePicker.setFocusHeight(800);
//保存文件的宽度。单位像素
imagePicker.setOutPutX(1000);
//保存文件的高度。单位像素
imagePicker.setOutPutY(1000);
}
5、weex调用原生选择图片，拍照成功后，选择刚拍好的图片，获取到的图片路径，weex不能找到，重新进入选择即可
6、weex开发，实现时间轴问题，使用iview插件 IView官网（http://v1.iviewui.com/components/carousel）
$ npm install iview --save
（集成在现有weex项目，错误百出，果断放弃）
7、weex端，js格式化时间的工具类 （参考：https://www.cnblogs.com/liuxianan/p/js-date-format-parse.html）
最后还是手写最笨的方式，无语，（android出身）js的这些个对象类不熟啊；整理地址：https://blog.csdn.net/u010326875/article/details/84370845
8、weex中vue编码的时候，提供的数据默认类型格式：
props: {
list: {
type: Array,
default: []
},
name: {
type: String,
default:''
},
state: {
type: Boolean,
default: false
},
cellStyle: {
type: Object,
default: () => ({})
},
rowsNumber:{
type: Number ,
default: 2
},
}
等等吧。。。
9、weex端，input组件再用的使用，输入完信息，点击删除，清除干净内容；最后打印出来发现还会剩一个字？
1》、错误写法：
修改写法：
2》、使用v-model="inputValue"之后就不要再对inputValue手动赋值，就是说：
或者
搜索组件整理：https://blog.csdn.net/u010326875/article/details/84590525
10、折叠列表组件，使用light资源库：https://document.lightyy.com/light_ui_ref/index.html
源码：https://github.com/snice/easy-weex-demo
1、下载lightingUI模块，npm install -d --save lighting-ui （因为个人公司UI源码，所以自己手写了一个）
2、手写的折叠列表组件 ，已整理（https://blog.csdn.net/u010326875/article/details/84584321）
11、css居中：
/*flex 布局*/
display: flex;
/*实现水平居中*/
align-items: center;
/*实现垂直居中*/
justify-content: center;
12、weex中，list组件怎样检索定位到固定的cell 参考：http://dotwe.org/vue/230d94ea4a621ba70f2aa009e8ddbc6e
说明：（至于为什么是数组，文档有介绍）
文档的写法（
:ref="'item'+index"
const dom = weex.requireModule('dom')
静态的写法：（ .的方式获取属性值 ）
const el = this.$refs.item10[0]
dom.scrollToElement(el, {})
动态的写法：（ []的方式获取属性值 ）
const el = this.$refs['item'+index][0]
dom.scrollToElement(el, {})
js获取对象参数和属性有这两种方式（ . and [] ）
）
13、weex中 div背景透明的效果实现，比如A-Z字母索引的view
愁了三天，搞不出来，只能暂时不透明了，宽度设小一些；不耽误使用，效果没有设计图看着爽
有大神知道的，望不吝赐教！！！
14、自定义组件，slot传参的使用：参考（https://blog.csdn.net/u010320804/article/details/79487752）
vue 利用slot向父组件传值
15、weex创建一个新的页面，然后跳转到新的页面发现 页面空白
原因：weex编译成js后，copy到android assets下的的时候，并没有找到刚才的新的页面.js
同步刷新即可
16、weex实现横向列表展示数据，整理：https://blog.csdn.net/u010326875/article/details/84635904
android中依赖的weex sdk20.0版本，scroller会出现无法清空页面cell；换list即可
17、weex实现毛玻璃效果
1》、div设置背景图片，android端貌似是不可以展示的；所以解决办法是：
在div中使用image标签设置绝对布局( .mine-headImageBg{
height: 360px;
width: 750px;
position: absolute;
} )
即可达到效果
2》、实现毛玻璃效果：
不会实现，也没有找到实现的方法，所以：
.mine-headImage-background{//背景设置
height: 360px;
align-items: center;
background-color: #333;
}
.mine-headImageBg{//图片设置透明度
height: 360px;
width: 750px;
position: absolute;
opacity:0.6;
}
3》、android端weex实现毛玻璃的效果，有大神知道的，望不吝赐教！！！