快应用的差异性简述和统计打点

897 阅读5分钟

一、快应用的差异性简述

这里就说一些标签类的差异和配置文件的重要点

  • 标签类的差异

  • img和image
    • img是单标签 <img src="../images/icon.png" alt="头像">
    • image是双标签, <image class=“cosPicture” src=“”alt="不见了"></image> 是的,双标签,别写着写着就丢了
  • text 和p span div ,承载文字的标签
    • <text >文字</text>
    • <text > <span>文字内部</span>文字外部</text>
    • <p >文字</p>
    • <span >文字</ span >
    • <div>文字</ div >
  • list和list-item
    • <list class="tutorial-page" onscrollbottom="loadMoreData">
          <!-- 商品列表 -->
          <block for="productList">
            <list-item type="product" class="content-item" onclick="route($item.url)">
      <text class="bottom-line">{{$item.brief}}</text>
              </div>
            </list-item>
          </block>
      
          <!-- 加载更多,type属性自定义命名为loadMore -->
          <list-item type="loadMore" class="load-more">
            <progress type="circular"></progress>
            <text>加载更多</text>
          </list-item>
        </list> 
    • list里面,只能是list-item
    • list-item结构必须一致,尤其结构十分复杂的状态,这里已经要注意,如果非结构一致类型,type属性要修改,比如第一个list-item的type值为one,第二个list-item的type为two
    • list-item内部慎用 if 和 for , 因为 if 和 for 可能造成type的lsit-item的DOM结构改变,从而报错
    • scrollbottom, 这是监听列表是否滑动到底部,只要是列表,必不可少
  • stack
    • 了解stack,在快应用的布局上,应该是不会有太大问题。 stack颠覆了以往的标签模式,采用层叠式布局,以下代码和图片是我对stack的详解
    • <stack class="stack">
      <image class="image“ src="pic2.webp"> </image>
       <text class="title">stack容器排列方式为层叠,每个子组件按照先后顺序依次堆叠,覆盖前面的组件</text>
        <div class="wrap">
      	<image 	class="btn“  src="demo.png">
      	</image>
       </div>
       </stack>
      

    • 相信看见这个图你就可以明白了。 他的结构都是一层一层罗列上去的,最外层是stack,stack里面包含的image,text,div,这三者的布局是,text显示在image上面,div在text上面,而div内部的image,直接显示。通俗来说,摞压摞!

  • border
    • border-width+ border-style + border-color =border
    • 例如 :
      • border-bottom-width:3px;
      • border-bottom-style:solid;
      • border-bottom-color:#fff000
      • 等同于border-bottom:3px solid #fff000;的确有点小累啊
  • border-radius
    • 左上角+右上角+左下角+右下角= 四角
    • 例如
      • border-top-left-radius:15px
      • border-top-right-radius:15px
      • border-bottom-left-radius:15px
      • border-bottom-right-radius:15px
      • 等同于 border-radius:15px
    • 注意
      • 圆角时只使用 border-width,border-[left|top|right|bottom]-width 无效
      • 圆角时只使用 border-color,border-[left|top|right|bottom]-color 无效
  • 快应用的flex布局
    • flex-direction
      • column | row | column-reverse 1040+ | row-reverse 1040+
      • 默认:row水平
    • flex-wrap
      • nowrap | wrap | wrap-reverse
      • 默认: nowrap不换行
    • justify-content
      • flex-start | flex-end | center | space-between | space-around
      • 默认:flex-start 左对齐 -上对齐
    • align-items
      • stretch | flex-start | flex-end | center
      • 默认:stretch容器高度
    • align-content
      • stretch | flex-start | flex-end | center | space-between | space-around
      • 默认:stretch轴线占满整个交叉轴
    • align-self
      • 1010+ auto | stretch | flex-start | flex-end | center | baseline
      • 默认:auto继承父元素的align-items属性
  • manifest配置文件详解

mainfest的配置文件内容较多, 这里只列举项目中我们常用且需要注意的一部分

  • package-应用包名,例 com.demo.com
  • name-应用名称 ,例 某某应用
  • icon-应用图标 , 标准(192 *192),按照官方给予的icon为标准
  • versionName-应用版本名称 例 1.0.0.0
  • versionCode-应用版本号,如果已经上线,再次传包,要更改,比如+1,每次均不同且不重复。
  • minPlatformVersion-最小平台 ,例1030
  • features-接口列表,不声明不能直接调用,所有需要调用的必须在这声明
  • config-系统配置信息
    • designWidth 宽度比例,例1080 750常用手机适配宽度
    • logLevel 日志模式,重中之重,如果你没踩过这个坑,你该高兴,如果你各种打印不出现,想必就是这里忘了改了, 一般是 debug模式。
    • data 一些data配置。 比如后面我们要说到的打点,就需要在这配置appkey
  • router-路由信息
    • entry:入口文件,比如home
    • pages:其他的路由文件
  • display-UI显示相关信息
    • fullScreen , 是否全屏
    • titleBar ,是否显示titleBar
    • menu ,是否显示标题栏右上角菜单按钮,如果需要自己的一些判断逻辑,需要自己编写
    • pages ,各个页面的显示样式,key 为页面名,与路由一致。路由写了。这里也要写,要互相匹配上,否则编译可能就会报一些莫名其妙的错误,单个页面样式可覆盖整体页面样式哦。
    • Bgcolor ,窗口背景色,如果你想改状态栏的颜色,那就要修改这里了。

