赞
踩
首先先下载Hbuilder和微信开发者工具 (都是傻瓜式安装),然后注册小程序账号:
拿到appid:
打开Hbuilder创建一个项目:
简单配置一下:将第一步获得的appid输入在此
打开微信开发者工具进行配置:
打开服务端口(不然项目无法通过微信开发者工具打开):
运行项目:
成功界面:
在page右键新建页面,所需页面如图:
打开uniapp官网:
下载这两个组件:
创建默认样式:
global.css :
- *{
- box-sizing: border-box;
- }
- page{
- background-color: #f5f5f5;
- color: #333;
- }
在main.js引入:
import './static/css/global.css'
修改pages.json:
- {
- "pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
- {
- "path": "pages/index/index",
- "style": {
- "navigationBarTitleText": "首页"//这里如果不写会采用项目名
- }
- },
- {
- "path" : "pages/category/category",
- "style" :
- {
- "navigationBarTitleText" : "",
- "enablePullDownRefresh" : false
- }
- },
- {
- "path" : "pages/user/user",
- "style" :
- {
- "navigationBarTitleText" : "",
- "enablePullDownRefresh" : false
- }
- }
- ],
- "globalStyle": {
- "navigationBarTextStyle": "white",
- "navigationBarTitleText": "uni-app",//项目名
- "navigationBarBackgroundColor": "#3cb371",
- "backgroundColor": "#F8F8F8"
- },
- "uniIdRouter": {},
- "condition" : { //模式配置,仅开发期间生效
- "current": 0, //当前激活的模式(list 的索引项)
- "list": [
- {
- "name": "", //模式名称
- "path": "", //启动页面,必选
- "query": "" //启动参数,在页面的onLoad函数里面得到
- }
- ]
- },
- "tabBar": {//配置导航栏
- "selectedColor": "#FFD700",
- "list": [
- {
- "pagePath": "pages/index/index",
- "iconPath": "static/logo.png",
- "selectedIconPath": "static/logo.png",
- "text": "首页"
- },
- {
- "pagePath": "pages/category/category",
- "iconPath": "static/logo.png",
- "selectedIconPath": "static/logo.png",
- "text": "分类"
- },
- {
- "pagePath": "pages/user/user",
- "iconPath": "static/logo.png",
- "selectedIconPath": "static/logo.png",
- "text": "我的"
- }
- ]
- }
- }

index.vue:
- <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;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="background-color: white; margin: 5px 0; border-radius: 10px;">
- <uni-row>
- <uni-col :span="6">
- <view class="grid-item-box">
- <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
- <text style="font-size: 13px; margin-top: 5px;">时令水果</text>
- </view>
- </uni-col>
- <uni-col :span="6">
- <view class="grid-item-box">
- <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
- <text style="font-size: 13px; margin-top: 5px;">品质肉禽</text>
- </view>
- </uni-col>
- <uni-col :span="6">
- <view class="grid-item-box">
- <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
- <text style="font-size: 13px; margin-top: 5px;">新鲜水产</text>
- </view>
- </uni-col>
- <uni-col :span="6">
- <view class="grid-item-box">
- <image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image>
- <text style="font-size: 13px; margin-top: 5px;">蔬菜蛋品</text>
- </view>
- </uni-col>
- </uni-row>
- </view>
- <view style="margin: 5px 0; 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="addCart(item)"></uni-icons></view>
- </view>
- </uni-col>
- </uni-row>
- </view>
- </view>
- </template>
-
- <script>
- export default {
- data() {
- return {
- imgs:[
- require('../../static/logo.png'),
- require('../../static/logo.png'),
- require('../../static/logo.png'),
- ],
- notices: [
- {content: "亲哥哥哥今晚电商直播真的很棒棒噢"},
- {content: "啊真的是 uniapp有手就会啊"},
- {content: "真的吗?这么easy?"},
- {content: "不信你去看看青哥哥的教程呗"},
- ],
- 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.loadnotince()
- },
- methods: {
- loadnotince(){
- let i=0
- this.notice=this.notices[0].content
- setInterval(()=>{
- this.notice=this.notices[i++].content
- if(i==this.notices.length){
- i=0
- }
- },5000)
- }
- }
- }
- </script>
-
- <style>
- .content {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- }
-
- .logo {
- height: 200rpx;
- width: 200rpx;
- margin-top: 200rpx;
- margin-left: auto;
- margin-right: auto;
- margin-bottom: 50rpx;
- }
-
- .text-area {
- display: flex;
- justify-content: center;
- }
-
- .title {
- font-size: 36rpx;
- color: #8f8f94;
- }
- .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>

最终效果:
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。