帝国cms小程序搞起来简直好用的不行

首先来一个首页代码

<!--index.wxml-->

<navigationbar-wx title="" logo="{{logoUrl}}" color="#000000" bgColor="#FFFFFF" hideHome="true" showBack="false"></navigationbar-wx>

<scroll-view class="scrollarea" scroll-y type="list" refresher-enabled="{{true}}" refresher-threshold="80" refresher-triggered="{{refreshing}}" bindrefresherrefresh="onRefresh" bindscroll="onPageScroll">

  <view class="index_zhu">

    <!-- 搜索框 -->

    <view class="search-bar">

      <image src="{{searchIconUrl}}" class="search-icon"></image>

      <input type="text" placeholder="搜索课程/图书" class="search-input" />

    </view>

    <!-- 轮播图 -->

    <swiper class="banner" autoplay interval="3000" circular>

      <block wx:for="{{bannerUrls}}" wx:key="*this">

        <swiper-item>

          <image src="{{item}}" mode="aspectFill" class="banner-img" />

        </swiper-item>

      </block>

    </swiper>

    <!-- 快捷入口 -->

    <view class="quick-entries">

      <view class="entry">

        <image src="{{bkkc}}" class="entry-icon" />

        <text>爆款课程</text>

      </view>

      <view class="entry">

        <image src="{{lbkc}}" class="entry-icon" />

        <text>老板课程</text>

      </view>

      <view class="entry">

        <image src="{{ggkc}}" class="entry-icon" />

        <text>高管进阶</text>

      </view>

      <view class="entry">

        <image src="{{zcts}}" class="entry-icon" />

        <text>职场提升</text>

      </view>

    </view>

    <!-- 功能按钮 -->

    <view class="action-buttons">

      <view class="button">

        <text class="button-title">我的学习</text>

        <text class="button-subtitle">从这里开始学习</text>

      </view>

      <view class="button">

        <text class="button-title">全部课程</text>

        <text class="button-subtitle">选好课，用高修成长汇</text>

      </view>

    </view>

    <!-- VIP会员广告 -->

    <view class="vip-ad">

      <view class="vip-content">

        <view class="vip-info">

          <view class="vip-title">

            <image src="{{vipicon}}" class="vip-crown" />

            VIP会员专享

          </view>

          <text class="vip-desc">开通VIP，尊享全部课程免费学</text>

          <view class="vip-benefits">

            <text class="vip-benefit-tag">专属内容</text>

            <text class="vip-benefit-tag">优先客服</text>

            <text class="vip-benefit-tag">免费课程</text>

          </view>

        </view>

        <view>

          <view class="vip-button" bindtap="onVipButtonTap">立即开通</view>

          <view class="vip-price">仅需 <text>¥99</text> /年</view>

        </view>

      </view>

    </view>

    <!-- 爆款推荐 -->

    <view class="section">

      <view class="section-header">

        <view class="section-tabs">

          <block wx:for="{{courseCategories}}" wx:key="classid">

            <text class="tab-item {{activeTab === index ? 'active' : ''}}" data-index="{{index}}" bindtap="switchTab">{{item.name}}</text>

          </block>

        </view>

        <text class="section-more" bindtap="goToCourseList">更多 ></text>

      </view>

      <view class="section-content">

        <block wx:for="{{courseCategories}}" wx:key="classid">

          <view class="tab-content {{activeTab === index ? 'active' : ''}}">

            <view class="item-list">

              <block wx:if="{{courseListByCategory[item.classid] && courseListByCategory[item.classid].length > 0}}">

                <block wx:for="{{courseListByCategory[item.classid]}}" wx:key="id">

                  <view class="item" data-id="{{item.id}}" data-type="course" bindtap="onItemTap">

                    <image src="{{item.titlepic || ontitlepic}}" class="item-image" />

                    <view class="item_box">

                      <text class="item-title">{{item.title}}</text>

                      <text class="item-description">{{item.smalltext.length > 30 ? item.smalltext.substring(0,30) + '...' : item.smalltext}}</text>

                      <view class="item-tags">

                        <text class="tag hot" wx:if="{{item.type == '3'}}">热销</text>

                        <text class="tag new" wx:if="{{item.isnew == '1'}}">新上架</text>

                      </view>

                      <view class="item-price-container">

                        <text class="item-price">¥{{item.price}}</text>

                        <view class="item-sales">

                          <image src="{{eyeicon}}" class="meta-icon"></image>

                          <text>{{item.sales}}</text>

                        </view>

                      </view>

                      <text class="item-points" wx:if="{{item.points != 0}}">{{item.points}}积分</text>

                    </view>

                  </view>

                </block>

              </block>

              <block wx:else>

                <view wx:if="{{loadingCourses}}" class="loading-text">加载中...</view>

                <view wx:else class="empty-text" style="text-align: center;">暂无课程</view>

              </block>

            </view>

          </view>

        </block>

      </view>

    </view>

    <!-- 猜你喜欢 -->

    <view class="section">

      <view class="section-header">

        <text class="section-title">猜你喜欢</text>

        <text class="section-more" bindtap="goToCourseList">更多 ></text>

      </view>

      <view class="section-content">

        <view class="item-list">

          <block wx:if="{{recommendList && recommendList.length > 0}}">

            <block wx:for="{{recommendList}}" wx:key="id">

              <view class="item" data-id="{{item.id}}" data-type="course" bindtap="onItemTap">

                <image src="{{item.titlepic || ontitlepic}}" class="item-image" />

                <view class="item_box">

                  <text class="item-title">{{item.title}}</text>

                  <view class="item-price-container">

                    <text class="item-price">¥{{item.price}}</text>

                    <view class="item-sales">

                      <image src="{{eyeicon}}" class="onclick-icon"></image><text class="onclick">{{item.onclick}}</text>

                    </view>

                  </view>

                </view>

              </view>

            </block>

          </block>

          <block wx:else>

            <view class="empty-text" style="text-align: center;">暂无推荐课程</view>

          </block>

        </view>

      </view>

    </view>

    <!-- 热门图书 -->

    <view class="section">

      <view class="section-header">

        <text class="section-title">热门图书</text>

        <text class="section-more" bindtap="goToBookList">更多 ></text>

      </view>

      <view class="section-content">

        <view class="item-list">

          <block wx:if="{{bookList && bookList.length > 0}}">

            <block wx:for="{{bookList}}" wx:key="id">

              <view class="book-item" data-id="{{item.id}}" data-type="book" bindtap="onItemTap">

                <view class="book-image">

                  <image src="{{item.titlepic || '/images/book.jpg'}}" mode="aspectFill" />

                </view>

                <text class="item-title">{{item.title}}</text>

                <text class="item-price">¥{{item.price}}</text>

              </view>

            </block>

          </block>

          <block wx:else>

            <view class="empty-text" style="text-align: center;">暂无图书数据</view>

          </block>

        </view>

      </view>

    </view>

    <!-- 普通文章 -->

    <view class="section">

      <view class="section-header">

        <text class="section-title">精选文章</text>

        <text class="section-more" bindtap="goToNewsList">更多 ></text>

      </view>

      <view class="section-content">

        <view class="article-list">

          <block wx:if="{{articleList && articleList.length > 0}}">

            <block wx:for="{{articleList}}" wx:key="id">

              <view class="article-item" data-id="{{item.id}}" bindtap="onArticleTap">

                <image src="{{item.titlepic || articleDefaultImage}}" class="article-image" mode="aspectFill" />

                <view class="article-content">

                  <text class="article-title">{{item.title}}</text>

                  <view class="article-meta">

                    <view class="meta-item left">

                      <image src="{{eyeicon}}" class="meta-icon"></image>

                      <text>{{item.onclick || '0'}}阅读</text>

                    </view>

                    <view class="meta-item right">

                      <image src="{{timeicon}}" class="meta-icon"></image>

                      <text>{{item.newstime}}</text>

                    </view>

                  </view>

                </view>

              </view>

            </block>

          </block>

          <block wx:else>

            <view class="empty-text" style="text-align: center;">暂无文章数据</view>

          </block>

        </view>

      </view>

    </view>

   

  </view>

  <view class="dixian">

      <text class="dixian-text">我也是有底线的</text>

    </view>

