canisminor wxapp下載 - canisminor wxapp原始碼下載

canisminor wxapp

Ai源碼

v2.0.2

下載

CanisMinor WxApp 2.0

隨著前幾天的個網2.0 改版，因為重構了前端和後端導致之前的微信小程式使用的很多舊接口已不再維護，所以抽了2 天時間把微信小程式從頭到尾導致UI到框架都重寫了一遍（? 設計師開發的好處就是可以不畫設計稿直接開寫...）。年初找類React 框架的時候，只發現了食之無味棄之可惜的weact，但是繁瑣的編譯流程和相對糟糕的開發體驗最終沒有列入1.0 的選擇範圍，但這次在選框架的時候Taro就冒了出來?。

Taro是由京東·凹凸實驗室團隊開發，語法規則基於React 規範，它採用與React 一致的組件化思想，組件生命週期與React 保持一致，同時在書寫體驗上也盡量與React 類似，支持使用JSX 語法，讓程式碼具有更豐富的表現力，無須再在js / wxss / wxml / json 檔案中來回切換。同時也擁有了更優美的命名規範和專案結構，微信文檔中的各種命名規範( 駝峰、小寫中劃線、小寫連寫)，慘不忍睹?。

作為一個Reacter ，那麼用Taro 來開發專案的簡直可以用絲滑柔順來形容，正如Taro 自己所說的，只需要寫一個版本的程式碼，就可以編譯生成H5、微信小程式以及RN 的程式碼，在效率上確實會有所提升。但如果是沒有寫過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 >
    ) ;
  }
}

Intro

支援使用npm / yarn安裝管理第三方依賴。
支援使用ES7 / ES8甚至更加新的ES 規範，一切都可自行設定。
使用prettier進行程式碼格式管理。
支援使用CSS預編譯器，如SASS / LESS / postCSS等。
支援使用Dva / Redux進行狀態管理。
小程式API優化，非同步API Promise化等等。
使用remarkable提供完整markdown解析方案。
所有外鏈自動轉換為Qrcode並將連接複製到剪切板。

Preview

Extra

Dev

Github Repo: 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