uni-app备忘录

一、项目结构介绍

pages.json：配置页面路由、导航条、选项卡等页面类信息，详见。
manifest.json：配置应用名称、appid、logo、版本等打包信息，详见。
App.vue：应用配置，用来配置App全局样式以及监听应用的生命周期。
main.js：Vue初始化入口文件
static目录：存放应用引用静态资源（如图片、视频等）的地方，注意：静态资源只能存放于此
pages目录：业务页面文件存放目录
components目录：组件文件存放目录

Vue.prototype.$store知识点：
https://blog.csdn.net/qq_32407233/article/details/83819831

数据缓存uni.getStorageSync知识点：
http://www.hcoder.net/tutorials/info_1353.html

Vue.config.productionTip = false 以开发环境运行

二、css3相关

https://www.jianshu.com/p/fe36aa3e5fc6

vw: 视口宽度的百分比（1vw 等于视口宽度的 1%）
vh: 视口高度的百分比（1vh 等于视口高度的 1%）
％ 是相对于父元素的大小设定的比率，vw vh 是视口大小决定的
vmin: 选取 vw 和 vh 中最小的那个
vmax: 选取 vw 和 vh 中最大的那个

vw、vh 是基于视口的，而不是父元素。1vw 等于1/100 的视口宽度，1vh 等于1/100 的视口高度，比如：
浏览器高度 950px，宽度为 1920px, 1vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px
vw、vh 能直接获取高度，而 ％ 如果没有设置body的高度情况下，是无法获取可视区域的高度。
vmin、vmax 用处解决横屏竖屏字体不一样的问题

单位方面，px无法动态适应不同宽度的屏幕，rem只能用于h5、rpx只能用于微信小程序。为此uni-app新增了 upx ，通吃所有端、所有屏幕宽度的动态单位 upx文档，微信小程序中认为页面宽度为750rpx，在不同的设备上1rpx对应的像素值是不同的，如果设备宽度为750px那么1rpx=1px，如果设备宽度为1500px那么1rpx=2px，upx类似于rpx使用更宽泛。

html > body table + ul {margin-top:20px;}

这个选择器解释为：选择紧接在 table 元素后出现的所有兄弟 ul 元素，该 table 元素包含在一个 body 元素中，body 元素本身是 html 元素的子元素。

a:link {color: #FF0000}     /* 未访问的链接 */
a:visited {color: #00FF00}  /* 已访问的链接 */
a:hover {color: #FF00FF}    /* 鼠标移动到链接上 */
a:active {color: #0000FF}   /* 选定的链接 */

box-sizing布局

css3增添了盒模型box-sizing,有三个属性值
content-box:默认值，让元素维持w3c的标准盒模型。元素的width/height等于border的宽度加上padding值加上元素内容的width/height，(默认内容区大小不会变)
即Element Width/Height = boder + padding + content width/height;
border-box:让元素维持IE6及以下版本盒模型，元素的width/height等于元素内容的width/height，
即：Element Width/Height = width/height-border-padding。
inherit:继承父元素的盒模型模式。
其中最重要的就是border-box,如果遇到不影响其他区域布局，还要给元素加padding、border的情况，使用border-box元素所占空间不会变，加padding、border会往内挤，保持外面容器不被破坏。（注意：margin不包含在元素空间，加了margin会向外撑开）。
兼容性：IE8+及其他主流浏览器均支持box-sizing。其中IE6及以下默认是以类似border-box盒模型来计算尺寸。
（ps：Firefox浏览器，box-sizing还可以设置一个padding-box，指定元素的宽度/高度等于内容的宽度/高度和內距，
即：Element Width/Height = content width/height+padding。）

三、输入框input

v-model仅仅是语法糖

<input type="text" v-model="something">

相当于

<input
                type="text"
                v-bind:value="something"
                v-on:input="something = $event.target.value">

四、状态栏$导航栏

可以隐藏掉uni-app的原生导航栏使用colorui提供的cu-custom自定义导航栏。

1、下载插件

https://ext.dcloud.net.cn/plugin?id=239下载colorui并倒入你的项目根目录

2、App.vue 引入关键Css main css icon.css

<style>
    @import "colorui/main.css";
    @import "colorui/icon.css";
    ....
</style>

3、使用自定义导航栏

main.js 引入 cu-custom 组件

import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)

4、App.vue 获得系统信息

onLaunch: function() {
    uni.getSystemInfo({
        success: function(e) {
            // #ifndef MP
            Vue.prototype.StatusBar = e.statusBarHeight;
            if (e.platform == 'android') {
                Vue.prototype.CustomBar = e.statusBarHeight + 50;
            } else {
                Vue.prototype.CustomBar = e.statusBarHeight + 45;
            };
            // #endif

            // #ifdef MP
            Vue.prototype.StatusBar = e.statusBarHeight;
            let custom = wx.getMenuButtonBoundingClientRect();
            Vue.prototype.Custom = custom;
            Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
            // #endif
        }
    })
},

5、pages.json 配置取消系统导航栏

"globalStyle": {
    "navigationStyle": "custom"
},

6、page.vue 页面可以直接调用了

<cu-custom bgColor="bg-gradual-blue" :isBack="true">
    <block slot="backText">返回</block>
    <block slot="content">导航栏</block>
</cu-custom>

带分割线的导航栏

<cu-custom bgColor="bg-white solid-bottom" :isBack="false">
    <block slot="backText"></block>
    <block slot="content">消息</block>
</cu-custom>

7、修改状态栏文字颜色

pages.json 文件中对应页面的style设置navigationBarTextStyle为white或者black

{
            "path" : "pages/mine/minePages/personInfo/personInfo",
            "style" : {
                "navigationBarTitleText": "个人信息",
                "navigationBarTextStyle": "white"
            }
        }

参数说明

参数	作用	类型	默认值
bgColor	背景颜色类名	String	''
isBack	是否开启返回	Boolean	false
bgImage	背景图片路径	String	''

slot块	作用
backText	返回时的文字
content	中间区域
right	右侧区域(小程序端可使用范围很窄！)

参考地址
https://www.jianshu.com/p/c32e09109eb6
https://uniapp.dcloud.io/collocation/pages

五、数据持久化

1. uni.setStorage

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
        console.log('success');
    }
});

