专栏首页极乐技术社区实践分享:怎样用好uni-app开发小程序?

实践分享:怎样用好uni-app开发小程序?

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。

即使不跨端,uni-app同时也是更好的小程序开发框架。

具有vue和微信小程序的开发经验,可快速上手uni-app

为什么要去学习uni-app?

相对开发者来说,减少了学习成本,因为只学会uni-app之后,即可开发出iOS、Android、H5、以及各种小程序的应用,不需要再去学习开发其他应用的框架,相对公司而言,也大大减少了开发成本。

环境搭建

安装编辑器HbuilderX下载地址

HBuilderX是通用的前端开发工具,但为uni-app做了特别强化。

下载App开发版,可开箱即用

安装微信开发者工具 下载地址

利用HbuilderX初始化项目
  • 点击HbuilderX菜单栏文件>项目>新建
  • 选择uni-app,填写项目名称,项目创建的目录
运行项目

在菜单栏中点击运行,运行到浏览器,选择浏览器即可运行

在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具,即可在微信开发者工具里面体验uni-app

在微信开发者工具里运行:进入hello-uniapp项目,点击工具栏的运行 -> 运行到手机或模拟器 -> 选择调式的手机

注意:

  • 如果是第一次使用,需要先配置小程序ide的相关路径,才能运行成功
  • 微信开发者工具在设置中安全设置,服务端口开启
介绍项目目录和文件作用

pages.json文件用来对uni-app进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等

manifest.json文件是应用的配置文件,用于指定应用的名称、图标、权限等。

App.vue是我们的跟组件,所有页面都是在App.vue下进行切换的,是页面入口文件,可以调用应用的生命周期函数。

main.js是我们的项目入口文件,主要作用是初始化vue实例并使用需要的插件。

uni.scss文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格,uni.scss文件里预置了一批scss变量预置。

unpackage就是打包目录,在这里有各个平台的打包文件

pages所有的页面存放目录

  • static静态资源目录,例如图片等
  • components组件存放目录

为了实现多端兼容,综合考虑编译速度、运行性能等因素,uni-app 约定了如下开发规范:

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

全局配置和页面配置

通过globalStyle进行全局配置

用于设置应用的状态栏、导航条、标题、窗口背景色等。

创建新的message页面

右键pages新建message目录,在message目录下右键新建.vue文件,并选择基本模板

通过pages来配置页面

pages数组数组中第一项表示应用启动页

通过style修改页面的标题和导航栏背景色,并且设置h5下拉刷新的特有样式

配置tabbar

如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页。

Tips

  • 当设置 position 为 top 时,将不会显示 icon
  • tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

属性说明:

其中 list 接收一个数组,数组中的每个项都是一个对象,其属性值如下:

案例代码:

condition启动模式配置

启动模式配置,仅开发期间生效,用于模拟直达页面的场景,如:小程序转发后,用户点击所打开的页面。

属性说明:

组件的基本使用

uni-app提供了丰富的基础组件给开发者,开发者可以像搭积木一样,组合各种组件拼接称自己的应用

uni-app中的组件,就像HTML中的divpspan等标签的作用一样,用于搭建页面的基础结构

text文本组件的用法
001 - text 组件的属性

属性

类型

默认值

必填

说明

selectable

boolean

false

文本是否可选

space

string

.

显示连续空格,可选参数:ensp、emsp、nbsp

decode

boolean

false

是否解码

  • text 组件相当于行内标签、在同一行显示
  • 除了文本节点以外的其他节点都无法长按选中
002 - 代码案例
view视图容器组件的用法

View 视图容器, 类似于 HTML 中的 div

001 - 组件的属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vlodNeKi-1591618225468)(./images/2view.png)]

002 - 代码案例
button按钮组件的用法
001 - 组件的属性
  • button 组件默认独占一行,设置 sizemini 时可以在一行显示多个
002 - 案例代码

Tips

