zoukankan      html  css  js  c++  java
  • 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 {
         750px;
        height: 430px;
      }
      .slider {
         750px;
        height: 430px;
      }
      .frame {
         750px;
        height: 430px;
        position: relative;
      }
      .indicator {
         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 {
         750px;
        background-color: #f2f3f4;
      }
      .border-cell {
        background-color: #f2f3f4;
         750px;
        height: 24px;
        align-items: center;
        justify-content: center;
        border-bottom- 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 {
         750px;
        flex: 1;
        align-items: center;
        background-color: #f2f3f4;
      }
      .result-image {
         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- 1px;
        border-color: #979797;
        background-color: #FFFFFF;
        border-radius: 6px;
         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- 1px;
        border-bottom-color: #d9d9d9;
      }
      .tlt{
        flex: 1;
        font-size: 36px;
        padding-top: 10px;
        color:#333;
        text-align: center;
      }
      .left,.right{
        height: 68px;
         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;
         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 对一个存在的文件,询问是否覆盖;

    .

  • 相关阅读:
    Atitit (Sketch Filter)素描滤镜的实现  图像处理  attilax总结v2
    JS设置cookie、读取cookie、删除cookie
    Atitit 图像处理30大经典算法attilax总结
    Atitit数据库层次架构表与知识点 attilax 总结
    Atitit 游戏的通常流程 attilax 总结 基于cocos2d api
    Atitti css transition Animation differ区别
    Atitit 图像清晰度 模糊度 检测 识别 评价算法 源码实现attilax总结
    Atitit 全屏模式的cs桌面客户端软件gui h5解决方案 Kiosk模式
    Atitit 混合叠加俩张图片的处理 图像处理解决方案 javafx blend
    Atitit  rgb yuv  hsv HSL 模式和 HSV(HSB) 图像色彩空间的区别
  • 原文地址:https://www.cnblogs.com/crazycode2/p/8051665.html
Copyright © 2011-2022 走看看