Create by jsliang on 2018-9-17 17:58:56
Recently revised in 2018-10-22 09:58:07

 Привет друзья, если вы считаете, что эта статья неплохая, не забудьте датьstar, ВашstarЭто моя мотивация учиться!Адрес GitHub

 2019-08-16 13:41:40 Поскольку эта статья может быть старой, статья была доработана, некоторые ошибки могут быть исправлены или некоторые ссылки могут быть неработающими, перейдите на GitHub, чтобы получить последнюю статью.

написать впереди

 Первая запись практики апплета WeChat:
 Нагрузка: 18 листов PSD (30 экспортированных листов JPG)
 Время: 12 рабочих дней
 Вывод 1: В конструкторе страниц на выполнение уходит 3 рабочих дня (15 рабочих дней), а внешний и внутренний интерфейсы рассчитываются отдельно. На самом деле за 12 рабочих дней можно получить все страницы, но стоит заложить 1.5D для ознакомления с фреймворком и 1.5D для подчистки кода потом. Конечно, время, затрачиваемое каждым человеком, может быть разным, что может быть скорректировано в соответствии с реальной ситуацией человека.
Резюме 2: С точки зрения вызовов API, вызовы API могут занять 7-12 рабочих дней в зависимости от количества интерфейсов.Сложности: 1. Интерфейс недостаточно насыщенный и объем данных недостаточен; 2. Данные интерфейса недостаточно формальны, что не согласуется с предыдущими поддельными данными Разница слишком велика 3. Интерфейс может не вызываться нормально и т.д. Поэтому отчетность по рабочему времени осуществляется согласно бизнес-логике апплета.

 Здесь собраны все ямы, возникшие при разработке апплета jsliang WeChat, а также некоторый личный опыт в процессе заполнения ям. jsliang использует этот учебник для хранения некоторых часто используемых навыков разработки апплетов WeChat для удобного поиска. Это может вас ничему не научить, но, по крайней мере, избавит вас от усилий Baidu.

 Пожалуйста, объедините «Оглавление» и «Вернуться к оглавлению», чтобы перейти к более удобному чтению.

 Техническая поддержка этой статьи:Река Ансен

 Примечание 1. Из-за частых обновлений иногда версия статьи на платформе может не иметь изображений или каталог не может быть перепрыгнут, поэтому, если вам нужна самая свежая информация, перейдите на GitHub:адрес

 Примечание 2: Если друг использует мобильную версию для открытия, рекомендуется, чтобы друг использовал для открытия компьютер, потому что большинство мобильных терминалов каждой платформы не поддерживают переходы внутри страницы, что кажется трудоемким.

каталог

Доступно в настоящее время48яма.

Обратите внимание при поиске по каталогу:
3.1, 3.2, 3.3... и другие второстепенные категории соответствуют главе.
3.1.1, 3.1.2, 3.1.3... и другие каталоги третьего уровня, большая глава каталога второго уровня подробно разделена на множество маленьких ямок для удобства просмотра.

содержание	яма
каталог
2 Предисловие
Три настоящих боя, заполняющих яму
3.1 считывающая карусель	5
3.1.1 Встроенные стили недействительны
3.1.2 Стиль изображения нельзя изменить
3.1.3 настройка значения атрибута swiper
3.1.4 Переход к карусельному изображению
3.1.5 wx:key
3.1.6 Фактический код
3.2 tabBar и switchTab	3
3.2.1 Нижний прыжок навигации
3.2.2 Настройка нижней навигации
3.2.3 Пользовательские компоненты
3,3 пикселя, rem и rpx	1
3.4 Инструменты веб-разработчика WeChat	2
3.4.1 Невозможно ввести китайский язык
3.4.2 Невозможно двигать колесо прокрутки
3.5 Компоненты и API	2
3.5.1 Концептуальная путаница: компонент против API
3.5.2 API не может найти соответствующий метод
3.6 гибкий макет	2
3.6.1 Основные понятия
3.6.2 Левая и правая компоновка
3.6.3 Смешанная компоновка
3.7 Фоновое изображение Применение локального изображения недопустимо	1
3.8 и	1
3.9 Поле поиска	2
3.9.1 margin-top не может плавать
3.9.2 Изменение окна поиска WeUI
3.10 Совместное использование мини-программы WeChat	1
3.11 настройки рамки	1
3.12 Настройка панели навигации	6
3.12.1 Вкладка WeUI
3.12.2 Эффект пользовательской вкладки и его реализация
3.12.3 Как события привязки передают данные
3.12.4 Горб не допускается
3.12.5 Получение данных данных
3.12.6 Реализация исключения текста
3.13 Черная технология:	2
3.13.1 Заброшенный
3.13.2 Четыре способа написания всплывающих окон
3.14 Мини-программа, анализирующая HTML	6
3.14.1 Три способа анализа HTML
3.14.2 wxParse
3.14.3 rich-text
3.14.4 web-view
3.15 Странный открытый тип	1
3.16 для стиля и встроенное в нее	1
3.17 Обновление по запросу и загрузка по запросу	2
3.18 Получить значение ввода	1
3.19 проблема с загрузкой при запуске	2
3.19.1 Последовательность выполнения мини-программы
3.19.2 Защита маршрутизации
3.20 инкапсуляция запроса и извлечение API	1
3.21 Оценка того, были ли данные прочитаны	1
3.22 Исследование системы обслуживания клиентов	1
3.23 Предварительный просмотр файлов онлайн	2
3.24 Максимально используйте ES6	1
3.25 Реализация функции видео	1
Добавлено четыре пользователя сети
4.1 Ошибка чтения папки	1
4.2 Много проблем с textarea	1

2 Предисловие

 Назад к содержанию

Оригинальное название этой статьи [Мини-программа WeChat 100 Pit]

 Учебник по разработке апплета Wechat, возможно, его очень любят писать.
но:

• Во-первых, мини-программы WeChat являются домашними, икитайский документ, хотя его документация немного изъедена, но документы есть, понимание прочитанного не является проблемой для друзей.
• второй,jsliangНаписание не так хорошо, как вы себе представляли.Подумайте, что, если бы я провел вас через разработку небольших программ, и вы думали, что это гладкая дорога, но вы столкнулись с кучей выбоин. Придет ли мне в спину последний горшок?Это ужасно!

Так вот,jsliangкомбинировать"Ежедневная яма лжи", сначала решить 100 ям апплета для вас! Сейчас этого может быть недостаточно, но я сделал 4/5 из них в первый день, и я думаю, что смогу помочь вам сложить 100 из них! ! !
  Текущая версия разработки, отображаемая инструментом разработчика WeChat:"libVersion": "2.0.4"
Если версия, которую вы разработали, устранила эту ошибку, или вы считаете, что есть другие решения этой ошибки, или вы думаете, что в этой штуке есть другие ошибки, сообщите мне, я добавлю ее в этот документ, и отметьте ваши путь Большое имя, спасибо!
 QQ: 1741020489

Три настоящих боя, заполняющих яму

 Назад к содержанию

 Яма здесь:

• Некоторые взяты из документации по разработке, поставляемой с WeChat:Документация по разработке мини-программы. В документации вы найдете много интересного! В конце концов, никогда не знаешь, когда китайский станет твоим языковым барьером~
• Некоторые встречаются в разработке, а затем в сочетании с большим количеством результатов Baidu, эффективность резюме.

 Надеюсь, мои друзья прочитают эту статью в Baidu или случайно, пожалуйста, используйтеCtrl + Fнайти ответ на интересующий вас вопрос.

3.1 считывающая карусель

 Назад к содержанию

На данный момент в этом компоненте 5 питов, и заинтересованные друзья могут его подробно посмотреть.

  Код приходит с этого адреса:Свипер компонента WeChat.

 Для удобства друзей исходный код выложен ниже:

demo.wxml

<swiper indicator-dots="{{indicatorDots}}"
  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
  <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" width="355" height="150"/>
    </swiper-item>
  </block>
</swiper>
<button bindtap="changeIndicatorDots"> indicator-dots </button>
<button bindtap="changeAutoplay"> autoplay </button>
<slider bindchange="intervalChange" show-value min="500" max="2000"/> interval
<slider bindchange="durationChange" show-value min="1000" max="10000"/> duration

demo.js

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    indicatorDots: false,
    autoplay: false,
    interval: 5000,
    duration: 1000
  },
  changeIndicatorDots: function(e) {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },
  changeAutoplay: function(e) {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },
  intervalChange: function(e) {
    this.setData({
      interval: e.detail.value
    })
  },
  durationChange: function(e) {
    this.setData({
      duration: e.detail.value
    })
  }
})

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

3.1.1 Встроенные стили недействительны

 Назад к содержанию

 demo.wxmlпоявление в<image src="{{item}}" class="slide-image" width="355" height="150"/>эта линия,widthиheightВстроенные атрибуты подмены простых людей,это бесполезно! нам надоslide-imageэтоclassИзменено в классеwidthиheight. Короче, встроенные стили все обманчивы, дорогая, поехалиdemo.wxssнапиши стиль~

3.1.2 Стиль изображения нельзя изменить

 Назад к содержанию

  В любом месте, где появляются изображения (включая, помимо прочего, карусельные изображения), если вы обнаружите, что не только встроенный текст недействителен, но и что вы просто добавляетеclass,идти с*.wxssСтиль письма тоже не подходит. Затем я предлагаю маленькому партнеру использовать метод взвешивания стилей, то есть.image-wrap .imageЭтот формат письма гарантирует, что стиль изображения может быть изменен. Подробное использование см. ниже.

