canisminor wxapp

CanisMinor WxApp 2.0

Com a revisão da rede pessoal 2.0 há alguns dias, devido à reconstrução do front-end e back-end, muitas interfaces antigas usadas pelo miniaplicativo WeChat anterior não são mais mantidas, então gastei 2 dias para conectar o miniaplicativo WeChat à IU do começo ao fim. Tudo até a estrutura foi reescrito (? A vantagem do desenvolvimento do designer é que você pode começar a escrever diretamente, sem desenhar um rascunho de design...). Quando eu estava procurando uma estrutura semelhante ao React no início do ano, encontrei apenas o Weact, que era de mau gosto e uma pena abandoná-lo. No entanto, o complicado processo de compilação e a experiência de desenvolvimento relativamente pobre não foram incluídos na seleção de. 1.0, mas desta vez na hora de escolher um framework, Taro foi lançado?.

Taro foi desenvolvido pela equipe do JD·Above Lab. Suas regras de sintaxe são baseadas na especificação React. Ele adota a ideia de componenteização consistente com o React. como React tanto quanto possível e suporta o uso da sintaxe JSX, tornando o código mais expressivo sem ter que alternar entre arquivos js/wxss/wxml/json. Ao mesmo tempo, ele também tem uma convenção de nomenclatura e estrutura de projeto mais bonitas. As várias convenções de nomenclatura em documentos WeChat (caixa de camelo, sublinhado minúsculo, escrita contínua em minúsculas) são terríveis?

Como um Reacter , usar o Taro para desenvolver projetos pode ser descrito como suave e suave. Como o próprio Taro disse, você só precisa escrever uma versão do código para compilar e gerar o miniaplicativo H5, WeChat e o código RN. Mas se você nunca escreveu um projeto react, ainda pode haver custos de aprendizagem no início.

exemplo de código

 import Taro , { Component } from "@tarojs/taro" ;
import { View , Button } from "@tarojs/components" ;
import { connect } from "@tarojs/redux" ;
import "./index.scss" ;

@ connect ( ( { home , loading } ) => ( {
  ... home ,
  loading : loading . effects [ "home/get" ]
} ) )
export default class extends Component {
  constructor ( ) {
    super ( ... arguments ) ;
    this . state = {
      title : "首页" ,
      list : [ 1 , 2 , 3 ]
    } ;
  }

  config = {
    navigationBarTitleText : "Home"
  } ;

  componentWillMount ( ) { }

  componentDidMount = ( ) => {
    this . props . dispatch ( action ( "home/get" ) ) ;
  } ;

  componentWillUpdate ( nextProps , nextState ) { }

  componentDidUpdate ( prevProps , prevState ) { }

  shouldComponentUpdate ( nextProps , nextState ) {
    return true ;
  }

  onShareAppMessage = ( ) => {
    return {
      title : "Home" ,
      path : "routes/home/index"
    } ;
  } ;

  onClick = str => {
    // dosth
  } ;

  render ( ) {
    return (
      < View className = "index" >
        < View className = "title" > { this . state . title } </ View >
        < View className = "content" >
          { this . state . list . map ( item => (
            < View className = "item" > { item } </ View >
          ) ) }
          < Button className = "add" onClick = { this . onClick . bind ( this , "str" ) } >
            添加
          </ Button >
        </ View >
      </ View >
    ) ;
  }
} 

Introdução

• Suporta o uso de npm / yarn para instalar e gerenciar dependências de terceiros.
• Suporta o uso de ES7 / ES8 ou até mesmo especificações ES mais recentes, tudo é configurável.
• Use prettier para gerenciamento de formato de código.
• Suporta o uso CSS como SASS / LESS / postCSS , etc.
• Suporta gerenciamento de estado usando Dva / Redux .
• Otimização API de miniprograma, API Promise assíncrona, etc.
• Use remarkable para fornecer uma solução completa de análise markdown .
• Todos os links externos são convertidos automaticamente para Qrcode e os links são copiados para a área de transferência.

Visualização

Extra

Desenvolvedor

Repositório Github: https://github.com/canisminor1990/canisminor-wxapp

Instale globalmente usando npm ou yarn

$ npm install -g @tarojs/cli
# or
$ yarn global add @tarojs/cli

Use npm ou yarn para instalar dependências

$ npm install
# or
$ yarn

Iniciar/compilar miniaplicativo

 # dev + watch
$ yarn start

# build + opt
$ yarn build

Use a ferramenta de desenvolvimento de miniprograma para abrir o diretório dist

Estrutura do projeto

 + src
  + components
    + Card
      - index.js
      - index.scss
    ...
  + models
    - hola.js
    ...
  + routes
    + hola
      - index.js
      - index.scss
    ...
  + styles
    - var.scss
    ...
  + utils
    - request.js
    ...
  - app.js
  - dva.js
  - index.scss
  - index.html
+ public
  - assets.png
  ...
- project.config.json
- package.json

Link

• Tarô:
  • Repositório
  • documento
• WxApp:
  • quadro
  • componentes
  • API
  • Ferramentas para desenvolvedores