uni-app跨平台开发简单知识总结

最新推荐文章于 2024-06-13 16:57:43 发布

Bigdeep_sea_fish

最新推荐文章于 2024-06-13 16:57:43 发布

阅读量1k

点赞数 35

文章标签： uni-app vue.js 前端

本文链接：https://blog.csdn.net/Bigdeep_sea_fish/article/details/138013636

版权

Vue.js介绍

Vue.js 是什么

>>>uni-app官网<<<

>>>Vue.js介绍视频<<<

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，只关注视图层，易于上手。所有东西都是响应式的。

vue相比传统js的开发优势

在传统开发中，用原生的 JavaScript DOM 操作函数对 DOM 进行频繁操作的时候，浏览器要不停的渲染新的 DOM 树，导致页面看起来非常卡顿。

vue 是单页面应用，使页面局部刷新，不用每次跳转页面都要请求所有数据和 DOM ，这样大大加快了访问速度和提升用户体验。

vue的优势：

轻量级渐进式框架
视图、数据和结构的分离
响应式双向数据绑定
组件化
虚拟DOM
运行速度快，易于上手
便于与第三方库或既有项目整合

#文件类型变化

以前是.html文件，开发也是html，运行也是html。
现在是.vue文件，开发是vue，经过编译后，运行时已经变成了js文件。
现代前端开发，很少直接使用HTML，基本都是开发、编译、运行。所以 uni-app 有编译器、运行时的概念。
文件内代码架构的变化
以前一个 html 大节点，里面有 script 和 style 节点；

undefined	<!DOCTYPE html>  
	<html>  
		<head>  
			<meta charset="utf-8" />  
			<title></title>  
			<script type="text/javascript">  
			</script>  
			<style type="text/css">  
			</style>  
		</head>  
		<body>  
		</body>  
	</html>

现在 template 是一级节点，用于写tag组件， script 和 style 是并列的一级节点，也就是有3个一级节点。这个叫vue单文件组件规范sfc (opens new window)

现在 template 是一级节点，用于写tag组件， script 和 style 是并列的一级节点，也就是有3个一级节点。这个叫vue单文件组件规范sfc (opens new window)。

<template>  
		<view>  
		注意必须有一个view，且只能有一个根view。所有内容写在这个view下面。  
		</view>  
	</template>  
	<script>  
		export default {  
		}  
	</script>  
	<style>  
	</style>

外部文件引用方式变化

以前通过script src、link href引入外部的js和css；

undefined	<script>  
		var util = require('../../../common/util.js');  //require这个js模块  
		var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法  
	</script>

现在是es6的写法， import 引入外部的js模块(注意不是文件)或css；而在这个 util.js 里，要把之前的 function 封装为对象的方法
common 目录有一个工具类 util.js ，可以在hello uni-app中搜索这个例子查看。hello uni-app示例代码可从 github (opens new window)获取。
```
undefined	<script>  
		var util = require('../../../common/util.js');  //require这个js模块  
		var formatedPlayTime = util.formatTime(playTime); //调用js模块的方法  
	</script>
```
data属性

data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。

undefined	//正确用法，使用函数返回对象
	data() {
		return {
			title: 'Hello'
		}
	}

	//错误写法，会导致再次打开页面时，显示上次数据
	data: {
		title: 'Hello'
	}

	//错误写法，同样会导致多个组件实例对象数据相互影响
	const obj = {
		title: 'Hello'
	}
	data() {
		return {
			obj
		}
	}

CommJS及ES6规范

1. CommonJS（CommJS）规范： - CommonJS 是一种模块化规范，用于在 JavaScript 环境中组织代码并管理模块依赖关系。 - 通过使用 `module.exports` 导出模块，以及 `require()` 方法引入模块。 - 在 uni-app 中，CommonJS 规范常用于引入第三方库、工具函数等模块。
2. ES6 规范： - ES6（ECMAScript 2015）是 JavaScript 的下一代标准，引入了许多新特性和语法改进。 - ES6 提供了更强大且现代化的模块系统，使用 `export` 导出模块，以及 `import` 引入模块。 - 可以使用 ES6 的箭头函数、解构赋值、模板字符串等语法糖来提高代码质量和可读性。 - 在 uni-app 中，ES6 规范通常用于编写应用程序的业务逻辑、组件等部分。综合使用 CommonJS 和 ES6 规范可以让开发者更灵活地组织和编写代码，并充分利用各自的优势。在 uni-app 开发中，通常会看到这两种规范混合使用，以满足不同的需求和场景。

