页面的生命周期
页面简介 | uni-app官网 (dcloud.net.cn)
onShareAppMessage(){
console.log('分享')}
onPageScroll(){
console.loge('页面滚动')
}
<template>
<view class="content">
<image class="logo" src="/static/二手市场.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
<input type="text" :value="title" @input="change"/>
</view>
<!-- :的作用是使之与后面关联title -->
<navigator url="../hello/hello" >
<view >
点击进入
</view>
</navigator>
</view>
</template>
页面之间的跳转：template
哪个页面在前，哪个就写在前面
尺寸单位
不同手机屏幕尺寸都不一样，——响应
CSS 支持 | uni-app官网 (dcloud.net.cn)
支持的通用 css 单位包括 px、rpx
-
px 即屏幕像素
-
rpx 即响应式 px，一种根据屏幕宽度自适应的动态单位。以 750 宽的屏幕为基准，750rpx 恰好为屏幕宽度。屏幕变宽，rpx 实际显示效果会等比放大，但在 App（vue2 不含 nvue） 端和 H5（vue2） 端屏幕宽度达到 960px 时，默认将按照 375px 的屏幕宽度进行计算，具体配置参考：rpx 计算配置 。
微信小程序官方文档也有尺寸
字体，边框的宽度一般不用upx
数据绑定与事件
{{表达式}}
v-bind：组件的属性名——：组件的属性名
<navigator url="../hello/hello.vue" >
<view >
点击进入
</view>
</navigator>
错误写法：url="{{url}}"
<navigator v-bind:url="url">
<view >
点击进入
</view>
</navigator>
不写v-bind也可以
<script>
export default {
//提供的模板类//上面的title绑定在script
data() {
return {
title: '欢迎使用二手市场小程序',
url:"../hello/hello"
}
},
。。。。。。。。。
组件外部需要使用{{}}
组件内部使用v-bind:
v-bind可以省略
事件
介绍 | uni-app官网 (dcloud.net.cn)
<template>
<view>
<input type="text"
style="background-color: aquamarine;height: 100upx;"
@input="change"
@focus="focus"
@blur="blur"
@confirm="confirm"
/>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
change(){
console.log("文本发生变化")
},
focus (){
console.log("获得焦点")
},
blur(){
console.log("失去焦点")
},
confirm() {
console.log("点击完成或者回车键")
}
}
}
</script>
<style>
</style>
@click="click"
在浏览器上组件被手机触摸会覆盖组件单击事件，手机可以同时触发，更推荐使用tap事件
@longpress="longpress"
@longtap="longtap"
longtap替代longpress,手机端会都可以显示
不再推荐使用longtap
