Reference link:
Keep alive
Knowledge point search
List
Pull up load - pull down refresh sPullScroll
LoadMore load more
Day.js

1, Keep alive - Front Desk operation:

Used to improve app survival probability or add foreground display
It can be used to improve the running authority of the app and increase the survival probability, so that the long-term background operation of the app will not be killed (if the user cleans it up actively, it will not be guaranteed.)
initialization:

const hgService = uni.requireNativePlugin("HG-Background");

Configure plug-ins:

hgService.config({
    title:"Service name",
    content:"The front desk service is running",
    mode: 0, //0 power saving mode 1 rogue mode
});

Note that the plug-in service uses the icon of the app Png, and push Png as notification bar icon

Open security management:

hgService.showSafeSetting();

Check whether background operation is restricted:

var rsult=hgService.checkIfLimited();

//console.log("isLimit=>"+rsult.isLimit );
// modal.toast({
//     message: "restricted or not:" + rsult isLimit,
//     duration: 1.5
// });

Return data description:

{
    "isLimit":true // false is restricted
}

Apply for background operation (only for Android system, the security management settings of each manufacturer should be carried out separately. Here, the app survival time can only be increased at a certain level):

hgService.requestIgnoreLimit();

Start the front desk service:

hgService.startService();

Global event callback (it can be used to execute tasks in uniapp. It can be returned quickly without blocking when registering):
The task start time will be delayed to a certain extent, generally within one minute:

var globalEvent = uni.requireNativePlugin('globalEvent');
        globalEvent.addEventListener('doJob', function() {
            counts+=1;
          modal.toast({
            message: "Task execution times:"+counts,
            duration: 1
          });
        });

Out of Service:

hgService.closeService();

2, List:

The list component is generally used to navigate menus, lists, set page layout, etc. you can use icons, thumbnails or place any elements you want
Component name:
uni-list,uni-list-item
Precautions for component use:

• The component needs to rely on sass plug-in. Please install it manually
• Components rely on 'uni icons' and uni badge components internally
• Uni list and uni list item need to be used together. Uni list item alone is not supported temporarily
• After clicking feedback is enabled, there will be a click selection effect
• When using slots, you can completely customize the content
• note and rightText properties are not limited temporarily, and do not support text overflow hiding. When using, you should control the length display or expand by yourself through the default slot
• If you need to modify switch and badge styles, please use slot customization

Usage:
When using uni UI, just Uni UI component Install in the components directory of the project and comply with components / component name / component name vue directory structure. You can directly use the uni UI component in the page without reference and registration

<!-- Single line content display -->
<uni-list>
    <uni-list-item  title="List text" ></uni-list-item>
    <uni-list-item :disabled="true" title="List disabled status" ></uni-list-item>
</uni-list>
<!-- Multi line content display -->
<uni-list>
    <uni-list-item title="List text" note="List description information"></uni-list-item>
    <uni-list-item :disabled="true" title="List text" note="List disabled status"></uni-list-item>
</uni-list>
<!-- Corner markers are displayed on the right switch -->
<uni-list>
    <uni-list-item  title="Display corner mark on the right" :show-badge="true" badge-text="12" ></uni-list-item>
    <uni-list-item title="Displayed on the right side of the list switch"  :show-switch="true"  @switchChange="switchChange" ></uni-list-item>
</uni-list>
 <!-- Thumbnails and icons are displayed on the left -->
 <uni-list>
    <uni-list-item title="List with thumbnail on the left" note="List description information" thumb="https://img-cdn-qiniu.dcloud.net.cn/new-page/uni.png"
     thumb-size="lg" rightText="Right text"></uni-list-item>
    <uni-list-item :show-extra-icon="true" :extra-icon="extraIcon1" title="There is an extended icon on the left side of the list" ></uni-list-item>
</uni-list>

Turn on click feedback and the right arrow:

• If clickable is set to true, it means that this is a clickable list, which will give a click effect by default and can listen to click events
• Setting the link attribute will automatically turn on click feedback and add an arrow to the right side of the list
• Set the to property to jump to the page. The value of link indicates the jump method. If it is not specified, it defaults to navigateTo

<uni-list>
    <uni-list-item title="Turn on click feedback" clickable  @click="onClick" ></uni-list-item>
    <uni-list-item title="default navigateTo Jump to page by" link to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
    <uni-list-item title="reLaunch Jump to page by" link="reLaunch" to="/pages/vue/index/index" @click="onClick($event,1)" ></uni-list-item>
</uni-list>

Chat list:

