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

LeftEar

快应用的差异性简述和统计打点 快应用生态已经发展的非常完善，今天我就快应用的差异性和统计打点，做一个总结，希望有所收获，欢迎指导。 一、快应用的差异性简述

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

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>
10. <!-- 加载更多，type属性自定义命名为loadMore -->
11. <list-item type="loadMore" class="load-more">
12. <progress type="circular"></progress>
13. <text>加载更多</text>
14. </list-item>
15. </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，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) {}
7. }

复制代码

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

管理员

您好，请联系下我们，你的这篇文章获得上一季度的征文话动奖品手机1台。 获奖公布贴子：快应用2019征文投稿活动10-12月评选结果结果公布！

LeftEar

管理员 发表于 2020-2-20 14:34 您好，请联系下我们，你的这篇文章获得上一季度的征文话动奖品手机1台。 获奖公布贴子：快应用2019征文投稿 ...

感谢快应用生态， 感谢厂商的支持和认可。

管理员

感谢参与哦 哈哈哈快带上更多小伙伴来参加活动拿手机啊

LeftEar

管理员 发表于 2020-3-16 11:35 感谢参与哦 哈哈哈快带上更多小伙伴来参加活动拿手机啊

希望有更多有价值的东西能分享给大家