3.1.3 настройка значения атрибута swiper

 Назад к содержанию

 swiperстоимость имущества. Официальная документация гласит:

  Хотя имя и значение атрибута говорят об этом. Однако при использовании сначала необходимоdemo.wxmlсерединаswiperПривяжите это имя свойства, затем вdemo.jsустановить значение его свойства. Стоит отметить, что его связующее значение, немного отличающееся отVue, необходимо установить{{}}форма. Если вы не можете четко видеть текстовое описание, вы можете обратиться к следующему коду, чтобы понять.

3.1.4 Переход к карусельному изображению

 Назад к содержанию

 Про адресный скачок карусельной карты упоминать на официальном сайте апплета WeChat бесполезно.jsliangЗайдите на Baidu, чтобы проверить это, а затем я знаю, как его настроить (возможно, это было слишком сложно для меня, чтобы оспорить в начале -_-||), нижеjsliangОпубликуйте код ~ Если вы хотите знать, как его решить, вы можете пойти и посмотреть: Во-первых, вdataустановить вlink; затем установитеnavigatorнавигационный обходitem.link.

3.1.5 wx:key

 Назад к содержанию

оwx:key,wx:keyФункция такова: когда изменение данных вызывает повторную визуализацию слоя рендеринга, компоненты с ключом будут исправлены, а инфраструктура обеспечит их переупорядочивание, а не повторное создание, чтобы гарантировать, что компоненты сохраняют свое собственное состояние и улучшить время рендеринга списка, эффективность. Однако в своемswiper, сам апплет не пишется, поэтому в нем будетwarning, здесь тоже маленькая дырочка,jsliangЭто также Baidu, и я знаю это:нажмите на меня, чтобы понять.

3.1.6 Фактический код

 Назад к содержанию

  Ниже приведены коды решений для этих 5 ям. Если что-то не так, пожалуйста, укажите:

index.wxml

<view class="carousel">
  <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="#707071" indicator-active-color="#fff" circular="true">
    <!-- wx:key ： 提高列表渲染效率 -->
    <block wx:for="{{imgUrls}}" wx:key="{{item.index}}">
      <swiper-item>
        <navigator url="{{item.link}}" hover-class="navigator-hover">
          <image src="{{item.url}}" class="slide-image" />
        </navigator>
      </swiper-item>
    </block>
  </swiper>
</view>

index.wxss

.carousel .slide-image {
  width: 100%;
  height: 420rpx;
}

index.js

Page({
  data: {
    imgUrls: [
      {
        link: '../index/index',
        url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      },
      {
        link: '../demo/demo',
        url: 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      },
      {
        link: '../logs/logs',
        url: 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
      }
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000
  }
})

3.2 tabBar и switchTab

 Назад к содержанию

На данный момент в этом компоненте 3 пита, и заинтересованные друзья могут его подробно посмотреть.

 tabBar: нижняя строка меню, которая должна бытьapp.jsonв настройках. Как использовать: смотрите ниже.
 навигатор: переключатель навигации. Инструкции:адрес
 switchTab: управление переключением tabBar. Инструкции:адрес

3.2.1 Нижний прыжок навигации

 Назад к содержанию

  Здесь мы говорим оtabBarяма, если вы находитесь вapp.jsonустановить вtabBar:

app.json

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "./public/index_tabBar1_nor.png",
      "selectedIconPath": "./public/index_tabBar1.png"
    }, {
      "pagePath": "pages/demo/demo",
      "text": "发现",
      "iconPath": "./public/index_tabBar2_nor.png",
      "selectedIconPath": "./public/index_tabBar2.png"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "我的",
      "iconPath": "./public/index_tabBar3_nor.png",
      "selectedIconPath": "./public/index_tabBar3.png"
    }]
  }

  Затем нам нужно установитьswitchTabуправлять прыжком нижней навигации, а неnavigatorперейти к:

demo.wxml

<view>
  <button bindtap="linkTo">Hello</button>
</view>

demo.js

linkTo: function () {
  wx.switchTab({
    url: '../index/index'
  });
},

3.2.2 Настройка нижней навигации

 Назад к содержанию

 Затем проблема возникает снова, когда мы переключаемся на подстраницу, мы находимtabBarЭта нижняя панель навигации исчезла, а затем спросилаРека Ансен, он сказал, что раньше это было доступно во всем апплете, и некоторые страницы приходилось каким-то образом прятать.
 Но теперь...его нет! Ушел! ! ! Я не вижу способа вызвать нижнюю панель навигации в документации апплета WeChat. Собираюсь ли я сделать панель навигации? -_-||
 Ответ: да!
  Итак, эта нижняя навигация приведена нижеtabBarРеализация и фрагменты кода:

Примечание. Ширина и высота изображения равны 54 пикселям.

*.wxml

<view class="nav">
  <view class="nav-home" bindtap="goHome">
    <image src="../../public/index_productDetail_icon_home.png"></image>
    <text>首页</text>
  </view>
  <view class="nav-service">
    <image src="../../public/index_productDetail_icon_service.png"></image>
    <text>在线咨询</text>
  </view>
  <view class="nav-phone" bindtap="callWaiter">
    <image src="../../public/index_productDetail_icon_phone.png"></image>
    <text>电话咨询</text>
  </view>
  <navigator url="../indexPurchaseProduct/indexPurchaseProduct">
    <view class="nav-buy">
      <text>立即订购</text>
    </view>
  </navigator>
</view>

*.wxss

.nav {
  display: flex;
  justify-content: space-around;
  font-size: 20rpx;
  border: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  background: #fff;
}
.nav view {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.nav image {
  width: 54rpx;
  height: 54rpx;
}
.nav text {
  margin-top: 7rpx;
}
.nav-home {
  border-right: 1px solid #ccc;
  width: 130rpx;
  padding-top: 5rpx;
}
.nav-service {
  border-right: 1px solid #ccc;
  width: 130rpx;
  padding-top: 5rpx;
}
.nav-phone {
  width: 130rpx;
  padding-top: 5rpx;
}
.nav-buy {
  background: #eb333e;
  color: #fff;
  width: 360rpx;
  height: 98rpx;
  line-height: 80rpx;
  font-size: 34rpx;
}

*.js

callWaiter: function(res) {
  wx.makePhoneCall({
    phoneNumber: '13264862250',
    success: function(res) {
      console.log("拨打成功");
      console.log(res);
    },
    fail: function(res) {
      console.log("拨打失败");
      console.log(res);
    },
    complete: function(res) {
      console.log("拨打完成");
      console.log(res);
    }
  })
},
goHome: function() {
  wx.switchTab({
    url: '../index/index'
  })
},

3.2.3 Пользовательские компоненты

 Назад к содержанию

 В недавней работе я обнаружил еще одну небольшую проблему:

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

 Пользовательские компоненты:Ссылка на сайт

 Да, я обнаружил, что эта штука существует в документации апплета. Конечно, что касается процесса, я Baidu несколько статей, чтобы помочь в написании следующего кода, угадайте?

 Написание подкомпонентов

navBar.wxml

<!-- 底部导航条 -->
<view class="navBar">
  <view class="navBar-home" bindtap='goHome'>
    <image wx:if="{{homeActive}}" src="../../public/index_tabBar1.png"></image>
    <image wx:if="{{!homeActive}}" src="../../public/index_tabBar1_nor.png"></image>
    <text>首页</text>
  </view>
  <view class="navBar-explore" bindtap='goExplore'>
    <image wx:if="{{exploreActive}}" src="../../public/index_tabBar2.png"></image>
    <image wx:if="{{!exploreActive}}" src="../../public/index_tabBar2_nor.png"></image>
    <text>发现</text>
  </view>
  <view class="navBar-user" bindtap='goUser'>
    <image wx:if="{{userActive}}" src="../../public/index_tabBar3.png"></image>
    <image wx:if="{{!userActive}}" src="../../public/index_tabBar3_nor.png"></image>
    <text>我的</text>
  </view>
</view>

navBar.wxss

/* 底部导航条 */
.navBar {
  width: 100%;
  padding: 18rpx 0;
  border-top: 1rpx solid #cccccc;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 0;
  background: #fff;
}
.navBar image {
  width: 55rpx;
  height: 55rpx;
}
.navBar view {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 20rpx;
  color: #999999;
}
.navBar-user text {
  color: #d0a763;
}

navBar.js

// pages/componentNavBar/navBar.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    homeActive: {
      type: Boolean,
      value: false
    },
    exploreActive: {
      type: Boolean,
      value: false
    },
    userActive: {
      type: Boolean,
      value: false
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 返回首页
    goHome: function (e) {
      wx.switchTab({
        url: '../index/index',
      })
    },
    // 返回发现页 
    goExplore: function (e) {
      wx.switchTab({
        url: '../explore/explore',
      })
    },
    // 返回我的页面
    goUser: function (e) {
      wx.switchTab({
        url: '../user/user',
      })
    },
    showCode: function(e) {
      console.log(e);
      let that = this;
      console.log(that.data);
    }
  }
})

navBar.json

{
  "component": true,
  "usingComponents": {}
}

  Затем при использовании родительского компонента просто:

*.wxml

<view>
  <navBar userActive="{{userActive}}"></navBar>
</view>

*.json

{
  "usingComponents": {
    "navBar": "../componentNavBar/navBar"
  }
}

*.js

data: {
  userActive: true
},

Как? Это способ написания пользовательских компонентов, как вы думаете, его очень легко использовать, один раз написав, вы будете использовать его всю жизнь.

