weexapp 开发流程其他页面创建 _流程

天下之事常成于困约，而败于奢靡。这篇文章主要讲述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="https://www.songbingjia.com/android/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="https://www.songbingjia.com/android/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="https://www.songbingjia.com/android/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

【weexapp 开发流程其他页面创建】清除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 对一个存在的文件，询问是否覆盖;