weex 小結--內建模塊

使用如下模塊時，須要導入依賴：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;
				});