задний план

Я много занимался разработкой апплетов WeChat... Я всегда сталкиваюсь с некоторыми официальными компонентами илиapiСвязанные или неразрешимые потребности, поэтому я решил разобраться со своей собственной реализацией здесь (в произвольном порядке)

Настроить использование компонентов

• Создайте 右键新建Component

• Цитировать в файле, на который нужно ссылатьсяjsonопределено в

"注释": "前面为组件名，后面为路径，这里仅供参考"

{
  "usingComponents": {
    "Menu": "../Components/Menu/Menu",
    "Loading": "../Components/Loading/Loading"
  }
}

• входящие свойства

в компонентеjsОпределите имя свойства, тип и значение по умолчанию, которое вам нужно в

properties: {
  theme: {
    type: String,
    value: 'gray'
  }
  ...
},

УведомлениеpropertiesДля данных, которые должны быть переданы родительским компонентом, состояние самого компонента все еще находится в состоянииdataсередина

затем вwxmlможно процитировать в

<Menu theme="{{theme}}"></Menu>

Скин в один клик

сначала создайтеcolor.wxssдля хранения ваших стилей скинов (необязательное имя файла и местоположение)

/* 黑色主题 */
.bg-black{
  background-color: #363636;
}
.col-black-title{
  color: #ffffff;
}
.col-black-name{
  color: #c3c3c3;
}

classдолжен иметь один в имени标志Чтобы различать разные темы, рекомендуется использовать английское название цвета. Тогда вapp.wxssцитируется в

// ~ 为你的文件路径
@import '~/color.wxss';

позжеapp.jsизglobalDataОпределите поле для хранения вашей текущей темы в

globalData: {
  themeArr: ['gray', 'black', 'green', 'orange', 'pink', 'blue'],
  theme: 'black' // gray, black, green, orange, pink, blue
}

Затем ссылайтесь на него в jsapp.js, затем вonLoadполучатьthemeназадsetDataВот и вставьте код сюда

<Menu theme="{{theme}}"></Menu>
<block wx:for="{{themeArr}}" wx:key="{{index}}">
  <view
    class="theme-view-item bg-{{item}} select-{{item == theme}}"
    bindtap='changeTheme'
    data-theme="{{item}}"
  ></view>
</block>

.theme-view-item{
  width: 80rpx;
  height: 40rpx;
  margin: 20rpx;
  border-radius: 10rpx;
}
.select-true{
  transform: scale(1.2,1.2);
}

var app = getApp()

Page({

  data: {
    theme: '',
    themeArr: app.globalData.themeArr
  },

  onLoad: function (options) {
    this.setData({
      theme: app.globalData.theme
    })
  },

  changeTheme(e){
    var theme = e.currentTarget.dataset.theme
    app.globalData.theme = theme
    this.setData({
      theme: theme
    })
  }
})

прийти к рендерингу

Здесь вы также можете использоватьstorageсохранитьtheme

Загрузи больше

использоватьscroll-view

<scroll-view
  scroll-y
  bindscrolltolower='toLow'
  style="height: {{height}}px"
>

scroll-yразрешить вертикальную прокрутку,bindscrolltolowerопределяет функцию, которая должна выполняться при прокрутке вниз,styleиспользуется вjsДоступная высота экрана, полученная из

использоватьscroll-yнеобходимо указатьscrollвысота

onLoad: function (options) {
  wx.getSystemInfo({
    success: (res) => {
      this.setData({
        height: res.windowHeight
      })
    }
  })
},
toLow(){
  this.setData({
    isLoading: true
  })
},

затем вscrollпоставь свой нижеloadingКомпоненты в порядке..

<scroll-view
  scroll-y
  bindscrolltolower='toLow'
  style="height: {{height}}px"
>
  ......
  <view hidden="{{!isLoading}}">
    <Loading></Loading>
  </view>
</scroll-view>

Потяните вниз, чтобы обновить

Эта функция используется официальнымapi, первый вapp.jsonОпределено в разрешении потянуть вниз, чтобы обновить

"window": {
  ......
  "enablePullDownRefresh": true
}

тогда в вашемjsОпределите соответствующую функцию в файле

onPullDownRefresh: function () {
  ......
  wx.stopPullDownRefresh()
},

Вы можете видеть этоофициальная документация

адаптивный

rpxУстройство находится в апплете WeChatcssединица измерения,rpxЕго можно адаптировать в соответствии с шириной экрана, например, вiPhone6, ширина экрана375px, в целом750физические пиксели, затем750rpx= 375px = 750физические пиксели,1rpx = 0.5px = 1физический пиксель

Если вы не понимаете, не думайте об этом слишком много.pxудвоить его размер при использованииrpxТолько что

[Апплет WeChat] —— Анализ взаимосвязи между rpx, px, rem и другими размерами

предотвращение всплытия событий

Предположим, что имеется следующая структура

<view class='A' bindtap='funcA'>
  <view class='B' bindtap='funcB'></view>
</view>

мы вA,BДва независимых события щелчка определены выше, и детская обувь, которая понимает всплывающие события, обнаружит, что если они щелкнутBне только выполняетfuncBтакже будет выполнятьfuncA, так как избежать этой проблемы?

Это очень просто, просто измените функцию привязки, которая не требует всплытия, наcatchtap

<view class='A' bindtap='funcA'>
  <view class='B' catchtap='funcB'></view>
</view>

Как удалить границу кнопки по умолчанию

Апплет WeChatbuttonГраница на самом деле написана вafter, можно найти вafterвнести изменения в

button::after{
  border: none;
}

или изменитьbuttonизpositionпусть это неrelative

button{
    position: static;
}

Процесс входа в мини-программу и доступа

картинка