请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册
搜索

技术分享 快应用的差异性简述和统计打点

0
回复
66
查看
[复制链接]

1

主题

15

帖子

80

积分

 楼主| 2019-11-8 18:39:19 显示全部楼层 |阅读模式
本帖最后由 LeftEar 于 2019-11-12 17:46 编辑

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

快应用生态已经发展的非常完善,今天我就快应用的差异性和统计打点,做一个总结,希望有所收获,欢迎指导。
一、快应用的差异性简述
  • 这里就说一些标签类的差异和配置文件的重要点。
1.1标签类的差异
1.1.1 img和image
  1. img是单标签         <img src="../images/icon.png" alt="头像">
  2. image是双标签     <image class=“cosPicture” src=“”alt="不见了"></image>
复制代码
1.1.2 text 和p span div ,承载文字的标签
  1. <text >文字</text>
  2.      <text > <span>文字内部</span>文字外部</text>
  3.      <p >文字</p>
  4.     <span >文字</ span >
  5.      <div>文字</ div >
复制代码
1.1.3list和list-item
  1. <list class="tutorial-page">
  2. <!-- 商品列表 -->
  3. <block for="productList">
  4. <list-item type="product" class="content-item">
  5. <text class="bottom-line">{{$item.brief}}</text>
  6. </div>
  7. </list-item>
  8. </block>

  9. <!-- 加载更多,type属性自定义命名为loadMore -->
  10. <list-item type="loadMore" class="load-more">
  11. <progress type="circular"></progress>
  12. <text>加载更多</text>
  13. </list-item>
  14. </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, 这是监听列表是否滑动到底部,只要是列表,必不可少

1.1.4 stack
  • 了解stack,在快应用的布局上,应该是不会有太大问题。 stack颠覆了以往的标签模式,采用层叠式布局,以下代码和图片是我对stack的详解
  1. <stack class="stack">
  2. <image class="image“ src="pic2.webp"> </image>
  3. <text class="title">stack容器排列方式为层叠,每个子组件按照先后顺序依次堆叠,覆盖前面的组件</text>
  4. <div class="wrap">
复制代码

  • stack.png

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

1.1.5border
  • border-width+ border-style + border-color =border
  • 例如 :
  1. border-bottom-width:3px;
  2. border-bottom-style:solid;
  3. border-bottom-color:#fff000
  4. 等同于border-bottom:3px solid #fff000;的确有点小累啊
复制代码
1.1.6 border-radius
  • 左上角+右上角+左下角+右下角= 四角
  • 例如 :
  1. border-top-left-radius:15px;
  2. border-top-right-radius:15px;
  3. border-bottom-left-radius:15px;
  4. border-bottom-right-radius:15px ;
  5. 等同于 border-radius:15px;
复制代码
  • 注意:
  • 圆角时只使用 border-width,border-[left|top|right|bottom]-width 无效
  • 圆角时只使用 border-color,border-[left|top|right|bottom]-color 无效

1.1.7 快应用的flex布局
  • flex-direction
  1. column | row | column-reverse 1040+ | row-reverse 1040+
  2. 默认:row水平
复制代码
  • flex-wrap
  1. nowrap | wrap | wrap-reverse
  2. 默认: nowrap不换行
复制代码
  • justify-content
  1. flex-start | flex-end | center | space-between | space-around
  2. 默认:flex-start 左对齐 -上对齐
复制代码
  • align-items
  1. stretch | flex-start | flex-end | center
  2. 默认:stretch容器高度
复制代码
  • align-content
  1. stretch | flex-start | flex-end | center | space-between | space-around
  2. 默认:stretch轴线占满整个交叉轴
复制代码
  • align-self
  1. 1010+ auto | stretch | flex-start | flex-end | center | baseline
  2. 默认:auto继承父元素的align-items属性
复制代码
1.2 manifest配置文件详解
mainfest的配置文件内容较多, 这里只列举项目中我们常用且需要注意的一部分
  • package-应用包名,例 com.demo.com
  • name-应用名称 ,例 某某应用
  • icon-应用图标 , 标准(192 *192),按照官方给予的icon为标准
  • versionName-应用版本名称 例 1.0.0.0
  • versionCode-应用版本号,如果已经上线,再次传包,要更改,比如+1,每次均不同且不重复。
  • minPlatformVersion-最小平台 ,例1030
  • features-接口列表,不声明不能直接调用,所有需要调用的必须在这声明
  • config-系统配置信息
  1. designWidth 宽度比例,例1080 750是常用手机适配宽度;
  2. logLevel 日志模式,重中之重,如果你没踩过这个坑,你该高兴,如果你各种打印不出现,想必就是这里忘了改了, 一般是 debug模式;
  3. data 一些data配置。 比如后面我们要说到的打点,就需要在这配置appkey.
复制代码
  • router-路由信息
  1. entry:入口文件,比如home
  2. pages:其他的路由文件
