学习uni-app跨平台开发课程心得体会

  首先,让我来介绍一下uni-app是用来干什么的。uni-app是一个使用Vue.js开发所有前端应用的跨平台开发框架,它允许开发者通过编写一套代码,发布到iOSAndroid、Web(响应式)、以及各种小程序(如微信支付宝百度头条、QQ、钉钉淘宝)、快应用等多个平台。uni-app的特点包括跨平台开发、高性能体验、丰富的生态系统和较低的开发成本。它通过将Vue.js代码编译成原生代码,在各平台上运行,实现代码复用,大大提高了开发效率和代码重用率。uni-app还提供了丰富的原生API和插件来实现更多功能,支持的条件编译功能使得开发者能够针对不同平台定制开发,同时不影响其他平台的运行。

  

什么是UniA

pp?

先说一下提前须要会的技术

要想快速入手uniapp的话,你最好提前学会vue、微信小程序开发,因为它几乎就是这两个东西的结合体,不然,你就只有慢慢研究吧。

为什么要选择uniapp???

开发多个平台的时候,对,就是开发多端,其中包括安卓、IOS、H5/公众号、微信小程序、百度小程序...等其它小程序时,如果每个平台开发,人力开发成本高,后期维护也难,原生开发周期也长,那Unipp就是你的优先选择,官方是这样介绍的~哈~
先来说一下uniapp的优点

uniapp优点

优点一,多端支持

当然是多端开发啦,uni-app是一套可以适用多端的开源框架,一套代码可以同时生成ios,Android,H5,微信小程序,支付宝小程序,百度小程序等。

优点二,更新迭代快

用了它的Hbx你就知道,经常会右下角会弹出让你更新,没错,看到它经常更新,这么努力的在先进与优化,还是选良心的了。

优点三,扩张强

你可以把轻松的把uniapp编译到你想要的端,也可以把其它端的转换成uniapp,例如微信小程序,h5等;如果开发app的时候,前端表现不够,你还可以原生嵌套开发。

优点四,开发成本、门槛低

不管你是公司也好,个人也好,如果你想开发多终端兼容的移动端,那uniapp就很适合你,不然以个人的能力要开发多端,哈哈... 洗洗睡觉吧。

优点五,组件丰富

社区还是比较成熟,生态好,组件丰富,支持npm方式安装第三方包,兼容mpvue,DCloud有大量的组件供你使用,当然付费的也不贵,你还可以发布你开发的,赚两个鸡腿钱还是可以的。


 

开发上的优点暂且不说,大体上的有这么一些,接下来说一下开发过程中的缺点

uniapp缺点

缺点一:爬坑

每个程序前期肯定都会有很多的坑,这里点明一下:腾讯,敢问谁没在微信开发上坑哭过,现在不也爬起来了,2年前有人提的bug,你现在去看,他依然在那,不离不弃呀。uniapp坑也有,一般的都有人解决了,没解决的,你就要慢慢的去琢磨了,官方bug的话,提交反馈,等官方修复。

缺点二:某些组件不成熟

我说的是某些官方组件,像什么地图组件,直播组件等,你要在上面开发一些特别功能的话,那真的是比较费神的。


介绍UniApp的概念与特点
UniApp 是一款基于 Vue.js 的跨平台应用框架,它允许开发者使用相同的代码构建同时运行在多个平台(如Web、iOS和Android)的应用程序。UniApp 具有以下几个主要特点:

跨平台能力:UniApp 提供了统一的开发语法和组件化规范,使得开发者可以使用一套代码覆盖多个平台。只需编写一次代码,即可将应用程序发布到不同的平台上,大大提高了开发效率。

性能优秀:UniApp 使用了基于 Native 渲染的方式,在不同平台上实现了原生级别的性能体验。它通过将代码转换为对应平台的原生组件来实现高性能渲染,并且提供了针对各个平台的性能优化策略。

开发便捷:UniApp 基于 Vue.js,开发者可以直接使用熟悉的 Vue.js 语法进行开发。同时,UniApp 还提供了丰富的内置组件和插件,简化了常见功能的开发过程,使开发更加便捷。