iconfont字体图标

使用字体图标的优点：

①减小打包体积，一些平台如微信小程序等在发布时有体积限制，大量使用静态资源会使得打包体积容易超出限制

②字体图标是矢量的，缩放不失真、模糊

③对比引用多个网络图标，字体图标只需一个css文件即可，因此减少了网络请求次数，同时比下载图片节约流量

iconfont >>>地址<<<

注册账号并新建项目，将需要的图标添加到项目中
A：复制代码粘贴到自己在项目中新建的

若内容较多，下载的文件超过40kb，则需要base64转码，可搜索相关的工具网站在线转码iconfont.ttf文件

参考1：https://www.cnblogs.com/gfweb/p/11069062.html

参考2：uni-app字体图标Iconfont的使用 - 简书

在
App.vue
的样式区域引入

iconfont.css
Plain Text

@import url("/common/iconfont.css");
在需要使用图标的text元素的class属性内添加iconfont和图标对应的样式代码即可
Plain Text

<text class="iconfont icon-arrow-down-filling img-tag"></text> //样式：1→iconfont，2→图标代码，3→自定义字体样式
对字体图标样式的设置，方式与文字一样，设置

color

font-size
等即可
将项目中，数据项视图右上角的操作图标替换为字体图标
使用iconfont图标作为tabBarItem图标
- 首先在iconfont网站【我的项目】下载ttf文件（切换Unicode编码；压缩包，解压取其中的ttf扩展名的文件）
- 将ttf文件粘贴到static文件夹下（无需编译）
- 在pages.json文件中的tabBar节点中添加
  JSON
  
  "iconfontSrc": "/static/iconfont.ttf"
  ，注意需要绝对路径
- 添加一个测试页面，按dcloud官网中的配置属性配置（text需要设置unicode码，复制得到的unicode码替换其中的&#x为\ue）
```
 {
             "iconfont": {
                 "text": "\ue603",
                 "selectedText": "\ue603",
                 "fontSize": "20px",
                 "color": "#000000",
                     "selectedColor": "#cc3300"
             },
             "text": "iconfont",
             "pagePath": "pages/iconfont/iconfont"
 }
```
  使用缓存提升用户体验
- 使用缓存保存数据
- 应用场景
  - 对时效要求不高的应用，初次加载页面，可使用缓存减少等待时间
  - 无网络或服务器无法访问时，使用缓存提供本地数据查阅或离线阅读
  - 相对固定不变的数据，无需每次从服务器获取
- 缓存使用步骤
  - 键值对，使用key来设置或获取缓存值，数据保存到设备或从其中读取使用
  - 参考官方文档：>>>缓存<<<
  - 因node.js默认异步读写文件所以存在两种方案，对于同步异步的选择
    a.因缓存在本地，基本可不考虑耗时和失败的情况，所以使用同步异步均可
    b.若需要即刻使缓存生效以进行下一步操作则必须使用同步方法
  - 加载页面时，首先从缓存中读取相关数据，如blogs
    undefined
    uni.getStorageSync('blogs')
  - 从服务器获取最新数据后，更新缓存数据
    undefined
    uni.setStorageSync('blogs', res.data)
  - 若需要清除缓存，可使用remove方法清除指定key的缓存，或者使用clear方法清除所有缓存
    uni.removeStorageSync('blogs') uni.clearStorageSync()
- 缓存有效期各端不同
  - H5端有大小限制（5M），可能会被用户自行清理
  - app端无大小限制，属于持久化数据
  - 微信小程序大小单条1M，最大10M，缓存与小程序生命周期一致（除非用户主动删除或被系统清理，否则一般均可用）
- 使用缓存保存blogs列表，减少等待时间
  - 在onLoad时，首先从缓存读取blogs数据，并更新count，若缓存不存在才使用getPagedBlogs()从服务器读取
  - 在getPagedBlogs()得到响应结果时，更新blogs缓存
