weexapp 开发流程其他页面创建
Posted 每天都要进步一点点
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了weexapp 开发流程其他页面创建相关的知识，希望对你有一定的参考价值。
1.首页
（1）轮播图
步骤一：创建 轮播图 组件（Slider.vue）
src / assets / components / Slider.vue
<!-- 轮播图 组件 -->
<template>
<slider class="slider" auto-play="true" interval="5000" @change="onchange">
<div class="frame" v-for="img in imageList">
<image class="image" resize="cover" :src="img.src"></image>
</div>
<indicator class="indicator"></indicator>
</slider>
</template>
<style scoped>
.iconfont {
font-family:iconfont;
}
.image {
width: 750px;
height: 430px;
}
.slider {
width: 750px;
height: 430px;
}
.frame {
width: 750px;
height: 430px;
position: relative;
}
.indicator {
width: 750px;
height: 40px;
item-color: white;
item-selected-color: #b4282d;
item-size: 12px;
position: absolute;
bottom: 10px;
right: 0px;
}
</style>
<script>
export default {
props:["imageList"],
data () {
return {
}
},
methods: {
onchange (event) {
}
}
}
</script>
步骤二：页面调用
src / assets / views / home.vue
<!-- 首页 -->
<template>
<div class="wrapper">
<!-- 标题栏 -->
<wxc-minibar
title="首页"
right-button="N"
left-button="N"
background-color="#F2F3F4"
text-color="#333333"></wxc-minibar>
<!-- 滚动视图 -->
<scroller class="main-list">
<!-- 轮播图 -->
<kx-slider :imageList="Banners"></kx-slider>
</scroller>
</div>
</template>
<script>
// 引入轮播图组件
import Slider from \'../components/Slider.vue\';
// 引入UI组件
import { WxcMinibar } from \'weex-ui\';
export default {
components: {
\'kx-slider\': Slider,
WxcMinibar
},
data () {
return {
Banners: [
{ title: \'\', src: \'http://app.kuitao8.com/images/banner/1.jpg\'},
{ title: \'\', src: \'http://app.kuitao8.com/images/banner/2.jpg\'},
{ title: \'\', src: \'http://app.kuitao8.com/images/banner/3.jpg\'}
]
}
}
}
</script>
<style scoped>
.wrapper{
}
.iconfont {
font-family:iconfont;
}
.main-list{
position: fixed;
top: 91px;
bottom: 90px;
left: 0;
right: 0;
}
</style>
效果图：
（2）滑动导航栏 wxc-tab-page
src / assets / views / home.vue
<!-- 首页 -->
<template>
<div class="wrapper">
<!-- 标题栏 -->
<wxc-minibar
title="首页"
right-button="N"
left-button="N"
background-color="#F2F3F4"
text-color="#333333"></wxc-minibar>
<!-- 滚动视图 scroller需要用一个div将内容包含 -->
<scroller class="main-list">
<!-- 请求数据成功 -->
<div v-if="network">
<!-- 轮播图 -->
<kx-slider :imageList="Banners"></kx-slider>
<!-- 顶部标签页 -->
<wxc-tab-page
ref="wxc-tab-page"
:tab-titles="tabTitles"
:tab-styles="tabStyles"
title-type="text"
:needSlider="needSlider"
:is-tab-view="isTabView"
:tab-page-height="tabPageHeight"
:spm-c="4307989"
@wxcTabPageCurrentTabSelected="wxcTabPageCurrentTabSelected">
<list
v-for="(v,index) in tabList"
:key="index"
class="item-container">
<cell class="border-cell"></cell>
<cell
class="cell"
v-for="(demo,key) in v"
:accessible="true"
:aria-label="demo.title"
:key="key">
<wxc-pan-item
:ext-id="\'1-\' + (v) + \'-\' + (key)"
@wxcPanItemPan="wxcPanItemPan" >
<wxc-cell
label=""
:title="demo.title"
:has-arrow="true"
@wxcCellClicked="wxcCellClicked(webUrl+\'/\'+demo.inputtime.replace(\'-\',\'\').replace(\'-\',\'\')+\'/\'+demo.id+\'.shtml\')"
spm="181.12312312.12312.d01"
:has-top-border="false"
:price="demo.inputtime"></wxc-cell>
</wxc-pan-item>
</cell>
</list>
</wxc-tab-page>
</div>
<!-- 请求数据失败 -->
<div v-if="network ==0 ">
<net-work
:type="type"
:show="show"></net-work>
</div>
</scroller>
</div>
</template>
<script>
// 弹窗
const modal = weex.requireModule(\'modal\');
// 引入 工具类
import util from \'../util\';
// 引入 轮播图组件
import Slider from \'../components/Slider.vue\';
// 引入 UI组件
import { WxcMinibar, WxcTabPage, WxcPanItem, WxcCell, Utils } from \'../../../index\';
// 配置文件
import Config from \'./config\';
// 数据请求组件
var stream = weex.requireModule(\'stream\');
// 身份验证
import jwtdecode from \'jwt-simple\';
// 引入 请求失败页面
import NetWork from \'./network.vue\';
export default {
components: {
\'kx-slider\': Slider,
WxcMinibar,
WxcTabPage,
WxcPanItem,
WxcCell,
Utils,
NetWork
},
data () {
return {
// 轮播图
Banners: [
{ title: \'\', src: \'http://app.kuitao8.com/images/banner/1.jpg\'},
{ title: \'\', src: \'http://app.kuitao8.com/images/banner/2.jpg\'},
{ title: \'\', src: \'http://app.kuitao8.com/images/banner/3.jpg\'}
],
// 顶部标签页(wxc-tab-page) 配置信息
tabTitles: Config.tabTitles, // 顶部标签 标题
tabStyles: Config.tabStyles, // 顶部标签 样式
needSlider: true, // 是否需要滑动功能
isTabView: true, // 当设置为false,同时 tab 配置 url 参数即可跳出
tabPageHeight: 480, // Tab page 页面的高度
// 内容部分
tabList: [],
demoList: [1, 2, 3, 4, 5, 6, 7, 8, 9],
// 请求数据
lists:[],
// 是否显示\'网络异常\'
network:1,
// 请求类型数据
type: \'noNetwork\',
show: true
}
},
created () {
// 字体图标初始化
util.initIconFont();
// 获取 类型数据
this.getCategory();
// 根据设备 设置Tab page 页面的高度
this.tabPageHeight = Utils.env.getPageHeight();
// 发起 数据请求
var me = this;
stream.fetch({
method: \'GET\',
type: \'text\',
url: this.webUrl+\'/webservice/Api/List?catid=10&pagesize=20\',
}, function(ret) {
if(ret.ok){
// 解密
var test = jwtdecode.decode(ret.data, \'michahzdee2016\', \'HS256\');
me.lists = test.list;
me.network = 1; // 不显示\'网络异常\'
} else {
me.network = 0; // 显示\'网络异常\'
modal.toast({
\'message\': \'没有网络!\',
\'duration\': 1
});
return false;
}
})
},
methods: {
// 获取 类型数据
getCategory(){
var me = this;
stream.fetch({
method: \'GET\',
type: \'text\',
url: this.webUrl+\'/webservice/Api/getCategoryArticle?catid=9&pagesize=10\',
}, function(ret) {
if(ret.ok){
me.network = 1;
var test = jwtdecode.decode(ret.data, \'michahzdee2016\', \'HS256\');
// 类型数据
me.tabList = test.list;
} else {
me.network = 0;
modal.toast({
\'message\': \'没有网络!\',
\'duration\': 1
});
return false;
}
});
var metest = this;
var mylist = new Array();
stream.fetch({
method: \'GET\',
type: \'text\',
url: this.webUrl+\'/webservice/Api/getCategory?catid=9\',
}, function(ret) {
if(ret.ok){
metest.network=1;
var test = jwtdecode.decode(ret.data, \'michahzdee2016\', \'HS256\');
if (Array.isArray(test.list)) {
for(var i = 0; i < test.list.length; i++) {
mylist[i] = [];
mylist[i][\'title\'] = test.list[i][\'catname\'];
mylist[i][\'url\'] = test.list[i][\'catid\'];
}
}
// 顶部标签页 标题
metest.tabTitles = mylist;
} else {
metest.network = 0;
modal.toast({
\'message\': \'没有网络!\',
\'duration\': 1
});
return false;
}
})
},
wxcTabPageCurrentTabSelected (e) {
const self = this;
const index = e.page;
const id = e.url;
// modal.toast({ message: id, duration: 1 });
/* 未加载tab模拟数据请求 */
if (!Utils.isNonEmptyArray(self.tabList[id])) {
setTimeout(() => {
// Vue.set(self.tabList[id], id, self.demoList);
}, 100);
}
},
wxcPanItemPan (e) {
if (Utils.env.supportsEBForandroid()) {
// modal.toast({ message: _url, duration: 1 });
}
},
wxcCellClicked(_url) {
// 跳转视图
var urls = encodeURIComponent(_url);
this.$router.push({ path: \'/webview\',query:{url:urls}});
}
}
}
</script>
<style scoped>
.wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.iconfont {
font-family:iconfont;
}
.main-list{
position: fixed;
top: 91px;
bottom: 90px;
left: 0;
right: 0;
/*margin-top: 167px;*/
/*margin-bottom: 90px;*/
}
.item-container {
width: 750px;
background-color: #f2f3f4;
}
.border-cell {
background-color: #f2f3f4;
width: 750px;
height: 24px;
align-items: center;
justify-content: center;
border-bottom-width: 1px;
border-style: solid;
border-color: #e0e0e0;
}
.cell {
background-color: #ffffff;
}
</style>
效果图：
2.网络加载失败页面 network
src / assets / views / network.vue
<!-- 网络异常页 -->
<template>
<div class="wrap" v-if="show" :style="wrapStyle">
<div class="wxc-result" :style="{paddingTop: setPaddingTop }">
<image
class="result-image"
:aria-hidden="true"
:src="resultType.pic"></image>
<div class="result-content" v-if="resultType.content">
<text class="content-text">{{resultType.content}}</text>
<text
class="content-text content-desc"
v-if="resultType.desc">{{resultType.desc}}</text>
</div>
<div
class="result-button"
v-if="resultType.button"
@touchend="handleTouchEnd"
@click="onClick">
<text class="button-text">{{resultType.button}}</text>
</div>
</div>
</div>
</template>
<style scoped>
.wrap {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.wxc-result {
width: 750px;
flex: 1;
align-items: center;
background-color: #f2f3f4;
}
.result-image {
width: 320px;
height: 320px;
}
.result-content {
margin-top: 36px;
align-items: center;
}
.content-text {
font-size: 30px;
color: #A5A5A5;
height: 42px;
line-height: 42px;
text-align: center;
}
.content-desc {
margin-top: 10px;
}
.result-button {
margin-top: 60px;
border-width: 1px;
border-color: #979797;
background-color: #FFFFFF;
border-radius: 6px;
width: 240px;
height: 72px;
flex-direction: row;
align-items: center;
justify-content: center;
}
.button-text {
color: #666666;
font-size: 30px;
}
</style>
<script>
// 页面加载失败类型
import TYPES from \'./network\';
// 功能函数
import NetWorkUtils from \'../../../packages/utils\';
// 弹窗
const modal = weex.requireModule(\'modal\');
export default {
props: {
type: {
type: String,
default: \'noNetwork\'
},
show: {
type: Boolean,
default: true
},
wrapStyle: Object,
paddingTop: {
type: [Number, String],
default: 232
},
customSet: {
type: Object,
default: () => ({})
}
},
computed: {
resultType () {
const { type, customSet } = this;
const allTypes = NetWorkUtils.isEmptyObject(customSet) ? TYPES : NetWorkUtils.mergeDeep(TYPES, customSet);
let types = allTypes[\'errorPage\'];
if ([\'errorPage\', \'noGoods\', \'noNetwork\', \'errorLocation\'].indexOf(type) > -1) {
types = allTypes[type];
}
return types;
},
setPaddingTop () {
const paddingTop = this.paddingTop;
return `${paddingTop}px`
}
},
methods: {
handleTouchEnd (e) {
// web上面有点击穿透问题
const { platform } = weex.config.env;
platform === \'Web\' && e.preventDefault && e.preventDefault();
},
onClick () {
modal.toast({
message: \'没有数据了\',
duration: 1
});
this.$router.push({ path: \'/home\'});
}
}
};
</script>
配置文件
src / assets / views / network.js
/**
* 页面加载失败类型
*/
export default {
errorPage: {
pic: \'https://gtms01.alicdn.com/tfs/TB1HH4TSpXXXXauXVXXXXXXXXXX-320-320.png\',
content: \'抱歉出错了，飞猪正在全力解决中\',
button: \'再试一次\',
title: \'出错啦\'
},
noGoods: {
pic: \'https://gw.alicdn.com/tfs/TB1QXlEQXXXXXcNXFXXXXXXXXXX-320-320.png\',
content: \'主人，这里什么都没有找到\',
button: \'再试一次\',
title: \'暂无商品\'
},
noNetwork: {
pic: \'https://gw.alicdn.com/tfs/TB1rs83QXXXXXcBXpXXXXXXXXXX-320-320.png\',
content: \'哎呀，没有网络了......\',
button: \'刷新一下\',
title: \'无网络\'
},
errorLocation: {
pic: \'https://gw.alicdn.com/tfs/TB1rs83QXXXXXcBXpXXXXXXXXXX-320-320.png\',
content: \'哎呀，定位失败了......\',
button: \'刷新一下\',
title: \'定位失败\'
}
}
3.公共 webview
src / page / webview.vue
<!-- 公用 webview -->
<template>
<div class="wrapper">
<!-- 标题栏 -->
<div class="toolbar">
<div class="left">
<text class="btnTxt iconfont" @click="back"></text>
</div>
<text class="tlt">{{title}}</text>
<div class="right">
<text class="btnTxt iconfont" @click="reload"></text>
</div>
</div>
<!-- 页面部分 -->
<div class="webview-box">
<web ref="wv" class="webview" :src="url" @error="error"></web>
</div>
</div>
</template>
<script>
// 导航器
const navigator = weex.requireModule(\'navigator\');
// 弹窗
const modal = weex.requireModule(\'modal\');
// 工具类
import util from \'../assets/util\';
// 请求数据
var stream = weex.requireModule(\'stream\');
// 身份验证
import jwtdecode from \'jwt-simple\';
// 网页视图
const webview = weex.requireModule(\'webview\');
export default {
components: {
},
data () {
return {
url: \'http://www.baidu.com\',
title: \'详情页\',
network: 1
}
},
computed: {
},
created (_e) {
// 检测网络
this.checknetwork();
// 初始化 矢量图标
util.initIconFont();
if (this.$route && this.$route.query) {
this.url = decodeURIComponent(this.$route.query.url);
} else {
this.url = decodeURIComponent("http://www.baidu.com");
}
if(this.$route.query.title){
this.title = this.$route.query.title;
}
},
methods: {
// 返回
back (event) {
// webview.goBack(this.$refs.wv);
window.history.go(-1)
},
// 刷新
reload (event) {
// webview.reload(this.$refs.wv);
window.location.reload();
},
error (event) {
console.log(\'error\', event)
},
// 检测网络
checknetwork(){
var me = this;
// 请求数据
stream.fetch({
method: \'GET\',
type: \'text\',
url: this.webUrl+\'/webservice/Api/List?catid=10&pagesize=1\',
}, function(ret) {
if(ret.ok){
me.network = 1;
} else {
me.network = 0;
modal.toast({
\'message\': \'没有网络\',
\'duration\': 1
});
return false;
}
});
}
}
}
</script>
<style scoped>
.wrapper{
position: absolute;
left: 0;
right:0;
bottom: 0;
top:0;
}
.iconfont {
font-family:iconfont;
}
.toolbar{
position: fixed;
top: 0;
left: 0;right: 0;
height: 114px;
padding-top: 22px;
background-color: #fafafa;
opacity: .99;
z-index: 101;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-around;
border-bottom-width: 1px;
border-bottom-color: #d9d9d9;
}
.tlt{
flex: 1;
font-size: 36px;
padding-top: 10px;
color:#333;
text-align: center;
}
.left,.right{
height: 68px;
width: 150px;
padding-top:10px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
}
.left{
justify-content: flex-start;
padding-left: 20px;
}
.right{
justify-content: flex-end;
padding-right: 20px;
}
.btnTxt{
font-size: 40px;
width: 70px;
color:#666;
text-align: center;
}
.webview-box {
position: absolute;
top: 114px ;
left: 0;
right:0;
bottom: 0;
}
.webview{
position: absolute;
top: 0 ;
left: 0;
right:0;
bottom: 0;
}
</style>
4.adb常用命令
显示当前运行的全部模拟器
adb devices
获取序列号
adb get-serialno
重启机器
adb reboot
重启到bootloader，即刷机模式
adb reboot bootloader
重启到recovery，即恢复模式
adb reboot recovery
查看log
adb logcat
终止adb服务进程
adb kill-server
重启adb服务进程
adb start-server
获取机器MAC地址
adb shell cat /sys/class/net/wlan0/address
获取CPU序列号
adb shell cat /proc/cpuinfo
重新安装apk
adb install 123.apk
安装apk到sd卡
adb install -s 123.apk
保留数据和缓存文件，重新安装apk
adb install -r 123.apk
获取模拟器中的文件
adb pull <remote> <local>
向模拟器中写文件
adb push <local> <remote>
进入模拟器的shell模式
adb shell
卸载APP但保留数据和缓存文件
adb uninstall -k 123.apk
启动应用
adb shell am start -n <package_name>/.<activity_class_name>
查看设备CPU和内存占用情况
adb shell top
跑monkey
adb shell monkey -v -p your.package.name 500
查看ADB帮助
adb help
获取设备名称
adb shell cat /system/build.prop
查看bug报告
adb bugreport
清除log缓存
adb logcat -c
查看wifi密码
adb shell cat /data/misc/wifi/*.conf
查看文件内容
adb shell cat <file>
新建文件夹
adb shell mkdir path/foldelname
设置文件权限
adb shell chmod 777 /system/fonts/DroidSansFallback.ttf
移动文件
adb shell mv path/file newpath/file
删除文件夹及其下面所有文件
adb shell rm -r <folder>
删除system/avi.apk
adb shell rm /system/avi.apk
重命名文件
adb shell rename path/oldfilename path/newfilename
进入文件夹，等同于dos中的cd 命令
adb shell cd <folder>
列出目录下的文件和文件夹，等同于dos中的dir命令
adb shell ls
从设备复制文件到本地
adb pull <remote> <local>
从本地复制文件到设备
adb push <local> <remote>
将system分区重新挂载为可读写分区
adb remount
查看IO内存分区
adb shell cat /proc/iomem
查看当前内存占用
adb shell cat /proc/meminfo
查看后台services信息
adb shell service list
查看指定进程状态
adb shell ps -x [PID]
查看进程列表
adb shell ps
杀死一个进程
adb shell kill [pid]
查询各进程内存使用情况
adb shell procrank
刷新一次内存信息，然后返回
adb shell top -n 1
查看占用内存前6的APP
adb shell top -m 6
缷载apk包
adb shell cd data/app rm 123.apk exit adb uninstall 123.apk adb install -r 123.apk
查看adb命令帮助信息
adb help
删除系统应用
adb remount （重新挂载系统分区，使系统分区重新可写）。 adb shell cd system/app rm 123.apk
获取管理员权限
adb root
复制文件
复制一个文件或目录到设备： adb push <source> <destination></destination></source> 如：adb push update.zip /sdcard/ 从设备上复制一个文件或目录： adb pull <source> <destination></destination></source> 如：adb pull /sdcard/update.zip.
取得当前运行设备的实例的列表及每个实例的状态
adb devices
5.文件夹 常用操作
#cd system/sd/data //进入系统内指定文件夹 cd .. 返回上一级目录 cd ../.. 返回上两级目录 cd 进入个人的主目录 cd ~user1 进入个人的主目录 cd - 返回上次所在的目录 #ls //列表显示当前文件夹内容 #rm -r xxx //删除名字为xxx的文件夹及其里面的所有文件 #rm xxx //删除文件xxx #rmdir xxx //删除xxx的文件夹 #mkdir -p xxx //递归创建xxx的文件夹 #cp [选项] [来源文件] [目的文件]，-d 复制一个快捷方式/-r 复制一个目录/-i 对一个存在的文件，询问是否覆盖 #mv [选项] [来源文件] [目标文件]，-u 目标文件存在时才会生效，如果源文件比目标文件新才会移动/-i 对一个存在的文件，询问是否覆盖;
.
以上是关于weexapp 开发流程其他页面创建的主要内容，如果未能解决你的问题，请参考以下文章
如果我们必须在android中使用viewpager创建多个页面，那么我们是不是必须创建多个片段？还有其他选择吗？