El applet de WeChat realiza un centro comercial (con código fuente)

En 2018, creé una cuenta oficial de WeChat para los reembolsos de compras de Taobao. Ha estado en funcionamiento durante casi 5 años y ha acumulado muchos seguidores. Recientemente, algunos usuarios han comentado si es posible mostrar una lista de productos promocionales en la cuenta oficial y si debe tener una función de búsqueda. Para agradecer a los fans y amigos por su apoyo a largo plazo, el autor dedicó una semana a desarrollar un miniprograma de WeChat en su tiempo libre. Los detalles son los siguientes:

1. Página de inicio

Incluye visualización en carrusel de imágenes de eventos, visualización de miniaturas de productos de eventos e información básica, barra de pestañas deslizante horizontal, cuadro de búsqueda, etc.

<!--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. Página de visualización de detalles del evento

Hay dos tipos de páginas de visualización de detalles de eventos, que se pueden redirigir según el tipo. Una es mostrar detalles de eventos, principalmente imágenes de eventos, contenido de eventos, enlaces de eventos, etc.

<!--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>

El otro es mostrar productos de eventos, incluidas imágenes de eventos, contenido de eventos y listas de productos de eventos.

<!--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. Página de visualización de detalles del producto

Los detalles del producto muestran el carrusel de productos y la información del producto.

<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. La página de búsqueda admite la clasificación por volumen de ventas, precio, etc.

<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. Mi página

Muestra el saldo del usuario, el reembolso total y otra información.

<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. Página de pedido

Mostrar la lista de órdenes de rappel pendientes y órdenes de rappel

<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>

Debido al espacio limitado, no se muestra el contenido relevante de wss y ts, los lectores pueden escanear el código QR en el WeChat del autor para obtenerlo. ¡Gracias por tu apoyo!