uni-app初学

小程序开发网址：

注册小程序账号
微信开发者工具下载
uniapp 官网
HbuilderX 下载
色彩网站
图标网站
Postimage-免费转换图片比例

效果图：

1. pages.json 页面路由

pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

{"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}},{"path" : "pages/category/category","style" : {"navigationBarTitleText" : "分类"}},{"path" : "pages/user/user","style" : {"navigationBarTitleText" : "我的"}}],"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "校园小程序","navigationBarBackgroundColor": "#3cb371","backgroundColor": "#F8F8F8"},"uniIdRouter": {},"tabBar": {"selectedColor": "#3cb371","list": [{"pagePath": "pages/index/index","iconPath": "/static/icons/首页.png","selectedIconPath": "/static/icons/首页-高亮.png","text": "首页"},{"pagePath": "pages/category/category","iconPath": "/static/icons/分类.png","selectedIconPath": "/static/icons/分类-高亮.png","text": "分类"},{"pagePath": "pages/user/user","iconPath": "/static/icons/我的.png","selectedIconPath": "/static/icons/我的-高亮.png","text": "我的"}]}
}

• pages：设置页面路径及窗口表现
  • path：配置页面路径
  • style：配置页面窗口表现
    • navigationBarTitleText：导航栏标题文字内容
  • needLogin：是否需要登录才可访问
• globalStyle：设置默认页面的窗口表现
  • navigationBarTextStyle：导航栏标题颜色及状态栏前景颜色，仅支持 black/white
  • navigationBarTitleText：导航栏标题文字内容
  • navigationBarBackgroundColor：导航栏背景颜色
  • backgroundColor：窗口的背景色
• tabBar：设置底部 tab 的表现
  • color：tab 上的文字默认颜色
  • selectedColor：tab 上的文字选中时的颜色
  • list：tab 的列表，详见 list 属性说明，最少2个、最多5个 tab
    • pagePath：页面路径，必须在 pages 中先定义
    • iconPath：图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
    • selectedIconPath：选中时的图片路径，icon 大小限制为40kb，建议尺寸为 81px * 81px
    • text：tab 上按钮文字

2. 图标

1、访问 图标网站，搜索选择喜欢的图标

2、点击作者

3、点击图标集

4、选择所有需要的图标

5、加入购物车

6、添加到个人项目中

7、个人主页 > 我的项目

8、下载所需图标

9、选择颜色，下载灰色图标，做为未选中时图标。

10、选择绿色，下载绿色图标，做为选中时图标。

3. 全局 CSS

global.css：

page {background-color: #f2f3f4;min-height: 100vh;
}
* {box-sizing: border-box;
}

设置背景色为灰色。

4. 首页

4.1 整体框架

4.2 完整代码

