一.唠嗑

加油

二.参考

在学习语法的时候一定要参考微信小程序开发文档，里面包含了框架，组件，插件等，和其他博主的文章配合使用能够提升效率。

在搭建小程序的时候，肯定会需要用到很多精美的小图片，比如小商城里面的购物车，商城等小图片，请参考这个网址，里面包含了很多小图片，我编写的小程序的图片来源基本上来自于此。

三.小程序功能简介

我做的是一个微信小商城，里面的主要界面：主界面，购物车，个人信息，商品展示。
里面的图片需要自己在项目中建立文件夹，里面所有图片都放在一个文件夹下，方便管理。

3.1主界面

整个界面的最上面我设置了滚动栏，用来展示最新资讯，其实就是模仿饿了么哈哈。然后下面我分成六大主展区，分别是中餐，快餐，水果，海鲜，甜点和饮料。其实就是图片加载，你想展现什么东西可以自己添加

主界面代码：

<!--照片滚动  -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"><block wx:for="{{imgUrls}}"><swiper-item><image src="{{item}}" class="slide-image" width="355" height="150" /></swiper-item></block>
</swiper><!-- 横排打印 -->
<view class="section"><view class="section__title"></view><view class="flex-wrp" style="flex-direction:row;display:flex;"><navigator url="/pages/order/order" hover-class="navigator-hover"><view class="flex-item"><image src="/pages/images/中餐美食.jpg" class="bc_middle"> </image></view></navigator><view class="flex-item"><image src="/pages/images/快餐图标.jpg" class="bc_middle"></image></view><view class="flex-item"><image src="/pages/images/水果.jpg" class="bc_middle"></image></view></view>
</view><!-- 横排打印 -->
<view class="section"><view class="section__title"></view><view class="flex-wrp" style="flex-direction:row;display:flex;"><view class="bc_middle2"><text>中餐</text></view><view class="bc_middle2"><text>快餐</text></view><view class="bc_middle2"><text>水果</text></view></view>
</view><!-- 横排打印 -->
<view class="section"><view class="section__title"></view><view class="flex-wrp" style="flex-direction:row;display:flex;"><view class="bc_middle"><image src="/pages/images/海鲜.jpg" mode="widthFix"></image></view><view class="bc_middle"><image src="/pages/images/甜点.jpg" mode="widthFix"></image></view><view class="bc_middle"><image src="/pages/images/饮料.jpg" mode="widthFix"></image></view></view>
</view><!-- 横排打印 -->
<view class="section"><view class="section__title"></view><view class="flex-wrp" style="flex-direction:row;display:flex;"><view class="bc_middle2"><text>海鲜</text></view><view class="bc_middle2"><text>甜点</text></view><view class="bc_middle2"><text>饮料</text></view></view>
</view>

主界面效果图：

3.2商品展示——中餐

这个界面展示的是一些西餐的东西，比如汉堡鸡翅之类的，我直接放在了中餐，不想改了道理都一样，要想跳转不同的可以直接在主界面的wxml文档中修改。

商品展示代码：

<!--循环滚动-->
<swiper class='swiper' autoplay interval='2000' duration='1000' indicator-dots indicator-color='#fff'><block wx:for="{{swiperImgs}}" wx:key="index"><swiper-item><image src='{{item}}'></image></swiper-item></block>
</swiper><!--主列表-->
<view class='main'><view class='type-list'><view class='type-item' wx:for="{{types}}" wx:key="name"><image src='{{item.img}}'></image><view>{{item.name}}</view></view></view><view class='food-list'><scroll-view scroll-y="true" style="height:400px;"><block wx:for="{{types}}" wx:for-item="type" wx:key="name"><block wx:for="{{type.foods}}" wx:item="food" wx:key="name"><view class='food-card'><!--食物一行信息--><view class="food-img"><!--食物图片-左--><image src='{{item.img}}'></image></view><view><!--食物详细信息-右--><view>{{item.name}}</view><view>￥{{item.price}}</view><view class="flex-wrp" style="flex-direction:row;display:flex;"><view class="flex-item"><image style="width:22px;height:22px" bindtap="add" src='/imgs/add.png' data-id="{{index}}"></image></view><text>{{foodcount[index]}}</text><view class="flex-item"><image style="width:22px;height:22px" bindtap="del" src='/imgs/reduce.png' data-id="{{index}}"></image></view></view></view></view></block></block></scroll-view></view>
</view><view class="cart"><image class="cart-icon" src='/imgs/cart.png'></image><view class="amount"  bindtap="allCount">{{allCount}}</view><view class="price">￥88.7</view><navigator class="submit" url="/pages/order/order"><text>PAY</text></navigator>
</view>

