problemas do aplicativo wechat
Há muito tempo que sei que a armadilha dos miniprogramas é muito profunda. Depois de mais de um mês de prática, descobri que essa armadilha é realmente bem merecida.
Porém, o pequeno programa desenvolvido foi lançado conforme previsto, o que ainda vale a pena comemorar! ! ! Haha, registre os pontos que te fazem pausar.
1. Armadilhas encontradas no desenvolvimento de miniprogramas WeChat
- 1. {{}} não pode executar métodos e só pode lidar com operações simples como "+ - * /". Por exemplo, ao percorrer uma lista, a quantidade de cada item só pode ser pré-formatada. js e depois setData uma vez (╯□╰)
- 2. Você só pode passar, você só pode passar, você só pode atualizar a visualização através de setData(), armadilha...
- 3. Estipulamos que o caminho da página só pode ter cinco níveis. Tente evitar interações em vários níveis.
- 4. Página A -> Página B, a página B retorna para A, como acionar a atualização de A sem aumentar o nível da página. A solução que vem à mente por enquanto: escrever a lógica dos dados de inicialização de A no evento onshow da página A.
- 5.
indefinido é tratado como uma string if(xxx == "indefinido") [Otimização iterativa em versões posteriores] - 6. Ao encontrar problemas estranhos (como estilos, etc.), reinicie a ferramenta primeiro e ela nunca funcionará após repetidas tentativas.
- 7. Fontes locais da web não são suportadas (fontes on-line precisam ser usadas. Após o teste, descobriu-se que alguns dispositivos Android não podem ser exibidos corretamente). Depois de muitos problemas, descobri que o servidor que originalmente precisava armazenar as fontes precisava oferecer suporte a vários domínios. Droga, nenhum erro é relatado durante a depuração no celular. Quase desisti das fontes da web. Estou preso há muito tempo, é uma armadilha...
- 8. Se os recursos locais não puderem ser obtidos por meio de CSS, você poderá usar imagens de rede, ou base64, ou usar a tag
<image/>
. - 9. Page.data não pode ser operado diretamente [Evite atribuir e modificar diretamente Page.data, use Page.setData para sincronizar os dados com a página para renderização]
- 10. Use type="digit" para o teclado numérico
- 11. O que acontece se você usou https, mas relata que não consegue estabelecer uma conexão segura com o servidor [Você precisa configurar o nginx para configurar o padrão de criptografia de https para tls1.2 e superior]
- 12. wx.setStorage(OBJECT) [Atualmente, cada miniprograma está limitado a 5M]
- 13. Monitoramento de dados [back-end do WeChat: número real de visitas/visão geral de ontem/número cumulativo de usuários visitados/principais páginas visitadas]
- 14. Artefato de depuração do WeChat, ngrok, consulte ngrok
- 15. Adicione efeito de clique para visualizar [é necessário ativar o efeito de foco]:
< view hover hover-class =" item-hover " >
- 16. Método de depuração de autorização do usuário [Ferramentas de desenvolvimento-》Limpar dados de autorização do telefone celular (Cache-Limpar dados de autorização do telefone celular)]
- 17. Quando o miniprograma é carregado pela primeira vez no telefone Android, na página inicial, o método onshow será carregado duas vezes inexplicavelmente, mas não será carregado no iPhone, pois precisa ser acionado no onshow para. obter informações do usuário, o sistema será carregado duas vezes. Um erro será relatado em segundo plano. . .
- 18. Desative o menu suspenso da página: Defina "disableScroll": true.
- 19. getAppConfig:fail aparecerá no Android e userInfo não poderá ser obtido. Problema do WeChat, baixe o pacote de instalação mais recente do WeChat
- 20. O background não pode aceitar dados POST, mas pode receber parâmetros de solicitação GET.
url: url,
data: data,
method: "POST",
dataType: "json",
header: {
'content-type': 'application/x-www-form-urlencoded' //==> 此处若为application/json则服务端无法获取POST的参数
}
- 21. Após o usuário recusar a autorização ao iniciar o miniprograma pela primeira vez, a caixa pop-up de autorização não poderá ser evocada na próxima vez e a última escolha do usuário será lembrada por padrão. Nenhuma solução foi encontrada ainda e o WeChat não possui análises relevantes. 【2017-01-10】 O WeChat atualizou a API (wx.authorize(OBJECT)) para suportar a evocação de caixas pop-up de autorização【2017-07-05】
- 22. Para ir para uma página com barra de guias, você deve usar wx.switchTab(). Isso é solicitado em vários grupos quase todos os dias! ! !
- 22. Ao vincular desenvolvedores/experimentadores, lembre-se de confirmar o convite no seu celular. (Muitas pessoas perguntaram)
- 23. O plano de fundo do WeChat atualizou o nome de domínio legal da solicitação. Você pode ir diretamente para Ferramentas de desenvolvimento do WeChat -> Projeto -> Informações de configuração -> Atualizar e entrará em vigor imediatamente.
- 24. O miniprograma oficial não fornece um exemplo de descriptografia de informações de login da versão Java. Você pode usar esta demonstração de descriptografia da versão Java.
- 25. Ao usar wx:for para percorrer, é melhor adicionar wx:key="{{item.id}}". Se você sabe claramente que a lista é estática ou não precisa prestar atenção à sua ordem. , você pode optar por ignorá-lo. No entanto, se a matriz percorrida for alterada, a sequência de dados poderá mudar.
- 26. A conveniência da página de desenvolvimento do miniprograma é rpx, por isso é recomendado usar o tamanho do iPhone 6 para o rascunho do design. Para layout flexível, consulte este artigo
- 27. O miniaplicativo WeChat monitorará as alterações do arquivo por padrão e depois será atualizado automaticamente. Mas a desvantagem é que ele é totalmente atualizado todas as vezes, em vez da substituição a quente dos módulos, o que afetará a velocidade de desenvolvimento. Especialmente para desenvolvedores que gostam de Command + S frequentes, você descobrirá que seu miniprograma é constantemente atualizado. @MinJieLiu
- 28. O miniprograma WeChat suporta o componente
web-view
desde a biblioteca básica 1.6.4
, ou seja, o miniprograma suporta a capacidade de incorporar páginas web, porém, ao utilizá-lo, constatou-se que a página web não pode ser. exibido nas ferramentas do desenvolvedor, mas a visualização móvel pode ser [atualizada] para a versão mais recente do cliente WeChat]. A razão é que a biblioteca básica usada não suporta web-view
, o que pode ser resolvido selecionando a biblioteca básica mais recente. do seguinte modo:
- 29. A comunicação entre H5 e miniprogramas não é suportada e não pode ser comunicada através de armazenamento local ou outros meios. Se for absolutamente necessário transportar parâmetros, você pode tentar carregá-los no URL
web-view
, mas isso não é recomendado. pode ser autorizado usando a conta oficial. Capacidades abertas de visualização da Web (as páginas da Web precisam incorporar jssdk): Interfaces JSSDK suportadas em páginas da Web: - 30. A visualização na web atualmente não oferece suporte para pagamento por WeChat.
- 31. No miniprograma,
catch
da instrução try...catch
usa throw
para lançar um erro, que não pode ser detectado pelo try...catch
externo.
2. Configurações relacionadas antes do desenvolvimento do miniprograma
- 1. Login ---> O administrador verifica o código QR -> Configurações -> Configurações de desenvolvimento -> Gerar AppSecrect
- 2. Login de configuração do servidor ---> O administrador verifica o código QR --> Configurações --> Configurações de desenvolvimento --> Nome de domínio do servidor --> Digitalize o código QR
- 3. Vincule a identidade do usuário do desenvolvedor -> Desenvolvedor -> Até 10 desenvolvedores de código QR
- 4. Vincule a identidade do usuário do experimentador -> Experimentador -> Digitalize o código QR para 20 experimentadores
3. Lançamento do miniprograma
A publicação só pode ser feita com uma conta de administrador. As etapas são as seguintes:
- Saia da conta do desenvolvedor nas ferramentas de desenvolvimento
- O administrador escaneia o código QR para fazer login nas ferramentas do desenvolvedor, fazer upload -> definir o plano de fundo do WeChat como uma versão de teste -> revisar -> publicar
Nota: O tempo de revisão é variável, 2 a 6 dias
4. Coleta de motivos para não aprovação na revisão
- 1. A introdução ao miniprograma não apresenta as funções do miniprograma.
- 2. A categoria é inconsistente com o conteúdo fornecido na página
- 3. Os serviços e conteúdos disponibilizados pelo miniprograma devem ser formais e não podem ser submetidos como conteúdo de teste ou submetidos como conteúdo de teste múltiplas vezes.
- 4. Se contiver conteúdo de áudio e vídeo, adicione as categorias correspondentes relevantes.
- 5. As imagens e o texto da página inicial se sobrepõem, por isso é recomendável otimizá-los.
- 6. A caixa de pesquisa só pode ser selecionada após alguns cliques. Não há resposta ao clicar nos comentários da página. A resolução e o tamanho das imagens da página estão distorcidos.
- 7. Algumas fotos mostram que estavam comprimidos e o exame físico não era bom.
- 8. Os miniprogramas com sistema de conta devem suportar login autorizado do WeChat, além de seus próprios métodos de login.
- 9. Para serviços que devem estar logados para uso, forneça uma conta de teste
- 10. Existe negociação on-line de itens virtuais. O sistema iOS requer IAP. O miniprograma não paga por enquanto.
- 11. O conteúdo principal da página correspondente à categoria de serviços de miniprogramas deve ser consistente com essa categoria.
- 12. Deve-se garantir que os usuários possam utilizar a categoria de serviço desta página e não devem ocultar ou fazer vários saltos.
- 13. Não exiba nem recomende miniprogramas de terceiros. Exemplo: navegação de miniprogramas, promoção de links de miniprogramas, classificações de miniprogramas, etc.
- 14. Existem comportamentos de incentivo no conteúdo da página de miniprogramas, incluindo, entre outros, incentivo para compartilhar, incentivo para adicionar, incentivo para seguir contas públicas, incentivo para fazer download, etc. Programas que exigem que os usuários compartilhem, adicionem, sigam ou baixar antes de poderem operar, contêm miniprogramas que expressam ou implicam direitos autorais, imagens, botões, sobreposições, janelas pop-up, etc. que os usuários compartilham, miniprogramas que induzem os usuários a compartilhar e espalhar pela tentação de benefícios, miniprogramas que usar palavras exageradas para coagir ou induzir os usuários a compartilhar, forçar ou induzir Quaisquer miniprogramas adicionados pelos usuários serão rejeitados;
- 15. Proibir a reprodução automática de multimídia, como vídeos, músicas e vozes.
- 16. Se o miniprograma possuir um sistema de contas, ele deverá fornecer uma opção de “sair” da conta que possa ser usada normalmente e seja fácil de encontrar.
- 17. O conteúdo do miniprograma não pode incluir jogos de azar, quizzes e sorteios.
- 18. O conteúdo do teste não pode existir no conteúdo da página do miniprograma. Exemplos: leitura da sorte, loteria, horóscopo, etc.
Situações comuns de rejeição em outras plataformas de miniprogramas WeChat
5. Documentação e Comunidade
- 1. Documentos oficiais
- 2. Perguntas e respostas oficiais
- 3. Comunidade oficial
- 4. Mini guia de acesso ao programa
- 5. Perguntas frequentes comuns sobre miniprogramas
6. código
- 1. Encapsule a interface de solicitação de inicialização do WeChat. Se o login falhar, a solicitação de login será iniciada automaticamente por padrão.
/**
* 发起的是 HTTPS 请求
* @pram url: 请求地址,协议必须为https
* @pram data 请求参数请求参数
* @param success 请求成功回调
* @param fail 请求失败回调
* @param complete 请求完成(成功或者失败)回调
*/
function request ( url , data , success , fail , complete ) {
var _url = url ,
_data = data ,
_success = success ,
_fail = fail ,
_complete = complete ;
wx . request ( {
url : url ,
data : data ,
method : "POST" ,
dataType : "json" ,
header : {
'content-type' : 'application/x-www-form-urlencoded' ,
'Client-Agent' : getSystemInfo ( ) ,
'WX-SESSION-ID' : wx . getStorageSync ( constant [ 'WX-SESSION-ID' ] ) //每次请求带上登录标志
} ,
success : function ( res ) {
if ( res . data . code == "-9999" ) { //会话失效重新登录
requestLogin ( function ( ) {
constant [ 'NUM_TRY_LOGIN' ] ++ ;
//设置请求上限,防止重复提交并死循环
if ( constant [ 'NUM_TRY_LOGIN' ] < constant [ 'LIMIT_NUM_TRY_LOGIN' ] ) {
request ( _url , _data , _success , _fail , _complete ) ;
}
} ) ;
return ;
}
if ( res . data . code == "0" ) {
if ( typeof _success == "function" ) {
_success ( res . data ) ;
}
} else {
wx . showToast ( { title : res . data . msg , icon : 'loading' , duration : 2000 } ) ;
return ;
}
} ,
fail : function ( res ) {
if ( typeof _fail == "function" ) {
_fail ( res ) ;
}
if ( typeof _fail == "string" ) { //请求失败的弹框提示
wx . showToast ( { title : _fail , icon : 'loading' , duration : 2000 } ) ;
}
} ,
complete : function ( res ) {
if ( typeof _complete == "function" ) {
_complete ( res ) ;
}
}
} ) ;
}
- 2. Solicite interface de login
/**
* 请求登录,获取用户相关信息
* @param callback
*/
function requestLogin ( callback ) {
var _callback = callback ;
wx . login ( {
success : function ( event ) {
// 获取到请求码,继续请求用户的基本信息
if ( event . code ) {
var code = event . code ;
wx . getUserInfo ( {
success : function ( res ) {
var data = {
code : code ,
encryptedData : res . encryptedData ,
iv : res . iv ,
signature : res . signature ,
rawData : res . rawData
}
var url = domain + "/wx_xxx" ; //请求登录地址
request ( url , data ,
function ( res ) { //success
if ( res . code == "0" ) {
//此处可以将服务端返回的登录状态保存起来
wx . setStorageSync ( constant [ 'WX-SESSION-ID' ] , res . object . sessionId ) ;
if ( typeof _callback == "function" ) {
_callback ( ) ;
}
}
} ,
function ( res ) { //fail
wx . showToast ( { title : '请求登录失败' , icon : 'loading' , duration : 2000 } ) ;
}
) ;
} ,
fail : function ( res ) {
//用户拒绝授权
if ( res . errMsg == "getUserInfo:cancel" || res . errMsg == "getUserInfo:fail auth deny" ) {
wx . redirectTo ( { //跳转至未授权页面
url : '../xxx-page/xxx-page'
} ) ;
}
}
} )
} else {
wx . showToast ( { title : '微信登录失败' , icon : 'loading' , duration : 2000 } ) ;
}
} ,
fail : function ( res ) {
wx . showToast ( { title : '微信登陆失败!' , icon : 'loading' , duration : 2000 } ) ;
}
} ) ;
}