Мини-программа WeChat - Торговый центр

Апплет WeChat
Мини-программа WeChat - Торговый центр

предисловие

С появлением и популярностью wepy и mpvue разработка небольших программ становится все более удобной и мощной.Как часть гей-сообщества, нам всем нужно делиться проблемами, с которыми мы сталкиваемся, и способами их решения, чтобы мы могли помощь Больше друзей (дзи) друзей (лао). Если есть какие-либо недостатки в письме, пожалуйста, сделайте ценные предложения.

Краткое введение в мини-программы WeChat

Как мы все знаем, апплет - это своего рода приложение, которое можно использовать без загрузки и установки. Оно реализует мечту о приложении "на кончиках ваших пальцев". Пользователи могут сканировать или искать, чтобы открыть приложение. Он также воплощает в себе концепцию «вышел и ушел», пользователям не нужно заботиться о том, устанавливать ли слишком много приложений, поэтому его уровень разработки относительно прост.

  • Технология разработки: WXML (HTML5), WXSS (CSS), JavaScript
  • Инструменты разработки: vscode (для разработки можно использовать следующие фреймворки), инструменты разработчика WeChat
  • Идеи для разработки: MVVM, говоря простым языком, — это технология, которая освобождает фронтенд-разработчиков от утомительных действий по манипулированию DOM и позволяет данным автоматически обновлять интерфейс.
  • Процесс разработки: вы можете прочитать официальную документацию, загрузить и устанавливать инструменты разработки, а затем использовать APPID для разработки.Мини-программа Простой учебник
  • Единица разработки: rpx, pt, rem и т. д., которые здесь не представлены.
  • Фреймворк разработки: Вот фреймворки нескольких небольших программ, в том числе weui, wepy, mpvue и др. Заинтересованные студенты могут ознакомиться с ними самостоятельно

Как инженер на фронтенд поле битвы, естественно наступить на гром, и немного кисло вручную вырезать страницы без разработки компонентов фреймворка~~ Здесь я поделюсь несколькими ямами, с которыми я столкнулся при разработке нативных мини-программ WeChat.

1. wx.showModal апплета WeChat

При установке цвета шрифта для свойства подтверждения/отмены будет небольшая ямка, код режима:

<view bindtap="test">
    <text>测试</text>
</view>

js代码：
test(e) {
    wx.showModal({
        content: '测试',
        cancelColor: 'red',
        confirmColor: 'rgb(255,0,0)'
    })
}

Этот код отображает все в эмуляторе, и две кнопки меняют цвет. Но когда я посмотрел на свой телефон, я был ошеломлен.

Оказывается, значения цвета этих двух кнопок поддерживают только шестнадцатеричный формат.

js代码：
test(e) {
    wx.showModal({
        content: '测试',
        cancelColor: '#FF0000',
        confirmColor: '#FF0000'
    })
}

Таким образом, две кнопки также могут выйти на телефоне, а цвет был изменен.

2. Прыжок в навигатор апплета Wechat

После входа на страницу сведений о продукте, щелкнув значок «Домой» в левом нижнем углу, вы должны перейти на домашнюю страницу, но она не переходит, и об ошибке не сообщается.

wxml-код:

<navigator hover-class="none"  url="/pages/index/index">
    <image src="/libs/images/home.png"></image>
</navigator>

Тщательно проверив правильность пути и правильность букв, я застрял на этой проблеме на полчаса и, наконец, обнаружил, что есть яма, на которую можно будет наступить, если вы не будете достаточно внимательны.

Учащиеся, которые обычно используют интерфейс wx.switchTab, возможно, не сталкивались с такой ситуацией. Одно свойство в компоненте навигатора имеет открытый тип, а значение по умолчанию — navigation, что соответствует функции wx.navigateTo или wx.navigateToMiniProgram.

Умные ученики должны были видеть проблему Да, домашняя страница, на которую нужно перейти, — это страница tabBar, которая не может быть достигнута в соответствии с методом перехода по умолчанию.
Решение:

<navigator hover-class="none" open-type="switchTab" url="/pages/index/index">
    <image src="/libs/images/home.png"></image>
</navigator>

Добавьте open-type="switchTab" или привяжите событие клика к интерфейсу wx.switchTab.

3. Апплет WeChat scroll-x

Компонент прокрутки апплета также имеет атрибут горизонтального скольжения: scroll-x.
Но для такого новичка, как я, при установке scroll-x прокручиваемый контент будет сжат в несколько строк.
Вот прямое решение:

  1. Установите ширину для scroll-x и установите свойство white-space: nowrap // содержимое не переносится
  2. Установите поле просмотра содержимого в качестве отображения встроенного блочного элемента: встроенный блок

    Может решить проблему, что горизонтально скользящий контент не в одну строку.Ниже я просто вставлю код своего контента в проект.

4. Используйте компонент swiper с компонентом ввода

