关于uni-app:记录一下最近uniapp的学习一

72次阅读

共计 5216 个字符，预计需要花费 14 分钟才能阅读完成。

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

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

正文完
uni-app
发表至： uni-app
2020-09-11
 0
关于uni-app:UniApp中打开蓝牙所需哪些权限
关于uni-app:uniapp自定义密码输入框
关于uniapp:UniApp微信小程序解决苹果手机上方刘海屏遮挡的方法
关于uniapp:uniapp项目实践总结十九版本更新和热更新实现方法