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 对一个存在的文件，询问是否覆盖;

.