WeChatアプレットでショッピングモールを実現（ソースコード付き）

2018年にタオバオショッピングリベートのWeChat公式アカウントを作成し、5年近く運営し、多くのファンを獲得してきました。最近、公式アカウントにプロモーション商品の一覧を表示できないか、検索機能が必要だというユーザーからの意見がありました。ファンや友人の長年のサポートに感謝するため、著者は余暇を利用して 1 週間かけて WeChat ミニプログラムを開発しました。

1. ホームページ

イベント写真のカルーセル表示、イベント商品のサムネイルや基本情報の表示、横スライドタブバー、検索ボックスなど。

<!--pdd_index.wxml-->
<import src="components/user_guide/user_guide"/>
<!--顶部搜素框-->
<view class="container">
  <view class="search">
    <view class="searchlong">
      <image class="searchico" src="/icon/search.jpeg"></image>
      <input class="searchkuang" type="text" placeholder="点击输入商品名称" confirm-type="search" bindconfirm="searchGoods" />
    </view>
  </view>

  <!--顶部轮播图-->
  <view class="luobotu">
    <swiper class="swiperImg" autoplay="{
    
    {autoplay}}" interval="{
    
    {interval}}" indicator-dots="true" circular="true" indicator-color="white" indicator-active-color="orange">
      <block wx:for="{
    
    {activityList}}" wx:key="index">
        <swiper-item data-id="{
    
    {item.id}}" data-title="{
    
    {item.title}}" data-jumpType="{
    
    {item.jumpType}}" 
        data-activityTags="{
    
    {item.activityTags}}" data-activityDesc="{
    
    {item.activityDesc}}" data-platLink="{
    
    {item.platLink}}" 
        data-itemId="{
    
    {item.itemId}}" data-imgUrl="{
    
    {item.imgUrl}}" data-jType="{
    
    {item.type}}" bindtap="jump_activity">
          <image class = "lunboimg" src="{
    
    {item.imgUrl}}"></image>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <!--滑动tabs-->
  <view class="listPar">
    <scroll-view scroll-x="true" class="nav" scroll-left="{
    
    {navScrollLeft}}" scroll-with-animation="{
    
    {true}}"  show-scrollbar="false" enhanced="true">
      <block wx:for="{
    
    {navData}}" wx:for-index="idx" wx:for-item="navItem" wx:key="idx" bindtap="switchNav">
        <view class="nav-item {
    
    {currentTab == idx ?'active':''}}" data-current="{
    
    {idx}}" bindtap="switchNav" data-id="{
    
    {navItem.platIndex}}">
          <view>{
    
    {navItem.text}}</view>
          <view class="nav-line {
    
    {currentTab == idx ?'active':''}}"></view>
        </view>
      </block>
    </scroll-view>
  </view>
  <!-- 页面内容 -->
  <scroll-view scroll-y="{
    
    {isScroll}}" scroll-top='{
    
    {topNum}}' class="scroll-c">
    <image src='../../icon/gotop.jpg' class='goTop' hidden='{
    
    {!floorstatus}}' bindtap="goTop"></image>
    <block wx:for="{
    
    {list_content}}" wx:key="index">
      <view class="list_content" data-id="{
    
    {item.spuId}}" data-name="{
    
    {item.title}}" data-maxLinePrice="{
    
    {item.maxLinePrice}}" 
      data-minSalePrice="{
    
    {item.minSalePrice}}" data-soldNum="{
    
    {item.soldNum}}" data-spuTagList="{
    
    {item.spuTagList}}" 
      data-redBag="{
    
    {item.redBag}}" bindtap="jump_detail">
        <image style="" mode="" src="{
    
    {item.primaryImage}}" binderror="" bindload=""></image>
        <view class="detail">
          <view class="detail_title">{
    
    {item.title}}</view>
          <view class="money_detail">
            <view class="icon_content">
              <image class="icon_img" style="width: 20px;height: 20px" src="/img/icon_Popup_pdd.png"></image>
              <text class="icon_title">原价：</text>        
            </view>    
            <view class="price_sty">
              ￥{
    
    {item.maxLinePrice}}                    
            </view>
          </view>
          <view class="money_detail">
            <view class="icon_content">
              <image class="icon_img" style="width: 20px;height: 20px"  src="/img/[email protected]" ></image>
              <text class="icon_title">到手：</text>        
            </view>    
            <view class="price_sty">
              ￥{
    
    {item.minSalePrice}}            
            </view>
          </view>
          <view class="money_detail">
            <view class="icon_content">
              <image class="icon_img" style="width: 20px;height: 20px"  src="/img/[email protected]"></image>
              <text class="icon_title">返利：</text>        
            </view>    
            <view class="save_money">
              ￥{
    
    {item.redBag}}
            </view>
          </view>
        </view>
      </view>
    </block>
  </scroll-view>
  <view class="loading" wx:if="{
    
    {loading}}">
    正在加载中......
  </view>
  <view class="loading" wx:if="{
    
    {loaded}}">
    没有更多数据
  </view>
