uniapp简介

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到多端运行。（ios，android，Web, 各种小程序）

优点

• 开发者/案例数量多
• 平台能力不受限
• 性能体验优秀
• 周边生态丰富
• 学习成本低
• 开发成本低

功能框架

开发规范

为了实现多端兼容，综合思考编译速度、运行性能等因素，uni-app约定以下规范

• 页面文件遵循 Vue 单文件组件 (SFC) 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，提议使用flex布局进行开发

环境搭建

通过HBuilderX可视化界面搭建

HBuilderX:下载地址

通过cli脚手架搭建

全局安装vue-cli

npm install -g @vue/cli

创建uniapp

vue create -p dcloudio/uni-preset-vue my-project

创建uni-app

这里通过HBuilderX编译器创建
点击文件-》新建-》项目

选择uni-app类型，输入项目名，选择默认模板

点击创建，一个uni-app就创建好了。

目录结构

.hbuilderx                    启动调试时相关设置
components                符合vue组件规范的uniapp组件
pages                          业务页面
static                            存放静态资源
uni_modules                存放uni-module规范的插件
unpackage                   发布后的文件
App.vue                        应用配置，app的全局样式及应用的生命周期
main.js                          Vue初始化入口文件
manifest.json                应用配置文件，名称，appid，logo等。
pages.json                    配置页面路由，导航条，选项卡等。

应用生命周期

<script>
        //只能再App.vue里监听应用的生命周期
    export default {
        onLaunch: function() {
            console.log( App Launch )
        },
        onShow: function() {
            console.log( App Show )
        },
        onHide: function() {
            console.log( App Hide )
        }
    }
</script>

页面生命周期（常用）

路由

uni-app 页面路由为框架统一管理，需要再page.json里配置每个路由页面及页面样式

路由跳转

• navigator 组件跳转 文档
• 调用API跳转 文档

uni.navigateTo    保留当前页面，跳转到新页面
uni.redirectTo    关闭当前页面，跳转到新页面
uni.reLaunch      关闭所有页面，打开应用内的某个页面
uni.switchTab     跳转到tabBar页面，并关闭其他所有非tabBar页面
uni.navigateBack  关闭当前页面，返回上一个页面

尺寸单位

uni-app 支持的通用 css 单位包括 px、rpx
推荐使用rpx
uni-app应用，屏幕宽度以750为基准，自适应，页面宽度设置750rpx就恰好为屏幕宽度。

• 注意 在APP端或者H5端，如果屏幕宽度达到960px时，屏幕宽度以375为基准。

页面配置

pages.json 中配置了uni-app的页面路径，窗口样式，原生的导航栏，底部原生的tabbar等。

常用属性

• globalStyle 默认页面样式
• pages 设置页面路径及样式
• tabBar 底部tab样式

网络

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 ;
    }
});

如果要返回requestTask 对象，需要至少传入success，fail，complete参数中的一个，
如果没传，则会返回Promise对象，如下

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

数据存储

//异步
uni.setStorage({
    key:  storage_key ,
    data:  hello ,
    success: function () {
        console.log( success );
    }
});
//同步
try {
    uni.setStorageSync( storage_key ,  hello );
} catch (e) {
    // error
}

数据获取

//异步
uni.getStorage({
    key:  storage_key ,
    success: function (res) {
        console.log(res.data);
    }
});
//同步
try {
    const value = uni.getStorageSync( storage_key );
    if (value) {
        console.log(value);
    }
} catch (e) {
    // error
}

判断平台

编译期判断

// #ifdef H5
    alert("只有h5平台才有alert方法")
// #endif

运行期判断

switch(uni.getSystemInfoSync().platform){
    case  android :
       console.log( 运行Android上 )
       break;
    case  ios :
       console.log( 运行iOS上 )
       break;
    default:
       console.log( 运行在开发者工具上 )
       break;
}

全局变量

共用模块

在 uni-app 项目根目录下创建 common 目录，然后在 common 目录下新建 helper.js 用于定义公用的方法。

const now = Date.now || function () {  
    return new Date().getTime();  
};

在其他页面中使用

<script>  
    import helper from  ../../common/helper.js ;  

    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log( now:  + helper.now());  
        },  
        methods: {  
        }  
    }  
</script>

挂载 Vue.prototype

将一些使用频率较高的常量或者方法，直接扩展到 Vue.prototype 上，每个 Vue 对象都会“继承”下来。
在main.js中挂载属性/方法

Vue.prototype.now = Date.now || function () {  
    return new Date().getTime();  
};  

在其他页面中使用

<script>  
    export default {  
        data() {  
            return {};  
        },  
        onLoad(){  
            console.log( now:  + this.now());  
        },  
        methods: {  
        }  
    }  
</script>

globalData

小程序中有个globalData概念，可以在 App 上声明全局变量。 Vue 之前是没有这类概念的，但 uni-app 引入了globalData概念，并且在包括H5、App等平台都实现了。
在 App.vue 可以定义 globalData ，也可以使用 API 读写这个值。

在App.vue中定义

<script>  
    export default {  
        globalData: {  
            text:  text   
        },  
        onLaunch: function() {  
            console.log( App Launch )  
        },  
        onShow: function() {  
            console.log( App Show )  
        },  
        onHide: function() {  
            console.log( App Hide )  
        }  
    }  
</script>  

<style>  
    /*每个页面公共css */  
</style>  

在其他页面中使用

赋值：getApp().globalData.text =  test 

取值：console.log(getApp().globalData.text) //  test 

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用聚焦式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
举例说明：

在 uni-app 项目根目录下新建 store 目录，在 store 目录下创建 index.js 定义状态值

const store = new Vuex.Store({  
    state: {  
        login: false,  
        token:   ,  
        avatarUrl:   ,  
        userName:     
    },  
    mutations: {  
        login(state, provider) {  
            console.log(state)  
            console.log(provider)  
            state.login = true;  
            state.token = provider.token;  
            state.userName = provider.userName;  
            state.avatarUrl = provider.avatarUrl;  
        },  
        logout(state) {  
            state.login = false;  
            state.token =   ;  
            state.userName =   ;  
            state.avatarUrl =   ;  
        }  
    }  
})

然后，需要在 main.js 挂载 Vuex

import store from  ./store   
Vue.prototype.$store = store

最后，在页面中使用

<script>  
    import {  
        mapState,  
        mapMutations  
    } from  vuex ;  

    export default {  
        computed: {  
            ...mapState([ avatarUrl ,  login ,  userName ])  
        },  
        methods: {  
            ...mapMutations([ logout ])  
        }  
    }  
</script>