Äú¿ÉÒÔ¾èÖú£¬Ö§³ÖÎÒÃǵĹ«ÒæÊÂÒµ¡£

1Ôª 10Ôª 50Ôª





ÈÏÖ¤Â룺  ÑéÖ¤Âë,¿´²»Çå³þ?Çëµã»÷Ë¢ÐÂÑéÖ¤Âë ±ØÌî



  ÇóÖª ÎÄÕ ÎÄ¿â Lib ÊÓÆµ iPerson ¿Î³Ì ÈÏÖ¤ ×Éѯ ¹¤¾ß ½²×ù Model Center   Code  
»áÔ±   
   
 
     
   
 ¶©ÔÄ
  ¾èÖú
uni-appºÚħ·¨£ºÐ¡³ÌÐò×Ô¶¨Òå×é¼þÔËÐе½H5ƽ̨
 
×÷Õߣº´Þºì±£
  2065  次浏览      31
 2020-7-21 
 
±à¼­ÍƼö:
±¾ÎÄ·ÖÏíÁËuni-app½«Î¢ÐÅС³ÌÐò×Ô¶¨Òå×é¼þ·¢Ðе½ H5 ƽ̨µÄʵÏÖ˼·£¬Ï£Íû¶Ô´ó¼ÒÓÐËùÆô·¢¡£
±¾ÎÄÀ´×ÔÓÚ΢ÐÅǰ¶ËÖ®áÛ,ÓÉ»ðÁú¹ûÈí¼þAlice±à¼­ÍƼö¡£

2017 Äê 1 Ô 9 ÈÕ£¬Î¢ÐÅ·¢²¼Ð¡³ÌÐò£¬Àú¾­ 3 Äê·¢Õ¹£¬ÔÚ½ñÄêÖ÷ÌâΪ¡±Î´Íê³É Always Beta¡°µÄ΢ÐŹ«¿ª¿Î PRO ÉÏ£¬Î¢ÐÅÍŶÓÅû¶£¬2019 ÄêС³ÌÐòÈÕ»îÔ¾Óû§³¬¹ý 3 ÒÚ£¬È«ÄêÀۼƳɽ»¶î´ï 8000 ÒÚ£¬Í¬±ÈÔö³¤³¬ 160%¡£

¿´µ½Ð¡³ÌÐòÈç´Ë¾ªÈ˵ÄÔö³¤Á¦£¬ÎÒÃÇÓÐÀíÓÉÏàÐÅ£¬ÓÐÖйúÌØÉ«µÄС³ÌÐò»¥ÁªÍøÊ±´úÒѾ­µ½À´£¬Î¢ÐÅС³ÌÐòÒ²ÒѳÉΪ¼Ì iOS¡¢Android¡¢H5 Ö®ºóµÄµÚËÄ´óÁ÷Á¿Æ½Ì¨¡£

ƽ̨·ÖÁÑ£¬Îª²»Í¬Æ½Ì¨±àдÏàͬµÄÒµÎñ´úÂ룬ÊǼþÎÞȤµÄÊÂÇé¡£

ÓÐ×·ÇóµÄ³ÌÐòÔ±£¬Ò»Ö±ÔÚ̽Ë÷´úÂ븴Óõķ½°¸£¬Hybrid App ¼´ÊÇ´ú±í¡£

¶øÔÚÈç½ñµÄС³ÌÐòʱ´ú£¬¶ÔÓÚͬÑù»ùÓÚ WEB ¼¼ÊõµÄ H5 ºÍС³ÌÐò£¬ÈçºÎʵÏÖ´úÂ븴Óã¬ÊǺܶàǰ¶Ë¹¤³Ìʦ̽Ë÷µÄ·½Ïò¡£ÒµÄÚÒ²ÒÑÓв»ÉÙ³ÉÊì·½°¸£¬´Ó³¡¾°ÉÏÀ´Ëµ£¬´óÖ·ÖΪÈýÀࣺ

1¡¢»ùÓÚ¿ç¶Ë¿ò¼Ü£¬´ÓÍ·¿ª·¢£¬Ò»Ì×´úÂ룬·¢Ðжà¸öƽ̨£¬±ÈÈç DCloud ³öÆ·µÄuni-app¡¢¾©¶«°¼Í¹ÊµÑéÊÒµÄtaro¡£

2¡¢¸´Óà H5 ´úÂ룬ת»» H5 ´úÂëÔÚС³ÌÐò»·¾³ÖÐÖ´ÐУ»ÊÊÓÃÓÚÓÐ H5 ƽ̨³Áµí£¬Î´¿ª·¢Ð¡³ÌÐò»òС³ÌÐòÍêÉÆ¶È½ÏµÍµÄ¿ª·¢Õߣ»

