一、快应用的差异性简述
这里就说一些标签类的差异和配置文件的重要点
- 标签类的差异
- 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) {} }
三、最后
感谢大家的阅读,欢迎提出宝贵意见,希望本篇文章可以给快应用开发的小伙伴,带来一些新的体验,谢谢!