生态丰富:UniApp 拥有庞大的生态系统,包括内置组件、插件以及第三方组件库。开发者可以根据项目需求选择合适的组件和插件,快速构建功能丰富的应用程序。

UniApp相对于其他跨平台框架的优势
相比于其他跨平台框架,UniApp 具有以下几个优势:

性能优化:UniApp 采用了基于 Native 渲染的方式,实现了原生级别的性能体验。相比于部分使用 Webview 的跨平台框架,UniApp 在性能方面具有明显优势。

开发效率:UniApp 提供了一套统一的开发语法和组件化规范,使得开发者可以使用同一套代码覆盖多个平台。这大大提高了开发效率,减少了重复开发的工作量。

生态系统:UniApp 拥有庞大且活跃的生态系统,内置了丰富的组件和插件,同时也支持与第三方组件库和插件进行集成。开发者可以根据需求选择合适的组件和插件,快速构建所需的功能。

社区支持:UniApp 拥有庞大的开发者社区,可以在社区中获取到丰富的资源、教程和解决方案。开发者可以通过社区的支持与交流,获得更多的帮助和技术支持。

UniApp入门指南
安装与环境配置
在开始使用 UniApp 之前,需要进行以下安装和环境配置步骤:

步骤 1:确保已安装 Node.js。可以在官网(https://nodejs.org/)下载并安装最新版本的 Node.js。

步骤 2:安装 HBuilderX,它是一款支持 UniApp 开发的集成开发环境(IDE)。可以从官网(https://www.dcloud.io/hbuilderx.html)下载并安装适合自己操作系统的版本。

步骤 3:安装 Vue CLI 3,它是一个用于创建和管理 Vue.js 项目的工具。打开终端或命令提示符窗口,并运行以下命令进行安装:

npm install -g @vue/cli
1
安装完成后,可以通过运行 vue --version 命令验证安装是否成功。


创建UniApp项目


创建一个新的 UniApp 项目需要遵循以下步骤:

步骤 1:打开 HBuilderX IDE。

步骤 2:在 IDE 的欢迎界面选择「新建项目」。

步骤 3:在弹出窗口中选择「uni-app」作为项目模板。

步骤 4:输入项目名称和存储路径,然后点击「创建」按钮。

步骤 5:在弹出的选项中选择需要支持的平台,如「H5」、「App-Android」和「App-iOS」。

步骤 6:等待 IDE 自动创建并初始化项目文件。

UniApp项目结构解析
创建完 UniApp 项目后,可以看到以下项目结构:


components/:存放通用组件的目录。
pages/:存放页面的目录。每个页面通常包含一个.vue文件,用于编写页面的逻辑和模板。
static/:存放静态资源文件,如图片、样式文件等。
App.vue:是整个应用的根组件,用于配置应用的全局样式和生命周期方法等。
main.js:是应用的入口文件,负责初始化 Vue 实例和加载全局插件等。
manifest.json:是应用的配置文件,用于配置应用的名称、图标、启动页等参数。
pages.json:是页面的配置文件,用于配置页面的路径、导航栏样式等。
在 UniApp 中,开发者主要关注的是components/和pages/目录下的文件,其中components/用于存放可复用的组件,pages/用于存放页面。

通过分析项目结构,开发者可以开始编写页面、组件和逻辑代码,并利用 UniApp 的特性和功能进行开发。

UniApp开发基础
Vue.js基础知识回顾
Vue.js 是 UniApp 的基础框架,因此了解 Vue.js 的基础知识对于进行 UniApp 开发至关重要。以下是一些重要的 Vue.js 基础知识:

模板语法:Vue.js 使用类似 HTML 的模板语法,通过插值、指令和事件绑定等方式实现数据驱动的页面渲染。

组件:Vue.js 中组件是可复用的代码模块,可以封装页面上的一部分功能,使得代码更加模块化、易于维护。

数据绑定:Vue.js 提供了双向的数据绑定机制,通过将数据与视图进行绑定,实现数据的自动更新。

计算属性:计算属性是根据已有的数据计算出新的属性值,并将其暴露给模板使用,可以方便地进行复杂的数据处理和逻辑判断。

生命周期钩子函数:Vue.js 组件生命周期包括创建、挂载、更新和销毁等阶段,在每个阶段都会触发相应的钩子函数,开发者可以在这些钩子函数中执行特定的操作。

UniApp中的页面与组件编写
在 UniApp 中,页面和组件是构建应用的两个关键概念。

页面:UniApp 的页面使用.vue文件进行定义。每个页面由三个部分组成:模板(HTML)、样式表(CSS)和逻辑代码(JavaScript)。通过编写这些部分,可以实现页面的结构、样式和交互逻辑。

组件:UniApp 中的组件也使用.vue文件进行定义,并可以在页面中复用。组件可以包含自己的模板、样式表和逻辑代码,实现特定功能的封装和复用。

在页面和组件的编写过程中,需要熟悉 Vue.js 的语法和概念,如数据绑定、计算属性、生命周期钩子函数等。通过合理地划分页面和组件,可以使代码更加模块化,并提高开发效率。

数据绑定与事件处理
在 UniApp 中,数据绑定和事件处理是实现页面交互的重要机制。

数据绑定:UniApp 使用双花括号{{}}来进行数据的插值绑定,将数据动态地显示在页面上。同时,还可以使用指令来实现数据的双向绑定,如v-model指令。

事件处理:UniApp 支持常见的 DOM 事件和自定义事件。可以通过@符号来监听事件,并在对应的方法中处理事件逻辑。

通过数据绑定和事件处理,可以实现页面与用户的交互,响应用户的操作并更新数据。

样式与布局掌握
UniApp 使用了一套基于 flexbox 的弹性盒子布局模型。在编写样式时,可以使用 CSS 属性来进行样式的定义和布局的控制。

此外,UniApp 还提供了一些内置样式类,方便开发者快速调整元素的样式,如uni-common、uni-icons等。

通过合理地使用样式和布局,可以实现页面的美观和各种复杂的布局效果。

路由与导航管理
在 UniApp 中,路由和导航管理是实现页面间跳转和导航的关键。

路由配置:UniApp 使用pages.json文件进行路由配置。在该文件中,可以定义应用的所有页面路径和相关信息,如页面标题、底部导航栏等。

页面跳转:UniApp 提供了多种方式进行页面跳转,包括通过<navigator>组件、uni.navigateTo、uni.redirectTo等方法实现。可以根据需求选择适合的跳转方式。

页面传参:在页面跳转时,可以携带参数传递给目标页面。可以通过 URL 参数、query 字段或使用 uni.setStorageSync 方法将数据存储到本地缓存中来实现参数传递。

导航栏配置:UniApp 允许自定义应用程序的导航栏样式。可以在pages.json文件中为每个页面设置独立的导航栏样式,并配置返回按钮、标题、背景颜色等属性。

通过合理配置路由和导航,可以实现应用程序之间的无缝切换和导航功能。

  • ue就三样东西:HTML、CSS、js
  • vue有很多组件可以用,例如,<button><input><label>
  • vue的核心组件如下:
    • Vue实例,每个vue函数创建一个新的Vue实例。
    • 模版(Templates):使用基于HTML的模版语法,允许声明式地将已经渲染的DOM绑定至底层Vue实例的数据。所有Vue.js模版都是合法的HTML。
    • 组件(Components):组件系统是Vue.js的另一个重要概念,它允许你构建大型应用中的可重用的代码片段。
    • Vue Router:是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,让构件单页面应用变得轻而易举。
    • Vuex:专为Vue.js应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
    • Vue CLI:各种配置。提供热重载,lint-on-save,单元测试等。
    • 指令:Vue模版中最重要的特性之一。v-if,v-for, v-bind, v-model等。
    • 生命周期钩子:created,mounted,updated,destroyed
  • vue的内置组件:
    • <componet>这是一个动态组件,使用is来决定渲染哪个组件
    • <transition>和<transition-group>,这两个组件在元素或者组件在插入、更新,或者从DOM中移除时应用过渡效果
    • <keep-alive>,这个组件用于将状态保持在内存中,防止重新渲染。当组件切换时,把处于非活动状态的组件实例保存在内存

   

根据这个方式我们新建content、list这两个页面,每个页面的文件中我们就随便写个文本区别就行了,uniapp的页面结构和vuejs是几乎一样的

image-20201005014611690

然后我们在static目录下放置一个图标icon.png

page.json中配置我们的tabBar,可以通过colorselectedColor来设置默认和选中的字体颜色,list里面就是放置的具体每个选项,每个选项里面需要配置pagePath页面链接,iconPath默认图selectedIconPath选中以后的图标,text文本

"tabBar": {
	"color": "#7A7E83",
	"selectedColor": "#f55f25",
	"borderStyle": "black",
	"backgroundColor": "#ffffff",
	"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/logo.png",
			"selectedIconPath": "static/icon.png",
			"text": "主页"
		},
		{
			"pagePath": "pages/list/list",
			"iconPath": "static/logo.png",
			"selectedIconPath": "static/icon.png",
			"text": "列表"
		}, {
			"pagePath": "pages/content/content",
			"iconPath": "static/logo.png",
			"selectedIconPath": "static/icon.png",
			"text": "内容"
		}
	]
}