</view>
<!--弹窗获取用户信息-->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{
    
    {modalStatus}}"></view>
<view class="modal-dialog" wx:if="{
    
    {modalStatus}}">
  <view class="modal-title">微信登录</view>
  <view class="modal-content">
    <view class="modal-input">
      {
    
    {tipMsg}}
    </view>
  </view>
  <view class="modal-footer">
    <!--<view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>-->
    <button class="btn-confirm" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">确定</button>
  </view>
</view>

2.イベント詳細表示ページ

イベント詳細表示ページには2種類あり、種類に応じてリダイレクトできます。1 つは、主にイベントの写真、イベントの内容、イベントのリンクなどを含むイベントの詳細を表示することです。

<!--pages/jd_activity_link/activity_link.wxml-->
<view class="container">
  <!--顶部图片-->
  <view class="luobotu">
    <image class = "lunboimg" src="{
    
    {imgUrl}}"></image>
  </view>
  <!--活动详情（文字）-->
  <view class="goods-info">
    <view class="goods-number">
      <view class="goods-price">
        <view class="goods-price-up">{
    
    {title}}</view>
      </view>
    </view>
    <view class="goods-title" wx:if="{
    
    {showDesc}}">
      <view class="goods-name"><text>{
    
    {activityDesc}}</text></view>
    </view>
  </view>
  <!--详情介绍-->
  <view class="desc-content">
    <view class="desc-content__title">
      <span class="desc-content__title--text">{
    
    {showType}}  “{
    
    {title}}”  活动链接</span>
    </view>
  </view>
  <view class="desc-content-textarea">
    <textarea class="desc-content-ta" value="\n{
    
    {platLink}}\n{
    
    {configData.activityLinkTipMsg}}" disabled="true"/>
  </view>
  <view class=".bar-list">
    <button bindtap="copy_link" class="bar-separately">复制商品链接</button>
  </view>
</view>

もう 1 つは、イベント写真、イベント内容、イベント商品リストなどのイベント商品を表示することです。

<!--item_list.wxml-->
<view class="container">
  <!--顶部图片-->
  <view class="luobotu">
    <image class = "lunboimg" src="{
    
    {imgUrl}}"></image>
  </view>
  <!--活动详情（文字）-->
  <view class="goods-info">
    <view class="goods-number">
      <view class="goods-price">
        <view class="goods-price-up">{
    
    {title}}</view>
      </view>
    </view>
    <view class="goods-title">
      <view class="goods-name"><text>{
    
    {activityDesc}}</text></view>
    </view>
  </view>
  <!--详情介绍-->
  <view class="desc-content">
    <view class="desc-content__title">
      <span class="desc-content__title--text">拼多多{
    
    {title}}活动商品库</span>
    </view>
  </view>
  <!-- 页面内容 -->
  <scroll-view scroll-y="{
    
    {isScroll}}" scroll-top='{
    
    {topNum}}' class="scroll-c">
    <image src='../../icon/gotop.jpg' class='goTop' hidden='{
    
    {!floorstatus}}' bindtap="goTop"></image>
    <block wx:for="{
    
    {list_content}}" wx:key="index">
      <view class="list_content" data-id="{
    
    {item.spuId}}" data-name="{
    
    {item.title}}" data-maxLinePrice="{
    
    {item.maxLinePrice}}" 
      data-minSalePrice="{
    
    {item.minSalePrice}}" data-soldNum="{
    
    {item.soldNum}}" data-spuTagList="{
    
    {item.spuTagList}}" 
      data-redBag="{
    
    {item.redBag}}" bindtap="jump_detail">
        <image style="" mode="" src="{
    
    {item.primaryImage}}" binderror="" bindload=""></image>
        <view class="detail">
          <view class="detail_title">{
    
    {item.title}}</view>
          <view class="money_detail">
            <view class="icon_content">
              <image class="icon_img" style="width: 20px;height: 20px" src="/img/icon_Popup_pdd.png"></image>
              <text class="icon_title">原价：</text>        
            </view>    
            <view class="price_sty">
              ￥{
    
    {item.maxLinePrice}}                    
            </view>
          </view>
          <view class="money_detail">
            <view class="icon_content">
              <image class="icon_img" style="width: 20px;height: 20px"  src="/img/[email protected]" ></image>
              <text class="icon_title">到手：</text>        
            </view>    
            <view class="price_sty">
              ￥{
    
    {item.minSalePrice}}            
            </view>
          </view>
          <view class="money_detail">
            <view class="icon_content">
              <image class="icon_img" style="width: 20px;height: 20px"  src="/img/[email protected]"></image>
              <text class="icon_title">返利：</text>        
            </view>    
            <view class="save_money">
              ￥{
    
    {item.redBag}}
            </view>
          </view>
        </view>
      </view>
    </block>
  </scroll-view>
  <view class="loading" wx:if="{
    
    {loading}}">
    正在加载中......
  </view>
  <view class="loading" wx:if="{
    
    {loaded}}">
    没有更多数据
  </view>
