±à¼ÍƼö: |
±¾ÎÄ·ÖÏíÁË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.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 ½»Á÷¡£
|