复制代码
  • display-UI显示相关信息
  1. fullScreen , 是否全屏
复制代码
二、快应用的打点总结
  • 目前打点接触的友盟和轻粒子两家,都是很好的快应用统计平台下面我针对统计打点,做一个简单的对比。
2.1 友盟-流程和植入
  • Appkey申请——登录友盟+官网,在我的产品页面添加新应用,然后获取到Appkey
  • 创建快应用并接入SDK——umengannlysis.es.min.js
  • 项目导入SDK——将umengannlysis.es.min.js拷贝到您的快应用项目src/路径下
  • 添加依赖——npm install js-base64 --save  和    npm install md5 --save
  • 为SDK添加相应权限
  1. "features": [
  2. { "name": "system.storage"},
  3. { "name": "system.fetch"},
  4. { "name": "system.network"},
  5. { "name": "system.device"}
  6. ]
复制代码

  • appkey植入
  1. "config": {
  2. "data":{
  3. "umeng_appkey" : "5ad7fb4**********d0000d5",
  4. //umeng_appkey即为上步申请的Appkey
  5. }
  6. }
复制代码

  • app.ux文件-初始化打点
  1. import './umenganalysis.es.min';
  2. onCreate(){
  3. $umeng_stat.init(this);
  4. //在onCreate函数中加入该行代码,必须添加!!!
  5. }
复制代码

2.2 轻粒子-流程和植入
  • Appkey申请——注册账号并登录 轻粒子官网 在“我的快应用”页面点击创建快应用,成功创建快应用后即可获取到对应快应用 app_key。
  • 创建快应用并接入SDK ——appStatistics.min.js 和 statistics.config.js
  • 项目导入SDK——把 sdk 中的 appStatistics.min.js、statistics.config.js 拷贝到项目中和 app.ux 同级的目录
  • 添加依赖——需要md5 (自带)
  • 为SDK添加相应权限
  1. "features": [
  2. { "name": "system.fetch"},
  3. {"name": "system.storage"},
  4. {"name": "system.device"},
  5. {"name": "system.network"},
  6. {"name": "service.account"},
  7. {"name": "system.shortcut"}
  8. ]
复制代码

  • appkey——在statistics.config.js 文件中
  1. export default {
  2. 'app_key' : '0000000000000'
  3. //请在此行填写统计平台获取的 app_kye
  4. }
复制代码
  • app.ux文件-初始化打点
  1. import "./appStatistics.min.js"
  2. onCreate(){
  3. APP_STATISTICS.app_sta_init( this );
  4. //在onCreate函数中加入该行代码, //必须添加!!!
  5. }
复制代码

2.3 友盟和轻粒子打点自定义事件对比
  • 轻粒子
  1. onShow(){     
  2.   APP_STATISTICS.page_show( this );
  3. }  
复制代码
  1. onHide(){     
  2.   APP_STATISTICS.page_hide( this );
  3. }
复制代码
  1. APP_STATISTICS.track_event('事件id');
复制代码
  1. APP_STATISTICS.track_event('homeLikeDot', countLikeStatus);<
复制代码
  1. APP_STATISTICS.track_event('homeShareDot' , {
  2. shareEveId: item.id,
  3. share_count_str: item.share_count_str        
  4.             });
复制代码
  • 友盟
  1. onShow(){     
  2.   $umeng_stat.resume(this)
  3. }
复制代码
  1. onHide(){     
  2.   $umeng_stat.pause(this);
  3. }
复制代码
  1. $umeng_stat.trackEvent('事件ID');
复制代码
  1. $umeng_stat.trackEvent('homeLikeDot',countLikeStatus);
复制代码
  1. $umeng_stat.trackEvent('homeShareDot' , {
  2. shareEveId: item.id,
  3. share_count_str: item.share_count_str        
  4. });
复制代码
2.4 备注
  • 自定义事件打点接口及调用
  1. $umeng_stat.trackEvent(id,attr);
  2. APP_STATISTICS.track_event(id,attr);
复制代码
  • 该方法接收两个参数,第一个参数 id 为事件ID(必传)。 第二个参数 attr 为事件携带参数(非必传)。 该参数可以为一个字符串( String )或者一个 JavaScript 对象 ( Object )

2.5 差异性,轻粒子有一个错误分析
  • 轻粒子的错误分析,建议项目添加
  • 监听应用错误的生命周期函数
  1. onError(err) {
  2.         try {
  3.             // 错误统计打点代码
  4.             APP_STATISTICS.on_err(err);
  5.         } catch (error) {}

  6.     }
复制代码
三、最后
感谢大家的阅读,欢迎提出宝贵意见,希望本篇文章可以给快应用开发的小伙伴,带来一些新的体验,谢谢!
由于之前有论坛代码编辑器自带编码解析部分错误。已做修正,如有问题,欢迎大家留言。








回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册