uni-app框架ing...

学习：https://www.bilibili.com/video/BV1uk4y1R7ba?p=143

公共样式

APP.vue里引入.css

生命周期

返回

onBackPress() 小程序不支持：open-type=“nav…”
onUnload() 为主

尺寸upx（基准750upx）

375px = 750upx

{{xx?xx:xx}} 使用内的三元表达式

v-bink:组件属性名 -->：组件属性名

:style/:url=“url”/:src=“image”

事件处理器

<input type="text" :value="title" @input="change"/>
change(e) {
	this.title = e.detail.value;
}
tap & click
web端tap会覆盖click，app、小程序可同时存在
<input type="text" :value="title"
	@focus="focus"
	@blur="blur"
	
	@confirm="confirm"
	
	@click="click"
	@tap="tap"
	
	@longpress="longpress"
	@longtap="longtap"
	
	@touchstart="touchstart"
	@touchmove="touchmove"
	@touchend="touchend"
	@touchcancel="touchcancel"/>
	
focus() { console.log('focus..') },
blur() { console.log('blur..') },
confirm() { console.log('confirm..') },
click() { console.log('click..') },
tap() { console.log('tap..') },
longpress() { console.log('长时间按住') },
longtap() { console.log('长时间触摸') }, //不推荐
touchstart() { console.log('touchstart..') },
touchmove() { console.log('touchmove..') },
touchend() { console.log('touchend..') },
touchcancel() { console.log('touchcancel..') }

v-if–v-else & v-show

可三元

v-for

:key 组件和数据捆绑唯一性 checkbox验证
嵌套时index下标要指定

条件编译

1).vue
<!-- #ifdef H5 -->
<view class="">H5</view>
<!-- #endif -->
<!-- #ifndef MP -->
<view class="">不在小程序编译</view>
<!-- #endif -->
2).js
// #ifdef H5
console.log('H5');
// #endif
3).css
/* #ifdef H5 */
background-color: #4CD964;
/* #endif */

轮播图笔记

接口请求

const self = this;
uni.request({
	url: self.apiUrl + '/index/carousel/list',
	method: "POST",
	success: (res) => {
		console.log(res.data);
		this.text = 'request success';
		if (res.data.status == 200) {
			var swiperList = res.data.data;
			self.swiperList = swiperList;
		}
	}
});

全局挂载url

方法一
main.js

Vue.prototype.apiUrl = "https://www.imovietrailer.com/superhero";
// Vue.prototype.apiUrl = "https://www.imovietrailer-dev.com/superhero";

方法二

//定义：comment.comment.js
const apiUrl = "https://www.imovietrailer.com/superhero";
export default {
	apiUrl
}

//引用

import api from "../../comment/comment.js"
console.log(api.apiUrl)
url: api.apiUrl + '/index/carousel/list'

小程序

1.配置APPId

预览，分享功能

2.服务器域名配置

1）、开发->开发设置->服务器域名(进行配置后)，在微信开发者工具（不校验合法域名、…可以不勾选） 相当于
2）、mainifest.json->微信小程序配置->检查安全域名和TSL版本

字体一般设置px

scroll-view使用

width:100% white-space:nowrap

文字超出

white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

自定義組件

// 定义

<template name="xx"></template>    
export default { name: "xx" }

// 引用

@impotr xxx from "../.."  
components: { xx }

注意：父组件给子组件传参可能underfine(原因：data定义teat数值空，接口请求teat后续才有值的)

<block v-if="teat>=0">
	<xx :xx="teat"></xx>
</block>

媒体组件

断点debugger

<!-- 视频 -->
<!-- 封面 -->
<scroll-view scroll-x="true" class="video-scroll">
	<video class="hot-movies-single" v-for="item in 4"
	src="" 
	poster="" 
	controls></video>
</scroll-view>

动画

<view class="moves-oper" @click="praiseMe">
	<view :animation="animationData" class="praise-me animation-op">+1</view>
</view>
data() {
	return {
		animationData: {}
	}
},
methods: {
	praiseMe() {
		this.animation.translateY(-60).opacity(1).step({
			duration:400
		});
		this.animationData = this.animation.export();
		// 还原
		setTimeout(function(){
			this.animation.translateY(0).opacity(0).step({
				duration:0
			});
			this.animationData = this.animation.export();
		}.bind(this), 500)
	}
},
onUnload() {
	this.animationData = {}
},
onLoad() {
	const self = this;
	//在页面创建的时候，创建一个临时动画对象
	this.animation = uni.createAnimation();
}

传参

<view class="moves-oper" :data-index="index" @click="praiseMe"></view>
praiseMe(e) {
	console.log(e.currentTarget.dataset.index);
}

下拉刷新

"enablePullDownRefresh": true
onPullDownRefresh() {},
uni.stopPullDownRefresh()

uni.showLoading({
	mask: true
});
uni.showNavigationBarLoading();

uni.hideNavigationBarLoading()
uni.hideLoading()

分页

pageList(keyword, page, pageSize) {
	// 请求 arr.concet()			
}
onReachBottom() {
	const self = this;
	var page = self.page + 1;
	var keywords = self.keyword;
	var totalPages = self.totalPages;
	if (page > totalPages) {
		return;
	}
	console.log('123');
	self.pageList(keywords, page, 15);
}

跳转

1、接口
路由与页面跳转
uni.navigateTo(OBJECT)
注意：uni.navigateBack 返回原页面

拿到参数

onLoad(params) {} // params = {}

uni.redirectTo(OBJECT) 注意：关闭当前页面，跳转到应用内的某个页面。

2、组件

uniapp-debugger

渐进式导航栏

"titleNView": {
	"type":"transparent"
}
onLoad(){}可设置api修改样式
onLoad(){
	uni.setNavigationBarColor({
		frontColor:"#ffffff",
		backgroundColor:"#000000"
	});
}

媒体 预览图片

uni.previewImage(OBJECT)

自定义预览封面图
功能实现
1、交互反馈
uni.showActionSheet(OBJECT) ​显示操作菜单
2、上传、下载
uni.downloadFile(OBJECT) 下载文件资源到本地
3、//保存图片到系统相册
uni.saveImageToPhotosAlbum(OBJECT)
4、//小程序配置https下载合法域名

第三方服务

分享
onShareAppMessage()仅支持小程序

自定义导航栏按钮
uni.share(OBJECT)

自定义按钮buttons

"titleNView": {
	"buttons": [
		{"type": "share"},
		{"type": "home"},
		{"type": "forward"}
	]
}

// 监听导航栏按钮

onNavigationBarButtonTap(e) {
	console.log(e.index);
	if (e.index == 0) {
		// uni.share(OBJECT)
	}
}

视频

//视频对象（解决页面隐藏是视频继续播放的问题）

uni.createVideoContext(videoId, this)

<video id="xxx">
onReady()页面初次渲染完成，获得视屏上下文对象
onReady() {
	this.videoContext = uni.createVideoContext("xxx")
}
页面被隐藏时，暂停
onHide() {
	this.videoContext.pause();
}
页面再次显示时，播放
onShow() {
	if (this.videoContext) {
		this.videoContext.play();
	}
}

// 解决视频几个不能同时播放

//背景图片使用在线网络资源

封装方法
请求
图片预览