ÃÀÍÅµÄ mpvue ¿ò¼ÜÊÇÔçÆÚ̽Ë÷½â¾öÕâ¸öÎÊÌâµÄ´ú±í£¬µ«ÒòС³ÌÐò²»Ö§³Ö dom ²Ù×÷£¬¹Ê mpvue ÊÊÓÃÓÚ vue µÄÎÞ dom ²Ù×÷µÄ H5 ´úÂëת»»£»

×î½ü΢ÐŹٷ½ÍƳöµÄ kbone£¬Ò²ÊÇΪÁ˽â¾ö¡°°Ñ Web ¶ËµÄ´úÂëŲµ½Ð¡³ÌÐò»·¾³ÄÚÖ´ÐС±£»²»¹ý£¬kbone Ïà±È mpvue ǰ½øÁËÒ»²¿£¬ÒòΪ£º

kbone ʵÏÖÁËÒ»¸öÊÊÅäÆ÷£¬ÔÚÊÊÅä²ãÀïÄ£Äâ³öÁËä¯ÀÀÆ÷»·¾³£¬Èà Web ¶ËµÄ´úÂë¿ÉÒÔ²»×öʲô¸Ä¶¯±ã¿ÉÔËÐÐÔÚС³ÌÐòÀï¡£

3¡¢¸´ÓÃС³ÌÐò´úÂ룬ת»»Ð¡³ÌÐò´úÂëÔÚ web »·¾³ÖÐÔËÐУ»ÊÊÓÃÓÚÓÐС³ÌÐò´úÂë³Áµí£¬Î´¿ª·¢ H5 »ò H5 ƽ̨ÍêÉÆ¶È½ÏµÍµÄ¿ª·¢Õߣ»Õâ¸ö·½ÏòÒµÄÚ³ÉÊìµÄ·½°¸»¹±È½ÏÉÙ¡£

uni-app½üÆÚÖ§³ÖÁËС³ÌÐò×Ô¶¨Òå×é¼þÔËÐе½ H5 ƽ̨£¬ÊǶÔÈçÉϵÚÈýÖÖ³¡¾°µÄÒ»ÖÖ̽Ë÷¡£

ÐèÇ󳡾°

¼øÓÚС³ÌÐòµÄµÍ³É±¾»ñ¿ÍÌØÕ÷£¬ºÜ¶à³§ÉÌÑ¡ÔñÏÈ¿ª·¢Ð¡³ÌÐò£¬ÑéÖ¤ÒµÎñģʽºó£¬ÔÙÀ©Õ¹ÖÁ H5¡¢App µÈÆäËüƽ̨¡£

¿ª·¢ÕßËä¿É½èÖúת»»Æ÷½«Ð¡³ÌÐò´úÂëת»»Îªuni-appÏîÄ¿£¨»òÆäËü¿ç¶Ë¿ò¼ÜÏîÄ¿£©£¬¿ìËÙʵÏÖ¶àÆ½Ì¨·¢ÐУ»µ«²»ÉÙ¿ª·¢ÕßÊDz»¸ÒÇáÒ×¾ö²ß½«¿ç¶Ë°æ±¾Ì滻֮ǰÏßÉϵÄС³ÌÐò°æ±¾µÄ£¬±Ï¾¹ÏßÉϰ汾ÒÑÎȶ¨ÔËÐÐÁËÒ»¶Îʱ¼ä¡£

³£Ñ¡µÄ·½°¸ÊÇ£ºÈÃÔ­ÉúС³ÌÐò°æ±¾ºÍuni-app¿ç¶Ë°æ±¾²¢ÐÐÒ»¶Îʱ¼ä£¬Î¢ÐÅÆ½Ì¨¼ÌÐøÊ¹ÓÃÔ­Éú°æ±¾£¬ÆäËüƽ̨ʹÓÃuni-app¿ç¶Ë°æ±¾£»¾­¹ýÒ»¶Îʱ¼äÑéÖ¤uni-app°æ±¾Îȶ¨ºó£¬ÔÙʹÓÃuni-app°æÌæ»»µôÔ­ÉúС³ÌÐò°æ±¾¡£

ÔÚÕâ¶Î²¢ÐеÄʱ¼äÄÚ£¬¿ª·¢ÕßÐèҪͬʱά»¤Î¢ÐÅÔ­Éú¡¢uni-appÁ½¸ö°æ±¾£¬ÐÂÔöÒµÎñÐè±àдÁ½·ÝÂß¼­ÏàͬµÄ´úÂë£¬ÖØ¸´ÀͶ¯£¬³É±¾µþ¼Ó£¬ÈçºÎ¸ÄÉÆ£¿

½èÖúuni-app Ö§³Ö½«Î¢ÐÅС³ÌÐò×é¼þÔËÐе½ H5 ƽ̨µÄÌØÐÔ£¬ÎÒÃǸø³öÒ»ÖÖ˼·£º

