学习: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();
}
}
// 解决视频几个不能同时播放
//背景图片使用在线网络资源
封装方法
请求
图片预览