[解读小程序]购物车DEMO

[解读小程序]购物车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/<