Заметки о разработке апплета WeChat, вы их собрали?

Апплет WeChat
Заметки о разработке апплета WeChat, вы их собрали?

Недавно я разрабатывал апплет WeChat и записал знания, с которыми часто сталкивался в проекте, чтобы проверить их в следующий раз, когда буду разрабатывать.
Для разработки средств разработки апплетов рекомендуется писать код в vscode, а для просмотра эффекта и отладки используется средство разработки WeChat.

1. Настройте строку заголовка

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

"navigationStyle": "custom"

2. Получить информацию о пользователе

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

<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>

bindGetUserInfo (e) {
    console.log(e.detail.userInfo) // 获取到用户信息
}

Вызывается при авторизации"wx.getUserInfo","wx.getSetting"Чтобы определить, авторизован ли пользователь

wx.getSetting({
  success (res){
    if (res.authSetting['scope.userInfo']) {
      // 已经授权，可以直接调用 getUserInfo 获取头像昵称
      wx.getUserInfo({
        success: function(res) {
          console.log(res.userInfo)
        }
      })
    } else {
        // 未授权
    }
  }
})

3. Ввод устанавливает стиль заполнителя 

<input placeholder="请输入手机号码" placeholder-class="placeholderinput"></input>

.placeholderinput {
  color: #CCCCCF;
  font-size: 36rpx;
}

4. Маршрутизация

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

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

Перейти на страницу в приложении, но нельзя перейти на страницу панели вкладок и закрыть текущую страницу

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

Сохраняйте текущую страницу и переходите на страницу в приложении. Но не могу перейти на страницу панели вкладок.

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

5. Допустимые значения общего режима компонентов изображения отсортированы

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

 <image src="/images/pic.jpg" class="pic" mode="aspectFill"></image>

.pic {
  width: 600rpx;
  height: 500rpx;
  border: 1rpx solid #ccc;
}

Что происходит с изображением при установке следующих свойств

  • scaleToFill Ширина и высота изображения полностью растягиваются, чтобы заполнить элемент изображения, что изменит соотношение сторон изображения и деформирует изображение.

  • аспектFit Картинка отображается полностью, а соотношение сторон картинки остается неизменным.

  • аспектЗаполнить Соотношение сторон картинки без изменений, для полного отображения она будет обрезана

общий"aspectFit" "aspectFill"эти двое

6. Установите вход"confirm-type"юридическая ценность

Установите текст кнопки в правом нижнем углу клавиатуры, который вступает в силу, когда type="text"

  • отправить Кнопка в правом нижнем углу "Отправить"
  • поиск Кнопка в правом нижнем углу "Искать"
  • далее Кнопка в правом нижнем углу "далее"
  • перейти Кнопка в правом нижнем углу "Перейти"
  • готово Кнопка в правом нижнем углу "Готово"

Для того, чтобы реализовать унифицированную настройку типа подтверждения для Android и iOS, также необходимо.Значение по умолчанию выполнено, значение по умолчанию для Android — Enter, а значение по умолчанию для iOS — Complete, поэтому первые четыре параметра один и тот же может быть унифицирован.

❤️Спасибо

Все они записаны в недавних проектах, и более простые также используются чаще. Добро пожаловать, чтобы обменяться и исправить меня.
Обратите внимание на публичный аккаунт WeChat"Фронтенд Сяояо", в постоянном обновлении, если вы заинтересованы, вы можете подписаться на меня, ответить «Присоединяйтесь» и добавить меня в WeChat, мы будем общаться и учиться вместе.
Если эта статья была вам полезна, не забудьте поставить лайк!

В этой статье используетсяmdniceнабор текста

Категории