canisminor wxappダウンロード - canisminor wxappソースコードのダウンロード

canisminor wxapp

AI ソースコード

v2.0.2

ダウンロード

CanisMinor WxApp 2.0

数日前のパーソナルネットワーク 2.0 リビジョンでは、フロントエンドとバックエンドの再構築により、以前の WeChat アプレットで使用されていた多くの古いインターフェイスが維持されなくなったため、WeChat アプレットを UI に接続するのに 2 日を費やしました。最初から最後までフレームワークまで書き直しました（? デザイナー開発の利点は、デザイン案を描かずに直接書き始めることができることです...）。今年の初めに React 風のフレームワークを探していたとき、Weact しか見つかりませんでしたが、コンパイルの煩雑さや開発経験の乏しさから、Weact の選択範囲には入っていませんでした。 1.0ですが、今回フレームワークを選ぶときに、 Taroが出てきました?。

Taro は、JD・Above Lab チームによって開発されました。構文ルールは React と一致するコンポーネント化の考え方を採用しています。同時に、コンポーネントのライフサイクルも React と同様です。可能な限り React と同じであり、JSX 構文の使用をサポートしているため、js/wxss/wxml/json ファイル間を行き来する必要がなく、コードがより表現力豊かになります。同時に、より美しい命名規則とプロジェクト構造も備えています。WeChat ドキュメントのさまざまな命名規則 (キャメルケース、小文字のアンダースコア、小文字の連続書き込み) はひどいですか?

Reacterとして、Taro を使用したプロジェクトの開発はスムーズでスムーズであると言えます。Taro 自身が述べているように、H5、WeChat アプレット、および RN コードをコンパイルおよび生成するために必要なコードは 1 つだけです。効率は確実に向上します。ただし、React プロジェクトを書いたことがない場合、最初は学習コストがかかる可能性があります。

コード例

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

イントロ

npm / yarnを使用したサードパーティの依存関係のインストールと管理をサポートします。
ES7 / ES8またはさらに新しい ES 仕様の使用をサポートし、すべてを構成可能です。
コード形式の管理にはprettierを使用します。
SASS / LESS / postCSSなどのCSS使用をサポートします。
Dva / Redux使用した状態管理をサポートします。
ミニプログラムAPI最適化、非同期API Promiseなど。
完全なmarkdown解析ソリューションを提供するには、 remarkableを使用します。
すべての外部リンクは自動的にQrcodeに変換され、リンクはクリップボードにコピーされます。

プレビュー

余分な

開発者

Github リポジトリ: https://github.com/canisminor1990/canisminor-wxapp

npm または Yarn を使用してグローバルにインストールする

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

npm または Yarn を使用して依存関係をインストールする

$ npm install
# or
$ yarn

アプレットの起動/コンパイル

 # dev + watch
$ yarn start

# build + opt
$ yarn build

ミニプログラム開発ツールを使用して dist ディレクトリを開きます。

プロジェクトの構造

 + 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