<image> 组件默认宽度 300px、高度 225px;

src 仅支持相对路径、绝对路径,支持 base64 码;

页面结构复杂,css样式太多的情况,使用 image 可能导致样式生效较慢,出现 “闪一下” 的情况,此时设置 image{will-change: transform} ,可优化此问题。

uni-app中的样式

rpx 即响应式px,一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准,750rpx恰好为屏幕宽度。屏幕变宽,rpx 实际显示效果会等比放大。

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束

支持基本常用的选择器class、id、element等

在 uni-app 中不能使用 * 选择器。

page 相当于 body 节点

定义在 App.vue 中的样式为全局样式,作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 App.vue 中相同的选择器。

uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点:

  • 字体文件小于 40kb,uni-app 会自动将其转化为 base64 格式;
  • 字体文件大于等于 40kb, 需开发者自己转换,否则使用将不生效;
  • 字体文件的引用路径推荐使用以 ~@ 开头的绝对路径。

uni-app中的数据绑定

在页面中需要定义数据,和我们之前的vue一摸一样,直接在data中定义数据即可

插值表达式的使用

  • 利用插值表达式渲染基本数据

<view>{{msg}}</view>

  • 在插值表达式中使用三元运算

<view>{{ flag ? '我是真的':'我是假的' }}</view>

  • 基本运算

<view>{{1+1}}</view>

v-bind动态绑定属性

在data中定义一张图片,我们希望把这张图片渲染到页面上

利用v-bind进行渲染

<image v-bind:src="img"></image>

还可以缩写成:

<image :src="img"></image>

v-for的使用

data中定以一个数组,最终将数组渲染到页面上

利用v-for进行循环

<view v-for="(item,i) in arr" :key="i">名字:{{item.name}}---年龄:{{item.age}}</view>

uni中的事件

事件绑定

在uni中事件绑定和vue中是一样的,通过v-on进行事件的绑定,也可以简写为@

<button @click="tapHandle">点我啊</button>

事件函数定义在methods中

事件传参

  • 默认如果没有传递参数,事件函数第一个形参为事件对象
  • 如果给事件函数传递参数了,则对应的事件函数形参接收的则是传递过来的数据
  • 如果获取事件对象也想传递参数

uni的生命周期

应用的生命周期

生命周期的概念:一个对象从创建、运行、销毁的整个过程被成为生命周期。

生命周期函数:在生命周期中每个阶段会伴随着每一个函数的触发,这些函数被称为生命周期函数

uni-app 支持如下应用生命周期函数:

函数名

说明

onLaunch

当uni-app 初始化完成时触发(全局只触发一次)

onShow

当 uni-app 启动,或从后台进入前台显示

onHide

当 uni-app 从前台进入后台

onError

当 uni-app 报错时触发

页面的生命周期

uni-app 支持如下页面生命周期函数:

下拉刷新 开启下拉刷新

在uni-app中有两种方式开启下拉刷新

  • 需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh
  • 通过调用uni.startPullDownRefresh方法来开启下拉刷新

通过配置文件开启

创建list页面进行演示

通过pages.json文件中找到当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh

通过API开启

uni.startPullDownRefresh()

监听下拉刷新

通过onPullDownRefresh可以监听到下拉刷新的动作

关闭下拉刷新

uni.stopPullDownRefresh()

停止当前页面下拉刷新。

案例演示

上拉加载

通过在pages.json文件中找到当前页面的pages节点下style中配置onReachBottomDistance可以设置距离底部开启加载的距离,默认为50px

通过onReachBottom监听到触底的行为

网络请求

在uni中可以调用uni.request方法进行请求网络请求

需要注意的是:在小程序中网络相关的 API 在使用前需要配置域名白名单。

发送get请求

发送post请求 数据缓存

uni.setStorage

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

代码演示

uni.setStorageSync

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

代码演示

uni.getStorage

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

代码演示

uni.getStorageSync

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

