|
本帖最后由 LeftEar 于 2019-11-12 17:46 编辑
快应用的差异性简述和统计打点
快应用生态已经发展的非常完善,今天我就快应用的差异性和统计打点,做一个总结,希望有所收获,欢迎指导。
一、快应用的差异性简述1.1标签类的差异
1.1.1 img和image
- img是单标签 <img src="../images/icon.png" alt="头像">
- image是双标签 <image class=“cosPicture” src=“”alt="不见了"></image>
复制代码 1.1.2 text 和p span div ,承载文字的标签
- <text >文字</text>
- <text > <span>文字内部</span>文字外部</text>
- <p >文字</p>
- <span >文字</ span >
- <div>文字</ div >
复制代码 1.1.3list和list-item
- <list class="tutorial-page">
- <!-- 商品列表 -->
- <block for="productList">
- <list-item type="product" class="content-item">
- <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, 这是监听列表是否滑动到底部,只要是列表,必不可少
1.1.4 stack
- 了解stack,在快应用的布局上,应该是不会有太大问题。 stack颠覆了以往的标签模式,采用层叠式布局,以下代码和图片是我对stack的详解
- <stack class="stack">
- <image class="image“ src="pic2.webp"> </image>
- <text class="title">stack容器排列方式为层叠,每个子组件按照先后顺序依次堆叠,覆盖前面的组件</text>
- <div class="wrap">
复制代码
- 相信看见这个图你就可以明白了。 他的结构都是一层一层罗列上去的,最外层是stack,stack里面包含的image,text,div,这三者的布局是,text显示在image上面,div在text上面,而div内部的image,直接显示。通俗来说,摞压摞!
1.1.5border
- border-width+ border-style + border-color =border
- 例如 :
- border-bottom-width:3px;
- border-bottom-style:solid;
- border-bottom-color:#fff000
- 等同于border-bottom:3px solid #fff000;的确有点小累啊
复制代码 1.1.6 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 无效
1.1.7 快应用的flex布局
- column | row | column-reverse 1040+ | row-reverse 1040+
- 默认:row水平
复制代码- nowrap | wrap | wrap-reverse
- 默认: nowrap不换行
复制代码- flex-start | flex-end | center | space-between | space-around
- 默认:flex-start 左对齐 -上对齐
复制代码- stretch | flex-start | flex-end | center
- 默认:stretch容器高度
复制代码- stretch | flex-start | flex-end | center | space-between | space-around
- 默认:stretch轴线占满整个交叉轴
复制代码- 1010+ auto | stretch | flex-start | flex-end | center | baseline
- 默认: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-系统配置信息
- designWidth 宽度比例,例1080 750是常用手机适配宽度;
- logLevel 日志模式,重中之重,如果你没踩过这个坑,你该高兴,如果你各种打印不出现,想必就是这里忘了改了, 一般是 debug模式;
- data 一些data配置。 比如后面我们要说到的打点,就需要在这配置appkey.
复制代码- entry:入口文件,比如home
- pages:其他的路由文件
复制代码 二、快应用的打点总结
- 目前打点接触的友盟和轻粒子两家,都是很好的快应用统计平台下面我针对统计打点,做一个简单的对比。
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添加相应权限
- "features": [
- { "name": "system.storage"},
- { "name": "system.fetch"},
- { "name": "system.network"},
- { "name": "system.device"}
- ]
复制代码
- "config": {
- "data":{
- "umeng_appkey" : "5ad7fb4**********d0000d5",
- //umeng_appkey即为上步申请的Appkey
- }
- }
复制代码
- import './umenganalysis.es.min';
- onCreate(){
- $umeng_stat.init(this);
- //在onCreate函数中加入该行代码,必须添加!!!
- }
复制代码
2.2 轻粒子-流程和植入
- 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
- }
复制代码- import "./appStatistics.min.js"
- onCreate(){
- APP_STATISTICS.app_sta_init( this );
- //在onCreate函数中加入该行代码, //必须添加!!!
- }
复制代码
2.3 友盟和轻粒子打点自定义事件对比
- 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
- });
复制代码 2.4 备注
- $umeng_stat.trackEvent(id,attr);
- APP_STATISTICS.track_event(id,attr);
复制代码- 该方法接收两个参数,第一个参数 id 为事件ID(必传)。 第二个参数 attr 为事件携带参数(非必传)。 该参数可以为一个字符串( String )或者一个 JavaScript 对象 ( Object )
2.5 差异性,轻粒子有一个错误分析
- 轻粒子的错误分析,建议项目添加
- 监听应用错误的生命周期函数
- onError(err) {
- try {
- // 错误统计打点代码
- APP_STATISTICS.on_err(err);
- } catch (error) {}
-
- }
复制代码 三、最后
感谢大家的阅读,欢迎提出宝贵意见,希望本篇文章可以给快应用开发的小伙伴,带来一些新的体验,谢谢!由于之前有论坛代码编辑器自带编码解析部分错误。已做修正,如有问题,欢迎大家留言。
|
|