二、快应用的打点总结

目前打点接触的友盟和轻粒子两家,都是很好的快应用统计平台下面我针对统计打点,做一个简单的对比

  • 友盟-流程和植入
    • Appkey申请——登录友盟+官网,在我的产品页面添加新应用,然后获取到Appkey
    • 创建快应用并接入SDK——umengannlysis.es.min.js
    • 项目导入SDK——将umengannlysis.es.min.js拷贝到您的快应用项目src/路径下
    • 添加依赖——npm install js-base64 --save 和 npm install md5 --save
    • 为SDK添加相应权限——

      "features": [
          { "name": "system.storage"},
          { "name": "system.fetch"},
          { "name": "system.network"},
          { "name": "system.device"}
        ]
      
    • appkey植入——

      "config": {
          "data":{
            "umeng_appkey" : "5ad7fb4**********d0000d5",//umeng_appkey即为上步申请的Appkey
          }}
    • app.ux文件-初始化打点 ——

      import './umenganalysis.es.min';
      onCreate(){
            $umeng_stat.init(this);   //在onCreate函数中加入该行代码,必须添加!!!
       }
  • 轻粒子-流程和植入
    • Appkey申请——注册账号并登录 轻粒子官网 在“我的快应用”页面点击创建快应用,成功创建快应用后即可获取到对应快应用 app_key。
    • 创建快应用并接入SDK ——appStatistics.min.js 和 statistics.config.js
    • 项目导入SDK ——把 sdk 中的 appStatistics.min.js、statistics.config.js 拷贝到项目中和 app.ux 同级的目录
    • 添加依赖 ——需要md5 (自带)
    • 为SDK添加相应权限 ——

      "features": [
              { "name": "system.fetch"},
              {"name": "system.storage"},
              {"name": "system.device"},
              {"name": "system.network"},
              {"name": "service.account"},
              {"name": "system.shortcut"}
        ]
      
    • appkey——在statistics.config.js 文件中

      export default {
          'app_key' : '0000000000000'   //请在此行填写统计平台获取的 app_kye
          }
      
    • app.ux文件-初始化打点 ——

      import "./appStatistics.min.js"
      onCreate(){
          APP_STATISTICS.app_sta_init( this );//在onCreate函数中加入该行代码,
      //必须添加!!!}
  • 友盟和轻粒子打点自定义事件对比
    • 轻粒子
      • onShow(){     
          APP_STATISTICS.page_show( this );
        }    
      •  onHide(){     
          APP_STATISTICS.page_hide( this );
        }, 
      • APP_STATISTICS.track_event('事件id');
      • APP_STATISTICS.track_event('homeLikeDot', countLikeStatus);
      • APP_STATISTICS.track_event('homeShareDot' , {
        shareEveId: item.id,
        share_count_str: item.share_count_str        
                    });
    • 友盟
      • onShow(){     
          $umeng_stat.resume(this)
        }
      • onHide(){     
          $umeng_stat.pause(this);
        }
      • $umeng_stat.trackEvent('事件ID'); 
      • $umeng_stat.trackEvent('homeLikeDot',countLikeStatus); 
      • $umeng_stat.trackEvent('homeShareDot' , {
        shareEveId: item.id,
        share_count_str: item.share_count_str        
        }); 
    • 备注
      • 自定义事件打点接口及调用
      • $umeng_stat.trackEvent(id,attr);
      • APP_STATISTICS.track_event(id,attr);
      • 该方法接收两个参数,第一个参数 id 为事件ID(必传)。 第二个参数 attr 为事件携带参数(非必传)。 该参数可以为一个字符串( String )或者一个 JavaScript 对象 ( Object )。
    • 差异性,轻粒子有一个错误分析
      • 轻粒子的错误分析,建议项目添加
      • 监听应用错误的生命周期函数
      • onError(err) {
                try {
                    // 错误统计打点代码
                    APP_STATISTICS.on_err(err);
                } catch (error) {}
        
            } 

三、最后

感谢大家的阅读,欢迎提出宝贵意见,希望本篇文章可以给快应用开发的小伙伴,带来一些新的体验,谢谢!