3,3 пикселя, rem и rpx

 Назад к содержанию

На данный момент в этом разделе есть одна яма, и заинтересованные друзья могут ее подробно прочитать.

 В WeChat он поставляется с набором собственных единиц измерения:rpx,rpxотличается от того, что мы знали раньшеpx,rem,em, если ваш черновик дизайна 750 пикселей, то это легко, 1px = 1rpx, но если черновик дизайна не 750 пикселей, то это вызовет ошибку, как решить эту ошибку...
 -_-|| Кто знает… зачем сначала убивать дизайнера пользовательского интерфейса?
  Дополнение к знаниям:О рпкс.

3.4 Инструменты веб-разработчика WeChat

 Назад к содержанию

На данный момент в этом разделе 2 ямы, и заинтересованные друзья могут их подробно прочитать.

3.4.1 Невозможно ввести китайский язык

 Назад к содержанию

 Если вы обнаружите, что можете писать только на английском языке в процессе разработки, но не можете вводить китайский, не волнуйтесь, не вините метод ввода в ошибках, вам нужно только: перезапустить инструмент разработки.

3.4.2 Невозможно двигать колесо прокрутки

 Назад к содержанию

Если вы вдруг обнаружите, что не можете прокручивать код для его просмотра, а нужно перетаскивать полосу прокрутки, пожалуйста, не вините свою мышку, вы можете зайти в браузер и открыть статью, чтобы посмотреть, энм... Ваша мышь все еще в порядке~ Итак, пожалуйста: перезапустите инструменты разработки.

3.5 Компоненты и API

 Назад к содержанию

На данный момент в этом разделе 2 ямы, и заинтересованные друзья могут их подробно прочитать.

3.5.1 Концептуальная путаница: компонент против API

 Назад к содержанию

 Во-первых, какие компоненты и API входят в научно-популярную сферу:

• Компоненты: инкапсуляция данных и методов, позволяющая программировать с помощью перетаскивания, быстрая обработка свойств и настоящий объектно-ориентированный дизайн.【Энциклопедия Baidu】. Тогда это можно понимать так: мы можем инкапсулировать некоторые компоненты, обычно используемые в разработке, а затем использовать их при необходимости, то есть компоненты.
• API: предопределенные функции, которые предоставляют приложениям и разработчикам возможность доступа к набору подпрограмм, основанных на программном или аппаратном обеспечении, без доступа к исходному коду.【Энциклопедия Baidu】. То есть некоторые уже написаныFunctionИли внутренний интерфейс, внешний интерфейс можно вызвать напрямую.

  Однако в официальной документации мини-программы WeChat разделение компонентов и API несколько ненаучно.
Например:карусельиНижняя панель навигации

• один в компоненте и один в API;
• один вwxml,wxss,jsДля установки соответствующих параметров вapp.jsonв настройках.

 Возможно, апплет WeChat учитываетНижняя панель навигацииНе должно быть слишком много изменений (например, позволить вам изменить слишком много стилей илиjs), поэтому панель навигации встроена в исходный код.
  Но может ли это привести к какому-либо значительному влиянию? Да, еслиНижняя панель навигацииНужно внести изменения? Например:3.2.3 Пользовательские компоненты. В этом случае наше время разработки увеличилось.

3.5.2 API не может найти соответствующий метод

 Назад к содержанию

 Если вы часто читаете официальные документы WeChat Mini Programs, то вам должно быть на что жаловаться, а именно:
 В последний раз я видел API, в котором реализована нужная мне функция, но когда я вернулся на днях, чтобы найти его, он подсказал мне, что такого не существует, что это, черт возьми, такое? !
  Да, у нас3.13 Черная технология: упоминается в этой главе<modal>Как и эта черная технология, иногда официальные документы не всесильны.Всегда будут какие-то проблемы, так что мы не можем найти то, что нам нужно, поэтому мы можем пойти только на Baidu -_-||

3.6 гибкий макет

 Назад к содержанию

На данный момент в этом разделе 3 ямы, и заинтересованные друзья могут их подробно прочитать.

 Гибкая компоновка, также известная как гибкая компоновка, больше подходит для разработки апплетов. Однако из-заjsliangРаньше я не очень часто пользовался Flex-макетом, так что здесь мы намеренно наступаем на яму и обогащаемся.[Макет страницы для разработки апплета][Руководство по макетированию Ruan Yifeng-Flex]
  Пока выкладываем страницу, лучше смотретьРуан ИфэнУчебник, я обычно перехожу к вышеприведенному, когда сталкиваюсь с проблемами макета.Руан ИфэнОзнакомьтесь со статьей:

3.6.1 Основные понятия

 Назад к содержанию

Базовые концепты:адрес

  <!-- 设置 flex 布局 -->
  display: flex;

  <!-- 
    1、决定主轴的方向
    row - （默认）水平方向，起点在左端
    row-reverse - 水平方向，起点在右端
    column - 垂直方向，起点在上沿
    column-reverse - 垂直方向，起点在下沿
   -->
  flex-direction: row | row-reverse | column | column-reverse;
  
  <!-- 
    2、一条轴线（一行）排不下时如何解决
    nowrap - （默认）不换行
    warp - 换行，第一行在上方
    wrap-reverse - 换行，第一行在下方
   -->
  flex-wrap: nowrap | wrap | wrap-reverse;
  
  <!-- 
    3、flex-flow = flex-direction + flex-wrap。即 flex-flow 是这两个属性的合集
    row nowrap - （默认）水平方向，起点在左端，不换行
   -->
  flex-flow: <flex-direction> || <flex-wrap>;
  
  <!-- 
    4、justify-content 定义项目在主轴上的对齐方式
    flex-start - 左边对齐
    flex-end - 右边对齐
    center - 居中对齐
    space-between - 两端对齐，空格在中间
    space-around - 空格环绕
   -->
  justify-content: flex-start | flex-end | center | space-between | space-around;
  
  <!-- 
    5、align-items 定义项目在交叉轴上如何对齐
    flex-start - 顶部对齐，即文字图片等顶部同一条线上
    flex-end - 底部对其，即文字图片等底部在同一条线上
    center - 中间对其，即文字图片不管多高，都拿它们的中间放在同一条线上
    stretch - 将文字图片充满整个容器的高度，强制统一
    baseline - 将每项的第一行文字做统一在一条线上对齐
   -->
  align-items: flex-start | flex-end | center | stretch | baseline;
  
  <!-- 
    6、align-content 定义多根轴线的对齐方式。如果只有一根轴线（只有一行），该属性不起作用
    flex-start - 这几行顶部对齐
    flex-end - 这几行底部对齐
    center - 这几行居中对齐
    stretch - 这几行进行扩展或者缩放，从而填满容器高
    space-between - 这几行中间使用空格进行填充
    space-around - 这几行两边及中间进行填充
   -->
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;

3.6.2 Левая и правая компоновка

 Назад к содержанию

 Эффект следующий:

  Как показано на рисунке, мы хотим добиться левого и правого эффекта макета. Итак, что делать в программах WeChat Mini?

*.wxml

<view class="top-recommended-headlines">
  <view class="top-recommended-headlines-left">
    <text>热门推荐</text>
  </view>
  <view>
    <image src="../../public/index_top_recommended_headlines.png"></image>
  </view>
  <view class="top-recommended-headlines-right">
    <navigator url="../indexProduct/indexProduct">查看全部 ></navigator>
  </view>
</view>

*.wxss

.top-recommended-headlines {
  display: flex;
  align-items: flex-end;
  height: 31rpx;
  line-height: 31rpx;
  margin-bottom: 10rpx;
}
.top-recommended-headlines-left text {
  font-size: 32rpx;
  font-weight: bold;
}
.top-recommended-headlines image {
  width: 366rpx;
  height: 31rpx;
  margin-left: 10rpx;
}
.top-recommended-headlines-right navigator {
  font-size: 26rpx;
  color: #a9a9a9;
  margin-left: 50rpx;
}

3.6.3 Смешанная компоновка

 Назад к содержанию

 Эффект следующий:

  Как показано на рисунке, мы хотим добиться левого и правого эффекта макета. Итак, что делать в программах WeChat Mini?

*.wxml

<view class="weui-tab__content-item3" wx:for="{{tabs3Content}}" wx:key="{{item.index}}">
  <navigator url="../indexProductArticle/indexProductArticle">
    <view class="weui-tab__content-item3-question">
      <image src="../../public/index_productDetail_icon_question.png"></image>
      <text>{{item.title}}</text>
    </view>
    <view class="weui-tab__content-item3-answer">
      <image src="../../public/index_productDetail_icon_answer.png"></image>
      <text>{{item.content}}</text>
    </view>
    <view class="weui-tab__content-item3-detail">
      <text class="weui-tab__content-item3-detail-datatime">{{item.datatime}}</text>
      <text class="weui-tab__content-item3-detail-reader">{{item.reader}}阅读</text>
      <text class="weui-tab__content-item3-detail-label">#{{item.label}}#</text>
    </view>
  </navigator>
  <view class="weui-tab__content-item3-gap">
    <image src="../../public/index_productDetail_gap.png"></image>
  </view>
</view>

*.wxss