代码演示

uni.removeStorage

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

代码演示

uni.removeStorageSync

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

代码演示

上传图片、预览图片

上传图片

uni.chooseImage方法从本地相册选择图片或使用相机拍照。

案例代码

预览图片

结构

预览图片的方法

条件注释实现跨段兼容

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

**写法:**以 #ifdef 加平台标识 开头,以 #endif 结尾。

平台标识

组件的条件注释

代码演示

api的条件注释

代码演示

样式的条件注释

代码演示

uni中的导航跳转

利用navigator进行跳转

跳转到普通页面

跳转到tabbar页面

利用编程式导航进行跳转

导航跳转文档

利用navigateTo进行导航跳转

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

<button type="primary" @click="goAbout">跳转到关于页面</button>

通过navigateTo方法进行跳转到普通页面

通过switchTab跳转到tabbar页面

跳转到tabbar页面

通过switchTab方法进行跳转

redirectTo进行跳转

关闭当前页面,跳转到应用内的某个页面。

通过onUnload测试当前组件确实卸载

导航跳转传递参数

在导航进行跳转到下一个页面的同时,可以给下一个页面传递相应的参数,接收参数的页面可以通过onLoad生命周期进行接收

传递参数的页面

接收参数的页面

uni-app中组件的创建

在uni-app中,可以通过创建一个后缀名为vue的文件,即创建一个组件成功,其他组件可以将该组件通过impot的方式导入,在通过components进行注册即可

  • 创建login组件,在component中创建login目录,然后新建login.vue文件
  • 在其他组件中导入该组件并注册 import login from "@/components/test/test.vue"
  • 注册组件 components: {test}
  • 使用组件 <test></test>

组件的生命周期函数

组件的通讯 父组件给子组件传值

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

其他组件在使用login组件的时候传递值

子组件给父组件传值

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

父组件定义自定义事件并接收参数

uni-ui的使用

1、进入Grid宫格组件

2、使用HBuilderX导入该组件

3、导入该组件

4、注册组件

components: {uniGrid,uniGridItem}

5、使用组件

最后,总结一下用uni-app开发小程序的优点:

  • 开发工具,uni-app 有 HbuilderX 开发工具,代码书写的舒适度远高于 小程序厂家 自己的开发工具。
  • 开发工具集成了 sass / less 专业级CSS扩展语言。
  • uni-app 增加了许多实用的接口,比如 【页面通讯】相关的API,这是解决跨窗口调用传参的一把好手。
  • 使用了 Vue.js 的语法,编码比小程序原生语法要舒服的多。1.更新视图更加方便;2.可以使用Vue的计算属性;3.可以使用Vuex。