</view>

3. 商品詳細表示ページ

製品の詳細には、製品カルーセルと製品情報が表示されます。

<view class="container">
  <!--顶部轮播图-->
  <view class="luobotu">
    <swiper class="swiperImg" autoplay="{
    
    {autoplay}}" interval="{
    
    {interval}}" indicator-dots="true" circular="true" indicator-color="white" indicator-active-color="orange">
    <block wx:for="{
    
    {imgUrls}}">
      <swiper-item>
        <image class = "lunboimg" src="{
    
    {item}}"></image>
      </swiper-item>
    </block>
    </swiper>
  </view>
  <!--商品详情（文字）-->
  <view class="goods-info">
    <view class="goods-number">
      <view class="goods-price">
        <price
          wr-class="class-goods-price"
          symbol-class="class-goods-symbol"
          price="{
    
    {minSalePrice}}"
          type="lighter"
        />
        <view class="goods-price-up">起</view>
        <price wr-class="class-goods-del" price="{
    
    {maxLinePrice}}" type="delthrough" />
      </view>
      <view class="sold-num">好评{
    
    {goodComments}}%</view>
    </view>
    <view class="goods-activity">
      <view class="tags-container">
        <view wx:for="{
    
    {spuTagList}}" data-promotionId="{
    
    {item.id}}" wx:key="index" wx:if="{
    
    {index<4}}">
            <view class="goods-activity-tag">{
    
    {item.title}}</view>
        </view>
      </view>
    </view>
    <view class="goods-title">
      <view class="goods-name">{
    
    {name}}</view>
    </view>
  </view>
  <!--详情介绍-->
  <view class="desc-content">
    <view class="desc-content__title">
      <span class="desc-content__title--text">详情介绍</span>
    </view>
    <view class="item_img_list" wx:if="{
    
    {imgUrls.length > 0}}" wx:for="{
    
    {imgUrls}}" wx:key="index">
      <image class = "itemimg" src="{
    
    {item}}"></image>
    </view>
  </view>
  <view class="goods-bottom-operation">
    <view class=".bar-list">
      <view bindtap="copy_pwd" class="bar-separately">复制链接购买</view>
      <view bindtap="toBuyNow" class="bar-buy">京东小程序购买</view>
    </view>
  </view>
</view>

4. 検索ページでは販売数量、価格などによる並べ替えに対応しています。

<view class='sort-wrap'>
  <view class='sort-btn' bindtap="choosesort0" style="color:{
    
    {pageBackgroundColor}}">
    综合
  </view>
  <view class='sort-btn' data-index="{
    
    {daindex1}}" bindtap="choosesort1">
    {
    
    {configData.soldNumMsg}}
    <image src="{
    
    {imageurl1}}"></image>
  </view>
  <view class='sort-btn' data-index="{
    
    {daindex2}}" bindtap="choosesort2">
    {
    
    {configData.priceSortMsg}}
    <image src="{
    
    {imageurl2}}"></image>
  </view>
</view>
<scroll-view scroll-y="true">
<image src='../../icon/gotop.jpg' class='goTop' hidden='{
    
    {!floorstatus}}' bindtap="goTop"></image>