.weui-tab__content-item3 {
  padding-left: 30rpx;
  padding-right: 30rpx;
  margin-top: -10rpx;
  margin-bottom: 10rpx;
}
.weui-tab__content-item3:first-child {
  padding: 40rpx 30rpx 0;
}
.weui-tab__content-item3-question image {
  width: 30rpx;
  height: 30rpx;
}
.weui-tab__content-item3-question text {
  font-size: 30rpx;
  line-height: 46rpx;
  font-weight: bold;
  color: #333;
  margin-left: 10rpx;
}
.weui-tab__content-item3-answer image {
  width: 30rpx;
  height: 30rpx;
}
.weui-tab__content-item3-answer text {
  font-size: 26rpx;
  line-height: 42rpx;
  color: #a9a9a9;
  margin-left: 10rpx;
}
.weui-tab__content-item3-detail {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  color: #a9a9a9;
}
.weui-tab__content-item3-detail-label {
  color: #d0a763;
}
.weui-tab__content-item3-gap image {
  width: 100%;
  height: 30rpx;
}

*.js

tabs3Content: [
  {
    title: '员工发明创造是否属于职务发明的认证标准?',
    content: '随着企业对知识产权在企业发展中核心竞争力的认识力提高，企业保护自身知识产权的意识不断增强，使其技术得......',
    datatime: '2018-03-05',
    reader: '2081',
    label: '知识产权'
  }
]

3.7 Фоновое изображение Применение локального изображения недопустимо

 Назад к содержанию

На данный момент в этом разделе 1 пит, и заинтересованные друзья могут его подробно прочитать.

 В апплете, если вы используете wxss, вы можете найтиbackground-imageнамекать. Однако, если вы установите его фоновое изображение как локальное изображение, вы обнаружите, что оно не действует.
решение:

1. При использовании фонового изображения используйте сетевое изображение в виде внешней ссылки, например, вы размещаете это изображение на своем сервере, например:https://xxxx/xxx.jpg;
2. Преобразуйте фоновое изображение в кодировку base64, что можно сделать по этому URL-адресу.нажмите меня, чтобыПреобразование, такое как: background-image: url ("закодированный текст, полученный после преобразования"), если вы используете его несколько раз, вы можете установить это значение как глобальную переменную, а затем ссылаться на него в файле js.
3. использоватьimageКомпоненты +positionнайти вместо использованияbackground-image.

3.8 и

 Назад к содержанию

На данный момент в этом разделе 1 пит, и заинтересованные друзья могут его подробно прочитать.

  Разница между ними в том,<view>компонент, который будет отображаться на странице;<block>Не компонент, это просто элемент-оболочка, который принимает только свойства управления и не выполняет никакого рендеринга на странице.
  Итак, если вам нужно просто обернуть, а не визуализировать слой, вы можете использовать<block>Улучшить производительность.

3.9 Поле поиска

 Назад к содержанию

На данный момент в этом разделе 2 ямы, и заинтересованные друзья могут их подробно прочитать.

3.9.1 margin-top не может плавать

 Назад к содержанию

  Во-первых, эффект, которого мы хотим добиться, это:

Потом,jsliangИдея такова:

*.wxml

<view class="search">
  <input class="search-product-input" bindinput="bindKeyInput" auto-focus maxlength='10'></input>
  <label class="search-placeholder">
    <image class="search-placeholder-icon" src="../../public/index_indexProduct_icon_search.png"></image>
    <text class="search-placeholder-text">搜索产品</text>
  </label>
  <view></view>
</view>

*.wxss

.search {
  height: 100rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.search-product-input {
  background: #f5f5f5;
  width: 650rpx;
  height: 65rpx;
  border-radius: 30rpx;
  font-size: 30rpx;
  padding-left: 20rpx;
}
.search-placeholder {
  font-size: 26rpx;
  text-align: center;
  margin-top: -65rpx;
  z-index: 2;
}
.search-placeholder-icon {
  width: 24rpx;
  height: 24rpx;
}
.search-placeholder-text {
  margin-left: 10rpx;
}

Ты заметил? существует*.wxmlсередина,jsliangустановить пустой<view>, если поставить это<view>Снимите его, и вы будете поражены тем, что он... опускается...

 Ну, могут быть и другие реализации, но если будете использовать этот метод в следующий раз, обратите внимание на яму выше~

3.9.2 Изменение окна поиска WeUI

 Назад к содержанию

оглядыватьсяWeUIПо способу реализации я обнаружил, что идея довольно похожа на мою.inputреализована, теперь на основеWeUI, успешно реализовал поле ввода:

 Исходный код предоставляется:

*.wxml

<!-- 搜索框 -->
<view class="search">
  <view class="weui-search-bar">
    <view class="weui-search-bar__form {{inputShowed ? 'form-border' : ''}}">
      <view class="weui-search-bar__box">
        <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
        <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
        <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
          <icon type="clear" size="14"></icon>
        </view>
      </view>
      <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
        <icon class="weui-icon-search" type="search" size="14"></icon>
        <view class="weui-search-bar__text">搜索</view>
      </label>
    </view>
    <view wx:if="{{inputVal.length <= 0}}" class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
    <view wx:if="{{inputVal.length > 0}}" class="weui-search-bar__submit-btn" hidden="{{!inputShowed}}" bindtap="searchInput">搜索</view>
  </view>
</view>

*.js

Page({
  data: {
    inputShowed: false,
    inputVal: ""
  },
  showInput: function () {
    this.setData({
      inputShowed: true
    });
  },
  hideInput: function () {
    this.setData({
      inputVal: "",
      inputShowed: false
    });
  },
  clearInput: function () {
    this.setData({
      inputVal: ""
    });
  },
  inputTyping: function (e) {
    this.setData({
      inputVal: e.detail.value
    });
  }
})

*.wxss

.search {
  height: 100rpx;
  padding: 18rpx 30rpx;
}
.weui-search-bar {
  padding: 0;
  background-color: #fff;
  border-top: none;
  border-bottom: none;
  height: 64rpx;
}
.weui-search-bar__form {
  border: none;
}
.form-border {
  border: 1rpx solid #f5f5f5;
  background: #f5f5f5;
}
.weui-search-bar__label {
  background: #f5f5f5;
  border-radius: 30rpx;
}
.weui-search-bar__cancel-btn {
 font-size: 26rpx; 
 background: rgb(8, 202, 186);
 color: #fff;
 padding: 2rpx 20rpx 0 20rpx;
 border-radius: 10rpx;
}
.weui-search-bar__submit-btn {
  font-size: 26rpx; 
  background: rgb(8, 200, 248);
  color: #fff;
  padding: 10rpx 20rpx 0 20rpx;
  border-radius: 10rpx;
}

3.10 Совместное использование мини-программы WeChat

 Назад к содержанию

На данный момент в этом разделе 1 пит, и заинтересованные друзья могут его подробно прочитать.

 Официальная документация:адрес
  Напоминаю нашим друзьям: внимание, внимание, внимание! Скажите важные вещи три раза.
 При создании новогоpage, инструменты веб-разработчика WeChat автоматически добавят для вас события обмена:

/**
  * 用户点击右上角分享
  */
onShareAppMessage: function (res) {
  // 实现分享功能
  return {
    title: this.data.productName,
    path: '/pages/indexProductDetail.js?productId=' + this.data.productId,
    imageUrl: this.data.videoImageSrc,
    success: (res) => {
      console.log("分享成功~");
    },
    fail: (res) => {
      console.log("分享失败~");
    }
  }
}

  Итак, если вы определите его спереди, он тайно очистит его для вас внизу, а затем вы почувствуете, что не можете настроить событие обмена...
Да,jsliangДаже если я убью себя, я не признаю, что это мой личный котел Будьте осторожны с новичками! Внимание новички! ! Внимание новички! ! !

3.11 настройки рамки

 Назад к содержанию

На данный момент в этом разделе 1 пит, и заинтересованные друзья могут его подробно прочитать.

 Тем, кто знаком с блочной моделью, следует знать, что блочная модель имеет два метода расчета:

1. box-sizing: border-box;
2. box-sizing: content-box;

существуетborder-boxв целомviewширина и высота, включаяmargin,padding,border.
пока вcontent-boxв целомviewширина и высота, вышеуказанные элементы не включены.

  Как показано выше, еслиview, ваш код выглядит следующим образом:

view {
  box-sizing: border-box;
  margin: 10rpx;
  width: 100rpx;
  height: 100rpx;
  padding: 10rpx;
}

  Тогда вся ваша ширина и высота по-прежнему100rpx.
  Однако, если ваш код выглядит следующим образом:

view {
  box-sizing: content-box;
  margin: 10rpx;
  width: 100rpx;
  height: 100rpx;
  padding: 10rpx;
}

  Тогда вся ширина и высота вашей коробки120rpx.

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

3.12 Пользовательская вкладка

 Назад к содержанию

На данный момент в этом разделе 6 питов, и заинтересованные друзья могут их подробно прочитать.

3.12.1 Вкладка WeUI

 Назад к содержанию

  Чтобы использовать панель навигации WeUI, сначала необходимо указать стиль CSS WeUI:адрес

скачатьweui.wxssИ вapp.wxssможно процитировать в

app.wxss

/* 引用WeUI */
@import 'weui.wxss';

  Затем мы добавляем его вкладку прямо на страницу и меняем ее стиль в соответствии с потребностями проекта:

*.wxml

<view class="tab">
  <view class="weui-tab">
    <view class="weui-navbar">
      <block wx:for="{{tabs}}" wx:key="*this">
        <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
          <view class="weui-navbar__title">{{item}}</view>
        </view>
      </block>
      <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
    </view>
    <view class="weui-tab__panel">
      <!-- 全部 -->
      <view class="weui-tab__content" hidden="{{activeIndex != 0}}">
        <view class="weui-tab__content-item1">
          <text>全部</text>
        </view>
      </view>
      <!-- 已付款 -->
      <view class="weui-tab__content" hidden="{{activeIndex != 1}}">
        <view class="weui-tab__content-item2">
          <text>已付款</text>
        </view>
      </view>
      <!-- 待付款 -->
      <view class="weui-tab__content" hidden="{{activeIndex != 2}}">
        <view class="weui-tab__content-item3">
          <text>待付款</text>
        </view>
      </view>
    </view>
  </view>
</view>

*.wxss

.tab {
  font-size: 26rpx;
}
.tab image {
  width: 173rpx;
  height: 29rpx;
}
.weui-navbar {
  border-top: 1rpx solid #efefef;
  border-bottom: 1rpx solid #efefef;
}
.weui-navbar__slider {
  background: #d0a763;
  width: 4em;
}
.weui-navbar__item.weui-bar__item_on {
  color: #d0a763;
}
.weui-tab__content {
  margin-bottom: 100rpx;
}

*.js

var sliderWidth = 52; // 需要设置slider的宽度，用于计算中间位置

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 选项卡导航
    tabs: ["全部", "已付款", "待付款"],
    activeIndex: 1,
    sliderOffset: 0,
    sliderLeft: 0,
  },
  // 选项卡切换
  tabClick: function (e) {
    this.setData({
      sliderOffset: e.currentTarget.offsetLeft,
      activeIndex: e.currentTarget.id
    });
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // 计算搜索框活跃条
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
        that.setData({
          sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
          sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
        });
      }
    });
  }
})

