uni-app从入门到放弃（下）

OrzR3
1,831 阅读4分钟

20.发起请求

在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。

详见：

uniapp.dcloud.io/api/request…

示例

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

21.数据缓存

uni.setStorage(OBJECT)

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

OBJECT 参数说明

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

uni.setStorageSync(KEY,DATA)

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

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

uni.getStorage(OBJECT)

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


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

uni.getStorageSync(KEY)

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


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

uni.removeStorage(OBJECT)

从本地缓存中异步移除指定 key。

uni.clearStorage()

清理本地数据缓存。

22.图片的上传和预览

1.上传图片

uni.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

示例

uni.chooseImage({
    count: 6, //默认9
    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album','camera'], //从相册选择和使用相机
    success: function (res) {
        console.log(JSON.stringify(res.tempFilePaths));
    }
});

2.预览图片

uni.previewImage(OBJECT)

预览图片。

// 从相册选择6张图
uni.chooseImage({
    count: 6,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    success: function(res) {
        // 预览图片
        uni.previewImage({
            urls: res.tempFilePaths,
            longPressActions: {
                itemList: ['发送给朋友', '保存图片', '收藏'],
                success: function(data) {
                    console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
                },
                fail: function(err) {
                    console.log(err.errMsg);
                }
            }
        });
    }
});

23.条件编译跨端兼容

1.条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：

以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

  • #ifdef：if defined 仅在某平台存在
  • #ifndef：if not defined 除了某平台均存在
  • %PLATFORM%：平台名称
条件编译写法说明
#ifdef APP-PLUS需条件编译的代码#endif仅出现在 App 平台下的代码
#ifndef H5需条件编译的代码#endif除了 H5 平台，其它平台均存在的代码
#ifdef H5  MP-WEIXIN需条件编译的代码#endif在 H5 平台或微信小程序平台存在的代码（这里只有，不可能出现&&，因为没有交集）

2.组件的条件编译

<view>
    <view>微信公众号关注组件</view>
    <view>
        <!-- uni-app未封装，但可直接使用微信原生的official-account组件-->
        <!-- #ifdef MP-WEIXIN -->
                <official-account></official-account>
            <!-- #endif -->
    </view>
</view>

其他条件编译，详见：

uniapp.dcloud.io/platform?id…

24.两种发送导航跳转和传参

路由跳转

uni-app 有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。

navigator

页面跳转。

该组件类似HTML中的组件，但只能跳转本地页面。目标页面必须在pages.json中注册。

该组件的功能有API方式，另见：

uniapp.dcloud.io/api/router?…

示例


<template>
    <view>
        <view class="page-body">
            <view class="btn-area">
                <navigator url="navigate/navigate?title=navigate" hover-class="navigator-hover">
                    <button type="default">跳转到新页面</button>
                </navigator>
                <navigator url="redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">
                    <button type="default">在当前页打开</button>
                </navigator>
                <navigator url="/pages/tabBar/extUI/extUI" open-type="switchTab" hover-class="other-navigator-hover">
                    <button type="default">跳转tab页面</button>
                </navigator>
            </view>
        </view>
    </view>
</template>

uni.navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。


//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
    url: 'test?id=1&name=uniapp'
});

uni.switchTab(OBJECT)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

注意：

如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

示例

pages.json

{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

示例

pages.json


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

其他跳转方法，详见文档：

uniapp.dcloud.io/api/router?…

页面接收参数，在onLoad生命周期中


// navigate.vue页面接受参数
export default {
    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
        console.log(option.id); //打印出上个页面传递的参数。
        console.log(option.name); //打印出上个页面传递的参数。
    }
}

25.组件的创建使用和组件的生命周期

创建组件和vue一模一样。

组件的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期。

26.组件之间的通讯方式

父组件给子组件传值

通过props来接收外界传递到组件内部的值

子组件给父组件传值

通过$emit触发事件进行传递参数

又是和vue一模一样。

页面通讯，详见：

uniapp.dcloud.io/collocation…

27.uni-ui组件库的基本介绍和使用

uni-ui自称：在小程序和混合app领域，暂时还没有比 uni-ui 更高性能的框架

uni-ui的地址：

ext.dcloud.net.cn/plugin?id=5…

安装 uni-ui

npm install @dcloudio/uni-ui

在 script 中引用组件：

import {uniBadge} from '@dcloudio/uni-ui'
//import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' //也可使用此方式引入组件
export default {
    components: {uniBadge}
}

在 template 中使用组件：

<uni-badge text="1"></uni-badge>
<uni-badge text="2" type="success" @click="bindClick"></uni-badge>
<uni-badge text="3" type="primary" :inverted="true"></uni-badge>

还有个uView安利一波

www.uviewui.com/

// 安装
npm install uview-ui

// main.js
import uView from "uview-ui";Vue.use(uView);

/* uni.scss */
@import 'uview-ui/theme.scss';
avatar
文章
阅读
粉丝