image-20201005015111623

看下效果

image-20201005015136609

使用组件

uniapp的生态还是不错的,除了官方的 uni-ui插件市场还有很多现成的东西

我们下载一个这个插件

image-20201005223810843

新版本的uniapp是不需要做任何配置可以直接使用第三方组件的

image-20201005010056921

直接在页面中使用这个插件,然后看看效果

<uni-nav-bar left-icon="back" left-text="返回" right-text="菜单" title="导航栏组件"></uni-nav-bar>

image-20201005223931902

使用微信小程序的组件

文档

有时候你需要的组件,uniapp插件市场没有,但是微信小程序组件里面有怎么办呢,uniapp也是可以使用小程序组件的

在根目录新建一个wxcomponents文件夹,里面继续创建一个wxcomdemo文件夹

创建以下几个文件

index.js

Component({
  properties: {
    // 这里定义了innerText属性,属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: {}
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function(){}
  }
})

index.json

{
  "component": true
}

index.wxml

<view class="inner">
  {{innerText}}
</view>
<slot></slot>

index.wxss

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

以上这几个文件便组成了一个标准的小程序组件了,这个组件的意思就是传入一个字符串,然后展示它字体为红色,下面来使用这个组件吧!

在需要使用这个组件的页面的page.json项配置

"path": "pages/index/index",
"style": {
	"navigationBarTitleText": "uni-app",
	"navigationStyle": "custom",
	"usingComponents": {
		"wxcomdemo": "/wxcomponents/wxcomdemo/index"
	}
}