¿ª·¢ÕßÔÚÔ­ÉúС³ÌÐòÏîÄ¿ÖУ¬½«ÐÂÔöÒµÎñÒÔ×Ô¶¨Òå×é¼þµÄ·½Ê½¿ª·¢£¬ÓÅÏÈÉÏÏßС³ÌÐò£»

¿½±´Ð¡³ÌÐò×é¼þµÄwxml/wxss/js/jsonÎļþµ½uni-app ÏîĿϣ¬Í¨¹ýuni-appµÄ±àÒëÆ÷¼°ÔËÐÐʱ£¬±£Ö¤Ð¡³ÌÐò×Ô¶¨Òå×é¼þÔÚ H5 ƽ̨µÄÕýÈ·ÔËÐС£

Õâ¸ö·½°¸µÄºÃ´¦ÊÇ£º

ÓÅÏÈС³ÌÐò¿ª·¢£¬±Ï¾¹Ð¡³ÌÐòÔçÒÑÉÏÏߣ¬ÓдæÁ¿Óû§£»

¸´ÓÃС³ÌÐò×é¼þ£¬ÐÂÔöÒµÎñ½öÐ迪·¢Ò»Ì×´úÂë¼´¿É£¬½µµÍ¿ª·¢³É±¾¡£

²»Ö¹×Ô¼º¿ª·¢µÄС³ÌÐò×é¼þ£¬ÒµÄÚ¿ªÔ´µÄÈý·½Ð¡³ÌÐò×é¼þ£¬¾ù¿É¸´ÖƵ½uni-appÏîÄ¿ÏîÄ¿ÖУ¬ÔËÐе½ H5 ƽ̨¡£

ÁíÍ⣬²¿·Ö¹«Ë¾µÄ²úÆ·¾­Àí£¬»áÒªÇó²»Í¬Æ½Ì¨Óв»Í¬µÄ½»»¥£¬µ«ºËÐÄÒµÎñÂß¼­ÊÇÏàͬµÄ£¬¿ª·¢Õß³£»áͨ¹ýά»¤²»Í¬ÏîÄ¿µÄ·½Ê½À´Âú×ã²úÆ·¾­ÀíÐèÇó¡£´Ëʱ£¬²ÉÈ¡ÈçÉÏ·½°¸£¬Í¬Ñù¿ÉÂú×ã¶à¸öÏîÄ¿¸´ÓÃÏàͬҵÎñÂß¼­µÄËßÇó¡£

ʵ¼ÊÉÏ£¬uni-app֮ǰÒÑÖ§³Ö½«Ð¡³ÌÐò×Ô¶¨Òå×é¼þÔËÐе½ App ƽ̨£¬¶ÔÓÚÓÐС³ÌÐò×é¼þ³Áµí»òÓÅÏÈС³ÌÐòµÄ¿ª·¢ÕßÀ´Ëµ£¬ÕâÊǸöºÃÏûÏ¢£¬Ò»Ì×ÒµÎñ×é¼þ£¬¿ìËÙÔËÐе½ iOS¡¢Android¡¢H5¡¢Î¢ÐÅС³ÌÐòÕâËÄ´óÁ÷Á¿Æ½Ì¨£¨Êµ¼ÊÉÏÒ²¿ÉÔËÐе½ QQ С³ÌÐòƽ̨£©¡£

uni-app ÒýÓÃС³ÌÐò×é¼þÑÝʾ

uni-appÏîÄ¿ÖÐʹÓÃ×Ô¶¨Òå×é¼þµÄ·½·¨ºÜ¼òµ¥£¬·ÖΪÈý²½£º

1¡¢¿½±´Ð¡³ÌÐò×Ô¶¨Òå×é¼þµ½uni-appÏîÄ¿¸ùĿ¼ÏµÄwxcomponentsÎļþ¼ÐÏÂ

2¡¢ÔÚ pages.json ¶ÔÓ¦Ò³ÃæµÄ style -> usingComponentsÒýÈë×é¼þ£¬È磺

{
"pages": [
{
"path": "index/index",
"style": {
"usingComponents": {
"custom": "/wxcomponents/custom/index"
}
}
}
]
}

 

3¡¢ÔÚÒ³ÃæÖÐʹÓÃ×Ô¶¨Òå×é¼þ£¬È磺

<!-- Ò³ÃæÄ£°å (index.vue) -->
<view>
<!-- ÔÚÒ³ÃæÖжÔ×Ô¶¨Òå×é¼þ½øÐÐÒýÓà -->
<custom name="uni-app"></custom>
</view>

·½°¸ÊµÏÖ˼·

¼òµ¥½éÉÜÏÂuni-appµÄ¶à¶Ë·¢ÐÐÔ­Àí¡£

