±à¼ÍƼö: |
±¾ÎÄÖ÷Òª½éÉÜuni-appµÄʹÓÃÌåÑéÒÔ¼°uni-app
µÄ·ÓÉÅäÖúÍWeb-View ×é¼þ£¬Ï£Íû¶ÔÄúµÄѧϰÓÐËù°ïÖú¡£
±¾ÎÄÀ´×ÔÓÚÖªºõ,ÓÉ»ðÁú¹ûÈí¼þAlice±à¼ÍƼö¡£ |
|

ʹÓÃÌåÑé
ûÓÃ֮ǰÒÔÎªÕæºÍ Vue Ò»Ñù£¬ÓÃÁËÖ®ºó²ÅÖªµÀ¡£ÓеãÀàËÆ Vue ºÍ С³ÌÐò½áºÏµÄ¸Ð¾õ¡£Ð´ÀàËÆÐ¡³ÌÐòµÄ±êÇ©£¬ÓÐ×ÅС³ÌÐòºÍ
Vue µÄÉúÃüÖÜÆÚ¹³×Ó¡£¶Ô±È uni-app ÎĵµºÍ΢ÐÅС³ÌÐòµÄÎĵµ£¬²»²î¶àÉÙ£¬Ö»Êǽ« wx =>
uni£¬ÊìϤ Vue ºÍ С³ÌÐò¿ÉÒÔÖ±½ÓÉÏÊÖ¡£
Èç¹û¿´¹ýÆäËûС³ÌÐòµÄÎĵµ£¬¿ÉÒÔ·¢ÏÖ£¬ÎĵµÖ÷ÒªµÄÈý´óÕ½ھÍÌåÏÖÔÚ¿ò¼Ü¡¢×é¼þ¡¢API ¡£
uni-app ÐèҪעÒâ¿´×¢ÒâÊÂÏÎĵµ¸ø³öÁËºÍ Vue ʹÓõÄÇø±ð¡£ÀýÈ綯̬µÄ Class Óë
Style °ó¶¨£¬ÔÚ H5 ÄÜÓã¬APP ºÍС³ÌÐòµÄÌåÏ־Ͳ»Ò»Ñù¡£
ÅäÖÃÏî¸ú×ÅÎĵµÀ´£¬¿ª·¢»·¾³Ò²ÊÇÏֳɵģ¬ÏÂÔØ HBuilderX µ¼ÈëÏîÄ¿¾ÍÄÜÔËÐУ¬ÈÕ³£¿ª·¢Ï°¹ßÁË
VSCode£¬ËùÒÔ HBuilderX µÄÖ÷Òª×÷ÓþÍÊÇÓÃÀ´´ò°ü APK ºÍÆð¸÷¸ö¶ËµÄ·þÎñ£¬coding
µÄ»°µ±È»»¹ÊÇÓà VSCode¡£
·ÓÉ
uni-app µÄ·ÓÉÈ«²¿ÅäÖÃÔÚ pages.json ÎļþÀ¾Í»áµ¼Ö¶àÈË¿ª·¢µÄʱºò£¬Â·ÓÉÎÞ·¨²ð·Ö£¬Èç¹û´¦ÀíµÄ²»ºÃ£¬¾Í»á·¢Éú³åÍ»¡£
µ¼º½
µ¼º½À¸ÐèҪעÒâµÄÒ»¸öÎÊÌâ¾ÍÊDz»Í¬¶ËµÄչʾÐÎʽ»á²»Í¬£¬ËùÒÔÒª´¦Àí¼æÈÝÎÊÌ⣬µ¼º½À¸¿ÉÒÔ×Ô¶¨Ò壬ÓÃÔÉú£¬¿ò¼Ü£¬²å¼þµ«ÊǼæÈÝÐÔ¶¼²»Í¬£¬¶à¶ËÐèÇóÒ»¶¨ÒªÔÚ²»Í¬É豸ÅÜһϿ´Ð§¹û¡£
ÀýÈçÔÚС³ÌÐòºÍ APP ÖУ¬ÔÉúµ¼º½À¸È¡Ïû²»ÁË£¬¾Í²»ÄÜÓÃ×Ô¶¨ÒåµÄµ¼º½À¸£¬ÒªÔÚ pages.json
ÖÐÅäÖÃÔÉúµ¼º½À¸¡£
¼æÈÝ·½·¨¾ÍÊÇÓà uni-app ÌṩµÄÌõ¼þ±àÒ룬´¦Àí¸÷¶Ë²»Í¬µÄ²îÒ죬ÎÒÃÇÖ§¸¶µÄÒµÎñÂß¼Ò²ÊÇͨ¹ýÌõ¼þ±àÒë£¬Çø·Ö²»Í¬¶Ëµ÷Óò»Í¬µÄÖ§¸¶·½Ê½¡£
ÉúÃüÖÜÆÚ
·ÖΪ Ó¦ÓõÄÉúÃüÖÜÆÚ¡¢Ò³ÃæµÄÉúÃüÖÜÆÚ¡¢×é¼þµÄÉúÃüÖÜÆÚ¡£Ð´¹ýС³ÌÐòºÍ Vue µÄºÜºÃÀí½â£¬´óÖÂÉÏºÍ Vue
µÄ»¹ÊDz¶àµÄ£¬Ò³ÃæÉúÃüÖÜÆÚÕë¶Ôµ±Ç°µÄÒ³Ãæ£¬Ó¦ÓÃÉúÃüÖÜÆÚÕë¶ÔС³ÌÐò¡¢APP¡£ÕâЩ¹ý³Ì¿ÉÄܶ¼Òª²Èһϣ¡
ÍøÂçÇëÇóºÍ»·¾³ÅäÖÃ
¹Ù·½µÄ uni.request ËäÈ»·â×°ºÃÁË»ù±¾µÄÇëÇ󣬵«ÊÇûÓÐÀ¹½Ø£¬ÎÒÃÇ¿ªÊ¼Ò²ÊÇ×Ô¼ºÔÚÕâ»ù´¡ÉϼÓÁ˲ã¿Ç£¬¼òµ¥µÄ·â×°·¢ËÍÇëÇó¡£µ±È»Ò²¿ÉÒÔÑ¡ÔñµÚÈý·½¿âµÄʹÓã¬Èç
flyio¡¢axios¡£
ÎÒÃÇÊÇǰ¶Ë×Ô¼º·â×°ÁË HTTP ÇëÇ󣬲¢ÇÒͳһ½Ó¿ÚµÄÇëÇó·½Ê½£¬ËùÓеĽӿڷŵ½ api.js ÎļþÖнøÐÐͳһ¹ÜÀí¡£ÕâÑù´ó¼ÒÔÚÒ³ÃæÇëÇó½Ó¿ÚµÄʱºò·ç¸ñ²Åͳһ£¬°üÀ¨Ô¼¶¨ºÃÇëÇóÀ¹½ØºÍÏìÓ¦À¹½Ø£¬¾ßÌåÀ¹½ØµÄ²ÎÊýºÍºǫ́Լ¶¨ºÃ¡£
×ÊÔ´ÓÅ»¯
ÔÝʱ½Ó´¥²»µ½ Webpack Ö®ÀàµÄ×ÊÔ´´ò°üÓÅ»¯£¬µ«ÊÇÎĵµÖÐÓÐÌáµ½×ÊԴԤȡ¡¢Ô¤¼ÓÔØ¡¢treeShaking
Ö»ÐèÒªÔÚÅäÖÃÎļþÖÐÉèÖü´¿É£¬»òÕßÔÚ¿ª·¢¹¤¾ß¹´ÉÏ¡£Ð¡³ÌÐòÒ²Êǹ´Ñ¡×Ô¶¯Ñ¹Ëõ»ìÏý¡£
ɾ³ýûÓõ½ÎļþºÍͼƬ×ÊÔ´£¬ÒòΪ´ò°üµÄʱºòÊÇ»áËã½øÈ¥µÄ£¬±ÈÈç static Ŀ¼ÏµÄ×ÊÔ´Îļþ¶¼»á±»´ò°ü£¬¶øÇÒͼƬ×ÊÔ´Ì«´óÒ²²»ºÃ¡£
uni-app ÔËÐÐʱµÄ¿ò¼ÜÖ÷¿â chunk-vendors.js ÎļþÊǾ¹ý´¦ÀíµÄ£¬²¿Êð×ö gzip¡£
Web-View ×é¼þ
ÔÚ uni-app ÖÐʹÓà Web-View£¬¿ÉÒÔʹÓñ¾µØµÄ×ÊÔ´ºÍÍøÂçµÄ×ÊÔ´£¬²»Í¬Æ½Ì¨Ò²ÊÇÓвîÒìµÄ£¬Ð¡³ÌÐò²»Ö§³Ö±¾µØ
HTML£¬ÇÒС³ÌÐò¶Ë Web-View ×é¼þÒ»¶¨ÓÐÔÉúµ¼º½À¸¡£
ÐèҪעÒâµÄÊÇÍøÒ³ÏòÓ¦Óà postMessage µÄʱºòÐèÒªÒýÈë uni.web-view.js£¬²»È»ÊÇû°ì·¨Í¨ÐÅÄò»µ½Êý¾Ý¡£
TODO: Õâ¸ö¿ÓºóÃæÔÙÏêϸ×ܽáÏ£¡
È«¾Ö״̬
×ʼÊÇÖ±½ÓʹÓÃÀàËÆÐ¡³ÌÐòµÄ globalData À´¹ÜÀíÎÒÃǵÄÈ«¾Ö״̬£¬µ«ÊǺóÃæ·¢ÏÖÐèÇóÒ»¶à£¬¼ÓÁ˸÷ÖÖ¶«Î÷Ö®ºó£¬ÐèҪȡÕâ¸ö״̬µÄʱºò¾ÍºÜÍ´¿à£¬×öΪ³ÌÐòÔ³Â¶¼Ïë͵ÀÁß¹£¬Ã¿´Î¶¼µÃÒýÈëÒ»ÏÂ
getApp().globalData.data ÕâÑùºÜ·±Ëö¿É²»ÐУ¬¾ÍÌæ»»³ÉÁË Vuex£¬ÐèҪȡÕâ¸ö±äÁ¿µÄʱºò£¬Ö±½Ó
this.vuex_xxxx ¾ÍÄÜÄõ½Õâ¸öÖµ¡£
ÓжÎʱ¼äÖØÐ´ÁË HTTP ÇëÇ󲿷ֺÍÈ«¾Ö״̬¹ÜÀí²¿·Ö¡£
С³ÌÐòÖÐÒªÔÚÿһ¸öÒ³ÃæÖÐÌí¼ÓʹÓù²ÓеÄÊý¾Ý£¬¿ÉÒÔÓÐÈýÖÖ·½Ê½½â¾ö¡£
Vue.prototype
ËüµÄ×÷ÓÃÊÇ¿ÉÒÔ¹ÒÔØµ½ Vue µÄËùÓÐʵÀýÉÏ£¬¹©ËùÓеÄÒ³ÃæÊ¹Óá£
// main.js
Vue.prototype.$globalVar = "Hello"; |
È»ºóÔÚ pages/index/index ÖÐʹÓãº
<template>
<view>{{ useGlobalVar }}</view>
</tempalte>
<script>
export default {
data (){
return {
useGlobalVar: $globalVar
}
}
}
</script> |
globalData
<!-- App.vue
-->
<script>
export default {
globalData:{
data:1
}
onShow() {
getApp().globalData.data; // ʹÓÃ
getApp().globalData.data = 1; // ¸üÐÂ
};
</script> |
Vuex
Vuex ÊÇ Vue רÓõÄ״̬¹ÜÀíģʽ¡£Äܹ»¼¯ÖйÜÀíÆäÊý¾Ý£¬²¢Çҿɹ۲âÆäÊý¾Ý±ä»¯£¬ÒÔ¼°Á÷¶¯¡£
֮ǰ¿´µ½Ò»¸öͨË×»¯±ÈÓ÷£ºÓý»Í¨¹¤¾ßÀ´±ÈÓ÷ÏîÄ¿ÖÐÕ⼸ÖÖÃèÊöÈ«¾Ö±äÁ¿µÄ·½Ê½¡£
ÏÂÃæÁоÙÕâЩ·½Ê½Í¨Ë×µÄÀí½â״̬£º
Vue ²å¼þ vue-bus ¿ÉÒÔÀ´¹ÜÀíÒ»²¿·ÖÈ«¾Ö±äÁ¿£¨½ÐÓ¦ÓÃ״̬°É£©£¬Ñ§Ï°ºó·¢ÏÖ£¬bus£¨ÖÐÎÄÒâ˼£º¹«½»³µ£©ÕâÃû×ÖÈ¡µÃͦÐÎÏóµÄ¡£
ÏÈÂÞÁÐÒ»ÏÂÕâЩ·½Ê½£¬²»¹ýÕâÖÖ·ÖÀಢ²»ÑϽ÷¡£
1¡¢VueBus£º¹«½»³µ 2¡¢Vuex£º·É»ú 3¡¢È«¾Ö import
a.new Vue()£º×¨³µ£»
b.Vue.use£º¿ì³µ£»
c.Vue.prototype£ºË³·ç³µ¡£
4¡¢globalData£ºµØÌú
Ê×ÏÈ VueBus£¬Ïñ¹«½»³µÒ»ÑùÁé»î±ã½Ý£¬ËæÊ±¶¼¿ÉÒÔ³Ë×ø£»±íÏÖÔÚ´úÂëÀºÜÇá±ã£¬ÕÙÖ®¼´À´£¬È±µã¾ÍÊDz»ºÃά»¤£¬Ã»ÓÐÒ»¸öרÃŵÄÎļþÈ¥¹ÜÀíÕâЩ±äÁ¿¡£ÏëÏóƽʱµÈ¹«½»³µµÄÐÄÇ飬֪µÀËü»ØÀ´£¬µ«²»ÖªµÀËüʲôʱºòÀ´£¬¸øÈËÒ»Öֺܲ»°²µÄ¸Ð¾õ¡£
¶ø Vuex£¬ËüÏñ·É»ú£¬ºÜם֨£¬Ëþ̨Ҫе÷·É»úÔË×÷³©Ë³£¬·É»úËæÊ±ÏòµØÃ汨¸æ×Ô¼ºµÄλÖã¬ÊʺÏÓÃÔÚ´óÐÍÏîÄ¿¡£±íÏÖ´úÂëÖУ¬¾ÍÊǼ¯ÖÐʽ¹ÜÀíËùÓÐ״̬£¬²¢ÇÒÒÔ¿ÉÔ¤²âµÄ·½Ê½·¢Éú±ä»¯¡£Ò²¶ÔÓ¦×Å·É»ú¾ø¶Ô²»ÄÜʧÁªµÄÌØµã¡£
µÚÈýÖÖ·½Ê½ÊÇÈ«¾Ö import£¬·ÖÈýÖÖÀàÐÍ£¬·Ö±ðÊÇ£ºnew Vue()¡¢Vue.use()¡¢Vue.prototype¡£¿ÉÒÔÓÃÍøÔ¼³µÀ´±ÈÓ÷£¬ÈýÖÖÀàÐÍ·Ö±ð¶ÔÓ¦£º×¨³µ¡¢¿ì³µ¡¢Ë³·ç³µ¡£¶¼×ã¹»Áé»î£¬±íÏÖÔÚ´úÂëÀһ´¦µ¼È룬´¦´¦¿ÉÓá£
ÔÙ·Ö±ð˵Ã÷£º
new Vue() ¾ÍÏñµÎµÎµÄÀñ³Èר³µ£¬¹Ù·½ÔËÓª£¬°²È«¿É¿¿¡£±íÏÖÔÚ´úÂëÀ¾ÍÊÇÖ»ÓÐ Vue ¹Ù·½Î¬»¤µÄ¿â²ÅÄÜʹÓÃÕâÖÖ·½Ê½¡£
Vue.use() ¾ÍÏñ¿ì³µ£¬±ØÐë·ûºÏµÎµÎµÄ¹æ·¶£¬²ÅÄܳÉΪרְ˾»ú¡£±íÏÖÔÚ´úÂëÖУ¬¾ÍÊǵ¼ÈëµÄ²å¼þ£¨»òÕ߿⣩±ØÐë·ûºÏ
Vue µÄд·¨£¨¼´·â×°ÁË Vue ²å¼þд·¨£©¡£
Vue.prototype Ïñ˳·ç³µ£¬ÒªÇóûÉÏÃæÁ½¸öÄÇôÑÏ£¬·ûºÏÒ»°ã js д·¨¾ÍÐУ¬¾ÍÏñ˳·ç³µµÄ×¼ÈëÃż÷ÉÔÉÔµÍÒ»µã¡£
µ±È»£¬uni-app µÄÏîÄ¿ÀﻹÓпÉÒÔÓà globalData ¶¨ÒåÈ«¾Ö±äÁ¿£¬·ÇÒª±ÈÓ÷£¬¿ÉÒÔÓõØÌú£¬Ê×ÏȱÈ
vue-bus ¸üºÃ¹ÜÀíά»¤£¬ÏëÏóµØÌúÊDz»ÊDZȹ«½»¸ü¿É¿¿£»Æä´Î±È Vuex ¸ü¼òµ¥£¬ÒòΪ globalData
ÕæµÄ¾ÍÊǼòµ¥µÄ¶¨ÒåһЩ±äÁ¿¡£
globalData ÊÇ΢ÐÅС³ÌÐò·¢Ã÷µÄ£¬Vue ÏîÄ¿ºÃÏñûÓжÔÓ¦µÄ¸ÅÄµ«ÊÇÔÚ uni-app
ÖÐÒ»Ñù¿ÉÓá£
ÉÏÃæËµµ½£¬ÕâÖÖ·ÖÀ෽ʽ²»ÑϽ÷£¬Ö÷ÒªÌåÏÖÔÚÔÀíÉÏ£¬²¢²»ÊǼòµ¥µÄ²¢ÁйØÏµ»ò°üº¬¹ØÏµ¡£
²å¼þÊг¡
uni-app µÄÖ÷ÒªÌØÉ«Ò²Ô´×ÔÓÚËüµÄ²å¼þÊг¡Ê®·Ö·á¸»¡£
ÓõñȽϺõÄ×é¼þ£º
uView£ºÎÒÃÇÓÃÁËÕâ¸ö¿âµÄ¹Ç¼ÜÆÁ¡£Õâ¸ö¿â»¹ÊÇÓкܶ༼ÇÉ¿ÉÒÔѧµ½µÄ¡£
https://www.uviewui.com/js/intro.html
ColorUI-UniApp£ºÊǸöÑùʽ¿â£¬²»ÊÇ×é¼þ¿â¡£
https://ext.dcloud.net.cn/plugin?id=239
´ðÌâÄ£°æ£º×óÓÒ»¬´ðÌâÄ£°æ£¬µ¥Ñ¡Ìâ¡¢¶àÑ¡ÏÅжÏÌ⣬Ìî¿ÕÌ⣬ÎÊ´ðÌâ¡£»ùÓÚ ColorUI ×öµÄ¡£
https://ext.dcloud.net.cn/plugin?id=451
uCharts ¸ßÐÔÄÜ¿çÈ«¶Ëͼ±í£º
https://ext.dcloud.net.cn/plugin?id=271
×îºó£º¸÷¶ËµÄ²îÒìÐÔ£¬ºÜ¶à¶«Î÷£¬H5 ͦºÃµÄ£¬ÉÏÕæ»ú¾Í¹ÒÁË£¬Õæ»úºÃ×ŵ쬻»Ð¡³ÌÐò¾ÍÆ®ÁË£¬²»Í¬Ð¡³ÌÐòÖ®¼äÒ²ÓвîÒì£¬ÖØµãÊÇ×ÐϸÔĶÁÎĵµ¡£
ÔÆ´ò°üÏÞÖÆ£¬ÔÆ´ò°ü(´ò APK) µÄÿÌì×öÁËÏÞÖÆ£¬³¬³ö´ÎÊýÐèÒª¹ºÂò¡£
ËäÈ»¿ÉÄÜһЩÔÉú¿ÉÒÔʵÏֵŦÄÜ uni-app ʵÏÖ²»ÁË£¬²»¹ýÕûÌ忪·¢ÏÂÀ´»¹ÐУ¬ºÜ¶àµÄ¿Ó»¹ÊÇÒòΪ¶à¶Ë²»¼æÈÝ£¬³ýÁËдÆðÀ´Âé·³Ò»µã£¬»ù±¾É϶¼»¹ÊÇÓпÉÒÔ½â¾öµÄ²ßÂÔ¡£±È֮ǰÓÃ
Weex д APP ¿ª·¢ÌåÑéºÃÒ»µã£¬±È React Native µÄ±àÒ뼦ÀßÒ»µã£¨ÕâµãÌåÑé²»ÊǺܺã©£¬ÖÁÓÚ
Flutter »¹Ã»ÓÐÊÔ¹ý£¬Óлú»áµÄ»°»áÊÔһϡ£ |