canisminor wxapp
v2.0.2
ด้วยการแก้ไขเครือข่ายส่วนบุคคล 2.0 เมื่อไม่กี่วันที่ผ่านมา เนื่องจากการสร้างส่วนหน้าและส่วนหลังขึ้นใหม่ อินเทอร์เฟซเก่าๆ จำนวนมากที่ใช้โดยแอปเพล็ต WeChat ก่อนหน้านี้จึงไม่ได้รับการบำรุงรักษาอีกต่อไป ดังนั้นฉันจึงใช้เวลา 2 วันในการเชื่อมต่อแอปเพล็ต WeChat กับ UI ตั้งแต่ต้นจนจบ ทุกอย่างจนถึงกรอบงานได้รับการเขียนใหม่ (ข้อดีของการพัฒนานักออกแบบคือคุณสามารถเริ่มเขียนได้โดยตรงโดยไม่ต้องร่างแบบร่าง...) เมื่อฉันมองหาเฟรมเวิร์กที่คล้ายกับ React เมื่อต้นปี ฉันพบเพียง Weact ซึ่งไม่มีรสชาติและน่าเสียดายที่ละทิ้งไป อย่างไรก็ตาม กระบวนการรวบรวมที่ยุ่งยากและประสบการณ์การพัฒนาที่ค่อนข้างต่ำไม่รวมอยู่ในช่วงการเลือก 1.0 แต่คราวนี้ตอนเลือกเฟรมเวิร์ก Taro ออกมาแล้วเหรอ?
Taro ได้รับการพัฒนาโดยทีมงาน JD·Above Lab กฎไวยากรณ์เป็นไปตามข้อกำหนดของ React โดยนำแนวคิดการจัดองค์ประกอบที่สอดคล้องกับ React ไปใช้ ตอบสนองให้ได้มากที่สุด และรองรับการใช้ไวยากรณ์ JSX ทำให้โค้ดแสดงออกได้มากขึ้นโดยไม่ต้องสลับไปมาระหว่างไฟล์ js/wxss/wxml/json ในเวลาเดียวกัน ยังมีรูปแบบการตั้งชื่อและโครงสร้างโครงการที่สวยงามยิ่งขึ้น รูปแบบการตั้งชื่อต่างๆ ในเอกสาร WeChat (ตัวพิมพ์เล็ก ขีดเส้นใต้ตัวพิมพ์เล็ก
ในฐานะ Reacter การใช้ Taro ในการพัฒนาโปรเจ็กต์นั้นดูราบรื่นและราบรื่น ดังที่ Taro กล่าวไว้ คุณจะต้องเขียนโค้ดเพียงเวอร์ชันเดียวเพื่อคอมไพล์และสร้าง H5 แอปเพล็ต WeChat และโค้ด RN จะได้รับการปรับปรุงอย่างแน่นอน แต่ถ้าคุณไม่เคยเขียน React Project อาจยังมีค่าใช้จ่ายในการเรียนรู้ตั้งแต่เริ่มต้น
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 สำหรับการจัดการรูปแบบโค้ดCSS เช่น SASS / LESS / postCSS เป็นต้นDva / ReduxAPI ของโปรแกรมขนาดเล็ก, API Promise แบบอะซิงโครนัส ฯลฯremarkable เพื่อมอบโซลูชันการแยกวิเคราะห์ markdown ที่สมบูรณ์Qrcode โดยอัตโนมัติ และลิงก์จะถูกคัดลอกไปยังคลิปบอร์ด แหล่งซื้อ Github: https://github.com/canisminor1990/canisminor-wxapp
$ npm install -g @tarojs/cli
# or
$ yarn global add @tarojs/cli$ 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