uni-app»ùÓÚVue.js runtime£¬Ò³ÃæÎļþ×ñÑ­Vue.js µ¥Îļþ×é¼þ (SFC) ¹æ·¶£¬ÌìÈ»¶Ô H5 µÄÖ§³Ö±È½ÏºÃ£¬·¢Ðе½ H5 ƽ̨ʱ£¬ÏÈͨ¹ývue-loader½âÎö.vueÎļþ£¬µ¼³öVue.js ×é¼þÑ¡Ïî¶ÔÏó£¬È»ºóÔÚÔËÐÐʱ²¹³ä¹æ·¶ÊµÏÖ£º

×é¼þ£º¿ò¼ÜÌṩÄÚÖÃ×é¼þ£¨view/swiper/picker µÈ£©µÄʵÏÖ£¬±£Ö¤Æ½Ì¨ UI ¼°½»»¥µÄÒ»ÖÂÐÔ£»

½Ó¿Ú£ºÔÚ H5 ƽ̨·â×°¿ò¼Ü½Ó¿Ú£¬±ÈÈç·ÓÉÌø×ª£¬showToast µÈ½çÃæ½»»¥£»

ÉúÃüÖÜÆÚ£ºVue.js µÄÀíÄîÊÇÒ»ÇнÔΪ×é¼þ£¬Ã»ÓÐÓ¦ÓúÍÒ³ÃæµÄ¸ÅÄ¿ò¼ÜÐè´´Ôì³öÓ¦Óü°Ò³ÃæµÄ¸ÅÄģÄâ onLaunch¡¢onShow µÈ¹³×Ó¡£

uni-app ·¢Ðе½Ð¡³ÌÐòƽ̨ʱ£¬Âß¼­ÓÖÓв»Í¬£¬Ö÷Òª¹¤×÷ÓÐ 2 ¿é£º

±àÒëÆ÷£º½«.vueÎļþ²ð·Ö³Éwxml/wxss/js/json4 ¸öÔ­ÉúÒ³ÃæÎļþ£»

ÔËÐÐʱ£ºVue.jsºÍС³ÌÐò¶¼ÊÇÂß¼­ÊÓͼ²ã¿ò¼Ü£¬¶¼ÓÐÊý¾Ý°ó¶¨¹¦ÄÜ£»ÔËÐÐʱ»áʵÏÖVue.jsµ½Ð¡³ÌÐòµÄÊý¾Ýͬ²½£¬¼°Ð¡³ÌÐòµ½Vue.jsµÄʼþ´úÀí¡£

С³ÌÐò×Ô¶¨Òå×é¼þÀàËÆÐ¡³ÌÐòÔ­ÉúµÄÒ³Ãæ¿ª·¢£¬Ò»¸ö×Ô¶¨Òå×é¼þͬÑùÓÉwxml/wxss/js/json 4 ¸öÎļþ×é³É£¬ÁíÓе¥¶ÀµÄ×é¼þ¹æ·¶£¨ÈçComponent ¹¹ÔìÆ÷¡¢BehaviorsÌØÐԵȣ©¡£

ËùÒÔ£¬Ð¡³ÌÐò×Ô¶¨Òå×é¼þÔËÐе½ H5 ƽ̨£¬¿É½èÖúuni-appÒÑÓÐÆ½Ì¨¹¦ÄÜ¿ìËÙʵÏÖ£º

±àÒë½×¶Î£º½«wxml/wxss/js/json4 ¸öÎļþºÏ²¢Îª.vueÎļþ£¨ÀàËÆ uni-app ·¢Ðе½Ð¡³ÌÐòµÄÄæ¹ý³Ì£©£¬È»ºóµ÷ÓÃuni-app·¢ÐÐ H5 ƽ̨µÄ±àÒë¹ý³Ì£¬Í¨¹ývue-loader½âÎö.vueÎļþ£¬µ¼³ö Vue.js ×é¼þÑ¡Ïî¶ÔÏó£»

ÔËÐн׶ΣºÊµÏÖ Component ¹¹ÔìÆ÷¡¢BehaviorsÌØÐÔ£¬Ä£Äâ×Ô¶¨Òå×é¼þÌØÓеÄÉúÃüÖÜÆÚ¡£

±àÒ룺ת»»Îļþ£¨mp2vue£©

С³ÌÐò×Ô¶¨Òå×é¼þ·¢Ðе½ H5 ƽ̨£¬ÔÚ±àÒë»·½ÚÖ÷ÒªÓÐ 2 Ï×÷£º

1¡¢½«×Ô¶¨Òå×é¼þµÄwxml/wxss/js/json 4 ¸öÎļþ×é³É£¬±àÒëת»»³É.vueÎļþ£¬¼´Ð¡³ÌÐòת vue£¬¿É¼òдΪmp2vue

