开发区别
uni-app 项目每个页面是一个 .vue
文件,数据绑定及事件处理同 Vue.js
规范:
- 属性绑定
src="{ { url }}"
升级成:src="url"
- 事件绑定
bindtap="eventName"
升级成@tap="eventName"
,支持()传参 - 支持 Vue 常用指令
v-for
、v-if
、v-show
、v-model
等
其他区别补充
-
调用接口能力,建议前缀
wx
替换为uni
,养成好习惯,支持多端开发。
-
<style>
页面样式不需要写scoped
,小程序是多页面应用,页面样式自动隔离。 -
生命周期分三部分:应用生命周期(小程序),页面生命周期(小程序),组件生命周期(Vue)
案例练习
主要功能
- 滑动轮播图
- 点击大图预览
参考代码
<template>
<swiper class="banner" indicator-dots circular :autoplay="false">
<swiper-item v-for="item in pictures" :key="item.id">
<image @tap="onPreviewImage(item.url)" :src="item.url"></image>
</swiper-item>
</swiper>
</template>
<script>
export default {
data() {
return {
// 轮播图数据
pictures: [
{
id: '1',
url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_1.jpg',
},
{
id: '2',
url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_2.jpg',
},
{
id: '3',
url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_3.jpg',
},
{
id: '4',
url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_4.jpg',
},
{
id: '5',
url: 'https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/uploads/goods_preview_5.jpg',
},
],
}
},
methods: {
onPreviewImage(url) {
// 大图预览
uni.previewImage({
urls: this.pictures.map((v) => v.url),
current: url,
})
},
},
}
</script>
<style>
.banner,
.banner image {
width: 750rpx;
height: 750rpx;
}
</style>
用到的接口
uni.previewImage
功能描述
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作。