然后在这个页面中使用

<wxcomdemo inner-text="Some text"></wxcomdemo>

此时我们看看效果

image-20201005231057422

构建一个todolist

使用color ui

因为懒得写样式,我们引入colorui,导入项目以后复制根目录的 /colorui 文件夹到你的根目录

App.vue引入关键Css

<style>
    @import "colorui/main.css";
    @import "colorui/icon.css";
</style>

平时开发的时候需要什么效果,我们直接将这个示例项目运行起来,然后去复制它页面中的代码就行

直接复制过来做下修改,首先定义几个需要使用的属性

staticTodoList: [{
		_id: 1,
		_name: "第一件事",
		_status: false
	},
	{
		_id: 2,
		_name: "第二件事",
		_status: true
	},
	{
		_id: 3,
		_name: "第三件事",
		_status: false
	}
],
todoList: [],
modalName: null,
listTouchStart: 0,
listTouchDirection: null,

onload的时候我们要初始化数据,这个staticTodoList就是我们模拟的静态数据

onLoad() {
	this.todoList = this.staticTodoList;
},

然后使用刚刚复制的页面代码渲染它

<view class="cu-item" 
:class="modalName=='move-box-'+ index?'move-cur':''" 
v-for="(todo,index) in todoList" 
:key="index"
 @touchstart="ListTouchStart" 
 @touchmove="ListTouchMove" 
 @touchend="ListTouchEnd" 
 :data-target="'move-box-' + index">
	<view class="content" >
		<view class="text-grey">{{todo._name}}</view>
	</view>
	<view class="action">
		<switch :checked="todo._status"  :data-_id="todo._id" />
	</view>
	<view class="move">
		<view class="bg-red" >删除</view>
	</view>