2¡¢Í¨¹ývue-loader½âÎö.vueÎļþ£¬µ¼³ö Vue.js ×é¼þÑ¡Ïî¶ÔÏó

ÆäÖУ¬²½Öè 2 ÊÇVue.jsÏîÄ¿µÄ±ê×¼±àÒë¹ý³Ì£¬ÂÔ¹ý²»Ì᣻ÎÒÃÇÖØµã²ûÊö²½Öè 1¡£

mp2vue½« 4 ¸ö¶ÀÁ¢wxml/wxss/js/json µÄÎļþºÏ²¢³ÉÒ»¸ö.vueÎļþ£¬²¢×é×°³Étemplate¡¢script¡¢style ÕâÖÖÈý¶ÎʽµÄ½á¹¹£¬Á÷³Ì°üÀ¨£º

wxmlÎļþÉú³Étemplate½Úµã£¬Í¬Ê±Íê³ÉÖ¸ÁʼþµÈÄ£°åÓ﷨ת»»£»

js/jsonÎļþÉú³Éscript½Úµã£¬Í¬Ê±Íê³É×é¼þ×¢²á¹ý£»

wxssÎļþÉú³Éstyle½Úµã£¬×Ô¶¯×ª»»²¿·Ö css ¼æÈÝÓï·¨£»

ºÏ²¢Îª.vueÎļþ¡£

¾ßÌåʵÏÖÉÏ£¬uni-app±àÒëǰÏÈɨÃèwxcomponentsĿ¼£¬Èô´æÔÚÔòÈÏΪÓÐС³ÌÐò×Ô¶¨Òå×é¼þ£¬Æô¶¯Îļþת»»¹¤×÷ (uni-migration²å¼þÀ´Íê³É)£º

// ¼ÓÔØ×ª»»Æ÷
const migrate = require('@dcloudio/uni-migration')
// ɨÃè wxcomponents Ŀ¼
const wxcomponents = path.resolve(process.env.UNI_INPUT_DIR, 'wxcomponents')
if (fs.existsSync(wxcomponents)) {
migrate(wxcomponents, false, {
silent: true
}) // ת»» mp-weixin С³ÌÐò×é¼þ
}

 

½Ó×Å¿ªÊ¼¶Ôwxml/wxss/js/jsonÎļþÖð¸ö½âÎö£¬²¢ºÏ²¢ÎªÒ»¸ö.vueÎļþ£º

module.exports = function transformFile(input, options) {
// Ê×ÏÈת»» json Îļþ£¬ÅжÏÊÇ·ñΪ×é¼þ
const [jsCode, isComponent] = transformJsonFile(filepath + '.json', deps)
options.isComponent = isComponent
// ת»» wxml Îļþ
const [templateCode, wxsCode = '', wxsFiles = []] = transformTemplateFile (filepath + templateExtname, options)
// ת»» wxss Îļþ
const styleCode = transformStyleFile(filepath + styleExtname, options, deps) || ''
// ת»» js Îļþ
const scriptCode = transformScriptFile(filepath + '.js', jsCode, options, deps)
// Éú³ÉºÏ²¢ºóµÄ.vue ÎļþÔ´Âë
return [
`${commentsCode}<template>
${templateCode}
</template>
${wxsCode}
<script>
${scriptCode}
</script>
<style platform="mp-weixin">
${styleCode}
</style>`,
deps,
wxsFiles
]
}

½øÒ»²½Ï¸½Ú˵Ã÷£¬wxml ÎļþתΪ template ½Úµãʱ£¬ÐèÍê³É¸÷ÏîÖ¸ÁʼþµÈÄ£°åÓï·¨µÄת»»£¬ÀýÈ磺

½«Ò»¸ö×î¼ò×Ô¶¨Òå×é¼þ£¬°´ÕÕÈçÉÏÁ÷³Ìת»»£¬½á¹ûʾÒâÈçÏ£º

ÔËÐÐʱ£ºÄ£ÄâС³ÌÐò×é¼þ»·¾³

uni-appµÄ±àÒëÆ÷²¢²»×ª»»Ð¡³ÌÐò×é¼þµÄ JS ´úÂ룬ÒÀÈ»±£ÁôComponent¹¹ÔìÆ÷µÄд·¨£¬ÉõÖÁÆäÖÐµÄ API ÒÀÈ»ÊÇwx.¿ªÍ·µÄ·½Ê½£¬ÕâЩ¶¼ÒÀÀµuni-appÔÚ H5 ƽ̨µÄÔËÐÐʱÀ´½â¾ö£¬Ö÷ÒªÓÐÈçϼ¸²¿·ÖÄÚÈÝ£º