本文分享自微信公众号 - 极乐技术社区(wxapp-union),作者:starzhou

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-11-13

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • DNSPod十问王安:中小企业的数字化是伪命题吗?

    ? 问答时间:2020年9月24日 嘉宾简介: 王安:DCloud公司创始人,HTML5中国产业联盟秘书长。2003年开始从事移动互联网工作,十几年编程和商...

    腾讯云DNSPod团队
  • 真实测评:用uni-app开发小程序,比原生开发好用在哪里?

    原生wxml开发对Node、预编译器、webpack支持不好,影响开发效率和工程构建流程。所以大公司都会用框架开发

    极乐君
  • 小程序框架选型必看:Taro vs uni-app选型经历!

    公司新产品要求发布到各家小程序,最近研究对比了社区主流的几家小程序开发框架,独坑不如拉人众坑,分享给各位,欢迎和我一起入坑:)

    极乐君
  • 干货 | 三种主流快平台技术测评,你更青睐谁?

    2021年3月3号,Google宣布Flutter 2:Flutter的重大升级,使开发人员能够为任何平台创建美观,快速且可移植的应用程序。针对Web,移动和台...

    CloudBest
  • 真实测评揭秘:开发小程序用原生还是选框架?

    自 2017-1-9微信小程序诞生以来,历经几年的迭代升级,已有数百万小程序上线,成为继Web、iOS、Android之后,第四大主流开发技术。

    极乐君
  • 详解:如何在uni-app中选择一个合适的UI组件库

    uni-app框架转眼已经发布了一年多,使用uni-app的开发者也是与日俱增。因为uni-app是一个跨端框架,所以我们大多使用它就是为了同时一套代码跨多端,...

    极乐君
  • 全平台小程序开发框架Uni-app重点概览

    uni-app 可通过 process.env.NODE_ENV 判断当前环境是开发环境还是生产环境。一般用于连接测试服务器或生产服务器的动态切换。

    魏晓蕾
  • 小程序多端框架全面测评:chameleon、Taro、uni-app、mpvue、WePY

    最近前端届多端框架频出,相信很多有代码多端运行需求的开发者都会产生一些疑惑:这些框架都有什么优缺点?到底应该用哪个?

    Fundebug
  • 小程序开发框架对比(wepy/mpvue/uni-app/taro)

    uni-app 团队投入两周完成了这个深度评测,下面我们就分享下,实际开发不同框架的测试例时遇到的问题,以及在各端的兼容测试结果。在本文里,我们团队基于真实测...

    码客张
  • uni-app实战之路-生命周期

    首先说一下什么是生命周期,不管是vue还是别的什么,生命周期说人话就是页面从初始化到销毁的整个过程被称为生命周期,vue的生命周期的话我帖子之前也没写过,也不知...

    何处锦绣不灰堆
  • 用好uni-app开发小程序,这些组件库了解一下!

    组件是现代开发的重要里程碑。组件重构了分工模型,让大量的轮子出现,让开发者可以拿来轮子直接用,大幅提升了整个产业的效率。

    极乐君
  • 手把手带你实战uni-app小程序项目

    uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架,开发者编写一套代码,可编译到iOS、Android、H5、小程序等多个平台,解决了多个平台,...

    极乐君
  • uni-app开发小程序入门到崩溃

    最近一段时间公司要做一个小程序项目,还要支持,微信小程序,头条小程序,百度小程序。一套代码,实现三个平台。当时接到这个任务,就不知道怎么去下手,一套代码,分别要...

    小周sri的码农
  • 小程序跨端开发框架深度横评之2020版

    这一年,小程序在用户规模及商业化方面都取得了极大的成功。微信小程序日活超过3亿,支付宝、百度、字节跳动小程序的月活也纷纷超过3亿。

    CHB
  • uni-app官方教程学习手记

    大概在今年的十月份左右,我了解到Dcloud推出了uni-app。当时下载了一个Hbuilder X,下载了官方提供的hello示例教程。经过一番努力,在云端打...

    siberiawolf
  • uni-app黑魔法:小程序自定义组件运行到H5平台

    移动互联网的初期,囿于设备硬件性能限制,流量以原生App为主,iOS、Android是当时两大平台。

    CHB
  • 如何用uni-app快速将Vue项目输出到小程序和H5

    随着微信小程序的火爆及百度、头条小程序的持续推进,跨端开发的需求愈发迫切,业界随之出现了一系列的跨端框架,但对于H5平台跨端支持的都不太彻底:

    极乐君
  • 强推!个人和企业都需要的终极跨平台全端解决方案,一次开发全端覆盖

    1.很多中小型企业要快速开发一个产品,这个产品至少需要覆盖平台范围为:iOS、Android、web/H5、微信/支付宝小程序,那么需要的投入的人力成本、时间成...

    腾讯NEXT学位
  • vivo悟空活动中台 - 微组件多端探索

    随着小程序、快应用的用户体验越来越友好,用户群体庞大,运营小伙伴开始偏向将营销活动投放至微信、支付宝、快应用等微应用中。

    2020labs小助手

扫码关注云+社区

领取腾讯云代金券