</view>

它的页面中还定义了几个事件,我们也拷贝过来

ListTouchStart(e) {
	this.listTouchStart = e.touches[0].pageX
},
ListTouchMove(e) {
	this.listTouchDirection = e.touches[0].pageX - this.listTouchStart > 0 ? 'right' : 'left'
},
ListTouchEnd(e) {
	if (this.listTouchDirection == 'left') {
		this.modalName = e.currentTarget.dataset.target
	} else {
		this.modalName = null
	}
	this.listTouchDirection = null
},

看下效果

image-20201006141627428

删除和切换(小技巧🚲)
<view class="action" >
	<switch :checked="todo._status" @change="switchTodo" :data-_id="todo._id" />
</view>
<view class="move">
	<view class="bg-red" @click="del(todo._id)">删除</view>
</view>

这两个事件也非常简单,主要是状态切换这里有个小问题,@change只能传递当前的是否选中的值,不能传递当前项的id值,这就没法处理数据,所以可以给这个节点绑定一个:data-_id="todo._id",然后通过e.target.dataset._id就能取出这个id值了!

switchTodo(e) {
	const status = e.target.value;
	const _id = e.target.dataset._id;
	this.todoList = this.todoList.map(todo => {
		if (todo._id == _id) {
			todo._status = status;
		}
		return todo;
	})
	uni.showToast({
		title: status ? "已完成" : "已取消",
		icon: status ? "success" : "none"
	})
},
del(_delId) {
	this.todoList = this.todoList.filter(todo => {
		return todo._id != _delId
	});
},

mixin

vue中的mixin同样的也可以在这里面使用,不知道这个东西的朋友,可以理解为公用逻辑抽离,需要使用的地方直接引入就可以了

比如Toast这个消息通知经常用,我们可以封装一下,新建一个mixin/message.js

module.exports = {
	methods: {
		toast(message, duration, success) {
			uni.showToast({
				title: message,
				icon: success ? "success" : "none",
				duration: duration
			})
		},
	},
};

使用它

import message from "@/mixin/message.js"
export default {
		... ... 
		mixins: [message],
		... ... 
}

然后可以直接通过this.toast("不能为空", 2000, false);来使用

表单

新增todo的功能,还是去coloruI的项目里面拷贝 form的模板代码

<form @submit="add" @reset="clear">
	<view class="cu-form-group margin-top">
		<view class="title">新增</view>
		<input placeholder="todo" name="_name"></input>
	</view>
	<view class="padding flex flex-direction">
		<button form-type="submit" class="cu-btn bg-blue lg">保存</button>
		<button form-type="reset" class="cu-btn bg-red margin-tb-sm lg">清空</button>
	</view>
</form>

这个添加和清空事件也非常简单

add(e) {
	let _name = e.detail.value._name;
	if (_name === null || _name === "") {
		this.toast("不能为空", 2000, false);
		return;
	}
	const _id = this.todoList.length > 0 ? this.todoList[this.todoList.length - 1]._id + 1 : 1;
	this.todoList.push({
		_id: _id,
		_name: _name,
		_status: false
	});
	this.toast("添加成功,_id:" + _id,1000,true)
	e.detail.value = null;
},
clear() {
}

image-20201006142026519

数据缓存

删除以后我们刷新页面数据又回来了,可以试一下数据缓存(真实开发,这些都是后端返回)

我们在switchTodo、del、add这三个事件里面我们都添加一个缓存,将最新数据缓存到本地

uni.setStorageSync("todolist", this.todoList);

然后在页面启动的时候加载这个缓存

onLoad() {
	const todolist = uni.getStorageSync("todolist")
	if (todolist != "") {
		this.todoList = uni.getStorageSync("todolist");
	} else {
		this.todoList = this.staticTodoList;
	}
},