Component¹¹ÔìÆ÷£º½âÎöС³ÌÐò×é¼þµÄ¸÷ÖÖÑ¡ÏîÅäÖã¬×ª»»ÎªVue×é¼þ¶¨Ò壬°üÀ¨±äͨʵÏÖÆäÖеIJîÒ첿·Ö£¬ÈçС³ÌÐò×é¼þÌØÓеġ±×é¼þËùÔÚÒ³ÃæµÄÉúÃüÖÜÆÚ¡°£»

BehaviorsÌØÐÔ£º×ª»»Îª Vue µÄ »ìÈ루mixin£©£»

Êý¾ÝÏìÓ¦£ºÔÚ H5 ƽ̨ʵÏÖsetData½Ó¿Ú¼°this.data.xx = yyµÄÊý¾ÝͨѶ»úÖÆ£»

API ǰ׺£º¿ÉÔÚÔËÐÐʱͨ¹ý´úÀí»úÖÆ£¬×Ô¶¯½«wx.xxÌæ»»Îªuni.xx£¬Õâ¸ö±È½Ï¼òµ¥£¬²»ÏêÊö¡£

Component ¹¹ÔìÆ÷

uni-appÔÚ H5 ƽ̨¶¨ÒåÁËÒ»¸öComponentº¯Êý£¬Ö´Ðе½Ð¡³ÌÐòµÄComponent¹¹ÔìÆ÷º¯Êýºó£¬¿ªÊ¼Ñ­»·½âÎöÆäÊôÐÔ£¬²¢×ª»»³É Vue ×é¼þÊôÐÔ£¬Á÷³ÌʾÒâ´úÂëÈçÏ£º

export function Component (options) {
const componentOptions = parseComponent(options)
componentOptions.mixins.unshift (polyfill)
componentOptions.mpOptions.path = global['__wxRoute']
initRelationsHandler (componentOptions)
global['__wxComponents'] [global['__wxRoute']] = componentOptions
}

export function parseComponent (mpComponentOptions) {
const {
data,
options,
methods,
behaviors,
lifetimes,
observers,
relations,
properties,
pageLifetimes,
externalClasses
} = mpComponentOptions

const vueComponentOptions = {
mixins: [],
props: {},
watch: {},
mpOptions: {
mpObservers: []
}
}

// ¿ªÊ¼Öð¸ö½âÎöËùÓÐÊôÐÔ
parseData(data, vueComponentOptions)
parseOptions(options, vueComponentOptions)
parseMethods(methods, vueComponentOptions)
parseBehaviors(behaviors, vueComponentOptions)
parseLifetimes(lifetimes, vueComponentOptions)
parseObservers(observers, vueComponentOptions)
parseRelations(relations, vueComponentOptions)
parseProperties(properties, vueComponentOptions)
parsePageLifetimes(pageLifetimes, vueComponentOptions)
parseExternalClasses(externalClasses, vueComponentOptions)
parseLifecycle(mpComponentOptions, vueComponentOptions)
parseDefinitionFilter(mpComponentOptions, vueComponentOptions)
// ·µ»Ø Vue ×é¼þ
return vueComponentOptions
}

ÔÚÕâ¸ö¹ý³ÌÖУ¬Ðè´¦ÀíС³ÌÐò×Ô¶¨Òå×é¼þºÍ Vue ×é¼þµÄÊôÐÔ¶ÔÓ¦¹ØÏµ¼°Ï¸½Ú²îÒ죬ÈçС³ÌÐò×é¼þµÄlifetimes£º

С³ÌÐòµÄpageLifetimes£¨×é¼þËùÔÚÒ³ÃæµÄÉúÃüÖÜÆÚ£©ÔÚ Vue ÖÐÊÇûÓеģ¬ÐèÒªÓ³ÉäΪuni-app·â×°µÄÒ³ÃæÉúÃüÖÜÆÚ£º

BehaviorsÌØÐÔµÄʵÏÖ¹ý³Ì£¬ÀàËÆComponent¹¹ÔìÆ÷£¬²»ÔÙ׸Êö¡£

Êý¾ÝÏìÓ¦

VueºÍС³ÌÐò¶¼ÓÐÒ»Ì×Êý¾Ý°ó¶¨ÏµÍ³£¬µ«»úÖÆ²»Í¬£¬±ÈÈçÔÚ Vue ÌåϵÏ£¬Êý¾Ý¸³ÖµÊÇÕâÑùµÄ£º

this.a = 1

µ«ÔÚС³ÌÐòÖУ¬Êý¾Ý¸³Öµ·½Ê½ÔòÊÇÕâÑùµÄ£º

this.setData({
a:1
}) // ÏìӦʽ
this.data.a = 2 // ·ÇÏìӦʽ