<block wx:for="{
    
    {list_content}}" wx:key="index">
    <view class="list_content" data-id="{
    
    {item.spuId}}" data-name="{
    
    {item.title}}" data-maxLinePrice="{
    
    {item.maxLinePrice}}" 
      data-minSalePrice="{
    
    {item.minSalePrice}}" data-soldNum="{
    
    {item.soldNum}}" data-spuTagList="{
    
    {item.spuTagList}}" 
            data-redBag="{
    
    {item.redBag}}" bindtap="jump_detail">
        <image style="" mode="" src="{
    
    {item.primaryImage}}" binderror="" bindload=""></image>
        <view class="detail">
            <view class="detail_title">{
    
    {item.title}}</view>
            <view class="money_detail">
                <view class="icon_content">
                    <image class="icon_img" style="width: 20px;height: 20px" src="/img/icon_Popup_pdd.png"></image>
                    <text class="icon_title">{
    
    {configData.pddOrignal}}：</text>        
                </view>    
                <view class="price_sty">
                    {
    
    {configData.priceFlag}}{
    
    {item.maxLinePrice}}                    
                </view>
            </view>
            <view class="money_detail">
                <view class="icon_content">
                    <image class="icon_img" style="width: 20px;height: 20px"  src="/img/[email protected]" ></image>
                    <text class="icon_title">{
    
    {configData.tbSubtraction}}：</text>        
                </view>    
                <view class="price_sty">
                    -{
    
    {configData.priceFlag}}{
    
    {item.differ}}            
                </view>
            </view>
            <view class="money_detail">
                <view class="icon_content">
                    <image class="icon_img" style="width: 20px;height: 20px"  src="/img/[email protected]"></image>
                    <text class="icon_title">{
    
    {configData.tbDiscount}}：</text>        
                </view>    
                <view class="save_money">
                    {
    
    {configData.priceFlag}}{
    
    {item.minSalePrice}}
                </view>
            </view>
        </view>
    </view>
</block>
</scroll-view>
<view class="loading" wx:if="{
    
    {loading}}">
    正在加载中......
</view>
<view class="loading" wx:if="{
    
    {loaded}}">
    没有更多数据
</view>

5.マイページ

ユーザー残高、リベート総額、その他の情報を表示します。

<view class="avatar_content">
    <image src="{
    
    {userInfo.avatarUrl}}" class="avatar"/>
    <view class="user_mag">
        <view class="nick_name">{
    
    {userInfo.nickName}}</view>
        <view class="nick_id">ID: {
    
    {userId}}</view>
    </view>
    <i class="iconfont icon-iconfonticonfonti2copycopy my_detail"> </i>        
</view>
<swiper
    class="lamp"
    autoplay="true"
    interval="2000"
    circular="true"
    vertical="true"
    display-multiple-items="1"
>
    <block wx:for="{
    
    { effectList }}" wx:key="index">
        <swiper-item class="lamp_content">
            <image style="width:50rpx;height:50rpx;border-radius: 50%;" mode="" src="{
    
    {item.picUrl}}" binderror="" bindload=""></image>
            <text> {
    
    { item.userName }}在{
    
    { item.minute }}分钟前成功{
    
    {configData.drawCash}} <text style="color:red">{
    
    { item.amount }}</text> 元至微信余额</text>        
        </swiper-item>
    </block>
</swiper>

<view class="sction_content">
    <view style="margin-bottom:40rpx;overflow:hidden">
        <image src="../../icon/[email protected]" class="put_for_ward"/>
        <view class="money_content">
            <view class="incarnate">{
    
    {presentAmount}}</view>
            <view class="incarnate_msg">{
    
    {configData.presentRebate}}</view>
        </view>
        <image bindtap='presentMoney' class="incarnate_btn" src="../../icon/[email protected]"/>
    </view>
    <view class="line"></view>
    <view class="incarnate_detail">
        <view class="grand_rebate" bindtap='grandRebateMsg'>
            <view class="rebate">{
    
    {actualAmount}}</view>
            <view class="rebate_msg">{
    
    {configData.accumulativeRebate}}</view>
        </view>
        <view class="wait_rebate" bindtap='waitRebateMsg'> 
            <view class="rebate">{
    
    {waitAmount}}</view>
            <view class="rebate_msg">{
    
    {configData.profitRebate}}</view>
        </view>    
    </view>