3.12.2 Эффект пользовательской вкладки и его реализация

 Назад к содержанию

  Реализация кода пользовательской вкладки:

 Схема эффекта выглядит следующим образом:

  Код реализации выглядит следующим образом:

*.wxml

<view>
  <view class="weui-tab__nav">
    <text wx:for="{{tabs2Nav}}" wx:key="item.index" class="{{item.state == 1 ? 'weui-tab__nav-active' : ''}}" bindtap="tabs2NavClick" data-labelId="{{item.id}}">{{item.label}}</text>
  </view>
  <view class="weui-tab__content-item2" wx:for="{{tabs2Content}}" wx:key="{{item.index}}">
    <view class="weui-tab__content-item-descritpion">
      <view class="{{item.type == 1 ? 'weui-tab__content-item-icon-type' : 'hide'}}">
        <image src="../../public/index_productDetail_icon_word.png"></image>
      </view>
      <view class="{{item.type == 2 ? 'weui-tab__content-item-icon-type' : 'hide'}}">
        <image src="../../public/index_productDetail_icon_excel.png"></image>
      </view>
      <view class="{{item.type == 3 ? 'weui-tab__content-item-icon-type' : 'hide'}}">
        <image src="../../public/index_productDetail_icon_ppt.png"></image>
      </view>
      <view class="{{item.type == 4 ? 'weui-tab__content-item-icon-type' : 'hide'}}">
        <image src="../../public/index_productDetail_icon_pdf.png"></image>
      </view>
      <view class="weui-tab__content-item-descritpion-content">
        <text class="weui-tab__content-item-descritpion-content-title">{{item.title}}</text>
        <view class="weui-tab__content-item-descritpion-content-datatime">
          <text class="weui-tab__content-item-descritpion-content-datatime1">发布时间：{{item.datatime}}</text>
          <text class="{{item.effectiveTime ? 'weui-tab__content-item-descritpion-content-datatime2' : 'hide'}}">生效时间：{{item.effectiveTime}}</text>
        </view>
      </view>
    </view>
    <view class="weui-tab__content-item-download-state" bindtap='downloadFile' data-url="{{item.url}}">
      <image src="../../public/index_productDetail_icon_undown.png"></image>
    </view>
  </view>
</view>

*.wxss

.weui-tab__nav {
  background: #f5f5f5;
  border: 1rpx 0rpx solid #e6e6e6;
  height: 90rpx;
  padding: 17rpx 41rpx;
  display: flex;
  justify-content: space-between;
}
.weui-tab__nav text {
  border-radius: 56rpx;
  height: 56rpx;
  line-height: 56rpx;
  padding: 15rpx 23rpx;
  font-size: 26rpx;
  font-weight: bold;
}
.weui-tab__nav-active {
  color: #fefefe;
  background: #d0a763;
}
.weui-tab__content-item2 {
  display: flex;
  justify-content: space-between;
  padding: 25rpx 30rpx;
}
.weui-tab__content-item-descritpion {
  display: flex;
  justify-content: space-between;
}
.weui-tab__content-item-descritpion image {
  width: 60rpx;
  height: 70rpx;
}
.hide {
  display: none;
}
.weui-tab__content-item-descritpion-content {
  margin-left: 26rpx;
}
.weui-tab__content-item-descritpion-content-title {
  font-size: 28rpx;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.weui-tab__content-item-descritpion-content-datatime {
  font-size: 22rpx;
  color: #bbb;
}
.weui-tab__content-item-descritpion-content-datatime1 {
  margin-right: 35rpx;
}
.weui-tab__content-item-download-state image {
  width: 64rpx;
  height: 64rpx;
}

*.js

data: {
  tabs2Nav: [
    {
      id: '1',
      label: '法律大全',
      state: 1
    },
    {
      id: '2',
      label: '合同模板',
      state: 0
    },
    {
      id: '3',
      label: '民事',
      state: 0
    },
    {
      id: '4',
      label: '行政',
      state: 0
    },
    {
      id: '5',
      label: '执行',
      state: 0
    }
  ],
  tabs2Content: [
    {
      title: '中华人名共和国民用航空法(2015年...).doc',
      url: 'https://wxmcard.imusic.cn/testfordocdownload.doc',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '1'
    },
    {
      title: '原生申诉表格.xls',
      url: 'https://wxmcard.imusic.cn/testfordocdownload.doc',
      datatime: '2018-01-26',
      type: '2'
    },
    {
      title: '法律常识大汇集及范例.ppt',
      url: 'https://wxmcard.imusic.cn/testforpptdownload.pptx',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '3'
    },
    {
      title: '事业单位法律基础知识总结.pdf',
      url: 'https://wxmcard.imusic.cn/testforpdfdownload.pdf',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '4'
    }
  ],

  // 选项卡第二屏分组
  tabs2Content1: [
    {
      title: '中华人名共和国民用航空法(2015年...).doc',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '1'
    },
    {
      title: '原生申诉表格.xls',
      datatime: '2018-01-26',
      type: '2'
    },
    {
      title: '法律常识大汇集及范例.ppt',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '3'
    },
    {
      title: '事业单位法律基础知识总结.pdf',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '4'
    }
  ],
  tabs2Content2: [
    {
      title: '合同模板.doc',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '1'
    }
  ],
  tabs2Content3: [
    {
      title: '民事合同模板.doc',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '1'
    }
  ],
  tabs2Content4: [
    {
      title: '行政合同模板.doc',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '1'
    }
  ],
  tabs2Content5: [
    {
      title: '执行合同模板.doc',
      datatime: '2018-01-26',
      effectiveTime: '2018-01-26',
      type: '1'
    }
  ]
},
// 选项卡2切换
tabs2NavClick: function(e) {
  var that = this;
  console.log("完整的数据是：");
  console.log(that.data.tabs2Nav);
  
  console.log("点击的标签是：");
  console.log(e.currentTarget.dataset.labelid);

  var newTabs2Content;

  console.log("正在经历的标签是：");
  for(var i=0; i<that.data.tabs2Nav.length; i++) {
    console.log(that.data.tabs2Nav[i].id);
    that.data.tabs2Nav[i].state = 0;
    if (that.data.tabs2Nav[i].id == e.currentTarget.dataset.labelid) {
      that.data.tabs2Nav[i].state = 1;
      console.log("将改变的标签是：");
      console.log(that.data.tabs2Nav[i]);

      // 改变内容
      var changeContentName = "tabs2Content" + (i + 1);
      if (changeContentName == "tabs2Content1") {
        console.log(that.data.tabs2Content1);
        newTabs2Content = that.data.tabs2Content1;
      } else if (changeContentName == "tabs2Content2") {
        newTabs2Content = that.data.tabs2Content2;
      } else if (changeContentName == "tabs2Content3") {
        newTabs2Content = that.data.tabs2Content3;
      } else if (changeContentName == "tabs2Content4") {
        newTabs2Content = that.data.tabs2Content4;
      } else {
        newTabs2Content = that.data.tabs2Content5;
      }

      console.log("希望转换内容到：");
      console.log(changeContentName);
    }
  }

  this.setData({
    tabs2Nav: that.data.tabs2Nav,
    tabs2Content: newTabs2Content
  })
},

3.12.3 Как события привязки передают данные

 Назад к содержанию

 Как события привязки передают данные:
 Если узналVueстуденты, вы должны знатьVueФорма передачи данных:@click='tabs2NavClick(item.id)'
 Затем в апплете WeChat нужно помнить, что способ передачи параметров для времени привязки не такой, а:

<text wx:for="{{tabs2Nav}}" wx:key="item.index" bindtap="tabs2NavClick" data-labelId="{{item.id}}">{{item.label}}</text>

пройти черезdata-*="{{item}}"передается в виде ~, то вам нужноjsв, черезe.currentTarget.dataset.labelidчтобы получить.

3.12.4 Горб не допускается

 Назад к содержанию

  Тогда обратите внимание, здесь есть небольшая ошибка. В коде мы используемdata-labelId="{{item.id}}", и при получении данных мы получаемlabelid, да горба больше нет~

  Ссылка на ссылку:Ссылка на сайт

3.12.5 Получение данных данных

 Назад к содержанию

 Как получить в методеdataДанные определены в:
  Если мне нужен способ переключения между вкладкамиtabs2NavClickполучено вdataданные внутри, так что мне делать?
  Да, через:

tabs2NavClick: function(e) {
  var that = this;
  console.log(that.data.tabs2Nav);
}

  В таком виде мы можем получитьdataданные в .
  Ссылка на ссылку:Ссылка на сайт

3.12.6 Реализация исключения текста

 Назад к содержанию

 Как реализовать исключение текста:
 Добавьте, что у вас есть фрагмент текста, вы хотите, чтобы страница автоматически опускала дополнительную длину в соответствии с собственной шириной, тогда мы можем установить следующееcssкод для достижения эффекта пропуска текста (причина отказа от использования js в том, что js не такой гибкий, как css)

text {
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
}

  Ссылка на ссылку:Ссылка на сайт

3.13 Черная технология:

 Назад к содержанию

На данный момент в этом разделе 2 ямы, и заинтересованные друзья могут их подробно прочитать.

3.13.1 Заброшенный

 Назад к содержанию

 Яма – это история.
 Истории состоят из четырех элементов: время, место, люди и события.
Излишне говорить о первых трех, давайте поговорим непосредственно о том, что произошло: человеку, ответственному за наш проект, нужно всплывающее окно с сообщением, а затем текстовое поле для заполнения информации, и, наконец, нажмите кнопку [Сообщение]. кнопку для передачи данных в серверную часть и кнопку [Отмена] ], чтобы закрыть всплывающее окно.
 Требование очень простое~ Поскольку у апплета WeChat есть собственная официальная документация. Итак, как это удобно, такjsliangКлючевые слова для поиска в мини-программах WeChat弹窗:

  После просмотра записей поиска наиболее подходящей является та, что указана выше. enm... не видите текстовое поле? Попробуйте сначала:

 Сумма(⊙o⊙)…

 Извините за беспокойство, я пойду в Baidu, чтобы увидеть:Ссылка на сайт

 Хм~ Кажется,<modal>Этикетка? Ctrl+C, Ctrl+V попробовать сначала~

 Duang~~~ Разве это не тот эффект, который я хочу, канавки, черная технология? тогдаjsliangЗайдите в апплет и найдите егоmodal......энм...медовый сок смущает, кажется, что только вышеперечисленноеwx.showModal()метод... такjsliangПолно черных линий... Ну, черная техника, черная техника! ! !
 Код реализации размещен ниже:

*.wxml

<text class="article-message-board-head-addMessage" bindtap="modalinput">写留言</text>

*.js

Page({
  data: {
    // 弹窗
    hiddenmodalput: true, //可以通过hidden是否掩藏弹出框的属性，来指定那个弹出框
  },
  //点击按钮指定的hiddenmodalput弹出框    
  modalinput: function () {
    this.setData({
      hiddenmodalput: !this.data.hiddenmodalput
    })
  },
  //取消按钮    
  cancel: function () {
    this.setData({
      hiddenmodalput: true
    });
  },
  //确认    
  confirm: function () {
    wx.showToast({
      title: '留言成功！',
    })
    this.setData({
      hiddenmodalput: true
    })
  }
})

 Хорошо, выше реализовано простое всплывающее окно с заполняемым текстом.

3.13.2 Четыре способа написания всплывающих окон

 Назад к содержанию

  Как профессиональный заполнитель ям, как вы можете быть довольны двумя вышеуказанными всплывающими формами! Итак, используя Baidu Dafa, я нашел еще одну статью, чтобы заполнить пробел:Ссылка на сайт

  Таким образом, есть четыре способа создания всплывающих окон:

тип	инструкция	адрес
Модальное всплывающее окно	wx.showModal(Object) — модальное всплывающее окно — это первый тип всплывающего окна выше, он может дать вам выбор [Отмена] или [ОК]	Ссылка на сайт
<modal>	— это второй тип всплывающего окна выше, которое может предоставить пользователям возможность заполнить	Ссылка на сайт
всплывающее сообщение	wx.showToast(Object) - Всплывающее окно сообщения - это момент, когда операция прошла успешно или операция не удалась, система предлагает всплывающее окно, никаких действий пользователя не требуется, и его можно настроить на автоматическое закрытие после несколько секунд	Ссылка на сайт
Меню действий	wx.showActionSheet(Object) — меню действий похоже на всплывающее раскрывающееся меню, в котором можно выбрать одно из них или [Отмена]	Ссылка на сайт

 На этом мы закончили говорить о четырех всплывающих формах мини-программ WeChat. Если вас раздражает изменение стиля, может быть, вам нужно инкапсулировать собственное всплывающее окно? Эй, может быть, ваш менеджер по продукту будет заинтересован в том, чтобы позволить вам разработатьbeautifulвсплывающее окно~
 Я не хочу заполнять эту дыру, я ее не трогал~ Я расскажу об этом, когда сделаю это! Зарезервируй эту яму здесь, ха-ха.

3.14 Мини-программа, анализирующая HTML

 Назад к содержанию

На данный момент в этом разделе 6 питов, и заинтересованные друзья могут их подробно прочитать.

3.14.1 Три способа анализа HTML

 Назад к содержанию

  При обработке статьи апплетом основное содержание статьи, вообще говоря, серверная часть будет хранить данные в базе данных в виде форматированного текста. То есть вы должныviewпоказать вhtmlизменять. Но, как вы знаете, апплеты не используют путь браузера, поэтому вам, возможно, придется ходить по кругу:Ссылка на сайт

 В приведенной выше статье описаны три метода парсинга форматированного текста:

• wxParse анализирует форматированный текст
• rich-text Анализировать форматированный текст
• веб-представление синтаксического анализа форматированного текста

3.14.2 wxParse

 Назад к содержанию

 В соответствии с переводом Baidu Dafa,jsliangиспользуется wxParse.

 Адрес wxParse на Github:Ссылка на сайт

 Метод использования очень прост, просто перейдите по его адресу GitHub и перейдите на него. Однако яму не так просто заполнить o(╥﹏╥)o

  (bug1) wxParse в своем загадочном исходном коде испортит ваши стили html+css, например:pxбыть преобразованным вrpx, может нормально отображаться в апплете, если не разобраться...энм...ты попробуй~

(баг2) Затем, если вы вдруг обнаружите, что контент не может отображаться, то поздравляю с повторным срабатыванием бага, это баг в коде wxParse, в некоторых специальных мобильных телефонах, в wxparse/html2json.js №112 и 119 Строка, есть console.dir() использование этой функции, это делает ваш контент не может отображаться нормально. Закомментируйте эту функцию, содержимое может отображаться нормально.

if (name == 'class') {
    // console.dir(value); // 112 行
    //  value = value.join("")
    node.classStr = value;
}
// has multi attibutes
// make it array of attribute
if (name == 'style') {
    // console.dir(value);  // 119行
    //  value = value.join("")
    node.styleStr = value;
}

  (баг 3) Если вам нужно процитировать изображение, то вы обнаружите, что цитирование неудачно. Это связано с тем, что изображения, которые мы загружаем в фоновом редакторе веб-страницы, используют относительные пути.После загрузки на абсолютный путь сетевого адреса он не может отображаться правильно, если он заменен доменным именем. Поэтому лучше всего изменить файл html2json.js и позволить wxParse автоматически добавить префикс доменного имени:адрес

  ( bug4 ) Пробелы не могут быть заменены правильно и должны быть измененыwxDiscode.jsсерединаstrcharacterDiscode:

// 将原语句注释掉，替换为下面的语句
// str = str.replace(/ /g, ' ');
  str = str.replace(/ /g, '\xa0');

  (баг5) Как убить кучу вывода из wxParse в консоль:

wxParse.js

// 36行注释掉
console.log(JSON.stringify(transData, ' ', ' '));
// 41行注释掉
console.log(JSON.stringify(transData, ' ', ' '));

В итоге,jsliangЯ так зол, что у меня пена изо рта... Смени! Если у вас есть время, вам нужно перейти на два других пути! ! !

3.14.3 rich-text

 Назад к содержанию

 jsliangЯ еще не использовал форматированный текст, поэтому давайте сначала зарезервируем яму. Если вы столкнулись с различными ямами в процессе разработки форматированного текста, вы можете следитьjsliangКстати, я напишу это в этой главе, и, кстати, напишите ваше имя в конце главы, спасибо~

3.14.4 web-view

 Назад к содержанию

 jsliangЯ еще не использовал веб-просмотр, так что здесь яма. Если вы столкнулись с различными ямами в процессе разработки web-view, вы можете следитьjsliangКстати, я напишу это в этой главе, и, кстати, напишите ваше имя в конце главы, спасибо~

3.15 Странный открытый тип

 Назад к содержанию

На данный момент в этом разделе 1 пит, и заинтересованные друзья могут его подробно прочитать.

 В апплете есть несколько пользовательских методов, таких какopen-type,Необходимость<button>принять.
  Итак, если вы пишетеview, в нем есть хорошие стили, которые вы собирались использоватьbindtapделать вещи. Однако мне вдруг пришло сообщение, что мне нужно пальто<button open-type="***">, а затем обнаружил, что стиль нужно снова пропустить...
 enm...Давай, не плачь, перепиши стиль~

3.16 для стиля и встроенное в нее

 Назад к содержанию