вопрос: Если компонент ввода абсолютно позиционирован на компоненте swiper, swiper по-прежнему будет закрывать компонент ввода, и будет показан атрибут заполнителя в компоненте ввода.Хотя это не влияет на функцию ввода, это повлияет на отображение эффект входного атрибута Он просто влияет на визуальный эффект.

Эффекты на эмулятор:

需要的效果

Эффекты на мобильных устройствах:

Код:

<view class="hd"> 
    <input  class="input" placeholder="搜索商品，共9803款好物" bindtap="entrySearch" disabled />
    <swiper class="receive">
        <swiper-item >
          <navigator url="/pages/index/receive/receive" hover-class="none">
            <image class="receive_img" src="/libs/images/index.jpg" mode="aspectFill"></image>
          </navigator>
        </swiper-item>
    </swiper>
</view> 

.input {
  position: absolute;
  left: 30rpx;
  top: 10rpx;
  box-sizing: border-box;
  width: 690rpx;
  height: 56rpx;
  border-radius: 45rpx;
  border: 1rpx solid #000;   //证明自己的猜测
  background-color: #fff;
  box-shadow: 0 0 1rpx #ccc;
  text-indent: 185rpx;
  font-size: 0.8rem;
  
}
.receive {
  height: 380rpx;
}
.receive_img {
  width: 750rpx;
  height: 380rpx;  
}

Мы видим, что на симуляторе дисплей нормальный, но на мобильном телефоне он становится квадратным. Я начал устранять проблему. Я думаю, это накрылось? Итак, я добавил рамку: 1rpx solid #000; эта строка кода, после обновления, я обнаружил, что граница черной линии появилась и сразу же исчезла, конечно же! Абсолютное позиционирование перезаписывается.

Решение: добавьте z-index:2 к входному компоненту. Конечно, рекомендуется установить другое окно просмотра для компонента ввода.
Код:

<view class="hd"> 
   <view class="inputSearch"> 
    <input  class="input" placeholder="搜索商品，共9803款好物" bindtap="entrySearch" disabled />
   </view> 
  <swiper class="receive">
    <swiper-item >
      <navigator url="/pages/index/receive/receive" hover-class="none">
        <image class="receive_img" src="/libs/images/index.jpg" mode="aspectFill"></image>
      </navigator>
    </swiper-item>
  </swiper>
</view> 
.inputSearch {
   position: absolute;
  left: 30rpx;
  top: 10rpx;
  box-sizing: border-box;
  width: 690rpx;
  height: 56rpx;
  border-radius: 45rpx;
  z-index: 2;    
  background-color: #fff;
  box-shadow: 0 0 1rpx #ccc; 
}
.input {
  text-indent: 185rpx;
  font-size: 0.8rem;
  
}
.receive {
  height: 380rpx;
}
.receive_img {
  width: 750rpx;
  height: 380rpx;  
}

5. Прокрутка программы WeChat Mini

Вот метод, которого можно добиться: поддельные данные могут быть созданы с помощью easymock и импортированы с помощью wx.request, или они могут быть импортированы непосредственно в файл js, который не будет здесь подробно объясняться.

Сначала я думал, что это делается с двумя прокрутками, а свойство scroll-into-view используется для достижения эффекта прокрутки с левыми и правыми ассоциациями

Код:

<view class="main">
      <scroll-view class="menu-left" scroll-y scroll-with-animation="{{true}}">
        <view class="cate-list {{curIndex==index?'on':''}}" wx:for="{{menu}}" wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchCategory">
            <text>{{item.name}}</text>
        </view>
    </scroll-view>  
     <scroll-view  scroll-y class="menu-right" scroll-into-view="{{toView}}">
      <block wx:for="{{detail}}" wx:key="{{item.id}}">
          <scroll-view class="cate-box" id="{{item.id}}" scroll-y>
              <view class="cate-banner" bindtap="bannerDetails">
                  <image src="{{item.banner}}"></image>
              </view>
              <view class="cate-title">
                  <text>{{item.title}}</text>
              </view>
              <view class="cate-product">
                  <view class="product-list" bindtap="productDetails" wx:for="{{item.productList}}" wx:key="{{index}}" wx:for-item="product">
                      <image src="{{product.thumb}}"></image>
                      <view class="product-list-name">
                          <text>{{product.name}}</text>
                      </view>
                  </view>
              </view>
          </scroll-view>
      </block>
    </scroll-view>
</view>
//css代码就不放了，手动撸的有点多，如有需要可以去github里拿
//js相关代码
  switchCategory(e) {
    console.log(e)
    this.setData({
      toView:e.currentTarget.dataset.id
    })
  },

Увидев этот эффект, я чувствую себя таким подавленным. . Самое неприятное, что правая сторона может прокручиваться вверх и вниз, таким образом, когда на правой стороне много контента, два вида прокрутки будут вложены друг в друга, что приведет к очень недружественному взаимодействию с пользователем.

