canisminor wxapp

CanisMinor WxApp 2.0

Mit der Personal Network 2.0-Revision vor ein paar Tagen werden aufgrund der Rekonstruktion des Front-Ends und Back-Ends viele alte Schnittstellen, die vom vorherigen WeChat-Applet verwendet wurden, nicht mehr beibehalten, sodass ich zwei Tage damit verbracht habe, das WeChat-Applet mit der Benutzeroberfläche zu verbinden Von Anfang bis Ende wurde alles neu geschrieben (? Der Vorteil der Designerentwicklung besteht darin, dass Sie direkt mit dem Schreiben beginnen können, ohne einen Designentwurf zu zeichnen ...). Als ich Anfang des Jahres nach einem React-ähnlichen Framework suchte, fand ich nur Weact, was geschmacklos war und es schade war, es aufzugeben. Der umständliche Kompilierungsprozess und die relativ schlechte Entwicklungserfahrung waren jedoch nicht im Auswahlbereich enthalten 1.0, aber dieses Mal kam bei der Auswahl eines Frameworks Taro heraus?.

Taro wurde vom JD·Above Lab-Team entwickelt. Die Syntaxregeln basieren auf der Komponentisierungsidee, die mit React übereinstimmt so weit wie möglich reagieren und die Verwendung der JSX-Syntax unterstützen, wodurch der Code ausdrucksvoller wird, ohne dass zwischen js/wxss/wxml/json-Dateien hin und her gewechselt werden muss. Gleichzeitig hat es auch eine schönere Namenskonvention und Projektstruktur. Sind die verschiedenen Namenskonventionen in WeChat-Dokumenten schrecklich?

Als Reactor kann die Verwendung von Taro zum Entwickeln von Projekten als reibungslos und reibungslos beschrieben werden. Wie Taro selbst sagte, muss nur eine Version des Codes geschrieben werden, um H5-, WeChat-Applet- und RN-Code zu kompilieren und zu generieren. Wenn Sie jedoch noch nie ein React-Projekt geschrieben haben, können am Anfang dennoch Lernkosten anfallen.

Codebeispiel

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

Einführung

• Unterstützt die Verwendung npm / yarn zum Installieren und Verwalten von Abhängigkeiten von Drittanbietern.
• Unterstützt die Verwendung von ES7 / ES8 oder noch neueren ES-Spezifikationen, alles ist konfigurierbar.
• Verwenden Sie prettier für die Codeformatverwaltung.
• Unterstützt die Verwendung CSS Precompilern wie SASS / LESS / postCSS usw.
• Unterstützt die Zustandsverwaltung mit Dva / Redux .
• Miniprogramm- API Optimierung, asynchrones API Promise usw.
• Verwenden Sie remarkable um eine vollständige markdown Parsing-Lösung bereitzustellen.
• Alle externen Links werden automatisch in Qrcode konvertiert und die Links werden in die Zwischenablage kopiert.

Vorschau

Extra

Entwickler

Github Repo: https://github.com/canisminor1990/canisminor-wxapp

Global mit npm oder Yarn installieren

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

Verwenden Sie npm oder Yarn, um Abhängigkeiten zu installieren

$ npm install
# or
$ yarn

Applet starten/kompilieren

 # dev + watch
$ yarn start

# build + opt
$ yarn build

Verwenden Sie das Mini-Programmentwicklungstool, um das Verzeichnis dist zu öffnen

Projektstruktur

 + 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

• Taro:
  • Repo
  • dokumentieren
• WxApp:
  • rahmen
  • Komponenten
  • API
  • Entwicklertools