商品展示效果图：

3.3购物车 ShoppingCart

这个购物车我分成了两个大篮子，一个大篮子用来装书本，一个大篮子用来装物品（名字随便取）

购物车代码：

<!--pages/shoppingCart/shoppingCart.wxml-->
<view class='box'><view class='wrapper'><view class="tab-content {{selectBook? 'select': 'noSelect'}}" bindtap='chooseBookCart'>书本</view><view class="tab-content {{selectThing? 'select': 'noSelect'}}" bindtap='chooseThingCart'>物品</view></view>
</view>
<!-- 书本 -->
<view class="cart-box" wx:if="{{selectBook}}"><!-- wx:for 渲染购物车列表 --><view wx:for="{{carts}}" wx:key="{{carts}}" class='cart-goods'><!-- wx:if 是否选择显示不同图标 --><view class='icon-wrapper' bindtap="selectList" data-index="{{index}}"><icon wx:if="{{item.selected}}" class='cart-icon' type="success" color="red"  /><icon wx:else type="circle" class='cart-icon'  /></view><view  class='cart-img'><image class="cart-thumb" src="{{item.picture}}"></image><view class='cart-message'><text class='name'>书名：{{item.bname}}</text><text class='author'>作者：{{item.author}}</text><text class='press'>出版社：{{item.press}}</text><text class='price'>价格：￥{{item.bprice}}</text></view></view><!-- 点击商品图片可跳转到商品详情 --><!-- 删除按钮 --><text bindtap="deleteList" data-index="{{index}}" class='delete'> × </text></view><view wx:if="{{isMyCartShow}}" class='bottom'>没有书本啦~_~</view>
</view>
<!-- 物品 -->
<view class="cart-box" wx:if="{{selectThing}}"><!-- wx:for 渲染购物车列表 --><view wx:for="{{thingCarts}}" wx:key="{{thingCarts}}" class='cart-goods'><!-- wx:if 是否选择显示不同图标 --><view class='icon-wrapper' bindtap="selectListThing" data-index="{{index}}"><icon wx:if="{{item.selected}}" class='cart-icon' type="success" color="red"  /><icon wx:else type="circle" class='cart-icon'  /></view><view  class='cart-img'><image class="cart-thumb" src="{{item.gpicture}}"></image><view class='cart-message'><text class="name">{{item.gname}}</text><text class="author">校区：{{item.gcollege}}</text><text class='author'>成色：{{item.gstatus}}</text><text class='author'>发布者：{{item.usersname}}</text><text class='price'>￥{{item.gprice}}</text></view></view><!-- 点击商品图片可跳转到商品详情 --><!-- 删除按钮 --><text bindtap="deleteListThing" data-index="{{index}}" class='delete'> × </text></view><view wx:if="{{isThingCartShow}}" class='bottom'>没有物品啦~_~</view>
</view>
<!-- 底部操作栏 -->
<view class='cart-bottom'><!-- wx:if 是否全选显示不同图标 --><icon wx:if="{{selectAllStatus}}" class='cart-iconAll' type="success_circle" color="red" bindtap="selectAll" /><icon wx:else type="circle" class='cart-iconAll' color="#ff7100" bindtap="selectAll" /><text class='cart-allSelect' bindtap="selectAll">全选</text><!-- 总价 --><text class='cart-allPrice'>合计:</text><text class='allPrice'>￥{{totalPrice}}</text><button class='btn-red' bindtap='toBuy' form-type='submit'>去结算</button>
</view>

购物车效果图：
图片都是随便加的，有需要的可以自己添加

3.4导航栏

