【vue】uni-app快速上手

1. 环境搭建
2. 项目脚手架搭建或者初始化 | 项目结构
3. 页面编写、逻辑层和生命周期
4. 路由配置
5. 网络库使用
6. 组件和api使用
7. 调试和打包

 

 

一、环境搭建

 

安装npm install -g @vue/cli

 

 

二、项目脚手架搭建或者初始化 | 项目结构

 

初始化一个uni-app项目

 

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

 

项目结构：

 

 

 

三、页面编写、逻辑层和生命周期

 

1.页面书写类似vue模板

2.尺寸

• px 即屏幕像素
• upx 是uni-app提供的一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准，屏幕变宽，upx实际显示效果会等比放大。
• vh 是视窗高度的百分比

 

3.生命周期

 

A：应用生命周期

 

 

B：界面生命周期：

 

 

 

 

 

四、路由配置

 

 

 

路由配置类似于微信小程序。

 

1.整体配置在pages.json中进行～

 

 

 

{

   //pages数组中第一项代表启动页

    "pages": [{

        "path": "pages/component/index",

        "style": {

            "navigationBarTitleText": "组件"

        }

    }, {

        "path": "pages/API/index",

        "style": {

            "navigationBarTitleText": "接口"

        }

    }

    }],

    "condition": { //模式配置，仅开发期间生效

        "current": 0, //当前激活的模式（list 的索引项）

        "list": [{

            "name": "test", //模式名称

            "path": "pages/component/view/index" //启动页面，必选

        }]

    },

    "globalStyle": {

        "navigationBarTextStyle": "black",

        "navigationBarTitleText": "演示",

        "navigationBarBackgroundColor": "#F8F8F8",

        "backgroundColor": "#F8F8F8",

        "usingComponents":{

            "collapse-tree-item":"/components/collapse-tree-item"

        }

    },

    "tabBar": {

        "color": "#7A7E83",

        "selectedColor": "#3cc51f",

        "borderStyle": "black",

        "backgroundColor": "#ffffff",

        //导航

        "list": [{

            "pagePath": "pages/component/index",

            "iconPath": "static/image/icon_component.png",

            "selectedIconPath": "static/image/icon_component_HL.png",

            "text": "组件"

        }, {

            "pagePath": "pages/API/index",

            "iconPath": "static/image/icon_API.png",

            "selectedIconPath": "static/image/icon_API_HL.png",

            "text": "接口"

        }]

    }

}

 

 

 

 

2.uniapp路由跳转：

 

A.保留挑战栈，使用 uni.navigateTo：

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);//打印出上个页面传递的参数。

}}

 

 

B.关闭当前页面，跳转到应用内的某个页面 uni.redirectTo ：

uni.redirectTo({ url: 'test?id=1'});

 

C.关闭所有页面，打开到应用内的某个页面 ， uni.reLaunch：

uni.reLaunch({ url: 'test?id=1'});

//另外的界面

export default {

    onLoad: function (option) {

        console.log(option.id);

    }

}

 

 

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

pages.json

{

    "tabBar": {

         "list": [

            { "pagePath": "pages/index/index", "text": "首页" },

            { "pagePath": "pages/other/other", "text": "其他" }

            ]

     }

}

 

other.vue

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

 

 

 

E.关闭当前页面，返回上一页面或多级页面， uni.navigateBack

// 此处是A页面

uni.navigateTo({ url: 'B?id=1'});

// 此处是B页面

uni.navigateTo({ url: 'C?id=1'});

// 在C页面内 navigateBack，将返回A页面

uni.navigateBack({ delta: 2});

 

 

五、网络库使用

 

 

 

六、组件和API调用

 

API主要是一些和原生交互的API，常用的已经封装好了，具体通信需要进一步了解

组件和api使用 https://uniapp.dcloud.io/api/README

 

 

七、调试和打包

 

然后一个例子：

npm run dev:mp-alipay   //调试

npm run build:mp-alipay //打包

 

by qiaochao