canisminor wxapp
v2.0.2
مع مراجعة الشبكة الشخصية 2.0 قبل بضعة أيام، بسبب إعادة بناء الواجهة الأمامية والخلفية، لم تعد العديد من الواجهات القديمة التي يستخدمها تطبيق WeChat الصغير السابق تتم صيانتها، لذلك أمضيت يومين لتوصيل تطبيق WeChat الصغير بواجهة المستخدم تمت إعادة كتابة كل شيء وصولاً إلى الإطار (؟ ميزة تطوير المصمم هي أنه يمكنك البدء في الكتابة مباشرة دون رسم مسودة تصميم...). عندما كنت أبحث عن إطار عمل يشبه React في بداية العام، لم أجد سوى Weact، وهو أمر لا طعم له ومن المؤسف التخلي عنه، ومع ذلك، لم يتم تضمين عملية التجميع المرهقة وتجربة التطوير الضعيفة نسبيًا في نطاق الاختيار 1.0، ولكن هذه المرة عند اختيار الإطار، خرج القلقاس ؟.
تم تطوير Taro بواسطة فريق JD·Above Lab. وتعتمد قواعد بناء الجملة على مواصفات React. وهي تتبنى فكرة التقسيم المتوافقة مع React. وتتوافق دورة حياة المكون مع React كما يتفاعل قدر الإمكان، ويدعم استخدام بناء جملة JSX، مما يجعل التعليمات البرمجية أكثر تعبيرًا دون الحاجة إلى التبديل ذهابًا وإيابًا بين ملفات js/wxss/wxml/json. في الوقت نفسه، لديها أيضًا اصطلاح تسمية وبنية مشروع أكثر جمالاً. اصطلاحات التسمية المختلفة في مستندات WeChat (حالة الجمل، الشرطة السفلية الصغيرة، الكتابة المستمرة الصغيرة) فظيعة؟
باعتبارك مفاعلًا ، يمكن وصف استخدام Taro لتطوير المشاريع بأنه سلس وسلس، كما قال Taro نفسه، ما عليك سوى كتابة نسخة واحدة من الكود لتجميع H5 وإنشاءه، وسيتم بالفعل تحسين كفاءة برنامج WeChat وكود RN. ولكن إذا لم تكن قد كتبت مشروع رد فعل من قبل، فقد تظل هناك تكاليف تعلم في البداية.
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 / Redux .API المصغرة للبرنامج، API Promise غير المتزامنة، وما إلى ذلك.remarkable لتوفير حل كامل لتحليل markdown .Qrcode ويتم نسخ الروابط إلى الحافظة. جيثب ريبو: 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
