uni-app 开发应用程序

1. uni-app 介绍

使用 Vue.js 开发所有前端应用的框架，编写一套代码，可发布到 Android、iOS、Web 和各种小程序端。

为什么使用？

开发者、案例众多
平台能力不受限
性能好
周边丰富
学习和开发成本低。

Vue 语法 + 微信小程序 API：

使用 Vue 语法
App 和小程序只支持部分 Vue 语法
标签组件靠近小程序规范
接口能力靠近小程序规范
完整的小程序生命周期

uniCloud 是为开发者提供的基于 serverless 模式和 JS 编程的云开发平台。

2. 项目展示

商城项目 H5 版展示

底部栏：| 首页 | 商品 | 购物车 | 我的 |

3. 微信小程序概述

微信公众平台 —— 小程序账号注册 —— 快速开发、审核发布。

下载 微信开发者工具，可以开发微信项目。

微信小程序开发结构

pages/ 存放页面
- index/ 主页面
  - index.js 生命周期控制
  - index.json 配置文件
  - index.wxml 组件和代码
  - index.wxss 页面样式文件
- log/ 日志
utils/ 自定义的工具
App.js 入口文件
app.json 配置文件
app.wxss 微信样式文件
project.config.json 项目配置文件
sitemap.json 页面收录规则

编辑 index.wxml 文件，保存既可以看到结果

xml

<viem>Hello</viem>
<text>Demo</text>
<button type="primary" size="mini">按钮</button>

<viem> 类似于 <div>，<text> 类似于 <span>。

3. 微信小程序的生命周期

app.js 文件包含了生命周期的回调函数：

App({
    // 完成初始化，全局只触发一次
    onLaunch: function() { },
    // 启动，或从后台进入前台
    onShow: function() { },
    // 进入后台
    onHide: function() { },
    // 脚本错误，API 失败
    onError: function() { }
})

index.js 是页面的生命周期脚本。

Page({
    data: {
        name: 'Tom'
    },
    onLoad: function(options) { },
    onReady: function() { },
    onShow: function() { },
    onHide: function() { },
    onUnload: function() { },
    onPullDownRefresh: function() { },
    onReadyBottom: function() { },
    onShareAppMessage: function() { }
})

渲染顺序：

App: onLaunch
App: onShow
Page: onLoad
Page: onShow
Page: onReady

如何创建页面：在 app.json 中加入

