canisminor wxapp

CanisMinor WxApp 2.0

Avec la révision du réseau personnel 2.0 il y a quelques jours, en raison de la reconstruction du front-end et du back-end, de nombreuses anciennes interfaces utilisées par l'applet WeChat précédente ne sont plus maintenues, j'ai donc passé 2 jours à connecter l'applet WeChat à l'interface utilisateur du début à la fin. Tout jusqu'au framework a été réécrit (? L'avantage du développement designer est que vous pouvez commencer à écrire directement sans dessiner un brouillon de conception...). Lorsque je cherchais un framework de type React au début de l'année, je n'ai trouvé que Weact, qui était de mauvais goût et dommage d'être abandonné. Cependant, le processus de compilation fastidieux et l'expérience de développement relativement médiocre n'étaient pas inclus dans la gamme de sélection. 1.0, mais cette fois lors du choix d'un framework, Taro était Sorti ?.

Taro a été développé par l'équipe JD·Above Lab. Ses règles de syntaxe sont basées sur la spécification React. Il adopte l'idée de composantisation cohérente avec React. En même temps, l'expérience d'écriture est tout aussi similaire. as React autant que possible et prend en charge l'utilisation de la syntaxe JSX, rendant le code plus expressif sans avoir à basculer entre les fichiers js/wxss/wxml/json. En même temps, il a également une convention de dénomination et une structure de projet plus belles. Les différentes conventions de dénomination dans les documents WeChat (camel case, trait de soulignement minuscule, écriture continue minuscule) sont terribles ?

En tant que Reacter , l'utilisation de Taro pour développer des projets peut être décrite comme simple et fluide. Comme Taro lui-même l'a dit, il suffit d'écrire une seule version du code pour compiler et générer H5, l'applet WeChat et le code RN seront en effet améliorés. Mais si vous n’avez jamais écrit de projet React, il peut y avoir des coûts d’apprentissage au début.

exemple de code

 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 >
    ) ;
  }
} 

Introduction

• Prend en charge l'utilisation de npm / yarn pour installer et gérer les dépendances tierces.
• Prend en charge l'utilisation de ES7 / ES8 ou même de spécifications ES plus récentes, tout est configurable.
• Utilisez prettier pour la gestion du format de code.
• Prend en charge l'utilisation CSS tels que SASS / LESS / postCSS , etc.
• Prend en charge la gestion de l'état à l'aide de Dva / Redux .
• Optimisation API du mini programme, API Promise asynchrone, etc.
• Utilisez remarkable pour fournir une solution complète d’analyse markdown .
• Tous les liens externes sont automatiquement convertis en Qrcode et les liens sont copiés dans le presse-papiers.

Aperçu

Supplémentaire

Développeur

Dépôt Github : https://github.com/canisminor1990/canisminor-wxapp

Installer globalement en utilisant npm ou fil

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

Utilisez npm ou Yarn pour installer les dépendances

$ npm install
# or
$ yarn

Démarrer/compiler l'applet

 # dev + watch
$ yarn start

# build + opt
$ yarn build

Utilisez le mini outil de développement de programme pour ouvrir le répertoire dist

Structure du projet

 + 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

Lien

• Taro :
  • Repo
  • document
• WxApp :
  • cadre
  • composants
  • API
  • Outils de développement