页面跳转

我们新增一个todocontent页面,方便我们点进去查看每一个todo的详情

然后修改一下页面的列表渲染,增加一个点击事件

<view class="cu-item" 
:class="modalName=='move-box-'+ index?'move-cur':''" 
v-for="(todo,index) in todoList" 
:key="index"
@click="gotoContent(todo._id)"
... ... 

写一下这个事件gotoContent,页面传参和网页的形式差不多文档

gotoContent(_id) {
	uni.navigateTo({
		url: '../todocontent/todocontent?_id=' + _id
	});
},

然后在 todocontent这个页面中接受这个参数

onLoad(e) {
	console.log(e._id);
},

冒泡点击

上面的功能实现以后会有一个问题,此时我们再次点击删除或者切换的按钮,就会直接跳转到另外一个页面了,所以我们要阻止这个点击部位的跳转事件,很简单

<view class="action" @click.stop="">
	<switch :checked="todo._status" @change="switchTodo" :data-_id="todo._id" />
</view>
<view class="move">
	<view class="bg-red" @click.stop="del(todo._id)">删除</view>
</view>

网络请求

为了有意思一点,我们这个具体的content的数据将模拟后端返回

创建服务(小技巧🚲)

最方便的开启一个服务可以使用vscode的 live server插件

image-20201006144356886

我们新建个todolist.json文件

[
    {
        "_name": "第一件事",
        "_id":1,
        "_status":false,
        "_time":1601956497000,
        "_content":"花花世界迷人眼,没有实力别赛脸。"
    },
    {
        "_name": "第二件事",
        "_id":2,
        "_status":false,
        "_time":1601956497000,
        "_content":"天热脾气躁,我不微笑你别闹。"
    },
    {
        "_name": "第三件事",
        "_id":3,
        "_status":false,
        "_time":1601956497000,
        "_content":"江南江北一条街,打听打听谁是爹。"
    }
]

这里有个时间戳对吧,再介绍一个小技巧🚲,我们在浏览器中定义这样的脚本

image-20201006145505964

然后按ctrl + p使用快捷运行这个命令

image-20201006145543464

image-20201006145644892

想查看更多的浏览器技巧吗浏览器调试

随便创建一个html文件然后使用live server打开

image-20201006144427988

接着我们在地址栏找到我们的json文件,服务启动成功!

image-20201006144454405

请求数据

我们开始在todocontent这个页面请求数据了

首先我们要onLoad里面进行请求

onLoad(e) {
	this.loadData(parseInt(e._id));
},

写一下这个loadData

loadData(_id) {
	this.getTodoById(_id);
},

还用定义一个默认的空的todo对象

todo: {
	_id: -1,
	_name: "null",
	_status: false,
	_time: null,
	_content: "null"
},

写一下这个getTodoById使用uni.request请求数据,这里使用 promise的方式稍微写复杂且没有意义,单纯就是为了给大家模拟一个实际开发的常规请求

async getTodoById(_id) {
	uni.showLoading();
	const value = await uni.request({
		url: 'http://127.0.0.1:5500/todolist.json'
	}).then(data => {
		uni.hideLoading();
		var [error, res] = data;
		if (error != null | res == null) {
			this.toast("网络异常", 1000, false)
			return Promise.resolve(this.todo);
		}
		if (res.data.length > 0) {
			const todo = res.data.find(todo => {
				return todo._id === _id;
			})
			return Promise.resolve(todo);
		}
	});
	this.todo = value;
}
渲染数据

还是像上面一下去拷贝一个页面过来

<view class="flex justify-start align-center">
	<view class="text-sl">
		{{todo._name}}
	</view>
	<view class="margin-left-sm">
		{{todo._time}}
	</view>
	<view class="margin-left-sm">
		<switch :checked="todo._status" disabled="" />
	</view>
</view>
<view class="text-xl text-gray margin-top-sm">
	{{todo._content}}
</view>
<view class="padding flex flex-direction">
	<button @click="del" class="cu-btn bg-red margin-tb-sm lg">删除</button>
