Вход апплета Wechat в реальный бой (2)

внешний интерфейс сервер JavaScript Апплет WeChat

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

прыжок страницы

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

  • wx.navigateTo()
  • wx.redirectTo()
  • wx.switchTab()
wx.switchTab({
  url: '/index'
})

Путь можно написать правильно, различайте абсолютный путь и относительный путь:

Абсолютный путь: обычно с префиксом/, что означает поиск в корневом каталоге Относительный путь: относительно текущей страницы, каждое использование../Просто подпрыгните на один уровень

Основное различие между первым и вторым методами заключается в том, что первый сохраняет текущую страницу (родительскую страницу, выполняетonHide()方法), перейти на другие страницы (дочерние страницы) и, наконец, вернуться на текущую страницу (родительскую страницу), отношения между двумя страницами являются отношениями родитель-потомок; последний закрывает текущую страницу (выполняетсяonUnload()方法), перейти на другие страницы и не вернуться, две страницы находятся в параллельной связи.

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

Карусельный компонентswiper

swiperобычно в сочетании сswiper-itemДля использования первый является контейнером всей карусели, последний представляет собой один контейнер подэлементов карусели, используемый только внутри первого, ширина и высота по умолчаниюswiperШирина и высота являются просто контейнером и не имеют никакой другой функции, но этого недостаточно, если они отсутствуют. Таким образом, дляswiper-itemследует воздействовать наswiperнад родительским узлом.

  <swiper catchtap='onSwiperTab' indicator-dots='true' autoplay='true' interval='5000'>
    <swiper-item>
      <image src='/images/post/bl.png' ></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/post/xiaolong.jpg'></image>
    </swiper-item>
    <swiper-item>
      <image src='/images/post/vr.png' ></image>
    </swiper-item>
  </swiper>

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

установивvertical='true'Установите направление, в котором прокручивается карусель,indicator-dots='true'отображение индикатора

В карусельном изображении фактическое управление размером изображения зависит отimageМетка, ширина и высота по умолчанию.

Связывание событий

Обычно выделяют два типа событий:

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

События без всплытия: когда событие запускается в компоненте, оно не доставляется на родительский узел. Обычно добавляются над дочерними узлами.catchНачало: указывает на отсутствие пузырьков, за которым следует название события.

<view bindtap='onbind'>
我是事件2
<view bindtap='onBind'>我是事件1</view>
</view>

 onBind: function (event) {
    console.log("事件1执行了")
  },
  onbind: function (event) {
    console.log("事件2执行了")
  }

Когда я нажимаю на событие 1 и не нажимаю на событие 2, также будет запущено событие 2, которое всплывает; но измените метод наcatchtap, при нажатии на событие 1 срабатывает только функция события 1, а функция события 2 выполняться не будет. Есть еще одноcatch:tapспособ объявления событий.

tabBarконфигурация страницы

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

tabBarглобальноapp.jsonКонфигурация внутри и страница проекта должны быть в глобальномapp.jsonзарегистрирован внутри,tabBarтакже является атрибутом внутри, гдеlist数组Настройте не менее 2 вверху и не более 5 и расположите их по порядку в массиве.

 "tabBar": {
    "position":"top", // 按钮的位置，默认为bottom，设置为top的时候，icon设置无效
    "borderStyle": "white",   // tabBar的颜色
    "list": [
      {
        "pagePath": "pages/posts/post",  // 页面路径，必须先在pages属性中定义
        "text": "阅读",
        "iconPath": "images/tab/yuedu.png",    // 未选中的图片
        "selectedIconPath": "images/tab/yuedu_hl.png"     // 选中的图片
      },
      {
        "pagePath": "pages/movies/movies",
        "text": "电影",
        "iconPath": "images/tab/dianying.png",
        "selectedIconPath": "images/tab/dianying_hl.png"
      }
    ]
  }

глобальноapp.jsonОн настраивается внутри, тогда при запуске проекта по умолчанию внизу появится переключение колонок;

tabBar页面，默认出现在底部
Конечно, вы также можете изменить ее положение, чтобы она отображалась вверху, и когда она появляется вверху, изображение кнопки недействительно:

tabBar页面，出现在顶部

Привязка данных

Не в апплетеdom节点концепция, не может быть использована какjQueryТочно так же данные добавляются на страницу, манипулируя узлами DOM. Напротив, апплет достигает приоритета данных посредством привязки данных. Преимущество этого в том, что нет необходимости манипулировать DOM и сокращать время загрузки страницы.

<view>
  <view  src='{{author_img}}' catch:tap='onBind'>{{date}}</view>
</view>

Page({
 // 页面的初始数据
  data: {
    date:"我是事件1"
  }
}

Выше приведен способ привязки данных в соответствующем JS-файле страницы.page()изdataВ атрибуте заполните требуемые страницей данные в виде пар ключ-значение, а затем используйте в соответствующей позиции страницы{{key}}, связать данные. Конечно, можно связать несколько данных в одном месте, как это{{key1}}{{key2}}. При привязке данных к атрибуту метки нужно использовать"{{key}}"

<view>
  <view catch:tap='onBind'>{{date}}{{title}}</view>
</view>

Page({
   data: { 
     date:'stp 17',
     title:' hi icessun'
   },
  onLoad: function (options) {
     var dates={
       date:'stp 18',
       title:'icessun'
     }
     this.setData(dates)
  }
}

Конечно не напрямуюdataЗапишите данные внутрь, эти данные получены с сервера, при инициализации страницы он отправит запрос на сервер, после обработки данных, черезthis.setData()способ привязки данных к странице,this.setData()Полученные в методе параметры эквивалентны записи параметров и размещению их первымиdata属性里面, а затем черезdata属性Пара "ключ-значение" в , привязанная к странице. Конечно, то же имя атрибута (значение ключа) будет перезаписано.

Категории