weex 小结--内建模块

时间:2023-07-02 22:45:45

使用以下模块时,需要导入依赖:var *** = require('@weex-module/****');

1. navigator --像浏览器一样切换页面

2. webview(module) --<web> 组件的刷新,后退,前进

3. dom --组件的滚动(只用于 <list>,<scroller>)

4. stream --网络请求

5. modal --各种提示框

6. animation --动画

7. storage --存储

8. clipboard --剪贴板

1. navigator 切换页面,url 只能是 .js 文件的地址(返回的是 js 文件)

   //前进 
 var params = {'url':url,'animated':'true'};
navigator.push(params, function(e) {});
 //后退---params 可以省略不写
 var params = {'url':url,'animated':'true'};
navigator.pop(params, function(e) {});

2. webview

3. dom 组件滚动

                                // 获取目标组件对象
var el=this.$el('top');
// 参数:第一个为目标点,第二个为偏移值
dom.scrollToElement(el,this.$el('el-0'));

4. stream 网络请求,推荐 fetch()(sendhttp() 方法不建议使用)

 /**
* @param optionsStr request options include:
* method: GET 、POST、PUT、DELETE、HEAD、PATCH
* headers:object,请求header(可以不用设置)
* url:
* body: "Any body that you want to add to your request"(格式为:“QueryType="+queryType+"&Params="+params+"&UserGuid="+userGuid“)
* type: json、text、jsonp(native实现时等价与json)
* @param callback finished callback,response object:
* status:status code
* ok:boolean 是否成功,等价于status200~299
* statusText:状态消息,用于定位具体错误原因
* data: 响应数据,当请求option中type为json,时data为object,否则data为string类型
* headers: object 响应头
*
* @param progressCallback in progress callback,for download progress and request state,response object:
* readyState: number 请求状态,1 OPENED,开始连接;2 HEADERS_RECEIVED;3 LOADING
* status:status code
* length:当前获取的字节数,总长度从headers里「Content-Length」获取
* statusText:状态消息,用于定位具体错误原因
* headers: object 响应头
*/
stream.fetch({method: 'GET',url: url,type:'json'}, function(res) {
try {
var results = res.data.data || []; // res,data 才是需要的数据
self.title=results.title;
self.content=results.content;
self.author=results.author.user_name;
console.log('i am the callback '+results.id);
} catch(e) {}
},function(res){});

5. modal 提示框

注:浏览器预览时显示不正常(高度太小,被挤压),移动端显示正常

// toast(params),alert(params,callback), confirm(params,callback), prompt(params,callback)
modal.toast({'message':self.message,'doation':2});
modal.alert({'message':self.message,'oktitle':'OK'},function(result){self.params = String(result);}),
// confirm 返回值的格式:{result: '按钮上的值'}
modal.confirm({'message':self.message,'okTitle': 'YES','cancelTitle': 'NO'},function (result) {self.params = String(result);});
// prompt 返回值 ret 格式:{result: '按钮上的值',data: '输入的值'}
modal.prompt({'message': 'I am a prompt','okTitle': 'YES', 'cancelTitle': 'NO'}, function (ret) {self.params = JSON.stringify(ret);});

6. animation 动画

                        // 旋转
rotate:function(){
var self = this;
self.current_rotate += 90;
self.animate({transform: 'rotate(' + self.current_rotate + 'deg)'}, 'ease-in-out', 500, function() {
if (self.current_rotate === 360) {
self.current_rotate = 0;
}else {
self.rotate();
}
});
},
// 放大 / 缩小
scale:function(){
var self=this;
self.current_scale=this.current_scale=== 2 ? .5 : 2;
self.anim({transform:'scale('+self.current_scale+')'},'linear',500,function(){});
},
// 移动
translate:function(){
var self=this;
self.current_translate=self.current_translate?'':'translate(50%,50%)';
self.anim({transform:self.current_translate},'ease-in',500,function(){});
},
// 横向移动
translateX:function(){
var self=this;
self.current_translate=self.current_translate?'':'translate(500%,0)';
self.animate({transform:self.current_translate},'ease-in',500,function(){});
},
// 竖向移动
translateY:function(){
var self=this;
self.current_translate=self.current_translate?'':'translate(0,100%)';
self.animate({transform:self.current_translate},'ease-in',500,function(){});
},
// 改变宽度
changeWidth:function(){
var self=this;
self.current_width=self.current_width===250?50:250;
self.animate({width:self.current_width},'linear',500,function(){});
},
// 改变高度
changeHeight:function(){
var self=this;
self.current_height=self.current_height===250?50:250;
self.animate({height:self.current_height},'ease-in',500,function(){});
},
// 改变背景颜色
changeColor:function(){
var self=this;
self.current_color=self.current_color==='#F0AD4E'?'#FF0000':'#F0AD4E';
self.animate({backgroundColor:self.current_color},'linear',500,function(){});
},
// 改变透明度
changeOpacity:function(){
var self=this;
self.current_opacity=self.current_opacity===1?0.3:1;
self.animate({opacity:self.current_opacity},'linear',500,function(){});
},

7. storage 本地存储
注: key 不可以为 “” 或者是 null

从本地获取数据时:使用 getAllKeys 方法获取所有的 key,从而匹配出我们需要的 key 来获取数据

                        //方法区分大小写,大小写出错可导致页面无法正常渲染
storage.getAllKeys(function(e){
if (e.result=='success'&&e.data.length) {
e.data.forEach(function(item){
if (item.indexOf('his_')>-1) {
self.his_list.push(item.split('his_')[1]);
}
});
}
});

向本地添加数据:使用 setItem(key,value,callback) 方法添加数据

                           storage.setItem('his_'+self.his_item,self.his_item,function(e){
// 返回值 e 格式:{result:'success', data:'****'} e.data 为空时返回 'undefine'
self.his_list.push(self.his_item);
});

获取一条数据: getItem(key,callbakc)

storage.getItem('foo', function (e) {
e.data
});

删除一条数据:removeItem(key,callback)

storage.removeItem('foo', function (e) {
e.result
e.data
})

获取本地存储的数量 :length(callback)

获取所有键值得数组: getAllKeys(callback)

8. clipboard 剪贴板 --将文本信息放到剪贴板,获取剪贴板的信息并粘贴

getString(text) : 将文本信息放到剪贴板

                                if (!e.value) return;
clipboard.setString(e.value);

setString(callback) : 获取剪贴板的信息并粘贴

				if (!self.clipboardmess) return;
clipboard.getString(function(e){
self.clipboardmess=e.data;
});