На данный момент в этом разделе 1 пит, и заинтересованные друзья могут его подробно прочитать.

  Как упоминалось в предыдущей главе, иногда, в крайнем случае, мы должны<button>встроенный в<image>или<text>И так далее, так как вы вообще это делаете?
  Теперь предположим, что у меня есть42*40Картинка, позвольте мне попытаться настроить ее стиль:

*.wxml

<button open-type='share'>
  <image src="../../public/explore_activityDetail_icon_share.png"></image>
</button>

*.wxss

.activity-user-action button {
  width: 42rpx;
  height: 80rpx;
  margin: 0;
  padding: 0;
  margin-top: -21rpx;
  background: #fff;
}
.activity-user-action button::after {
  border: none;
}
.activity-user-action image:last-child {
  width: 42rpx;
  height: 40rpx;
}

  Как и выше, нам нужно установить высоту этой кнопки в 2 раза больше высоты изображения, а затем нам нужно установитьmargin-topВысота составляет 1/2 высоты изображения (обратите внимание на порядок полей и полей сверху, если вы не знаете важность порядка, рекомендуется использоватьmargin: -21rpx 0 0 0),в то же времяmargin,padding,background,borderнеобходимо очистить.

3.17 Обновление по запросу и загрузка по запросу

 Назад к содержанию

На данный момент в этом разделе 2 ямы, и заинтересованные друзья могут их подробно прочитать.

  В браузере есть F5 для обновления и колесо мыши для загрузки.
 Итак, каково переходить на мини-программы WeChat?
 Да, речь идет о действиях пользователя по вытягиванию вниз и подтягивании вниз:

 Пояснение события раскрывающегося списка в документации апплета:Ссылка на сайт

/**
  * 页面相关事件处理函数--监听用户下拉动作
  */
onPullDownRefresh: function () {

},

 Подтягивание и опускание объясняются в документации апплета:Ссылка на сайт

/**
  * 页面上拉触底事件的处理函数
  */
onReachBottom: function () {

},

  Эти два события создаются при созданииpageКогда придет время, оно добавится автоматически.Друзья, обратите внимание, чтобы не писать спереди, оно будет прикрыто сзади~

3.18 Получить значение ввода

 Назад к содержанию

На данный момент в этом разделе 1 пит, и заинтересованные друзья могут его подробно прочитать.

 <input class="phone-number"></input>
 <button>获取电话号码</button

  Теперь предположим, что мы вводимclassзаphone-numberизinputкоробка, а есть<button>. Затем в апплете WeChat, как нам нужно получить этоphone-numberценность?

1. до<input>установить вnameзаphoneNumber
2. потомdataустановить вphoneNumber: ''
3. тогдаbindinput="phoneCodeInput'
4. установить сноваphoneCodeInputметод измененияthis.data.phoneNumber
5. Наконец в<button>получить от события привязкиphoneNumber

 Шаги сложные, а код реализации размещен ниже:

*.wxml

<input maxlength='11' placeholder='请输入手机号码' placeholder-class="phone-number" name="phoneNumber" bindinput='phoneNumberInput'></input>

<button class="get-phone-number" bindtap="getPhoneNumber">获取验证码</button>

*.js

Page({
  data: {
    // 输入的手机号码
    phonenumber: '',
  },
  // 获取手机号码
  phoneNumberInput: function(e) {
    this.setData({
      phonenumber: e.detail.value
    })
  },
  // 点击获取验证码
  getPhoneNumber: function (e) {
    var phoneNumber = this.data.phonenumber
    console.log(phoneNumber);
  }
})

 Смотрите здесь, если привыклиjQuery, используется для работыdomУ мелких партнеров узла могут быть большие сомнения: «Не может быть, какjQueryполучить то же самое напрямуюdomсодержание? "
 Ответ, да:адрес. Но здесь,jsliangНе рекомендуется это делать мелким партнерам, если вы хотите хорошо изучить новую технологию, вы не можете ограничивать свою концепцию из-за старой технологии. Времена идут вперед, технологии развиваются, и если мы не будем учиться большему количеству знаний, мы можем быть исключены только из фронтенд-тренда.

3.19 проблема с загрузкой onLaunch и защита маршрутизации

 Назад к содержанию

На данный момент в этом разделе 2 ямы, и заинтересованные друзья могут их подробно прочитать.

3.19.1 Последовательность выполнения мини-программы

 Назад к содержанию

 Требование на этот раз: определить, вошел ли пользователь в систему, перейти на домашнюю страницу, если он вошел в систему, и перейти на страницу входа, если не вошел в систему.
 Все мы знаем, что в апплете WeChat естьonLaunchметод, официальный документ апплета WeChat описывает его так: каждая страница должна быть загружена первойonLaunchметод, а затем выполнять другие методы. Затем вjsliangпопробуйте установить вonLaunchвызыватьwx.login(), но обнаружил, чтоindex.jsизonLoadметоду предшествуетonLaunchИсполнено, что делает невозможным получение нами требуемой информации заранее:

1. выполнить первымindex.jsизonload
2. выполнить сноваapp.jsсерединаonLaunch

без выбора,jsliangБайду это:адрес. Благодаря этой статье от Baidu я обнаружил, что есть два решения:

1. Установите начальную страницу и вернитесь на домашнюю страницу после успеха
2. использоватьPromiseдля управления процессами

Однако из-заjsliangзаPromiseметод, я подумал, что это слишком сложно, поэтому я добавил новыйpage/login.

3.19.2 Защита маршрутизации

 Назад к содержанию

  Итак, как авторизовать пользователя в WeChat и войти в систему с учетной записью перед входом на домашнюю страницу для чтения статей и просмотра продуктов?

1. настраиватьonLoginизStorage,существуетindex.jsсерединаonloadСудите сами, если пользователь не вошел в систему, используйтеwx.redirectTo()Перейти на страницу входа:

index.js

onLoad: function (options) {
  if (!wx.getStorageSync('isLogin')) {
    wx.redirectTo({
      url: '../login/login',
    })
  }
}

2. Если пользователь вошел в систему, установите при входе в системуonLoginзаtrue.

login.js

loginSubmit: function(e) {
  wx.setStorageSync('isLogin', true);
}

 Таким образом мы добились роутинга, то есть если вы не авторизуетесь, вас не перенаправят на домашнюю страницу.

3.20 инкапсуляция запроса и извлечение API

 Назад к содержанию

На данный момент в этом разделе 1 пит, и заинтересованные друзья могут его подробно прочитать.

существуетРека Ансен, Ссылаться наРека Ансенизapi.js, к интерфейсу апплета на моей сторонеrequestПроведенныйpromiseпакет и сделалapi.jsразделение.

api.js

/*
 * @Author: jsliang
 * @Date: 2018-10-11 09:11:26
 * @LastEditors: jsliang
 * @LastEditTime: 2018-10-11 09:11:29
 * @Description: 接口文件
 */

// 引入请求头文件
import header from './header.js';

// 加载中
const Loading = {
  show() {
    wx.showLoading({
      title: '加载中'
    });
  },
  hide() {
    wx.hideLoading()
  }
};

// 加载中白名单
const loadingWhite = [
  'index/index'
]

// 将请求进行 Promise 封装
const fetch = ({url, data, header}) => {
  // 白名单地址会显示加载中状态
  if(loadingWhite.includes(url)) {
    Loading.show();
  }
  
  // 打印接口请求的信息
  console.log(`【step1】API接口：${url}`);
  console.log("【step2】header请求头：");
  console.log(header);
  console.log("【step3】data传参：");
  console.log(data);

  // 返回 Promise
  return new Promise((resolve, reject) => {
    wx.request({
      url: getApp().globalData.api + url,
      header: header,
      data: data,
      success: res => {
        Loading.hide();
        
        // 成功时的处理 
        if (res.data.code == 0) {
          console.log("【step4】请求成功：");
          console.log(res.data);
          return resolve(res.data);
        } else {
          wx.showModal({
            title: '请求失败',
            content: res.data.message,
            showCancel: false
          });
        }
      },
      fail: err => {
        Loading.hide();

        // 失败时的处理
        console.log(err);
        return reject(err);
      }
    })
  })

}

/**
 * code 换取 openId
 * @data {
 *   jsCode - wx.login() 返回的 code
 * }
 */
export const wxLogin = data => {
  return fetch({
    url: "tbcUser/getWechatOpenId",
    header: header.newHeader(),
    data: data
  })
}

 Отдельно вышеapi.js, затем позвоните в другое местоapi.js:

login.js

import {
  wxLogin
} from "../../utils/api.js"

// 登录
wx.login({
  success: res => {

    // 发送 code ，获取 openId
    console.log("\n【API：获取 openId】");

    wxLogin({
      jsCode: res.code
    }).then(
      res => {
        console.log("【step5】返回成功处理：");
        console.log(res);
      },
      err => {
        console.log("【step5】返回失败处理：");
        console.log(err);
      }
    )

  }
})

 Выходной результат:

  Таким образом, мы успешно сделалиrequestинкапсуляция и вызовapi.js, разделяет код для упрощения программирования.

3.21 Оценка того, были ли данные прочитаны

 Назад к содержанию

На данный момент в этом разделе 1 пит, и заинтересованные друзья могут его подробно прочитать.

  В макете страницы мы часто используем отображение списка, а затем в отображении списка иногда нет подчеркивания или пунктирной линии под последними данными списка.
  Затем, когда данные считываются до последнего, как определить, что они дошли до последнего, и больше не отображать подчеркивание или пунктирную линию?

• метод первый

*.wxml

