也许是我智商不行吧，weex的官方文档看得相当吃力。
结合网上搜来的别人家的教程，把用到的在这里记一下吧。
1.新建页面
一开始建立新页面就懵逼了一下下。新建的是vue文件，然而预览里出现的是js文件。那么，对应的js文件在哪里呢？run之后，他在出现在dist目录下的。
2.跳转页面
跳转其实有三种状态：weex > weex；weex > native；native > weex：
先记一下weex > weex：
<script>
var navigator = weex.requireModule('navigator')
export default {
}
</script>
script中添加跳转方法jumpIn和jumpOut(分别对应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 => {
// 完成后执行的操作
})
},
jumpOut () {
navigator.pop({
animated: 'true'
})
}
}
}
</script>
在需要的按钮上添加点击事件
<text class="buttonText" @click="jumpIn">Enter</text>
如果要跳转到项目中的其他页面的话就要先获取当前的路径，然后将要跳转的页面拼接到地址上，以jumpIn方法中跳转到b.html文件为例：
jumpIn (event) {
var url = weex.config.bundleUrl; //获取当前路径
url = url.split('/').slice(0,-1).join('/') + '/b.html';//拼接当前路径到要跳转的文件。（这里看了很多教程都是用的js文件的地址，但是我目前的demo里实际是需要用html的地址。）
navigator.push({
url: url,
animated: 'true'
}, event => {
// 完成后执行的操作
})
},
3.import外部的js
由于目前weex中的页面是用vue写的，所以这里其实是vue的知识，建议看一下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中导入文件
import netJs from "./net/httpRequests";
import * as testJs from "./net/testfunction";
方法调用分别是
netJs.methods.test();
testJs.test();
testJs.test2();
4.尺寸单位适配
除了熟悉的pt单位外，还有一个用了会在ide里出现警告提示但实际可用的单位wx（官方手册也没有提到，ide的代码提示里也不会出现，所以这是做出来吃灰的么？）。这个单位是根据屏幕缩放自动适配的（类似dp），实际使用发现效果还不错，然而并不是总是支持，有时会无效。
5.http请求
这个官方文档倒大致写明白了。
使用stream模块
export function httpReq(key){
//文字转码
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;
}
});
}
带中文的时候注意其中这句转码：
var keyWord=encodeURI(key);
再解析一下me.getJsonpResult这个JSON字符串
假设获得的JSON是这样的结构
{
body:{
"resources":[{title:abc,id:0},{title:def,id:1}]
}
}
使用parse方法将JSON解析为对象。然后根据name获取结构内的对象和数组。
export function parseInfo(_info){
var getJsonpResult = JSON.stringify(_info);
// console.log('get:'+me.getJsonpResult);
var obj =JSON.parse(getJsonpResult);
var objArray =obj.body.resources;//这里获得了一个数组
for(var i=0;i<objArray.length;i++){
console.log('title:'+objArray[i].title);
console.log('title:'+objArray[i].id);
}
return objArray.length;
}
在之前的httpReq方法中调用这个解析。
export function httpReq(key){
//文字转码
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;
}
});
}
然后更新一下界面：
主界面上有个文本框绑定了变量totalCount
<text class="menuText">共 {{totalCount}} 条</text>
定义回调函数：
httpCallback:function(val){
this.totalCount = val;
}
httpReq方法增加回调函数的参数，获得数据后通过回调传回数值到界面。
export function httpReq(key,httpCallback){
//文字转码
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);
}
});
}
主页面调用时将刚定义的回调函数作为参数传给httpReq方法
httpJs.httpReq(key,this.httpCallback);
6.列表list的点击事件
基本需求就是点击列表项获得序号，有序号之后查具体的信息就简单了。
假设列表长这样。
<list class="videoList">
<!--boxs是数据中的列表，对应script中data属性里的数据名称。item是元素的名字，随便取，后面绑定数据的时候用到。v-for是循环语句-->
<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>
关键就是循环v-for="(item,index) in boxes"第一个括号内的内容。他们可以作为参数传递。
点击事件@click="onClick(index)中将index作为参数传递。
定义方法onCLick就获得了序号
onClick(_index){
console.log("index:"+_index);
}
相关github地址：https://github.com/codeqian/flow-page-demo
网友评论