weapp mark

Marca

Este é um projeto puramente de entretenimento e aprendizagem. Ocasionalmente, registro os problemas e ideias encontrados durante o desenvolvimento e os atualizo de tempos em tempos. Se você tiver alguma sugestão, diga-me (problemas). O projeto possui componentes próprios encapsulados, que podem ser visualizados na estrutura do projeto.

Todos os dados de filmes e televisão são fornecidos pela API Douban. Atualmente, não há interface de pesquisa Douban gratuita disponível. A interface que forneci é implantada no Vercel. Ela não pode ser adicionada ao backend do WeChat sem registro. As funções de desenvolvimento pessoal do miniprograma são muito limitadas e não podem ser totalmente iniciadas. Se desejar, você pode clonar o projeto e executá-lo você mesmo.

? Experiência de digitalização

? Galhos

1. principal - Usando o desenvolvimento em nuvem do miniprograma WeChat, um miniprograma completo pode ser desenvolvido sem plano de fundo.
2. master - o serviço em segundo plano é suportado pelo serviço de nuvem LeanCloud.
3. cdn-ui – Não há suporte de serviço em segundo plano e todos os arquivos JSON estáticos de blogs pessoais são feitos usando solicitações HTTP.

Mapa mental on-line

Coisas a serem observadas:

Para utilizar um componente customizado Component, a biblioteca da versão básica do miniprograma deve ser superior a 1.6.3;

Para usar o wxParse, a biblioteca da versão básica do miniprograma deve ser 1.6.6 ou superior.

Ligação bidirecional simples de miniprogramas, biblioteca de versão básica de miniprogramas 2.9.3 e superior

? Características

• Função de nuvem implementa login do WeChat
• As tarefas agendadas da função Cloud realizam cartões diários
• Consulta de agregação de função de nuvem realiza coleta de cartão
• Layout de tabela de grade com várias colunas
• Layout de grade implementa fluxo em cascata
• Função de nuvem rastreia tendências do GitHub
• Sobre a reprodução de áudio em segundo plano da página
• Use modelo e componente respectivamente para implementar componentes públicos
• Animação de propriedade CSS3

? Código de Conduta

Depois de muito tempo, esqueci quais especificações que defini para mim antes fizeram com que o código ficasse muito inconsistente. Posso fazer backup das especificações do projeto para mim mesmo?

CODE_OF_CONDUCT.md

? Correr

Clone este projeto e use a ferramenta de desenvolvimento Web WeChat para abrir o diretório raiz do projeto

Instalar dependências

yarn # or npm install

Ferramentas da barra de menu -> Construir npm

Ambiente de desenvolvimento em nuvem

Depois de abrir o ambiente de desenvolvimento em nuvem, sincronize o projeto /cloudfunctions/ com a nuvem (consulte Inicialização do ambiente de desenvolvimento em nuvem) e modifique app.js

 wx . cloud . init ( {
  traceUser : true ,
  env : 'dev-oucwt' // 此处替换为你自己的云环境 ID
} ) ;

Nota: a depuração precisa estar ativada ao visualizar o ambiente de desenvolvimento em uma máquina real

API simulada

Consulte a documentação oficial API Mock/Rules para importação e exportação e importe mock/mock.config.json. O recurso Mock fornecido pelas ferramentas de desenvolvimento atualmente não oferece suporte à visualização móvel.

Nota: Se você não tiver um AppID, talvez não consiga ver os dados e visualizá-los em seu telefone. As ferramentas de desenvolvimento precisam desativar a verificação de nomes de domínio seguros. Barra de ferramentas --> Detalhes --> Configurações do projeto --> Marcar Não verificar nomes de domínio seguros... e certificados HTTPS .

?NotasNotas

Vercel hospeda Next para implementar GitHub Trending API

Mini programa usa IconFont

Caso de tabela de associação de desenvolvimento em nuvem (coleção)

Pensamentos ao escrever um projeto

Nota enquanto escreve

Mini programa usa fontes externas

Implementação de modelo de componente de pontuação personalizada do miniprograma (precisão 0,1)

Componente de pontuação personalizada do miniprograma - Implementação do componente (precisão 0,1)

?EstruturaEstrutura

 ├── apis
├── assets
├── components  组件化 Component
│    ├── cover-page 可下拉关闭的半屏组件
│    ├── pre-image 图片预加载
│    ├── rating 评分
│    └── tabs
├── cloudfunctions
├── pages
│    └── common  模板 template
│        ├── actionsheet 操作菜单
│        ├── cell 列表单元
│        ├── dropmenu 下拉菜单
│        ├── loading 加载/加载更多
│        ├── rating  评分
│        ├── share 底部分享菜单
│        ├── wxParse  富文本、HTML 和 MD 解析，小程序基础版本库 1.6.6 及以上
│        └── component.js  wux 针对 template 的组件化，写得挺好，借鉴一下
├── style
│    ├── weui.wxss
│    ├── animate.wxss CSS 动画
│    └── font-awesome.min.wxss Font Awesome 字体图标
├── utils
│    └── wxCloud.js 云函数二次封装
├── app.js
├── app.json
└── app.wxss

Pontos problemáticos

• Os miniprogramas não suportam componentes globais e exigem que os componentes sejam introduzidos em todas as páginas. Como personalizar a caixa de prompt global

? Referência

1. Estilo de UI oficial do WeChat weui-wxss
2. Análise de rich text, HTML e Markdown wxParse
3. Componente personalizado wux para modelo
4. O serviço de nuvem LeanCloud fornece suporte em segundo plano
5. Ambiente de desenvolvimento de serviços em nuvem (oficial)
6. Solução de miniprograma (oficial)