- 实现点赞功能
  
  由于服务端功能限制，点赞接口仅能接收blog id，无法记录点赞用户id，所以此处使用缓存记录当前设备的点赞状态
- 在onLoad时从缓存中读取所有已点赞blog的id集合，保存到页面数据good_ids
- 修改template中blogs列表的点赞图标为据条件显示不同图标（未点赞和已点赞）
- 为两个不同状态的点赞图标添加点击事件及相应的事件处理函数
  
  请参考官方文档的事件处理器部分
  
  https://uniapp.dcloud.net.cn/tutorial/vue-basics.html#eventhandler
- 在request.js中添加相应的post方法，并完成post数据到点赞接口的代码
- 使用ActionSheet进行交互
- 操作逻辑
  - 从屏幕底部弹出操作菜单
  - 使用半透明遮罩获取用户注意力
- 使用步骤
  1. 在视图右上角图标上添加点击事件处理函数
  2. 在其中使用uni.showActionSheet弹出菜单
  3. 参考>>>官方文档<<<
- 在项目中应用
- 移动端请求类型
- 服务端使用的编码类型
  ①application/x-www-form-urlencoded，web应用最常用的提交方式，form表单提交就属于这一种，传递的参数格式为key1=val1&key2=val2，适用于简单结构的参数
  ②application/json，RESTful API最常用的post方式，使用json编码字符串来提交，json可处理各种复杂结构，通用性强，各种服务端开发语言均有json处理支持
  ③multipart/form-data，使用表单上传文件的必备格式，比如blogs的图片上传接口
- 服务器接口
  blogs服务端提供了多种形式的接口方法，接收不同类型的参数传递：
  ①@PathVariable接收url参数
  ②@RequestHeader在请求头中传递简单参数，如分页的页码等
  ③@RequestParam上述第一种编码格式的提交，参数简单数量少
  ④@RequestBody上述第二种编码格式的提交，参数较多或结构复杂
- 移动端请求
  分别对应以上几种接口的请求方法：
  ①get请求，参考blogs项目request.js
  ②getWithParams，参数放在请求头中
  
  ③requestParams
  
  ④post，参考blogs项目request.js --待完善
  ⑤postFile，封装了uni.uploadFile---待完善
- 图表显示分析数据
导入秋云ucharts图表组件，>>>插件地址<<<
同时导入示例项目
基本代码的写法，可在示例项目的
pages/ucharts/ucharts.vue
中找到

同时可在秋云的官网学习不同类型图表的配置及基本写法，>>>秋云demo<<<
在项目组件
components
中添加
qiun-title-bar
组件，显示图表标题
完成博客类别比例的饼图
- 视图中添加标题及图表组件
  Plain Text
  
  <qiun-title-bar title="博客类别比例" /> <view class="charts-box"> <qiun-data-charts type="pie" :chartData="pie" :opts="{legend:{fontSize:12}}"/> </view>
- 添加页面数据
  pie
  作为图表数据源
- 添加一个
  getCategories
  函数，获取类别及博客数量数据，在其中获取服务端数据并按柱状图数据格式组织
  
  可在秋云demo的在线生成工具标签页中，查看各种不同类型图表的数据源示例格式
- 在
  onLoad
  中调用上述函数
参照上述饼图做法完成博客点赞数量和评论数量的柱状图
参照上述饼图及柱状图做法完成标签博客数量的词云图
在
pages.json
中配置
charts.vue
启用下拉刷新，并在
onPullDownRefresh
中调用上述获取数据的函数更新图表
调整各类型配置，写法示例如下，各配置项可参考uCharts的demo
Plain Text

<qiun-data-charts type="pie" :chartData="pie" :opts="{legend:{fontSize:12}}"/> <!-- 这里修改图例的文字大小 --!>

Bigdeep_sea_fish

关注

35
点赞
踩
45

收藏

觉得还不错? 一键收藏
0
评论
uni-app跨平台开发简单知识总结

Vue.js 是什么>>>uni-app官网<<<>>>Vue.js介绍视频<<<Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。Vue 被设计为可以自底向上逐层应用。Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。
复制链接

扫一扫