<template><view><!-- 轮播图 --><view><swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371"><swiper-item v-for="item in imgs" :key="item" ><image :src="item" alt="" mode="widthFix" style="width: 100%;" /></swiper-item></swiper></view><!-- 公告 --><view style="margin: 10px;"><view style="padding: 5px 10px; background-color: white; font-size: 12px; border-radius: 5px; display: flex; align-items: center;"><uni-icons type="sound" size="20"></uni-icons><view>{{ notice }}</view></view></view><!-- 分类 --><view style="margin: 10px; padding: 5px 10px; background-color: white; border-radius: 5px;"><uni-row><uni-col :span="6"><view class="grid-item-box" @click="clickItem('时令水果')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/时令水果.png"></image><text style="font-size: 13px; margin-top: 5px;">时令水果</text></view></uni-col><uni-col :span="6"><view class="grid-item-box" @click="clickItem('品质肉禽')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/品质肉禽.png"></image><text style="font-size: 13px; margin-top: 5px;">品质肉禽</text></view></uni-col><uni-col :span="6"><view class="grid-item-box" @click="clickItem('新鲜水产')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/新鲜水产.png"></image><text style="font-size: 13px; margin-top: 5px;">新鲜水产</text></view></uni-col><uni-col :span="6"><view class="grid-item-box" @click="clickItem('蔬菜蛋品')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/蔬菜蛋品.png"></image><text style="font-size: 13px; margin-top: 5px;">蔬菜蛋品</text></view></uni-col></uni-row></view><!-- 商品列表 --><view style="margin: 10px; font-size: 12px;"><uni-row :gutter='10'><uni-col :span='12' v-for="item in goodsList" :key="item.name"><view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;"><image :src="item.img" mode="widthFix" style="width: 100%;"></image><view class="lineEllipsis">{{ item.name }}</view><view style="color: red; margin-top: 5px; font-weight: bold; font-size: 14px;">￥{{ item.price }}</view><view style="text-align: right;"><uni-icons type="plus" size="25" style="color: #666;" @click="addShoppingCart(item)"></uni-icons></view></view></uni-col></uni-row></view></view>
</template><script>export default {data() {return {imgs: ['https://m.360buyimg.com/babel/jfs/t20260719/200274/27/38564/103066/64b8a92bF9ff64827/86b0873317ff1670.jpg','https://m.360buyimg.com/babel/jfs/t20260720/127672/11/35840/78112/64ba27ceF7f110966/ec2e2c6c366fa94c.jpg','https://m.360buyimg.com/babel/jfs/t20260713/161699/23/38353/136417/64b0a7dbF5e25fcdd/ba43ddee33949c1c.png',],notices: [{content: "时令水果今日半价"},{content: "百亿补贴限时抢购"},{content: "9块9特卖专场"},],notice: '',goodsList: [{ name: '固伦天原 农家土鸡蛋现捡新鲜谷物虫草柴鸡蛋初生蛋简装 20枚装', price: 19.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg' },{ name: '大口鲜 熟冻帝王蟹礼盒装 海鲜礼包 整只 3.2-3.6斤现货 海产礼盒', price: 79.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg' },{ name: '仙泉湖三去星洲红 500g*1条 净膛冷冻罗非鱼海鲜食材 刺少', price: 99.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg' },{ name: '洛川苹果80mm大果 净重4.2斤 陕西延安红富士新鲜时令生鲜水果', price: 19.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg' },{ name: '妙果樱广西青芒新鲜水果大青芒果当季时令生鲜芒果 3斤大果（单果250g+）', price: 29.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg' },]}},onLoad() {this.loadNotice();},methods: {loadNotice() {let i = 0this.notice = this.notices[i++].contentsetInterval(() => {this.notice = this.notices[i++].contentif (i === this.notices.length) {i = 0}}, 5000)},// 点击分类，跳转页面clickItem(name) {console.log(name)},// 点击添加到购物车addShoppingCart(item) {console.log(item.name)}}}
</script><style>.grid-item-box {display: flex;flex-direction: column;align-items: center;justify-content: center;}.lineEllipsis {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;/* 超出几行省略 */overflow: hidden;}
</style>

4.3 轮播图 swiper

详见官网 滑块视图容器

<view><swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371"><swiper-item v-for="item in imgs" :key="item" ><image :src="item" alt="" mode="widthFix" style="width: 100%;" /></swiper-item></swiper>
</view>imgs: ['https://m.360buyimg.com/babel/jfs/t20260719/200274/27/38564/103066/64b8a92bF9ff64827/86b0873317ff1670.jpg','https://m.360buyimg.com/babel/jfs/t20260720/127672/11/35840/78112/64ba27ceF7f110966/ec2e2c6c366fa94c.jpg','https://m.360buyimg.com/babel/jfs/t20260713/161699/23/38353/136417/64b0a7dbF5e25fcdd/ba43ddee33949c1c.png',
]

• circular ：是否采用衔接滑动，即播放到末尾后重新回到开头
• autoplay ：是否自动切换
• interval：自动切换时间间隔
• duration：滑动动画时长
• indicator-dots：是否显示面板指示点
• indicator-color：指示点颜色
• indicator-active-color：当前选中的指示点颜色

4.3.1 image

• src：图片资源地址
• mode：图片裁剪、缩放的模式。widthFix：宽度不变，高度自动变化，保持原图宽高比不变

4.4 公告

<view style="margin: 10px;"><view style="padding: 5px 10px; background-color: white; font-size: 12px; border-radius: 5px; display: flex; align-items: center;"><uni-icons type="sound" size="20"></uni-icons><view>{{ notice }}</view></view>
</view>notices: [{content: "时令水果今日半价"},{content: "百亿补贴限时抢购"},{content: "9块9特卖专场"},
],
notice: '',loadNotice() {let i = 0this.notice = this.notices[i++].contentsetInterval(() => {this.notice = this.notices[i++].contentif (i === this.notices.length) {i = 0}}, 5000)
}onLoad() {this.loadNotice();
}

4.4.1 uni-icons

下载安装 扩展组件 uni-icons

4.5 分类 uni-row、uni-col

<view style="margin: 10px; padding: 5px 10px; background-color: white; border-radius: 5px;"><uni-row><uni-col :span="6"><view class="grid-item-box" @click="clickItem('时令水果')"><image mode="widthFix" style="width: 50%;" src="../../static/imgs/时令水果.png"></image><text style="font-size: 13px; margin-top: 5px;">时令水果</text></view></uni-col>... 省略</uni-row>
</view>clickItem(name) {console.log(name)
}.grid-item-box {display: flex;flex-direction: column;align-items: center;justify-content: center;
}

• uni-row：流式栅格系统，随着屏幕或视口分为 24 份，可以迅速简便地创建布局。
• span：栅格占据的列数
• display: flex;：使图片和文字垂直居中。
• width: 50%;：图片排版更好看。
• @click=“clickItem(‘时令水果’)”：点击事件可以用于跳转页面。

4.6 商品列表 uni-row、uni-col

<view style="margin: 10px; font-size: 12px;"><uni-row :gutter='10'><uni-col :span='12' v-for="item in goodsList" :key="item.name"><view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;"><image :src="item.img" mode="widthFix" style="width: 100%;"></image><view class="lineEllipsis">{{ item.name }}</view><view style="color: red; margin-top: 5px; font-weight: bold; font-size: 14px;">￥{{ item.price }}</view><view style="text-align: right;"><uni-icons type="plus" size="25" style="color: #666;" @click="addShoppingCart(item)"></uni-icons></view></view></uni-col></uni-row>
</view>goodsList: [{ name: '固伦天原 农家土鸡蛋现捡新鲜谷物虫草柴鸡蛋初生蛋简装 20枚装', price: 19.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg' },{ name: '大口鲜 熟冻帝王蟹礼盒装 海鲜礼包 整只 3.2-3.6斤现货 海产礼盒', price: 79.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg' },{ name: '仙泉湖三去星洲红 500g*1条 净膛冷冻罗非鱼海鲜食材 刺少', price: 99.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg' },{ name: '洛川苹果80mm大果 净重4.2斤 陕西延安红富士新鲜时令生鲜水果', price: 19.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg' },{ name: '妙果樱广西青芒新鲜水果大青芒果当季时令生鲜芒果 3斤大果（单果250g+）', price: 29.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg' },
]addShoppingCart(item) {console.log(item.name)
}.lineEllipsis {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;/* 超出几行省略 */overflow: hidden;
}

• gutter：栅格间隔
• width: 100%;：图片占满栅格
• .lineEllipsis：文字超出 2 行省略处理
• addShoppingCart：点击添加到购物车