</view>

image-20201006145325764

过滤器

上面的时间还是时间戳肯定是不行的,我们可以使用过滤器来转换一下

来到main.js中,这里的时间戳稍微写的繁杂一点,但是很实用,可以自定义返回

//补位
function formatNumber(n) {
	n = n.toString()
	return n[1] ? n : '0' + n;
}
// 时间戳转换日期
function formatTime(number, format) {
	if (!number || number == null) {
		return null;
	}
	let time = new Date(number);
	let newArr = []
	let formatArr = ['Y', 'M', 'D', 'h', 'm']
	newArr.push(time.getFullYear())
	newArr.push(formatNumber(time.getMonth() + 1))
	newArr.push(formatNumber(time.getDate()))
	newArr.push(formatNumber(time.getHours()))
	newArr.push(formatNumber(time.getMinutes()))
	for (let i in newArr) {
		format = format.replace(formatArr[i], newArr[i])
	}
	return format;
}
Vue.filter('strtotime', function(msg, arg) {
	return formatTime(msg, 'Y-M-D');
})

使用它

<view class="margin-left-sm">
	{{todo._time|strtotime}}
</view>

image-20201006145351729

页面通信

这里有个删除事件,可以通过 页面通信来通知上一个页面删除这个数据

定义一下这个del

del() {
	uni.$emit('del_todo', {
		_id: this.todo._id
	});
    //删除完成后返回上一页
	uni.navigateBack();
},

然后在上一个页面中监听事件

onLoad() {
	const todolist = uni.getStorageSync("todolist")
	if (todolist != "") {
		this.todoList = uni.getStorageSync("todolist");
	} else {
		this.todoList = this.staticTodoList;
	}
	uni.$on('del_todo', (data) => {
		this.del(data._id);
	})
},

下拉刷新

如果我们想恢复最原本的数据,可以定义一个下拉刷新事件

首先需要开启page.json中的配置enablePullDownRefresh

"style": {
	"navigationBarTitleText": "uni-app",
	"navigationStyle": "custom",
	"usingComponents": {
		"wxcomdemo":"/wxcomponents/wxcomdemo/index"
	},
	"enablePullDownRefresh":true
}

然后在页面中重新这个事件

onPullDownRefresh() {
	uni.setStorageSync("todolist", "")
	this.todoList=this.staticTodoList
	uni.stopPullDownRefresh();
},

完成!

条件编译

条件编译就是某些内容只在某个或者某些平台编译展示

模板中的条件编译

比如我只想在微信小程序中展示这个内容可以使用 ifdef

<!-- #ifdef MP-WEIXIN -->
mp-weixin
<!-- #endif -->

如果是想除了微信小程序这个平台不显示,其他的都使用呢?使用ifndef就可以了

样式中的条件编译

<style lang="less">
	/*  #ifdef  MP-WEIXIN  */
	.content {
		color: #DD524D;
	}

	/*  #endif  */
</style>

最后,这门课程让我意识到代码程序的重要性,带我进入了一个新领域,学到了很多东西,使我受益匪浅。

多尝试,多实践是学习uni-app的关键。在学习和实践中,我们可以从不断尝试中查找问题并解决,增加自己的实践经验。我们可以通过尝试构建简单的应用程序并测试框架的各种功能,从而加深对uni-app开发的理解和认识。此外,平台组件的开发和JSAPI的使用等也需要注意,这是开发过程中十分常用的几个知识点,需要不断地完善和掌握。随着不断地实践和尝试,我们的技术会逐渐提高,并在开发过程中处理问题更加得心应手。

  总之,uni-app是一个功能强大、易于上手的跨平台开发框架,可以让我们跨越不同的平台和设备,更快地实现极致的体验。为了更好地掌握uni-app的开发技能,需要掌握Vue的基础知识、学习使用插件和组件、多进行实践和练习,并且了解不同平台的开发特点。只有通过不断的学习和实践,我们才能真正运用好uni-app。

CSDN

https://mp.csdn.net/mp_blog/creation/editor/139379856

  • 30
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值