Итак просмотрев документацию апплета без мозгов, я обнаружил, что у компонента swiper есть атрибут вертикального скольжения как у scroll-view, и у него есть эффект перехода swiper, так что переключение не будет слишком тугим. Поэтому я изменил часть кода wxml, чтобы добиться эффекта, при котором правая сторона на картинке ниже не может прокручиваться вверх и вниз, а для переключения может полагаться только на навигационную панель слева.

Код:

<view class="main">
      <scroll-view class="menu-left" scroll-y scroll-with-animation="{{true}}">
        <view class="cate-list {{curIndex==index?'on':''}}" wx:for="{{menu}}" wx:key="{{item.id}}" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchCategory">
            <text>{{item.name}}</text>
        </view>
    </scroll-view>  
     <swiper vertical="true" class="menu-right" current="{{toView}}" >
        <swiper-item wx:for="{{detail}}" wx:key="{{item.id}}">
            <scroll-view class="cate-box" id="{{item.id}}" scroll-y>
                <view class="cate-banner" bindtap="bannerDetails">
                    <image src="{{item.banner}}"></image>
                </view>
                <view class="cate-title">
                    <text>{{item.title}}</text>
                </view>
                <view class="cate-product">
                    <view class="product-list" bindtap="productDetails" wx:for="{{item.productList}}" wx:key="{{index}}" wx:for-item="product">
                        <image src="{{product.thumb}}"></image>
                        <view class="product-list-name">
                            <text>{{product.name}}</text>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </swiper-item>
    </swiper> 
</view>
//js相关代码
  switchCategory(e) {
    console.log(e)
    this.setData({
      curIndex: e.currentTarget.dataset.index?e.currentTarget.dataset.index:0,
      toView:e.currentTarget.dataset.index,
    })
  },

6. Функция удаления элемента корзины покупок апплета WeChat влево

Здесь я даю метод для реализации левого скользящего удаления элементов корзины, для справки, введите код напрямую демо-код:

wxml:
<view class="{{item.isTouchMove ? 'touch-move-active' : ''}}" wx:for="{{lists}}" wx:key="{{index}}" data-index="{{index}}" bindtouchstart="touchstart" bindtouchmove="touchmove">
    <view class="content">{{item.tt}}</view>
    <view class="del" catchtap="del">删除</view>
</view>
wxss:
.del {
    background-color: #b4282d;
    width: 90px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    -webkit-transform: translateX(90px);
    transform: translateX(90px);
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
  }
  .content {
    float: left;
    width: 100%;
    margin-right:0;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transform: translateX(90px);
    transform: translateX(90px);
    margin-left: -90px;
    display: flex;
  }
.touch-move-active .content,
.touch-move-active .del {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}


js部分
  data: {
    lists: [
      {
        tt:'测试',
        isTouchMove: false
      },
      {
        tt: '测试',
        isTouchMove: false
      },
      {
        tt: '测试',
        isTouchMove: false
      },
      {
        tt: '测试',
        isTouchMove: false
      },
    ]
  },
  // 计算手滑动角度函数
  angle: function (start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回数字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  },
  touchstart(e) {
    //开始触摸时 重置所有删除
    this.data.lists.forEach(function (v, i) {
      if (v.isTouchMove)//只操作为true的
        v.isTouchMove = false;
    })
    this.setData({
      startX: e.touches[0].clientX,
      startY: e.touches[0].clientY,
      lists: this.data.lists
    })
  },
  //滑动事件处理
  touchmove(e) {
      let index = e.currentTarget.dataset.index;//当前索引
      let startX = this.data.startX;//开始X坐标
      let startY = this.data.startY;//开始Y坐标
      let touchMoveX = e.touches[0].clientX;//滑动变化坐标
      let touchMoveY = e.touches[0].clientY;//滑动变化坐标
      //获取滑动角度
      let angle = this.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY });
    this.data.lists.forEach((v, i)=> {
      v.isTouchMove = false
      //滑动超过30度角 return
      if (Math.abs(angle) > 30) return;
      if (i == index) {
        if (touchMoveX > startX) //右滑
          v.isTouchMove = false
        else //左滑
          v.isTouchMove = true
      }
    })
    //更新数据
    this.setData({
      lists: this.data.lists
    })
  },
  //删除事件
  del(e) {
    this.data.lists.splice(e.currentTarget.dataset.index, 1)
    this.setData({
      lists: this.data.lists,
      
    })
  },

Вы можете изменить его в соответствии с вашими потребностями. положить рендеры

7. Корзина покупок мини-программы WeChat

Логика страницы корзины должна быть основана на потребностях бизнеса. Я просто привожу здесь демонстрацию логики корзины покупок, новички могут взглянутьфункция корзины.

Эпилог

Портал обучения апплета WeChat для торгового центра github

Автор наступил на много питов, а здесь написано только о некоторых. Будет удобнее, если вы будете использовать фреймворк. ~
Это первый раз, когда вы пишите статью, пожалуйста, поддержите новичка, подарите больше любви инженеру и поставьте лайк - оставьте свои предложения и поехали~

Категории