ÁíÍ⣬С³ÌÐòºÍVueÔÚÊý¾ÝµÄproperties¡¢observerµÈ·½Ãæ¶¼´æÔÚ²»ÉÙ²îÒ죬¾­¹ýÎÒÃÇÆÀ¹À£¬Èô½«Ð¡³ÌÐòµÄÊý¾ÝÏìÓ¦Ó÷¨Ö±½ÓÓ³Éäµ½VueÌåϵÏ£¬¸´ÔӶȽϸßÇÒÓÐÐÔÄÜѹÁ¦£¬¹Êuni-appÔÚ H5 ƽ̨°´ÕÕ΢ÐŵÄÓï·¨¹æ·¶£¬µ¥¶ÀʵÏÖÁËÒ»Ì×Êý¾ÝÏìӦϵͳ¡£

// С³ÌÐòµÄ setData ÔÚ H5 ƽ̨µÄʵÏÖ
function setData (data, callback) {
if (!isPlainObject(data)) {
return
}
Object.keys(data).forEach(key => {
if (setDataByExprPath (key, data[key], this.data)) {
!hasOwn(this, key) && proxy(this, SOURCE_KEY, key);
}
});
this.$forceUpdate();// Êý¾Ý±ä»¯£¬Ç¿ÖÆÊÓͼ¸üУ¨ÏìӦʽ£©
isFn(callback) && this.$nextTick(callback);
}

½«setData¹ÒÔØµ½ vm ¶ÔÏóÉÏ£¬¿Éͨ¹ýthis.setDataÕâÖÖС³ÌÐòµÄ·½Ê½µ÷Óã»Í¬Ê±½«Êý¾Ý°ó¶¨µ½ data ÊôÐÔÉÏ£¬Ö§³Öthis.data.xxµÄ·ÃÎÊ·½Ê½¡£

export function initState (vm) {
const instanceData = JSON.parse (JSON.stringify(vm.$options.mpOptions.data || {}))
vm[SOURCE_KEY] = instanceData

//vm ¶ÔÏóÉϹÒÔØ setData ·½·¨£¬ÊµÏÖС³ÌÐò·½·¨
vm.setData = setData

const propertyDefinition = {
get () {
return vm[SOURCE_KEY]
},
set (value) {
vm[SOURCE_KEY] = value
}
}
// С³ÌÐòÓ÷¨£¬¿Éͨ¹ý this.data.xx ·ÃÎÊ
Object.defineProperties(vm, {
data: propertyDefinition,
properties: propertyDefinition
})

Object.keys(instanceData).forEach(key => {
proxy(vm, SOURCE_KEY, key)
})
}

ËäÈ»Êý¾ÝÏìÓ¦ÊÇuni-app×Ô¼ºÊµÏֵ쬵«äÖȾÒÀȻʹÓÃÁË Vue ¿ò¼ÜµÄrenderº¯Êý£¬´ËʱÐèС³ÌÐò¹æ·¶ÖеÄthis.data.xxºÍ Vue ¹æ·¶ÖеÄthis.xx±£³ÖÒ»Ö£¬Í¨¹ý´úÀíµÄ·½Ê½ÊµÏÖ£º

// mp/polyfill/state/proxy.js
const sharedPropertyDefinition = {
enumerable: true,
configurable: true
};

function proxy (target, sourceKey, key) {
sharedPropertyDefinition.get = function proxyGetter () {
return this[sourceKey][key]
};
sharedPropertyDefinition.set = function proxySetter (val) {
this[sourceKey][key] = val;
};
Object.defineProperty(target, key, sharedPropertyDefinition);
}

ÕâÀï½öÁгöÁËÖ÷ÒªµÄ¼¸²½£¬ÖмäÉæ¼°Ï¸½ÚºÜ¶à£»²¿·ÖÎÞ·¨Í¨¹ýVueÀ©Õ¹»úÖÆÊµÏֵŦÄÜ£¬Ö»ºÃÐÞ¸ÄVue.jsµÄÄÚºËÔ´Â룬±ÈÈçupdatePropertiesÖ§³Ö¡¢Ð¡³ÌÐòwxs¡¢externalClassesµÈ¹¦ÄÜÔÚ H5 ƽ̨µÄÖ§³Ö£¬¶¼ÐèÒª¶¨ÖƲ¿·Ö Vue.js runtime Ô´Âë¡£

½áÓï

±¾ÎÄ·ÖÏíÁËuni-app½«Î¢ÐÅС³ÌÐò×Ô¶¨Òå×é¼þ·¢Ðе½ H5 ƽ̨µÄʵÏÖ˼·£¬Ï£Íû¶Ô´ó¼ÒÓÐËùÆô·¢¡£

µ«ÕâÖÖ·½°¸£¬¹é¸ùµ½µ×ÊÇΪÁ˽â¾ö¶àÌ×ÏîÄ¿²¢´æÊ±µÄÒµÎñÖØ¸´¿ª·¢µÄÎÊÌâ¡£