<view class="content">
  <view wx:for="{{topRecommended}}" wx:key="{{item.recommendId}}" wx:for-index="index">
    <navigator url="../indexProduct/indexProduct">
      <view class="content-item">
        <image src="{{item.coverImage}}"></image>
        <view class="content-item-text">
          <text class="content-item-text-title">{{item.recommendTitle}}</text>
          <text class="content-item-text-content">{{item.recommendDescription}}</text>
          <view class="content-item-text-row">
            <text class="content-item-text-user">{{item.userCount}}人在用</text>
            <text class="content-item-text-price">￥{{item.productPrice}}</text>
          </view>
        </view>
      </view>
    </navigator>
    <view class="{{(index+1) == topRecommended.length ? 'content-item-gap-hide' : 'content-item-gap'}}">
      <image src="../../public/index_top_recommended_content_item_gap.png"></image>
    </view>
  </view>
</view>

  Здесь мы используемwx:for-index="index,который:

<view wx:for="{{topRecommended}}" wx:key="{{item.recommendId}}" wx:for-index="index">

  Затем делаем подчеркивание/пунктирную линиюclassсудить, еслиindex+1 == topRecommended.length, то меняем стиль:class="{{(index+1) == topRecommended.length ? 'class1' : 'class2'}}",который:

<view class="{{(index+1) == topRecommended.length ? 'content-item-gap-hide' : 'content-item-gap'}}">

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

• Способ второй

пройти черезCSSизlast-child { ... }, вы можете напрямую изменить последнийviewстиль:

*.wxss

.content-item-gap:last-child {
  display: none;
}

  Таким образом, нет необходимости в сложныхJSЛогика, позволяющая реализовать скрытие тени последнего подчеркивания.
Если вы хотите знатьlast-childКакие:Ссылка на сайт

3.22 Исследование системы обслуживания клиентов

 Назад к содержанию

На данный момент в этом разделе 1 пит, и заинтересованные друзья могут его подробно прочитать.

  В апплете WeChat система обслуживания клиентов тоже довольно странная штука.
 На данный момент реализовано:

*.wxml

<button open-type="contact" send-message-title='{{productName}}' send-message-img='{{videoImageSrc}}' send-message-path='../indexProductDetail/indexProductDetail?productId={{productId}}' show-message-card='true'>
  <view class="nav-service">
    <image src="../../public/index_productDetail_icon_service.png"></image>
    <text>在线咨询</text>
  </view>
</button>

1. в состоянии нормально общаться
2. Возможность отправки информации о продукте в службу поддержки клиентов

  Однако это не соответствует моим требованиям:

1. Заголовок диалогового окна не может быть изменен (проверенные данные указывают на необходимость настройки серверной части после возврата апплета?адрес источника)
2. Временно невозможно проверить, может ли служба поддержки клиентов щелкнуть карточку продукта, предоставленную пользователем, и перейти на страницу продукта, соответствующую апплету.

  Все это необходимо проверить после выпуска нашего апплета.

3.23 Предварительный просмотр файлов онлайн

 Назад к содержанию

На данный момент в этом разделе 2 ямы, и заинтересованные друзья могут их подробно прочитать.

  Говорить особо нечего, сначала выкинем код реализации:

*.wxml

<view class="container" bindtap='downloadFile' data-url="{{downloadUrl}}">
  <button>点我下载</button>
</view>

*.js

Page({
  data: {
    downloadUrl: '网上随便找一个下载地址'
  },
  downloadFile: function(e) {
    // 获取传递过来的下载地址
    var url = e.currentTarget.dataset.url;
    // 调用下载 API
    wx.downloadFile({
      url: url,
      success: function (res) {
        console.log("下载文件成功");
        console.log(res);
        
        var tempFilePath = res.tempFilePath;

        // 在线预览文档
        wx.openDocument({
          filePath: tempFilePath,
          success: res => {
            console.log("打开成功");
          },
          fail: res => {
            console.log(res);
          },
          complete: res => {
            console.log(res);
          }
        })

      },
      fail: function () {
        console.log("下载失败");
      }
    })
  }
})

  Потом при скачивании бэкенд друзья ленятся и загружают Word и PPT без данных.В это время апплет сообщит:openDocument:fail filetype not supportedОшибка, так что друзья должны обратить внимание.

3.24 Максимально используйте ES6

 Назад к содержанию

На данный момент в этом разделе 1 пит, и заинтересованные друзья могут его подробно прочитать.

так какjsliangЯ обычно использую ES5 и постоянно говорю, что хочу войти в лобби ES6, но у меня никогда не было возможности начать, поэтому я стараюсь использовать ES6 как можно чаще.

 Изменение способа написания привязки:

• Оригинальное написание:

getUserPhone: function(e) {
  console.log(e);
}

• Пишу сейчас:

getUserPhone(e) {
  console.log(e);
}

  Циклическое письмо:

• оригинальное письмо

for(var i = 0; i <= array.length; i++) {
  console.log(array[i]);
}

• новое написание

for (let i of array) {
  console.log(i);
}

3.25 Реализация функции видео

 Назад к содержанию

На данный момент в этом разделе 1 пит, и заинтересованные друзья могут его подробно прочитать.

 Официальный адрес:адрес

 Официальный эффект реализации:

 Эффект реализации проекта:

  Как видно из рисунка, нам нужно реализовать примерно 3 шага:

1. Настройте CSS так, чтобы видео было на 100 % по ширине и располагалось вверху.

2. Настройте HTML+CSS так, чтобы изображение закрывало видео.

3. Напишите JS, чтобы скрыть изображение и воспроизвести видео при нажатии на изображение.

*.wxml

<view class="video">

  <!-- 
    1. 绑定接口视频路径
    2. controls - 可控制播放暂停
    3. show-fullscreen-btn - 显示全屏按钮
  -->
  <video id="video" src="{{videoSrc}}" controls show-fullscreen-btn></video>

  <!-- 通过 playVideo 这个方法来控制 showVideo 这个属性，从而控制遮罩的产品图片是否隐藏 -->
  <cover-view class="{{showVideo ? 'video-mask' : 'hide-video-mask'}}" bindtap='playVideo'>
    <cover-image class="video-image" src="{{videoImageSrc}}"></cover-image>
  </cover-view>

  <!-- 通过 playVideo 这个方法来控制 showVideo 这个属性，从而控制遮罩的播放按钮是否隐藏 -->
  <cover-view class="{{showVideo ? 'video-mask' : 'hide-video-mask'}}" bindtap='playVideo'>
    <cover-image class="video-button" src="../../public/index_productDetail_video_button.png"></cover-image>
  </cover-view>

</view>

*.wxss

/* 设置视频宽高 */
video {
  width: 100%;
  height: 420rpx;
}
/* 隐藏遮罩层 */
.hide-video-mask {
  display: none;
}
/* 遮罩层 */
.video-mask {
  width: 100%;
  height: 420rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
}
/* 遮罩层图片 */
.video-image {
  width: 100%;
  height: 420rpx;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
}
/* 遮罩层播放按钮 */
.video-button {
  width: 98rpx;
  height: 98rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -49rpx;
  margin-left: -49rpx;
  z-index: 99;
}

*.js

Page({
  data: {
    // 视频字段
    // videoSrc: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
    videoSrc: '',
    videoImageSrc: '',
    showVideo: true,
  },

  /**
   * 播放视频
   */
  playVideo: function () {
    var that = this;
    that.setData({
      showVideo: false
    });
    // videoContext 的定义在 onReady 上
    this.videoContext.play();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.videoContext = wx.createVideoContext("video")
  },

})

 Как и выше, реализовано воспроизведение видео.

Добавлено четыре пользователя сети

 Назад к содержанию

  В этой главе в основном объясняется, что обнаружили друзьяbugИ идеи решения, заинтересованные друзья могут QQ: 1741020489, я поставлю ваше предложениеbugНапишите в этой статье и прикрепите свое имя (в зависимости от личных пожеланий), спасибо за вашу поддержку~

Примечание: предложено друзьямиbug, если в ней будет подробное описание проблемы и решения, я засчитаю это в статьюbugсписок.

4.1 Ошибка чтения папки

 Назад к содержанию

В этом компоненте уже есть дыры, и опытные партнеры могут его дополнить.

 Вопрос: НаггетсДоисторический тотем.
Обратная связь:wx.getFileSystemManager().readdirпапка прочитанаapiСообщается об ошибке, но результат все равно возвращается.
Решение проблемы: функция этого API состоит в том, чтобы прочитать имя файла в определенном каталоге.Обычно он возвращает массив имен файлов, но теперь IDE сообщит о неопределенной ошибке indexOf перед возвратом данных, что не влияют на использование API. Я видел, что кто-то ответил на официальном форуме в прошлом месяце, и до сих пор это не было исправлено.

4.2 Много проблем с textarea

 Назад к содержанию

В этом компоненте уже есть дыры, и опытные партнеры могут его дополнить.

 Вопрос: Наггетсjilaokang.
 Отзыв о проблеме: есть много текстовых проблем, придумайте одну.
  Решил проблему: С начальником связались, ждут ответа.

jsliangбиблиотека документацииЗависит отЛян ЦзюньронгиспользоватьCreative Commons Attribution-NonCommercial-ShareAlike 4.0 Международная лицензияЛицензия.
на основеGitHub.com/l ian Jun Ron…Создание работ выше.
Права на использование, отличные от разрешенных в настоящем Лицензионном соглашении, могут быть получены отCreative Commons.org/licenses/не…получено в.