这个是我最喜欢的部分，因为是在全局中设定的，而且我认为对于用户的使用肥肠方便。我是在app.json页面编写代码的，使用的图片也是自己网上找的，然后点击一个小图标，可以从白色变为黑色，表示选中这个图标并且跳转到选中页面。

导航栏代码：

{"pages": ["pages/index1/index1","pages/order/order","pages/shoppingCart/shoppingCart","pages/icecream/icecream","pages/info/info","pages/index/index","pages/logs/logs","pages/menu/menu"],"window": {"backgroundTextStyle": "light","navigationBarBackgroundColor": "6b9","navigationBarTitleText": "哔哩哔哩","navigationBarTextStyle": "black"},"tabBar": {"list": [{"text": "首页","pagePath": "pages/index1/index1","iconPath": "pages/icons/tabBar/home.png","selectedIconPath": "pages/icons//tabBar/home.fill.png"},{"text": "订单","pagePath": "pages/shoppingCart/shoppingCart","iconPath": "pages/icons/tabBar/order.png","selectedIconPath": "pages/icons//tabBar/order.fill.png"},{"text": "购物车","pagePath": "pages/shoppingCart/shoppingCart","iconPath": "pages/icons/tabBar/shoppingCart.png","selectedIconPath": "pages/icons//tabBar/shoppingCart.fill.png"},{"text": "我的","pagePath": "pages/info/info","iconPath": "pages/icons/tabBar/mine.png","selectedIconPath": "pages/icons//tabBar/mine.fill.png"}]},"sitemapLocation": "sitemap.json"
}

效果图的话前面都已经展示了，就是最下面那一行，特别精致好用。

暑假实习——微信小商城相关推荐

前端实习——微信小程序(2)
三.逻辑层 1.概念 1.小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能. 2.逻辑层将数据进行处理后发送给视图 ...
视频教程-微信小程序商城15天从零实战课程-微信开发
微信小程序商城15天从零实战课程 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥499.00 立即订阅 ...
学习成长之路（初章三个月建成微信小程序商城、ArcEngine C# GIS开发入门）
学习成长之路(初章 ) 三个月建成微信小程序商城 .ArcEngine C# GIS开发入门自我简介先简单介绍一下,我是Domen,是一个彻彻底底的新手 . 大一大学大一没好好学习,搞这搞那 ...
视频教程-微信小程序商城-界面设计实战教学(含源代码)-微信开发
微信小程序商城-界面设计实战教学(含源代码) 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥90.00 ...
视频教程-雪狐CentOS7云服务器部署微信小程序商城系统(宝塔面板)-微信开发
雪狐CentOS7云服务器部署微信小程序商城系统(宝塔面板) 1.多年开发和授课经验. 2.精通PHP.前端.Android.iOS等开发技术. 3.希望能将自己所学教给学生. 刘安良 ¥12.00 ...
基于微信小程序的校园二手商城的设计与实现-计算机毕业设计源码+LW文档
毕业论文开题报告 1．本课题的研究意义互联网飞速发展的现在,信息技术和网络技术的不断向上进步提高,互联网广泛应用于人们的生活中.随着经济发展的迅速大学生在大学期间会购买一些闲置物品,并 ...
【微信小程序】基于JavaScript的花店商城小程序微信云开发
[微信小程序]基于JavaScript的花店商城小程序微信云开发用Java Script语言进行一次微信小程序开发文章目录前言一.功能总览二.功能显示 1.搜索框 2.轮播图 3.主题导航栏 ...
都2020年，开发制作微信小程序商城，需要准备什么资料？应该不会不知道吧！
微信小程序使用越来越广泛,而还未入局的对于微信小程序开发需要什么材料甚至不清楚,其实这些材料很简单.总结就是微信支付.微信小程序注册.小程序代码,下面展开说说. 小程序红利从腾讯刚发布的财报看,微信 ...
站长新手入门：从0开始搭建微信小程序商城，不会代码也能开商城（附带源码）
2020年全球疫情肆虐下,经济环境持续低迷,虽然国内已逐渐复苏,但线下消费仍然没法短期回到常态,所以今年开始直播电商.线上零售更加火爆.那么如果一个没有编程基础,或者说稍微懂一点技术的老板,要做小程序 ...

暑假实习——微信小商城