完成入門案例
步驟1.下載編輯器
1.1 創(chuàng)建項(xiàng)目hello-uni-app
1.2 清空pages/index/index.vue
<template>
<view class="content">
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style>
</style>
步驟2.默認(rèn)組件
2.1 修改index.vue
<view class="content">
<view>塊1</view>
<view>塊2</view>
<view><text>字1</text><text>字2</text></view>
</view>
步驟3.運(yùn)行程序
- 打開瀏覽器
- 打開小程序
- 打開app
文檔見快速上手-運(yùn)行uni-app
步驟4.打印日志
onLoad() {
console.log('hello')
},
步驟5.使用擴(kuò)展組件的插件
- 使用Icons圖標(biāo)
修改
<uni-icons type="contact" size="30"></uni-icons>
import uniIcons from "@/components/uni-icons/uni-icons.vue"
components: {uniIcons},
步驟6.自定義組件
6.1定義button-counter組件
- 新增
button-counter.vue
<template>
<view>
<button @click="handleClick">{{num}}</button>
</view>
</template>
<script>
export default {
data() {
return {
num: 1
};
},
methods:{
handleClick(){
this.num++
}
}
}
</script>
<style>
</style>
- 修改
index.vue
<template>
<button-counter></button-counter>
</template>
<script>
import buttonCounter from "@/components/button-counter.vue"
components: {uniIcons, buttonCounter},
</script>
步驟7.API調(diào)用
<image v-for="item in carouselList" :key="item.id" :src="item.goodsPic" mode="aspectFit" style="width: 100%;"></image>
data() {
return {
carouselList:[]
}
},
onLoad() {
this.getAdBanners()
},
methods: {
async getAdBanners(){
var [error, res] = await uni.request({
url: 'https://a0e83064-1d70-4acb-8b07-43b6d3ef7b23.bspapp.com/http/adBanners'
})
this.carouselList = res.data.data.list
console.log('this.carouselList', this.carouselList)
}
}
完成shop案例
步驟1.整理頁面
1.1 創(chuàng)建項(xiàng)目shop
1.2 清空pages/index/index.vue
- template中刪除多余的標(biāo)簽,和修改class為container
- script data屬性清空.添加onload生命周期
- style 清空內(nèi)容,添加lang="less" scoped屬性
<template>
<view class="container">
</view>
</template>
<script>
export default {
data() {
return {
}
},
onLoad() {
},
methods: {
}
}
</script>
<style lang="less" scoped>
</style>
1.3 添加頁面背景顏色
- 打開文檔
page {
background: #f5f5f5;
}
步驟2 完成tabBar完成
2.1 打開參考網(wǎng)站
2.2 打開素材/圖片拷貝本地圖片到static文件夾
2.3 打開配置文檔,并查看代碼示例
2.4 修改page.json,新增tabBar屬性
"tabBar":{
"color": "#C0C4CC",
"selectedColor":"#FF713F",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/tab-home.png",
"selectedIconPath": "static/tab-home-current.png",
"text": "首頁"
},
{
"pagePath": "pages/category/category",
"iconPath": "static/tab-cate.png",
"selectedIconPath": "static/tab-cate-current.png",
"text": "分類"
},
{
"pagePath": "pages/cart/cart",
"iconPath": "static/tab-cart.png",
"selectedIconPath": "static/tab-cart-current.png",
"text": "購物車"
},
{
"pagePath": "pages/user/user",
"iconPath": "static/tab-my.png",
"selectedIconPath": "static/tab-my-current.png",
"text": "我的"
}]
}
2.5 新建其他頁面
頁面名,填category,cart,user
步驟3 完成導(dǎo)航欄
3.1 打開配置文檔 ,打開h5的配置文檔,打開導(dǎo)航欄的配置文檔
3.2 修改page.json,添加搜索框
"style": {
"navigationBarTitleText": "首頁",
"h5": {
"titleNView": {
"searchInput": {
}
}
}
}
3.3 修改page.json,美好搜索框
"searchInput": {
"backgroundColor": "rgba(231, 231, 231,.7)",
"borderRadius": "16px",
"placeholder": "搜索",
"align": "left",
"fontSize": "12px",
"placeholderColor": "#aaa"
}
3.4 打開字體圖標(biāo)
拷貝字體圖標(biāo)到static文件夾
3.5 修改page.json,添加左側(cè)圖標(biāo)
"titleNView": {
"buttons": [{
"float": "left",
"fontSrc": "/static/iconfont/iconfont.ttf",
"text": ""
}]
}
3.6 修改page.json,添加右側(cè)圖標(biāo)
"buttons": [{
"float": "left",
"fontSrc": "/static/iconfont/iconfont.ttf",
"text": ""
},{
"text": "登錄",
"fontSize": "12px",
"redDot": true
}]
3.7 導(dǎo)航欄兼容性,app端
- 添加app-plus,復(fù)制h5的屬性值
- 打開模擬器,運(yùn)行
"app-plus": {
}
3.8 導(dǎo)航欄兼容性,app端,修改圖標(biāo)內(nèi)容
"buttons": [{
"float": "left",
"fontSrc": "/static/iconfont/iconfont.ttf",
"text": "\e618;"
}]
3.9 導(dǎo)航欄兼容性,小程序端,引入第三方插件
- 新建cart,user頁面
- 搜索插件
NavBar 導(dǎo)航欄,并安裝它 - 修改
index.vue
<template>
<view class="container">
<uni-nav-bar left-icon="back" left-text="返回" right-text="菜單" title="導(dǎo)航欄組件"></uni-nav-bar>
</view>
</template>
<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue"
export default {
components: {uniNavBar},
}
</script>
3.10 導(dǎo)航欄兼容性,小程序端,美化導(dǎo)航欄
- 導(dǎo)入
navBar的案例 - 修改
index.vue
3.10.1 復(fù)制案例代碼
<uni-nav-bar :fixed="false" color="#333333" background-color="#FFFFFF" right-icon="scan" @clickLeft="showCity" @clickRight="scan">
<block slot="left">
<view class="city">
<view><text class="uni-nav-bar-text">{{ city }}</text></view>
<uni-icons type="arrowdown" color="#333333" size="22" />
</view>
</block>
<view class="input-view">
<uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
<input confirm-type="search" class="nav-bar-input" type="text" placeholder="輸入搜索關(guān)鍵詞" @confirm="confirm">
</view>
</uni-nav-bar>
.input-view {
/* #ifndef APP-PLUS-NVUE */
display: flex;
/* #endif */
flex-direction: row;
/* width: 500rpx;*/
flex: 1;
background-color: #f8f8f8;
height: 30px;
border-radius: 15px;
padding: 0 15px;
flex-wrap: nowrap;
margin: 7px 0;
line-height: 30px;
}
.input-uni-icon {
line-height: 30px;
}
.nav-bar-input {
height: 30px;
line-height: 30px;
/* #ifdef APP-PLUS-NVUE */
width: 370rpx;
/* #endif */
padding: 0 5px;
font-size: 28rpx;
background-color: #f8f8f8;
}
3.10.2 修改成案例效果
<view class="input-view">
<uni-icons class="input-uni-icon" type="search" size="22" color="#666666" />
<input confirm-type="search" disabled class="nav-bar-input" type="text" placeholder="搜索">
</view>
3.11 導(dǎo)航欄兼容性,調(diào)節(jié)編譯
- 打開文檔,條件編譯
<!-- #ifdef MP -->
<uni-nav-bar :fixed="false" color="#333333" background-color="#FFFFFF" left-icon="scan" right-text="登錄">
</uni-nav-bar>
<!-- #endif -->
步驟4 完成輪播圖
4.1獲取輪播圖的數(shù)據(jù)
- 打開接口文檔
- 打開發(fā)起請求文檔
data(){
return {
carouselList: []
}
},
loadData() {
this.getAdBanners()
},
methods: {
async getAdBanners(){
var [error, res] = await uni.request({
url: 'https://a0e83064-1d70-4acb-8b07-43b6d3ef7b23.bspapp.com/http/adBanners'
})
console.log('res', res)
this.carouselList = res.data.data.list
}
}
4.2使用輪播組件
- 打開輪播的組件文檔
- 修改index.vue
<view class="carousel-section">
<swiper>
<swiper-item v-for="(item, index) in carouselList" :key="index">
<image :src="item.goodsPic" />
</swiper-item>
</swiper>
</view>
4.3完善輪播組件
- circular增加循環(huán)
- 增加.carousel樣式
<view class="carousel-section">
<swiper class="carousel" circular>
<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
<image :src="item.goodsPic"/>
</swiper-item>
</swiper>
</view>
.carousel {
width: 100%;
height: 373rpx;
image {
width: 100%;
height: 100%;
}
}
4.4添加自定義輪播指示器,基礎(chǔ)樣式
- 修改index.vue
<view class="carousel-section">
<swiper class="carousel" circular>
<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item">
<image :src="item.goodsPic"/>
</swiper-item>
</swiper>
<view class="swiper-dots">
<text class="num">{{ swiperCurrent + 1 }}</text>
<text class="sign">/</text>
<text class="num">{{ swiperLength }}</text>
</view>
</view>
data() {
return {
swiperCurrent: 0,
swiperLength: 0,
}
},
methods: {
async getAdBanners(){
var [error, res] = await uni.request({
url: 'https://a0e83064-1d70-4acb-8b07-43b6d3ef7b23.bspapp.com/http/adBanners'
})
console.log('res', res)
this.carouselList = res.data.data.list
this.swiperLength = this.carouselList.length
}
}
.carousel-section{
position: relative;
}
.swiper-dots {
display: flex;
position: absolute;
left: 45rpx;
bottom: 40rpx;
width: 72rpx;
height: 36rpx;
background-image: url(https://itcast-1255651667.cos.ap-chengdu.myqcloud.com/20200421213325.png);
background-size: 100% 100%;
.num {
width: 36rpx;
height: 36rpx;
border-radius: 50px;
font-size: 24rpx;
color: #fff;
text-align: center;
line-height: 36rpx;
}
.sign {
position: absolute;
top: 0;
left: 50%;
line-height: 36rpx;
font-size: 12rpx;
color: #fff;
transform: translateX(-50%);
}
}
4.5輪播事件添加
- 切換輪播,改變指示器的數(shù)字顯示
<swiper class="carousel" circular @change="swiperChange">
</swiper>
methods: {
swiperChange(e) {
const index = e.detail.current;
this.swiperCurrent = index;
},
}
步驟5 玩分類欄目
5.1基本布局
- 使用emmet寫標(biāo)簽
view.cate-section>(view.cate-item>image[src=""]+text)*10 - 打開素材/圖片/圖片.md
<view class="cate-section">
<view class="cate-item">
<image src="https://itcast-1255651667.cos.ap-chengdu.myqcloud.com/20200409224144.png"></image>
<text></text>
</view>
<view class="cate-item">
<image src="https://itcast-1255651667.cos.ap-chengdu.myqcloud.com/20200409224613.png"></image>
<text></text>
</view>
<view class="cate-item">
<image src="https://itcast-1255651667.cos.ap-chengdu.myqcloud.com/20200409224724.png"></image>
<text></text>
</view>
<view class="cate-item">
<image src="https://itcast-1255651667.cos.ap-chengdu.myqcloud.com/20200409224803.png"></image>
<text></text>
</view>
<view class="cate-item">
<image src="https://itcast-1255651667.cos.ap-chengdu.myqcloud.com/20200409224954.png"></image>
<text></text>
</view>
<!-- 第二行 -->
<view class="cate-item">
<image src="https://itcast-1255651667.cos.ap-chengdu.myqcloud.com/20200409225107.png"></image>
<text></text>
</view>
<view class="cate-item">
<image src="https://itcast-1255651667.cos.ap-chengdu.myqcloud.com/20200409225233.png"></image>
<text></text>
</view>
<view class="cate-item">
<image src="https://itcast-1255651667.cos.ap-chengdu.myqcloud.com/20200409225318.png"></image>
<text></text>
</view>
<view class="cate-item">
<image src="https://itcast-1255651667.cos.ap-chengdu.myqcloud.com/20200409225348.png"></image>
<text></text>
</view>
<view class="cate-item">
<image src="https://itcast-1255651667.cos.ap-chengdu.myqcloud.com/20200409225437.png"></image>
<text></text>
</view>
</view>
/* 分類 */
.cate-section {
display: flex;
justify-content: space-around;
align-items: center;
flex-wrap: wrap;
.cate-item {
width: 20%;
}
image {
width: 85rpx;
height: 85rpx;
border-radius: 50%;
}
}
5.2 美化圖標(biāo)樣式
- 添加圖標(biāo)文字,美好
<text>服飾</text>
<text>數(shù)碼</text>
<text>美妝</text>
<text>手機(jī)</text>
<text>旅行</text>
<text>生鮮</text>
<text>超市</text>
<text>物流</text>
<text>進(jìn)口</text>
<text>繳費(fèi)</text>
.cate-section {
margin: 18rpx 17rpx;
padding-top: 30rpx;
background: #fff;
border-radius: 10rpx;
.cate-item {
display: flex;
flex-direction: column;
align-items: center;
font-size: 26rpx;
margin-bottom: 30rpx;
}
image {
margin-bottom: 10rpx;
}
}
步驟6 實(shí)現(xiàn)猜你喜歡
6.1創(chuàng)建guess-like-goods.vue
6.2引入組件guess-like-goods
修改index.vue
<guess-like-goods></guess-like-goods>
6.3發(fā)送請求
import guessLikeGoods from '@/components/guess-like-goods.vue'
export default {
components: {
guessLikeGoods
},
data() {
return {
guessLikeGoodsList: []
};
},
created(){
this.getGuessLikeGoods()
},
methods: {
async getGuessLikeGoods(){
var [error, res] = await uni.request({
url:'https://a0e83064-1d70-4acb-8b07-43b6d3ef7b23.bspapp.com/http/guessLike'
})
this.guessLikeGoodsList = res.data.data
}
}
}
6.4寫的標(biāo)簽,主要布局
- 編輯guess-like-goods.vue
<!-- 猜你喜歡 -->
<view class="f-header">
<h3>─<span>猜你喜歡</span>─</h3>
<view class="guess-section">
<view v-for="(item, index) in guessLikeGoodsList" :key="index" class="guess-item">
<view class="image-wrapper">
<image :src="item.goodsPic" mode="aspectFill"></image>
</view>
</view>
</view>
</view>
/* 猜你喜歡 */
.f-header {
margin: 18rpx 17rpx;
h3 {
font-weight: bold;
padding: 6rpx 0 24rpx;
font-size: 30rpx;
text-align: center;
span {
color: #FF7443;
}
}
}
.guess-section {
display: flex;
flex-wrap: wrap;
.guess-item {
display: flex;
position: relative;
flex-direction: column;
width: 48%;
margin-bottom: 20rpx;
background-color: #fff;
border-radius: 10rpx;
padding-bottom: 20rpx;
&:nth-child(2n + 1) {
margin-right: 4%;
}
}
.image-wrapper {
width: 100%;
height: 330rpx;
border-radius: 3px;
image {
width: 100%;
height: 100%;
}
}
}
6.5寫的標(biāo)簽,其他布局
- 編輯guess-like-goods.vue
<view v-for="(item, index) in guessLikeGoodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
<view class="image-wrapper">
<image :src="item.goodsPic" mode="aspectFill"></image>
</view>
<text class="title">{{item.goodsTitle}}</text>
<text class="price">￥{{item.goodsPrice}}</text>
<!-- <image class="cart" src="../static/tab-cart.png"></image> -->
</view>
.guess-section {
.title {
padding-left: 10rpx;
margin: 20rpx 0;
font-size: 25rpx;
color: #262626;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.price {
padding-left: 10rpx;
font-size: 24rpx;
color: #DC332A;
line-height: 1;
}
}
6.6寫標(biāo)簽,加入購物車圖標(biāo)
- 編輯App.vue
<style>
@import url("static/iconfont/iconfont.css");
</style>
- 編輯guess-like-goods.vue
<view v-for="(item, index) in guessLikeGoodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
<view class="cart iconfont icon-gouwuche"></view>
</view>
.guess-section {
.guess-item {
.cart {
position: absolute;
bottom: 10rpx;
right: 10rpx;
font-size: 40rpx
}
}
}
