uni-app Report

一、概述

uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架。开发者通过编写 Vue.js 代码，uni-app 将其编译到iOS、Android、H5、微信小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。做到一套代码，多端发行。

二、uni-app项目搭建

使用工具Hbuilderx[ Download](https://www.dcloud.io/hbuilderx.html)<br />    演示

三、uni-app项目结构

1、项目目录简介

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

2、CSS 、组件的的引入

全局引入

// 全局 CSS样式 的引入 app.vue内引入
    // App.vue
     @import './static/css/uni.css';
        // 实例 tab1页面 title
// 全局组件的引入  main.js
    // 全局引入组件
    import pageHead from './components/page-head.vue'
    //组件的注册
    Vue.component('page-head', pageHead)

局部引入

// 局部引入注册组件
// script
import uniSwiperDot from '@/components/uni-swiper-dot/uni-swiper-dot.vue'
components: {
            uniSwiperDot
        },
// html
// <uni-swiper-dot></uni-swiper-dot>

组件（Component）是对数据和方法的简单封装

四、uni-app 项目内容

1、页面基本样式

（1）底部的原生tabbar pages.json tabBar
（2）Index页面 定义组件

2、生命周期

生命周期

• 建议使用 uni-app 的 onReady代替 vue 的 mounted。
  
• 建议使用 uni-app 的 onLoad 代替 vue 的 created。
  

3、路由跳转

路由

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 不能在 App.vue 里面进行页面跳转。
• H5端页面刷新之后页面栈会消失，此时navigateBack不能返回，如果一定要返回可以使用history.back()。

4、数据处理

本地数据缓存

数据的传递(页面监听器)全局

5、接口调用

// 默认方式
uni.request({
    url: 'https://www.example.com/request',
    success: (res) => {
        console.log(res.data);
    }
});
// Promise
uni.request({
        url: 'https://www.example.com/request'
    })
    .then(data => {//data为一个数组，数组第一项为错误信息，第二项为返回数据
        var [error, res]  = data;
        console.log(res.data);
    })
// Await
function async request () {
    var [error, res] = await uni.request({
        url: 'https://www.example.com/request'
    });
    console.log(res.data);
}

封装fly.js

6、iconfont的引用

在iconfont官网找到你需要用到的图标加入购物车，添加到你的项目

在我的项目中找到相应项目，下载至本地

下载后的文件解压，找到iconfont.css，将其复制到所需项目的common目录下
打开iconfont.css 将iconfont.css中的 @font-face 替换成网络资源

接着在文件中引用

也可以用线上方式引用
打开iconfont官网找到我的项目 ，复制相应图标代码

![0~K)VXYTSS%L8%CV5EAY3Q.png
若添加新的图标，比较麻烦，需要重新下载文件至本地，与上述方法一致，
也可以重新复制网页上的代码，用第二种引用方式引用

7、下拉刷新 onPullDownRefresh

在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。

• 需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
• 当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。

在相应页面引用

// 仅做示例，实际开发中延时根据需求来使用。
export default {
    data: {
        text: 'uni-app'
    },
    onLoad: function (options) {
        setTimeout(function () {
            console.log('start pulldown');
        }, 1000);
        uni.startPullDownRefresh();        //刷新结束 图标隐藏
    },
    onPullDownRefresh() {                  //定义下拉时的动作 出现加载的图标
        console.log('refresh');
        setTimeout(function () {
            uni.stopPullDownRefresh();
        }, 1000);
    }
}

👉👉  [动态禁用开启下拉刷新](https://ask.dcloud.net.cn/article/35134)  👈👈    

默认原生的下拉刷新，App端原生的下拉刷新有2种样式可选择，下拉漏出雪花和下拉circle圈，没有办法设置刷新图标的位置，默认在顶部
使用 app-plus -> pullToRefresh 可以实现位置自定义 具体内容查看链接
下拉刷新控件的起始位置。仅对”circle”样式下拉刷新控件有效，用于定义刷新控件下拉时的起始位置。
例

{
  "path" : "pages/index/index",
    "style" : {
      "navigationBarTitleText" : "uni-app",
        // "enablePullDownRefresh": true     enablePullDownRefresh 与 pullToRefresh->support 
        //同时设置时，后者优先级较高。
        "app-plus" : {
          "pullToRefresh" : {
            "support" : true,
              "offset" : "152px",
                "style" : "circle"
          }
        }
    }
},

8、上拉加载 onReachBottom（）

onReachBottom(){    //页面到底时触发的函数
        console.log("加载中");
    if(){ // 翻页时更新页码pagenum+1，并触发新一轮请求，和第2部形成循环。
        uni.showLoading({
                    title:'加载中'
            })   
       }else{  //当翻到最后一页后 请求完成
        uni.showToast({
                    title:"到底了"
                })
    }
}

如果想要实现无感加载，还可以在.json文件中给onReachBottom()设定触发距离，这样不用拉到最底部就开始触发onReachBottom翻页：

"onReachBottomDistance":300 //可以在当前页也可以全局设置

9、交互反馈

• uni.showToast 显示消息提示框。
• uni.showLoading 显示 loading 提示框,
• uni.hideToast 隐藏消息提示框。
• uni.hideLoading 隐藏 loading 提示框。
• uni.showModal 显示模态弹窗，类似于标准 html 的消息框：alert、confirm。
• uni.showActionSheet 隐藏

也可以引用插件市场里的modal

10、设备相关

获取设备相关

uni.getSystemInfo({
    success: function (res) {
        console.log(res.windowWidth);  //可使用窗口宽度
        console.log(res.windowHeight);  //可使用窗口高度
            console.log(res.statusBarHeight) //状态栏高度
    }  //根据需求调取 相应返回参数
});

11、获取位置

uni.getLocation({
    type: 'wgs84',
      geocode:true,   //若想解析地址，要设置geocode为true 默认为false
    success: function (res) {
        console.log('当前位置的经度：' + res.longitude);
        console.log('当前位置的纬度：' + res.latitude);
          console.log('当前所在城市'+ res.address.city)    //解析所得的地址
    }
});

12、自定义组件

//1、新建 组件.vue 文件
//2、组件文档结构
<template name="组件名称">
    <view>
        ......
    </view>
</template>
<script>
export default {
    name: "组件名称",
    //属性
    props: {
        属性名称: {
            type: String,//属性类型
            value: "值"
        },
        ......
    },
    //组件生命周期
    created:function(e){
    },
    methods: {
        函数名称:function(obj){
        },
    }
}
</script>
<style>
//组件样式
</style>

引用组件

//1、引用组件
import 组件名称 from "../../components/组件名.vue";
//2、注册组件
export default{
    components:{
        组件名称
    },
}
//3、在试图模板中使用组件
<组件名称 组件属性="对应的值"></组件名称>