记录一下最近uni-app的学习（一）

参考链接：
保活
知识点查录
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');
            }
        }

困了。。。本次记录结束。