• If clickable is set to true, it means that this is a clickable list, which will give a click effect by default and can listen to click events
• Setting the link property will automatically turn on click feedback. The value of link indicates the jump method. If it is not specified, it is navigateTo by default
• Set the to property to jump to the page
• The time attribute is usually set to time display, but this attribute can not only set the time, but you can pass in any text. Note that the length of the text may affect the display
• Only one of the avatar and avatarList attributes will take effect at the same time. If it is set at the same time, if the length of the avatarList attribute is greater than 1, the avatar attribute will become invalid

<uni-list>
    <uni-list :border="true">
        <!-- Show round head -->
        <uni-list-chat :avatar-circle="true" title="uni-app" avatar="https://img-cdn-qiniu. dcloud. net. cn/new-page/uni. Png "note =" you have received a new message "time =" 2020-02-02 20:20 "> < / UNI list chat >
        <!-- Right side with angle mark -->
        <uni-list-chat title="uni-app" avatar="https://img-cdn-qiniu. dcloud. net. cn/new-page/uni. Png "note =" you have received a new message "time =" 2020-02-02 20:20 "badge text =" 12 "> < / UNI list chat >
        <!-- The avatar shows dots -->
        <uni-list-chat title="uni-app" avatar="https://img-cdn-qiniu. dcloud. net. cn/new-page/uni. Png "note =" you have received a new message "time =" 2020-02-02 20:20 "badge position =" left "badge text =" dot "> < / UNI list chat >
        <!-- Avatar display corner sign -->
        <uni-list-chat title="uni-app" avatar="https://img-cdn-qiniu. dcloud. net. cn/new-page/uni. Png "note =" you have received a new message "time =" 2020-02-02 20:20 "badge position =" left "badge text =" 99 "> < / UNI list chat >
        <!-- Show multiple avatars -->
        <uni-list-chat title="uni-app" :avatar-list="avatarList" note="You have received a new message" time="2020-02-02 20:20" badge-positon="left" badge-text="dot"></uni-list-chat>
        <!-- Customize content on the right -->
        <uni-list-chat title="uni-app" :avatar-list="avatarList" note="You have received a new message" time="2020-02-02 20:20" badge-positon="left" badge-text="dot">
            <view class="chat-custom-right">
                <text class="chat-custom-text">just</text>
                <!-- Need to use uni-icons Please import by yourself -->
                <uni-icons type="star-filled" color="#999" size="18"></uni-icons>
            </view>
        </uni-list-chat>
    </uni-list>
</uni-list>

3, Knowledge points:

1.
uni.setStorage: store data - Asynchronous
uni.setStorageSync: store data - Sync
contrast:
Asynchrony means that the program will continue to execute regardless of whether it is successfully saved or not The following code will not be executed until the synchronization is saved successfully Using asynchronous, the performance will be better; With synchronization, the data will be more secure.
2.
uni.switchTab: jump to the tabBar page and close other non tabBar pages.

 `uni.switchTab({`
 `url: '/pages/index/index'`
 `});`

uni.navigateTo: keep the current page, jump to a page in the application, and use Uni Navigateback can return to the original page.

  //Jump to test. On the start page Vue page and pass parameters`
  uni.navigateTo({`
  url: 'test?id=1&name=uniapp'`
 });`

//In test Vue page accepts parameters
export default {
onLoad: function (option) { 
//option is of object type, which will serialize the parameters passed on the previous page
console.log(option.id); 
//Print out the parameters passed on the previous page.
console.log(option.name); 
//Print out the parameters passed on the previous page.
}
}

3.
easycom
Traditional vue components can only be used after three steps: installation, reference and registration.
easycom reduced it to one step. As long as the components are installed in the components directory of the project,
And comply with components / component name / component name vue directory structure.
You can use it directly in the page without reference and registration.
No matter how many components are installed in the components directory,
easycom will automatically eliminate unused components after packaging, which is particularly friendly to the use of component library.
easycom is started automatically and does not need to be started manually,
If necessary, you can use pages Personalize the easycom node of JSON,
If automatic scanning is turned off,
Or customize the policy of scanning matching components
autoscan: auto scan on
custom: Customize component matching rules in a regular manner.
4.Day.js
Lightweight processing time and date JS
Installation:

npm install dayjs --save

import dayjs from 'dayjs' 
// Or CommonJS 
// var dayjs = require('dayjs'); 
dayjs().format();

format:
dayjs().format()
Filter can be added:

filters: {
            formatDate(value) {
                if (value === null || value === '') {
                    return ''
                }
                return dayjs(value).format('YYYY-MM-DD');
            }
        }

Sleepy... End of this record.