</scroll-view>

<!-- 底部导航 -->

<view class="tab-bar">

  <view class="tab-item {{currentTab === 0 ? 'active' : ''}}" data-index="0" bindtap="switchTabBar">

    <image src="{{currentTab === 0 ? homeactive : home}}" class="tab-icon" />

    <text>首页</text>

  </view>

  <view class="tab-item {{currentTab === 1 ? 'active' : ''}}" data-index="1" bindtap="switchTabBar">

    <image src="{{currentTab === 1 ? courseactive : bkkc}}" class="tab-icon" />

    <text>课程</text>

  </view>

  <view class="tab-item {{currentTab === 2 ? 'active' : ''}}" data-index="2" bindtap="switchTabBar">

    <image src="{{currentTab === 2 ? bookactiveicon : bookicon}}" class="tab-icon" />

    <text>图书</text>

  </view>

  <view class="tab-item {{currentTab === 3 ? 'active' : ''}}" data-index="3" bindtap="switchTabBar">

    <view class="tab-icon-container">

      <image src="{{currentTab === 3 ? carticon : carticon}}" class="tab-icon" />

      <view class="cart-badge">3</view>

    </view>

    <text>购物车</text>

  </view>

  <view class="tab-item {{currentTab === 4 ? 'active' : ''}}" data-index="4" bindtap="switchTabBar">

    <image src="{{currentTab === 4 ? usericon : usericon}}" class="tab-icon" />

    <text>我的</text>

  </view>

</view>