2. uni.setStorageSync
   将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

try {
    uni.setStorageSync('storage_key', 'hello');
} catch (e) {
    // error
}

3. uni.getStorage
   从本地缓存中异步获取指定 key 对应的内容。

uni.getStorage({
    key: 'storage_key',
    success: function (res) {
        console.log(res.data);
    }
});

4. uni.getStorageSync
   从本地缓存中同步获取指定 key 对应的内容。

try {
    const value = uni.getStorageSync('storage_key');
    if (value) {
        console.log(value);
    }
} catch (e) {
    // error
}

5. uni.getStorageInfo
   异步获取当前 storage 的相关信息。

uni.getStorageInfo({
    success: function (res) {
        console.log(res.keys);
        console.log(res.currentSize);
        console.log(res.limitSize);
    }
});

6. uni.getStorageInfoSync

try {
    const res = uni.getStorageInfoSync();
    console.log(res.keys);
    console.log(res.currentSize);
    console.log(res.limitSize);
} catch (e) {
    // error
}

7. uni.removeStorage
   从本地缓存中异步移除指定 key。

uni.removeStorage({
    key: 'storage_key',
    success: function (res) {
        console.log('success');
    }
});

8. uni.removeStorageSync
   从本地缓存中同步移除指定 key。

try {
    uni.removeStorageSync('storage_key');
} catch (e) {
    // error
}

9. uni.clearStorage
   清理本地数据缓存。

uni.clearStorage();

10. uni.clearStorageSync
    同步清理本地数据缓存。

try {
    uni.clearStorageSync();
} catch (e) {
    // error
}

uni-app的Storage在不同端的实现不同：

• H5端为localStorage，浏览器限制5M大小，是缓存概念，可能会被清理
• App端为原生的plus.storage，无大小限制，不是缓存，持久化
• 各个小程序端为其自带的storage api，数据存储生命周期跟小程序本身一致，即除用户主动删除或超过一定时间被自动清理，否则数据都一直可用。
• 微信小程序单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。
• 支付宝小程序单条数据转换成字符串后，字符串长度最大200*1024。同一个支付宝用户，同一个小程序缓存总上限为10MB。
• 百度、头条小程序文档未说明大小限制
  除此之外，H5端还支持websql、indexedDB、sessionStorage；App端还支持SQLite、IO文件等本地存储方案。

六、获取当前时间

    var date = new Date()
    console.log('当前年'+date.getFullYear())
    console.log('当前月'+(date.getMonth()+1).toString())
    console.log('当前日'+date.getDate().toString())
    console.log('当前时'+date.getHours().toString())
    console.log('当前分'+date.getMinutes().toString())
    console.log('当前秒'+date.getSeconds().toString())

  /**
 * 获取当前时间
 * 格式YYYY-MM-DD
 */
Vue.prototype.getNowFormatDate = function() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
          month = "0" + month;
      }
      if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
      }
      var currentdate = year + seperator1 + month + seperator1 + strDate;
      return currentdate;
};

七、字符串操作

• splite(' ')可以将字符串按某个字符或者其他分割。返回数组。
• reverse()该方法会改变原来的数组，而不会创建新的数组。此函数可以将数组倒序排列。
• join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。指定分隔方法join(' ');

例如

                var message = 'abc'
                console.log('操作之前的结果为'+message)
                var a = message.split('').reverse().join('')
                console.log('操作之后的结果为'+a)

此操作不会改变原来的字符串，会生成一个新的字符串

八、计算属性(computed)和方法(methods)的区别

我们可以将同一函数定义为一个方法而不是一个计算属性。两种方式的最终结果确实是完全相同的。然而，不同的是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }

但是以下用法不会出发更新，每次获取都是第一次的时间，需要放到methods中

computed: {
  now: function () {
    return Date.now()
  }
}

九、一个页面的框架

<template>
    <view class="content">
        <cu-custom bgColor="bg-white solid-bottom" style="align-self: flex-start;">
            <block slot="backText"></block>
            <block slot="content">首页</block>
        </cu-custom>
        <view class="c"></view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        computed:{
            
        },
        methods: {
        }
    }
</script>

<style lang="less">
    .content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: 100vh;
        width: 100vw;
        background-color: #FFFFFF;
        
        .c{
            width: 750upx;
            background-color: #007AFF;
            flex-grow: 1;
        }
    }
    
</style>

img.png

默认导航栏有可能不是居中的，所以需要给cu-custom设置style

        <cu-custom bgColor="bg-white solid-bottom" style="align-self: flex-start;">
            <block slot="backText"></block>
            <block slot="content">首页</block>
        </cu-custom>