[解读小程序]购物车DEMO
分析的程序来源:
https://github.com/SeptemberMaples/wechat-weapp-demo
作者: SeptemberMaples
购物车DEMO 比较像是项目中的一个模块了. 代码写的很好,一看就出自老司机之手. 感谢作者的开源精神!
效果图
微菜单页面
点菜页面
展示的数据为纯静态数据,只为熟悉组件和基本用法。
注:仅【堂食】这个类别下有demo数据
app配置
{
"pages":[
"pages/index/index",
"pages/components/dishes/dishes",
"pages/components/take/take"
],
"window":{
"backgroundColor":"#f4f4f4",//背景色
"backgroundTextStyle":"light", //背景文本样式
"navigationBarBackgroundColor": "orange", //导航栏背景色
"navigationBarTitleText": "美食汇微菜单",//导航栏文本
"navigationBarTextStyle":"white"//导航栏文本颜色
}
}
page数组记录中记录了小程序中的页面数量, 其中take页面没有代码.
这里直接借鉴的是app.wxss中的写法
/**app.wxss**/
.container {
height: 100%;
box-sizing: border-box;
background-color: #f4f4f4;
}
.flex-wrap{
display: flex;
}
.flex-item{
flex: 1;
}
.flex-wrap.flex-direction-col{
flex-direction: column;
}
.flex-wrap.flex-direction-row{
flex-direction: row;
}
定义了最常用的一些样式. 可以很方便的进行样式的组合.
app.js中就是helloworld的小程序的代码. 没什么好说的.
微菜单页面 index
index.wxml
从页面上来看, 头部是一个swiper, 下面是一些动态排列的view或者button.
<view class="container flex-wrap flex-direction-col">
<view class="my-swiper">
<swiper indicator-dots="{
{
indicatorDots}}"
autoplay="{
{
autoplay}}" interval="{
{
interval}}" duration="{
{
duration}}">
<block wx:for="{
{
imgUrls}}">
<swiper-item>
<image src="{
{
item}}" class="slide-image" height="150"/>
</swiper-item>
</block>
</swiper>
</view>
<!-- 分类导航 -->
<view class="nav-block wrap">
<block wx:for="{
{
navItems}}">
<view class="wrap-item {
{
item.isSplot ? 'exp' : ''}}">
<navigator url="../components/<