Pequenas notas de desenvolvimento do programa

Para permitir que a maioria dos amantes de futebol tenha uma plataforma de batalha rápida e eficaz, ajude-os a resolver a dificuldade da batalha. Assim, nossa equipe desenvolveu o mini-programa de batalha de futebol [ Team Kick it ].

A seguir, resumimos os problemas encontrados no desenvolvimento, porque é a primeira vez que desenvolvemos um pequeno programa; se houver alguma imprecisão, corrija-me.

Problemas de comunicação entre páginas

• Cenário: Página A para Página B, opere na Página B, atualize a Página A após concluir.

• A solução geralmente pode adotar os dois métodos a seguir:

  • Defina variáveis ​​globais em globalData e combine com o método onShow
  • Modelo de publicação e assinatura do Eventbus

Mas aqui está outra maneira de chamar diretamente a página de comunicação através do método hack.Este método vem do artigo de [ u3xyz Click 神 ] Clique aqui para ver . Esse método armazena em cache diretamente o PageModel que precisa ser comunicado.Se você encontrar esse PageModel durante a comunicação, poderá acessar todos os métodos e propriedades desta página. .

class PageModel {
  constructor() {
    this.$$cache = {};
  }

  add(pageModel) {
    let pagePath = this._getPageModelPath(pageModel);

    this.$$cache[pagePath] = pageModel;
  }

  get(pagePath) {
    return this.$$cache[pagePath];
  }

  delete(pageModel) {
    try {
      delete this.$$cache[this._getPageModelPath(pageModel)];
    } catch (e) {
    }
  }

  _getPageModelPath(page) {
    // 关键点: 缓存时用路径作为key, 通过page.__route__获取页面路径
    return page.__route__;
  }
}

let pm = new PageModel();
module.exports = {
  pm: pm
};

//在app.js中引入
App({
  onLaunch: function() {
  },
  pages: pm
})

//PageA
var app = getApp();
Page({
  // 在onLoad中缓存
  onLoad: function (options) {
    app.pages.add(this);
  },
  doRefresh: function() {
  },
  // 可以在onUnload中移除缓存
  onUnload: function (opt) {
    app.pages.delete(this);
  }
})

//PageB
var app = getApp();
Page({
  doSomething: function() {
    //根据路径获取页面缓存
    app.pages.get('pages/pageA').doRefresh();
  }
})

Configurações da imagem de fundo

O projeto requer que a imagem de plano de fundo seja lado a lado e não deslize com a página; definiremos o atributo de anexo de plano de fundo

page {
  background-image: url('https://www.xxx.com/image/background.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;    //设置fixed, 背景图不会随页面滑动
} 

Mas no processo de depuração da máquina real ios, ela não tem efeito.O safari original não suporta o atributo de anexo em segundo plano. De jeito nenhum, você só pode mudar a maneira de pensar, use o atributo z-index

.bg {
  background-image:url('https://www.xxx.com/image/background.jpg');
  background-size: cover; 
  background-repeat: no-repeat;
  position: fixed;
  z-index: -1; 
  top: 0;
  left: 0; 
  width: 100%;
  height: 100%;
} 

<!--wxml-->
<view>
  <view class="bg"></view>
  <view>
    <!--content-->
  </view>
</view>

Estilo de caixa de seleção personalizada

O estilo de caixa de seleção padrão do applet é relativamente simples.O projeto exige que o estilo de caixa de seleção seja semelhante à tag tag, que só pode ser personalizada.

• Use o seletor de pseudo classe marcado para alternar estilos
• Escreva a caixa de seleção + extensão no rótulo, clique no rótulo e a caixa de seleção será selecionada e use o seletor irmão adjacente (+) para modificar o estilo de extensão personalizado

<!--wxml-->
<label>
  <checkbox value="" checked=""/>
  <span></span>
</label>

span {
  //未选中样式
}

//首先隐藏checkbox
checkbox {
  display: none !important;
}

checkbox[checked] + span {
   //选中样式
}

Mas o problema está chegando, o wxss do applet não suporta o seletor irmão adjacente e simplesmente trava. Você só pode julgar o estado selecionado sozinho e modificar o estilo do período

<!--wxml-->
<label>
  <checkbox value="" checked=""/>
  <span class="{{checked ? 'checked' : 'unchecked'}}"></span>
</label>

.unchecked {
  //未选中样式
}

.checked {
   //选中样式
}

De fato, este artigo foi resumido depois que o pequeno programa ficou on-line por algum tempo.Alguns problemas foram esquecidos e é importante resumir durante o desenvolvimento, para lembrar.