也許是我智商不行吧宾舅，weex的官方文檔看得相當(dāng)吃力糊识。
結(jié)合網(wǎng)上搜來的別人家的教程，把用到的在這里記一下吧堵未。
1.新建頁面
一開始建立新頁面就懵逼了一下下译红。新建的是vue文件，然而預(yù)覽里出現(xiàn)的是js文件兴溜。那么，對(duì)應(yīng)的js文件在哪里呢耻陕？run之后拙徽，他在出現(xiàn)在dist目錄下的。
2.跳轉(zhuǎn)頁面
跳轉(zhuǎn)其實(shí)有三種狀態(tài)：weex > weex诗宣；weex > native膘怕；native > weex：
先記一下weex > weex：
<script>
var navigator = weex.requireModule('navigator')
export default {
}
</script>
script中添加跳轉(zhuǎn)方法jumpIn和jumpOut(分別對(duì)應(yīng)navigator模塊的push和pop行為)：
<script>
var navigator = weex.requireModule('navigator')
var modal = weex.requireModule('modal')
export default {
methods: {
jumpIn (event) {
navigator.push({
url: "http://www.bing.com",
animated: 'true'
}, event => {
// 完成后執(zhí)行的操作
})
},
jumpOut () {
navigator.pop({
animated: 'true'
})
}
}
}
</script>
在需要的按鈕上添加點(diǎn)擊事件
<text class="buttonText" @click="jumpIn">Enter</text>
如果要跳轉(zhuǎn)到項(xiàng)目中的其他頁面的話就要先獲取當(dāng)前的路徑，然后將要跳轉(zhuǎn)的頁面拼接到地址上召庞，以jumpIn方法中跳轉(zhuǎn)到b.html文件為例：
jumpIn (event) {
var url = weex.config.bundleUrl; //獲取當(dāng)前路徑
url = url.split('/').slice(0,-1).join('/') + '/b.html';//拼接當(dāng)前路徑到要跳轉(zhuǎn)的文件岛心。（這里看了很多教程都是用的js文件的地址，但是我目前的demo里實(shí)際是需要用html的地址篮灼。）
navigator.push({
url: url,
animated: 'true'
}, event => {
// 完成后執(zhí)行的操作
})
},
3.import外部的js
由于目前weex中的頁面是用vue寫的忘古，所以這里其實(shí)是vue的知識(shí)，建議看一下vue教程诅诱。這里簡單記一下：
有以下兩種寫法的js文件
test1.js
export default {
methods: {
test(){
console.log("import succeed");
}
}
}
和
test2.js
export function test(){
console.log("test");
}
export function test2(){
console.log("test2");
}
script中導(dǎo)入文件
import netJs from "./net/httpRequests";
import * as testJs from "./net/testfunction";
方法調(diào)用分別是
netJs.methods.test();
testJs.test();
testJs.test2();
4.尺寸單位適配
除了熟悉的pt單位外髓堪，還有一個(gè)用了會(huì)在ide里出現(xiàn)警告提示但實(shí)際可用的單位wx（官方手冊(cè)也沒有提到，ide的代碼提示里也不會(huì)出現(xiàn)娘荡，所以這是做出來吃灰的么干旁？）。這個(gè)單位是根據(jù)屏幕縮放自動(dòng)適配的（類似dp）炮沐，實(shí)際使用發(fā)現(xiàn)效果還不錯(cuò)争群，然而并不是總是支持，有時(shí)會(huì)無效大年。
5.http請(qǐng)求
這個(gè)官方文檔倒大致寫明白了换薄。
使用stream模塊
export function httpReq(key){
//文字轉(zhuǎn)碼
var keyWord=encodeURI(key);
var url="http://open.boosj.com/search/video/by_keywords?category=1362&keywords="+keyWord+"&size=20&page=1";
console.log("request http for "+url);
var stream = weex.requireModule('stream');
stream.fetch({
method: 'GET',
url: url,
type:'jsonp'
}, function(ret) {
if(!ret.ok){
this.getJsonpResult = "request failed";
return 0;
}else{
console.log('GOT');
return _count;
}
});
}
帶中文的時(shí)候注意其中這句轉(zhuǎn)碼：
var keyWord=encodeURI(key);
再解析一下me.getJsonpResult這個(gè)JSON字符串
假設(shè)獲得的JSON是這樣的結(jié)構(gòu)
{
body:{
"resources":[{title:abc,id:0},{title:def,id:1}]
}
}
使用parse方法將JSON解析為對(duì)象玉雾。然后根據(jù)name獲取結(jié)構(gòu)內(nèi)的對(duì)象和數(shù)組。
export function parseInfo(_info){
var getJsonpResult = JSON.stringify(_info);
// console.log('get:'+me.getJsonpResult);
var obj =JSON.parse(getJsonpResult);
var objArray =obj.body.resources;//這里獲得了一個(gè)數(shù)組
for(var i=0;i<objArray.length;i++){
console.log('title:'+objArray[i].title);
console.log('title:'+objArray[i].id);
}
return objArray.length;
}
在之前的httpReq方法中調(diào)用這個(gè)解析专控。
export function httpReq(key){
//文字轉(zhuǎn)碼
var keyWord=encodeURI(key);
var url="http://open.boosj.com/search/video/by_keywords?category=1362&keywords="+keyWord+"&size=20&page=1";
console.log("request http for "+url);
var stream = weex.requireModule('stream');
stream.fetch({
method: 'GET',
url: url,
type:'jsonp'
}, function(ret) {
if(!ret.ok){
this.getJsonpResult = "request failed";
return 0;
}else{
var _count=parseInfo(ret.data);
console.log('count:'+_count);
return _count;
}
});
}
然后更新一下界面：
主界面上有個(gè)文本框綁定了變量totalCount
<text class="menuText">共 {{totalCount}} 條</text>
定義回調(diào)函數(shù)：
httpCallback:function(val){
this.totalCount = val;
}
httpReq方法增加回調(diào)函數(shù)的參數(shù)抹凳，獲得數(shù)據(jù)后通過回調(diào)傳回?cái)?shù)值到界面。
export function httpReq(key,httpCallback){
//文字轉(zhuǎn)碼
var keyWord=encodeURI(key);
var url="http://open.boosj.com/search/video/by_keywords?category=1362&keywords="+keyWord+"&size=20&page=1";
console.log("request http for "+url);
var stream = weex.requireModule('stream');
stream.fetch({
method: 'GET',
url: url,
type:'jsonp'
}, function(ret) {
if(!ret.ok){
this.getJsonpResult = "request failed";
httpCallback(0);
}else{
var _count=parseInfo(ret.data);
console.log('count:'+_count);
httpCallback(_count);
}
});
}
主頁面調(diào)用時(shí)將剛定義的回調(diào)函數(shù)作為參數(shù)傳給httpReq方法
httpJs.httpReq(key,this.httpCallback);
6.列表list的點(diǎn)擊事件
基本需求就是點(diǎn)擊列表項(xiàng)獲得序號(hào)伦腐，有序號(hào)之后查具體的信息就簡單了赢底。
假設(shè)列表長這樣。
<list class="videoList">
<!--boxs是數(shù)據(jù)中的列表柏蘑，對(duì)應(yīng)script中data屬性里的數(shù)據(jù)名稱幸冻。item是元素的名字，隨便取咳焚，后面綁定數(shù)據(jù)的時(shí)候用到洽损。v-for是循環(huán)語句-->
<cell class="cell" v-for="(item,index) in boxes" @click="onClick(index)">
<div class="inlineBox">
<image class="imageBox" :src="item.imageUrl" />
</div>
<div class="inlineBox, cellText">
<text class="hintText">{{item.title}}</text><br>
<!--<text class="contentText" lines="2">{{item.description}}</text>-->
<text class="hintText">播放：{{item.click}}</text>
</div>
</cell>
</list>
關(guān)鍵就是循環(huán)v-for="(item,index) in boxes"第一個(gè)括號(hào)內(nèi)的內(nèi)容。他們可以作為參數(shù)傳遞革半。
點(diǎn)擊事件@click="onClick(index)中將index作為參數(shù)傳遞碑定。
定義方法onCLick就獲得了序號(hào)
onClick(_index){
console.log("index:"+_index);
}
相關(guān)github地址：https://github.com/codeqian/flow-page-demo
