uniapp学习笔记之知识点大总结

一、uniapp介绍

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开发版，可开箱即用

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

2.1、利用HbuilderX初始化项目

• 点击HbuilderX菜单栏文件>项目>新建

• 选择uni-app,填写项目名称，项目创建的目录
  

2.2、运行项目

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

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

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

注意：

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

2.3、介绍项目目录和文件作用

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) 规范
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近微信小程序规范，但需将前缀 wx 替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期
• 为兼容多端运行，建议使用flex布局进行开发

三、网络

1、发起请求

uni.request(object) 发起网络请求.

<template>
	<view class="content">
		<button type="warn" @click="handelClick()">发送网络请求</button>
		<view>
			{
   {
   contant}}
		</view>
	</view>
</template>

<script>
	export default {
   
		data() {
   
			return {
   
				contant: ''
			}
		},
		onLoad() {
   

		},
		methods: {
   
			handelClick() {
   
				uni.request({
   
					//url请求接口
					url: 'https://www.escook.cn/api/cart',
					//请求方式
					method:"GET",
					//成功返回数据
					success: (res) => {
   
						this.contant=res
						uni.showToast({
   
							title: '获取数据成功',
							duration: 2000
						});
					},
					//
					fail() {
   
					console.log('请求失败')
					}
				})
			}
		}
	}
</script>

<style>
</style>

2、上传

uni.uploadFile(object)本地资源上传到开发者服务器，客户端发起一个 POST 请求。

<template>
	<view class="content">
		<button @click="handelClickPic()" type="warn">上传图片</button>
	</view>
</template>

<script>
	export default {
   
		data() {
   
			return {
   
				contant: ''
			}
		},
		onLoad() {
   

		},
		methods: {
   
	
			//上传图片
			handelClickPic() {
   
				uni.chooseImage({
   
					success: (chooseImageRes) => {
   
						const tempFilePaths = chooseImageRes.tempFilePaths;
						//上传图片
						const uploadTask = uni.uploadFile({
   
							url: 'https://www.escook.cn/api/cart',
							// 要上传文件资源的路径。
							filePath: tempFilePaths[0],
							// 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
							name: 'file',
							// HTTP 请求中其他额外的 form data
							formData: {
   
								'user': 'test'
							},
							// 接口调用成功的回调函数
							success: (uploadFileRes) => {
   
								console.log(uploadFileRes.data);
							}
						});
                        
						//获取文件长度，上传时间
						uploadTask.onProgressUpdate((res) => {
   
							console.log('上传进度' + res.progress);
							console.log('已经上传的数据长度' + res.totalBytesSent);
							console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);


							// 测试条件，取消上传任务。
							if (res.progress > 50) {
   
								uploadTask.abort();
							}
							uni.showToast({
   
								title: '上传成功',
								duration: 1000
							});
						});