</view>

<view class="my_indent">
    <view class="indent_title">
        <view>
            {
    
    {configData.myOrders}}
        </view>
        <view class="see_all" bindtap="already_indent">
            <text>查看全部</text>        
            <i class="iconfont icon-iconfonticonfonti2copycopy list_icon"> </i>    
        </view>
    </view>
    <view class="my_list" bindtap="wait_indent">
        <image src="../../icon/[email protected]"/>
        <view class="list_title">{
    
    {configData.toAwardOrders}}</view>
        <view class="list_description">
            <text class="iconfont icon-iconfonticonfonti2copycopy list_icon"> </text>        
            <text>{
    
    {configData.toAwardOrdersInfo}}</text>    
        </view>
    </view>
    <view class="my_list" bindtap="already_indent">
        <image src="../../icon/[email protected]"/>
        <view class="list_title">{
    
    {configData.awardOrders}}</view>
        <view class="list_description">
            <text class="iconfont icon-iconfonticonfonti2copycopy list_icon"> </text>        
            <text>{
    
    {configData.awardOrdersInfo}}</text>    
        </view>
    </view>
    <view class="my_list">
    <button open-type="contact" bindcontact="handleContact">
      <image src="../../icon/[email protected]" style='width:70rpx;height:70rpx;margin-left:10rpx;margin-right:20rpx'/><view class="list_title">联系客服</view><view class="list_description">
            <text class="iconfont icon-iconfonticonfonti2copycopy list_icon"> </text>        
            <text>任何问题和建议都可以与我们沟通</text>    
        </view>
    </button>
    </view>
</view>
<!--弹窗获取用户信息-->
<view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" wx:if="{
    
    {modalStatus}}"></view>
<view class="modal-dialog" wx:if="{
    
    {modalStatus}}">
  <view class="modal-title">微信登录</view>
  <view class="modal-content">
    <view class="modal-input">
      {
    
    {tipMsg}}
    </view>
  </view>
  <view class="modal-footer">
    <!--<view class="btn-cancel" bindtap="onCancel" data-status="cancel">取消</view>-->
    <button class="btn-confirm" open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="onGotUserInfo">确定</button>
  </view>
</view>

6.注文ページ

保留中のリベート注文とリベート注文のリストを表示します

<view class="title">
    <view class="{
    
    { status == 'waitAward' ? 'active' : ''}}" bindtap="handle_waitAward">待奖励</view>
    <view></view>
    <view class="{
    
    { status == 'award' ? 'active' : ''}}" bindtap="handle_award">已奖励</view>
</view>
<view class="prompt">
    <view wx:if="{
    
    {status === 'waitAward'}}" bindtap="waitAwardMsg">
        <text>{
    
    {configData.toAwardOrdersMsg}}</text>    
        <i class="iconfont icon-iconfonticonfonti2copycopy"></i>    
    </view>
    <view wx:else bindtap="awardMsg">
        <text>{
    
    {configData.awardOrdersMsg}}</text>    
        <i class="iconfont icon-iconfonticonfonti2copycopy"></i>
    </view>
</view>
<view class="order_content" wx:for="{
    
    {orders}}" wx:key="index">
    <view class="order_list_content">
        <view class="order_title">
            <text> {
    
    { item.shopName }} </text>
            <text style="color: #ff6500"> {
    
    { status == 'waitAward' ? '等待确认收货' : '奖励成功发放'}} </text>                
        </view>
        <view class="order_section">
            <block wx:for="{
    
    {item.itemList}}" wx:key="key">
                <view class="order_section_content">
                    <image style="" mode="" src="{
    
    {item.picUrl}}" binderror="" bindload=""></image>
                    <view>{
    
    {item.itemName}}</view>
                </view>
            </block>            
        </view>
        <view class="order_footer">
            共计 {
    
    {item.itemList.length}} 件商品，确认收货后奖励：<text style="font-size: 36rpx; color: #ff6500">{
    
    {item.total}}</text>    
        </view>
    </view>     
</view>
<import src="../../components/user_info_modal/user_info_modal"/>
<template  is="msgItem" data="{
    
    {modalStatus,tipMsg}}"></template>

スペースが限られているため、関連する wss および ts コンテンツは表示されませんが、読者は著者の WeChat で QR コードをスキャンして入手できます。ご協力ありがとうございます！