{
    "pages": [
        "pages/index/index",
        // 在此加入新的内容
        "pages/center/index"
    ],
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

添加跳转标签

xml

<navigator url="/pages/center/index">个人中心</navigator>

5. 微信小程序模板语法

内容

数据绑定
条件判断
列表渲染

在 index.json 中的数据可以直接在模板中使用双大括号绑定。

xml

<view>
    {{ person.name }}
</view>

使用服务器发送的数据来更新

Page({
    onLoad: function() {
        this.setData({
            name: 'New Name',
            person: 'Lili'
        })
    }
})

条件语句

xml

<view wx:if="{{flag}}">flag 为真时渲染</view>
<view wx:else>否则渲染</view>

循环语句

xml

<view wx:for="{{list}}">
    {{index}}. {{ item.name }} : {{ item.age }}
</view>

列表渲染的 index 会从 0 开始。

6. 微信小程序 API

setTimeout(() => {
    wx.redirctTo({
        url: '/pages/center/index'
    })
}, 2000)
setTimeout(() => {
    wx.showToast({
        title: '数据更新成功！'
    })
}, 2000)

请参考 https://developers.weixin.qq.com/miniprogram/dev/api

7. uni-app 核心知识

规范

页面规范遵循 Vue 单文件组件规范
组件标签靠近小程序规范
接口能力靠近微信小程序规范
数据绑定及事件处理使用 Vue.js 规范

支持条件编译

#ifdef APP-PLUS
    // APP 下代码
#endif
#ifdef H5
    // H5 下代码
#endif
#ifdef H5 || MP-WEIXIN
    // H5 下或微信小程序下代码
#endif

APP 端的 NVue 开发：APP 端内置了一个基于 weex 改进的原生渲染引擎，提供了原生渲染能力。如果使用 Vue 页面，则使用 webview 渲染，如果使用 nvue 页面，则使用原生渲染。

HTML5+：uni-app APP 端内置 HTML5+ 引擎。

8. uni-app 开发环境

使用 HBuilderX 构建，只需要新建项目即可。

使用 vue-cli

npm i vue-cli -g
vue create -p dcloudio/uni-preset-vue projname
npm run dev # 或者 yarn serve

9. 目录结构

需要学习的内容

组件
API
路由
生命周期
语法
布局

目录如下

.hbuilderx 自动生成的 IDE 配置文件
common 公用文件，自定义
components 公用组件，自定义
store vuex 目录
pages 页面存放目录
static 静态资源
App.vue 应用入口文件
main.js 应用入口文件，注册 Vue
manifest.json 配置项目
pages.json 页面配置
uni.scss 公用样式表

10. uni-app 模板语法

与 Vue 的模板语法类似。

v-bind / :
v-on / @
v-model
v-if / v-else-if / v-else
v-show

11. uni-app 数据绑定

使用 : 绑定变量

vue

<view :class="msg" :data="true ? 'Yes' : 'No'">
    {{ msg }}
</view>

使用 v-model 双向绑定数据。

12. uni-app 条件判断

v-if / v-show 的使用，语法与 Vue 一致。

13. uni-app 列表渲染

v-for 的使用，同 Vue：

vue

<view v-for="(item,index) in arr">
    {{ index + 1 }}. {{ item }}
</view>

14. uni-app 事件绑定

使用 @ 绑定事件

vue

<template>
    <view @click="show">
        {{ item }}
    </view>
</template>
<script>
export default {
    methods: {
        show() {
            console.log('显示内容')
        }
    }
}
</script>

使用 @click.stop 可以阻止事件冒泡。事件发生时优先触发子级的事件。

15. uni-app 基础组件

参考官方文档 https://uniapp.dcloud.net.cn/component/

视图容器
基础内容
表单组件
路由与页面跳转
媒体组件
地图
画布
webview
广告
页面属性配置节点
小程序开放能力组件
App nvue 专用组件
uniCloud 专用组件
扩展组件（uni ui）

学习 <text>、<stroll-view> 等常用组件以便在以后的开发中使用。

vue

<scroll-view class="scroll" :scroll-y="true" @scroll="scroll">
    <view v-for="i in 100"> {{ i }} </view>
</scroll-view>
<script>
    export default {
        data() {
        },
        methods: {
            scroll(event) {
                console.log(event)
            }
        }
    }
</script>
<style>
    .scroll {
        height: 400rpx;
    }
</style>

<style> 可以指定 lang 属性为一种模板语言，如 less / scss / stylus 。

注意，rpx 是 uni-app 内置的单位，可以根据平台自动调整其真实大小。

16. uni-app 自定义组件

自定义组件遵循组件规范，放置在 /components/* 下，*.vue 的名称和组件的名称同名，并且和文件夹同名。

下面可以快速创建自定义组件：

右键
新建组件
- 创建同名目录
输入名称

我们新建一个名为 <card> 的组件。模板也可以选择 less / scss / stylus / ts 中的一类。

vue

<template>
    <view :style="{background: color}" @click="handleClick">
        Hello
    </view>
</template>
<script>
    export default {
        name: 'card',
        props: {
            color: {
                type: String,
                default: 'white'
            }
        },
        data() {
            return {
            }
        },
        methods: {
            handleClick() {
                console.log('Card 点击事件')
            }
        }
    }
</script>

在 /pages/news/news.vue 下面引用

vue

<card></card>

自定义事件

/pages/news/news.vue 代码

vue

<template>
    <card @myClick="myClick"></card>
</template>
<script>
    export default {
        methods: {
            myClick() {
                console.log('myClick')
            }
        }
    }
</script>

子组件可以通过 this.$emit('myClick') 触发父组件的事件，同时可以传递数据，例如

this.$emit('myClick', data1, data2)

总结

父组件向子组件传递数据使用 props
子组件向父组件传递数据使用自定义事件

父组件在子组件插入内容，使用占位符 <slot></slot>。

遵循 easycom 规范，可以无需注册，自动导入组件，同样地还有 uni_module、datacom 组件规范和实现。

17. uni-app 常用 API

uni-app 的 API 以 uni 开头。

onLoad(){
    uni.showToast({
        icon: "loading",
        title: "加载中……"
    })
}

交互使用的常用 API 有

showToast
hideToast
showLoading
hideLoading
showModal
showActionSheet

18. uni-app 条件编译

条件编译放在注释中，如 JS 中条件编译如下

// #ifdef H5
console.log('H5 下打印这句话')
// #endif

在 Vue 文件中条件编译如下

vue

<!-- #if -->
<template>
    <slot></slot>
</template>
<!-- #endif -->

以下语言支持条件编译

.vue
.js
.css
pages.json
.scss
.less
.stylus
.ts
.pug

19. uni-app 页面布局

首先，熟悉内置组件，再准备编写页面。

vue

<template>
    <view>
        <view>新闻列表</view>
        <card color="red" size="18px">红色</card>
    </view>
</template>
<script>
    export default {
        data(){
            return {
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import '../news.css';
    .bg-color {
        background: #007aff;
        .text {
            font-color: red;
        }
    }
</style>

推荐使用 flex 布局，少使用绝对定位。

20. uni-app 生命周期

生命周期分为几个方面

应用的生命周期
页面的生命周期
组件的生命周期

应用的生命周期保存在 App.vue 中

export default {
    // 应用初始化完成时执行，全局只执行一次
    onLaunch() { },
    // 应用显示的时候，或者从后台进入前台
    onShow() { },
    // 应用隐藏的时候执行，或从前台进入后台
    onHide() { }
}

请使用微信开发者工具，如果已经安装，HBuilderX 会自动打开测试。

第一次时候微信开发者工具需要进行设置，必须先有测试号才可以测试。

页面的生命周期

export default {
    data() {
        return {
        }
    },
    onLoad() { },
    onReady() { },
    onShow() { },
    onHide() { },
    onUnload() { },
    methods: {
    }
}

可以设置当前页面为启动页面，可以用于开发。

跳转页面，测试页面卸载事件

setTimeout(() => {
    uni.redirectTo({
        url: './pages/about/about'
    })
}, 2000)

组件的生命周期

export default {
    name: "life",
    data() {
        return {
        }
    },
    // 在实例初始化之后，数据观测和事件配置之前
    beforeCreate() { },
    // 数据观测，属性和方法的运算，事件和观测器回调，尚未挂载
    created() { },
    // 挂载完成，vm.$el 也在文档内
    mounted() { },
    // Vue 实例销毁，监听器移除，变量解绑，子实例销毁
    destoryed() { },
}

21. 底部 tabbar 配置

pages.json 中可以配置 tabBar

json

{
    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "height": "50px",
        "fontSize": "10px",
        "iconWidth": "24px",
        "spacing": "3px",
        "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": "接口"
        }],
        "midButton": {
            "width": "80px",
            "height": "50px",
            "text": "文字",
            "iconPath": "static/image/midButton_iconPath.png",
            "iconWidth": "24px",
            "backgroundImage": "static/image/midButton_backgroundImage.png"
        }
    },
}

22. uni-app 平台配置

H5 运行到浏览器
Android / iOS 运行到模拟器
微信小程序运行到微信开发者工具
其他小程序端可以选择其他支持

ahooks 合集

高级

生命周期

状态

浏览器原理

CSS

JS 手写 36 题

HTML

JavaScript

File 和 Blob

Android 基础

Android 控件

Android 使用 TensorFlow Lite

Prisma

VueUse

uni-app 开发应用程序 ​

1. uni-app 介绍 ​

2. 项目展示 ​

3. 微信小程序概述 ​

3. 微信小程序的生命周期 ​

5. 微信小程序模板语法 ​

6. 微信小程序 API ​

7. uni-app 核心知识 ​

8. uni-app 开发环境 ​

9. 目录结构 ​

10. uni-app 模板语法 ​

11. uni-app 数据绑定 ​

12. uni-app 条件判断 ​

13. uni-app 列表渲染 ​

14. uni-app 事件绑定 ​

15. uni-app 基础组件 ​

16. uni-app 自定义组件 ​

自定义事件 ​

17. uni-app 常用 API ​

18. uni-app 条件编译 ​

19. uni-app 页面布局 ​

20. uni-app 生命周期 ​

页面的生命周期 ​

组件的生命周期 ​

21. 底部 tabbar 配置 ​

22. uni-app 平台配置 ​