参考链接:
保活
知识点查录
List
上拉加载-下拉刷新sPullScroll
LoadMore 加载更多
Day.js
一、保活-前台运行:
用于进步app存活概率或增加前台显示
能够用于晋升app运行权限,减少保活概率,可使app长期后盾运行不会被杀死(用户被动清理就不能保了。)
初始化:
const hgService = uni.requireNativePlugin("HG-Background");
配置插件:
hgService.config({ title:"服务名称", content:"前台服务运行中", mode: 0, //0省电模式 1流氓模式});
留神插件服务应用 app的 icon.png,与push.png 作为告诉栏图标
关上平安治理:
hgService.showSafeSetting();
检测是否限度后盾运行:
var rsult=hgService.checkIfLimited();
//console.log("isLimit=>"+rsult.isLimit );// modal.toast({// message: "是否受限:"+rsult.isLimit,// duration: 1.5// });
返回数据阐明:
{ "isLimit":true // false 是否受限}
申请运行后盾运行(仅针对andriod零碎,对于各厂家的平安治理设置要独自进行,这里只能肯定层度上减少app存活工夫):
hgService.requestIgnoreLimit();
启动前台服务:
hgService.startService();
全局事件回调(可用在uniapp执行工作,注册须要能够疾速返回,不能阻塞):
工作启动工夫,会有肯定延时个别一分钟内:
var globalEvent = uni.requireNativePlugin('globalEvent'); globalEvent.addEventListener('doJob', function() { counts+=1; modal.toast({ message: "工作执行次数:"+counts, duration: 1 }); });
进行服务:
hgService.closeService();
二、List列表:
list 列表组件个别用于导航菜单、列表、设置页排版等,能够在其中应用图标、略缩图或搁置任何你想放的元素.
组件名:uni-list
、uni-list-item
组件应用注意事项:
- 组件须要依赖
sass
插件 ,请自行手动装置 - 组件外部依赖
'uni-icons'
、uni-badge
组件 uni-list
和uni-list-item
须要配套应用,暂不反对独自应用uni-list-item
- 开启点击反馈后,会有点击选中成果
- 应用插槽时,能够齐全自定义内容
- note 、rightText 属性临时没做限度,不反对文字溢出暗藏,应用时应该管制长度显示或通过默认插槽自行扩大
- 如果须要批改 switch、badge款式,请应用插槽自定义
应用形式:
在应用 uni-ui
的时候,只有uni-ui
组件 装置在我的项目的 components
目录下,并合乎 components/组件名称/组件名称.vue
目录构造。就能够不必援用、注册,间接在页面中应用 uni-ui
组件
<!-- 单行内容显示 --><uni-list> <uni-list-item title="列表文字" ></uni-list-item> <uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item></uni-list><!-- 多行内容显示 --><uni-list> <uni-list-item title="列表文字" note="列表形容信息"></uni-list-item> <uni-list-item :disabled="true" title="列表文字" note="列表禁用状态"></uni-list-item></uni-list><!-- 右侧显示角标、switch --><uni-list> <uni-list-item title="列表右侧显示角标" :show-badge="true" badge-text="12" ></uni-list-item> <uni-list-item title="列表右侧显示 switch" :show-switch="true" @switchChange="switchChange" ></uni-list-item></uni-list> <!-- 左侧显示略缩图、图标 --> <uni-list> <uni-list-item title="列表左侧带略缩图" note="列表形容信息" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" thumb-size="lg" rightText="右侧文字"></uni-list-item> <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="列表左侧带扩大图标" ></uni-list-item></uni-list>
开启点击反馈和右侧箭头:
- 设置
clickable
为true
,则示意这是一个可点击的列表,会默认给一个点击成果,并能够监听click
事件 - 设置
link
属性,会主动开启点击反馈,并给列表右侧增加一个箭头 - 设置
to
属性,能够跳转页面,link
的值示意跳转形式,如果不指定,默认为navigateTo
<uni-list> <uni-list-item title="开启点击反馈" clickable @click="onClick" ></uni-list-item> <uni-list-item title="默认 navigateTo 形式跳转页面" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item> <uni-list-item title="reLaunch 形式跳转页面" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item></uni-list>
聊天列表:
- 设置
clickable
为true
,则示意这是一个可点击的列表,会默认给一个点击成果,并能够监听click
事件 - 设置
link
属性,会主动开启点击反馈,link
的值示意跳转形式,如果不指定,默认为navigateTo
- 设置
to
属性,能够跳转页面 time
属性,通常会设置成工夫显示,然而这个属性不仅仅能够设置工夫,你能够传入任何文本,留神文本长度可能会影响显示- avatar 和 avatarList 属性同时只会有一个失效,同时设置的话,avatarList属性的长度大于1 ,avatar 属性将生效
<uni-list> <uni-list :border="true"> <!-- 显示圆形头像 --> <uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" note="您收到一条新的音讯" time="2020-02-02 20:20" ></uni-list-chat> <!-- 右侧带角标 --> <uni-list-chat title="uni-app" avatar="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" note="您收到一条新的音讯" time="2020-02-02 20:20" badge-text="12"></uni-list-chat> <!-- 头像显示圆点 --> <uni-list-chat title="uni-app" avatar="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" note="您收到一条新的音讯" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat> <!-- 头像显示角标 --> <uni-list-chat title="uni-app" avatar="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png" note="您收到一条新的音讯" time="2020-02-02 20:20" badge-positon="left" badge-text="99"></uni-list-chat> <!-- 显示多头像 --> <uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的音讯" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat> <!-- 自定义右侧内容 --> <uni-list-chat title="uni-app" :avatar-list="avatarList" note="您收到一条新的音讯" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"> <view class="chat-custom-right"> <text class="chat-custom-text">刚刚</text> <!-- 须要应用 uni-icons 请自行引入 --> <uni-icons type="star-filled" color="#999" size="18"></uni-icons> </view> </uni-list-chat> </uni-list></uni-list>
三、知识点:
1.
uni.setStorage: 存储数据-异步
uni.setStorageSync:存储数据-同步
比照:
异步就是不论保没保留胜利,程序都会持续往下执行.同步是等保留胜利了,才会执行上面的代码.应用异步,性能会更好;而应用同步,数据会更平安。
2.
uni.switchTab:跳转到tabBar页面,并敞开其余非tabBar页面。
`uni.switchTab({` `url: '/pages/index/index'` `});`
uni.navigateTo:保留以后页面,跳转到利用内某个页面,应用uni.navigateBack 能够返回到原页面。
//在起始页面跳转到test.vue页面并传递参数` uni.navigateTo({` url: 'test?id=1&name=uniapp'` });`
//在test.vue页面承受参数export default {onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数console.log(option.id); //打印出上个页面传递的参数。console.log(option.name); //打印出上个页面传递的参数。}}
3.
easycom
传统vue组件,须要装置、援用、注册,三个步骤后能力应用组件。
easycom将其精简为一步。 只有组件装置在我的项目的components目录下,
并合乎components/组件名称/组件名称.vue目录构造。
就能够不必援用、注册,间接在页面中应用。
不论components目录下装置了多少组件,
easycom打包后会主动剔除没有应用的组件,对组件库的应用尤为敌对。
easycom是主动开启的,不须要手动开启,
有需要时能够在pages.json的easycom节点进行个性化设置,
如敞开主动扫描,
或自定义扫描匹配组件的策略
autoscan:是否开启主动扫描
custom:以正则形式自定义组件匹配规定。
4.Day.js
轻量的解决工夫和日期的JS
装置:
npm install dayjs --save
import dayjs from 'dayjs' // 或者 CommonJS // var dayjs = require('dayjs'); dayjs().format();
格式化:
dayjs().format()
可退出过滤器写法:
filters: { formatDate(value) { if (value === null || value === '') { return '' } return dayjs(value).format('YYYY-MM-DD'); } }
困了。。。本次记录完结。