canisminor wxapp

CanisMinor WxApp 2.0

Dengan revisi jaringan pribadi 2.0 beberapa hari yang lalu, karena rekonstruksi ujung depan dan belakang, banyak antarmuka lama yang digunakan oleh applet WeChat sebelumnya tidak lagi dipertahankan, jadi saya menghabiskan 2 hari untuk menghubungkan applet WeChat ke UI dari awal hingga akhir. Semuanya hingga kerangka telah ditulis ulang (? Keuntungan pengembangan desainer adalah Anda dapat mulai menulis secara langsung tanpa menggambar draf desain...). Ketika saya mencari kerangka kerja mirip React di awal tahun, saya hanya menemukan Weact, yang tidak berasa dan sayang untuk ditinggalkan, namun proses kompilasi yang rumit dan pengalaman pengembangan yang relatif buruk tidak termasuk dalam rentang pilihan 1.0, tapi kali ini saat memilih framework, Taro yang keluar?.

Taro dikembangkan oleh tim JD·Above Lab. Aturan sintaksisnya didasarkan pada spesifikasi React. Taro mengadopsi ide komponenisasi yang konsisten dengan React sebagai Bereaksi sebanyak mungkin, dan mendukung penggunaan sintaksis JSX, membuat kode lebih ekspresif tanpa harus berpindah-pindah antara file js/wxss/wxml/json. Pada saat yang sama, ia juga memiliki konvensi penamaan dan struktur proyek yang lebih indah. Berbagai konvensi penamaan dalam dokumen WeChat (huruf unta, garis bawah huruf kecil, penulisan huruf kecil terus menerus) buruk?

Sebagai Reacter , menggunakan Taro untuk mengembangkan proyek dapat dikatakan lancar dan lancar. Seperti yang dikatakan Taro sendiri, Anda hanya perlu menulis satu versi kode untuk mengkompilasi dan menghasilkan H5, applet WeChat, dan kode RN. Namun jika Anda belum pernah menulis proyek reaksi, mungkin masih ada biaya pembelajaran di awal.

contoh kode

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

Pendahuluan

• Mendukung penggunaan npm / yarn untuk menginstal dan mengelola dependensi pihak ketiga.
• Mendukung penggunaan ES7 / ES8 atau bahkan spesifikasi ES yang lebih baru, semuanya dapat dikonfigurasi.
• Gunakan prettier untuk manajemen format kode.
• Mendukung penggunaan precompiler CSS seperti SASS / LESS / postCSS , dll.
• Mendukung manajemen negara menggunakan Dva / Redux .
• Pengoptimalan API program mini, API Promise asinkron, dll.
• Gunakan remarkable untuk memberikan solusi penguraian markdown yang lengkap.
• Semua tautan eksternal secara otomatis dikonversi ke Qrcode dan tautan tersebut disalin ke clipboard.

Pratinjau

Tambahan

Dev

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

Instal secara global menggunakan npm atau benang

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

Gunakan npm atau benang untuk menginstal dependensi

$ npm install
# or
$ yarn

Mulai/kompilasi applet

 # dev + watch
$ yarn start

# build + opt
$ yarn build

Gunakan alat pengembangan program mini untuk membuka direktori dist

Struktur proyek

 + 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

• Talas:
  • Repo
  • dokumen
• Aplikasi Wx:
  • bingkai
  • komponen
  • API
  • Alat Pengembang