Èç¹ûÄãÊÇ´ÓÍ·¿ª·¢£¬ÎÒÃǽ¨ÒéÖ±½ÓÑ¡ÔñÒµÄÚ³ÉÊìµÄ¿ç¶Ë¿ò¼Ü£¬¼È¿ÉÒÔ±£³ÖÒ»Ì×´úÂ룬¸üÊ¡Á¦µÄά»¤£¬»¹¿ÉÒÔ½èÖú¿ò¼ÜµÄ³ÉÊìÉú̬£¨Èç¿ç¶Ë UI ¿â¼°²å¼þÊг¡£©£¬»ùÓÚ³ÉÊìÂÖ×Ó£¬¿ìËÙÍê³ÉÒµÎñµÄÉÏÏß¿ª·¢£»

uni-app¿ò¼Ü´úÂ룬°üÀ¨Ð¡³ÌÐò×é¼þ·¢Ðе½ H5 ƽ̨µÄ´úÂ룬ȫ²¿¿ªÔ´ÔÚ github£¬Èç¹û´ó¼Ò¶Ô±¾ÎÄÂß¼­ÓÐÒÉÎÊ£¬»¶Ó­Ìá½» issue ½»Á÷¡£

 

 
   
2065 ´Îä¯ÀÀ       31
Ïà¹ØÎÄÕÂ

Éî¶È½âÎö£ºÇåÀíÀôúÂë
ÈçºÎ±àд³öÓµ±§±ä»¯µÄ´úÂë
ÖØ¹¹-ʹ´úÂë¸ü¼ò½àÓÅÃÀ
ÍŶÓÏîÄ¿¿ª·¢"±àÂë¹æ·¶"ϵÁÐÎÄÕÂ
Ïà¹ØÎĵµ

ÖØ¹¹-¸ÄÉÆ¼ÈÓдúÂëµÄÉè¼Æ
Èí¼þÖØ¹¹v2
´úÂëÕû½àÖ®µÀ
¸ßÖÊÁ¿±à³Ì¹æ·¶
Ïà¹Ø¿Î³Ì

»ùÓÚHTML5¿Í»§¶Ë¡¢Web¶ËµÄÓ¦Óÿª·¢
HTML 5+CSS ¿ª·¢
ǶÈëʽC¸ßÖÊÁ¿±à³Ì
C++¸ß¼¶±à³Ì
×îл¼Æ»®
DeepSeek´óÄ£ÐÍÓ¦Óÿª·¢ 6-12[ÏÃÃÅ]
È˹¤ÖÇÄÜ.»úÆ÷ѧϰTensorFlow 6-22[Ö±²¥]
»ùÓÚ UML ºÍEA½øÐзÖÎöÉè¼Æ 6-30[±±¾©]
ǶÈëʽÈí¼þ¼Ü¹¹-¸ß¼¶Êµ¼ù 7-9[±±¾©]
Óû§ÌåÑé¡¢Ò×ÓÃÐÔ²âÊÔÓëÆÀ¹À 7-25[Î÷°²]
ͼÊý¾Ý¿âÓë֪ʶͼÆ× 8-23[±±¾©]
 
×îÐÂÎÄÕÂ
ÈçºÎÉè¼Æ¸ßÀ©Õ¹µÄÔÚÏßÍøÒ³ÖÆ×÷ƽ̨
electronÈëÃÅÐĵÃ
ʹÓà Electron ¹¹½¨×ÀÃæÓ¦ÓÃ
VUE.JS×é¼þ»¯¿ª·¢Êµ¼ù
ÉîÈëÀí½âJSCore
×îпγÌ
HTML 5 + CSS3 Ô­ÀíÓ뿪·¢Ó¦ÓÃ
Webǰ¶Ë¸ß¼¶¹¤³Ìʦ±Ø±¸¼¼ÄÜʵս
Vue´óÐÍÏîÄ¿¿ª·¢ÊµÕ½
ReactÔ­ÀíÓëʵ¼ù
Vue.js½ø½×Óë°¸Àýʵ¼ù
³É¹¦°¸Àý
Öн»¼¯ÍÅ ¹¹½¨Web×Ô¶¯»¯²âÊÔ¿ò¼Ü
ijָÃûµçÐŹ«Ë¾ Vue.js½ø½×Óë°¸Àý
¹úµçÍ¨ÍøÂç¼¼Êõ HTML5+CSS3 +webǰ¶Ë¿ò
ÒÆ¶¯Í¨ÐÅ ÒÆ¶¯»¥ÁªÍøÓ¦Óÿª·¢Ô­Àí
ijµçÁ¦ÐÐ android¿ª·¢Æ½Ì¨×î¼Ñ