HTML5¼¼Êõ

΢ÐÅС³ÌÐò¿ª·¢³£¼ûÎÊÌâ·ÖÎö - ¶ÅÉÙ²©¿Í

×ÖºÅ+ ×÷ÕߣºH5Ö®¼Ò À´Ô´£ºH5Ö®¼Ò 2016-10-29 12:00 ÎÒÒªÆÀÂÛ( )

΢ÐÅС³ÌÐò¿ª·¢³£¼ûÎÊÌâ·ÖÎö ¾àÀë΢ÐÅС³ÌÐòÄÚ²â°æ·¢²¼ÒѾ­ÓÐÊ®¼¸ÌìµÄʱ¼äÁË£¬ÍøÉ϶Ô΢ÐÅС³ÌÐòµÄÌÖÂÛÒ²Òì³£»ð±¬£¬´Ó·¢²¼µ½ÏÖÔÚ΢ÐÅС³ÌÐòÒ»Ö±Õ¼Áìן÷ÖÖ¼¼ÊõÂÛ̳µÄÍ·Ìõ£¬µ±È»¸÷ÖÖƽ̨Ҳ¶Ô΢ÐÅС³ÌÐòÓÐÐÂÎű¨µÀ£¬±Ï¾¹ÌÚѶÔÚ¹úÄÚÓ°ÏìÁ¦»¹ÊǺܴóµÄ¡£ÎÒÃǶ¼ÖªµÀ

΢ÐÅС³ÌÐò¿ª·¢³£¼ûÎÊÌâ·ÖÎö

¾àÀë΢ÐÅС³ÌÐòÄÚ²â°æ·¢²¼ÒѾ­ÓÐÊ®¼¸ÌìµÄʱ¼äÁË£¬ÍøÉ϶Ô΢ÐÅС³ÌÐòµÄÌÖÂÛÒ²Òì³£»ð±¬£¬´Ó·¢²¼µ½ÏÖÔÚ΢ÐÅС³ÌÐòÒ»Ö±Õ¼Áìן÷ÖÖ¼¼ÊõÂÛ̳µÄÍ·Ìõ£¬µ±È»¸÷ÖÖƽ̨Ҳ¶Ô΢ÐÅС³ÌÐòÓÐÐÂÎű¨µÀ£¬±Ï¾¹ÌÚѶÔÚ¹úÄÚÓ°ÏìÁ¦»¹ÊǺܴóµÄ¡£ÎÒÃǶ¼ÖªµÀ΢ÐÅС³ÌÐòµÚÒ»Ìì·¢²¼ÄÚ²â°æ£¬²¢Ã»Óй«¿ª¹Ù·½¿ª·¢ÎĵµºÍ¿ª·¢¹¤¾ß£¬µ«ÊÇÕâ×èÖ¹²»Á˼¼ÊõÈ˵ĺÃÆæÐÄ¡£

ÒòΪ×Ô¼º¶ÔС³ÌÐòÒ²ÊǺÜÓÐÐËȤµÄ£¬¸Ð¾õÊǺÜÓÐÒâ˼µÄÒ»¸ö¶«Î÷£¬ËùÒÔÁ¢Âí×öÁËÒ»ÏÂСdemo£¬Ë®Æ½ÓÐÏÞ£¬ËùÒÔ×öµÄ¹ý³ÌÒ²¾ÍÊÇÒ»¸öѧϰµÄ¹ý³Ì£¬Ò»¸öÌá¸ßµÄ¹ý³Ì¡£
ÕâƪÎÄÕÂÖ÷ҪдÎÒÔÚдdemoµÄ¹ý³ÌÖÐÓöµ½µÄһЩÎÊÌâ¡£Èç¹ûÔĶÁ´ËÎĵÄÄãÓÐÒ»¶¨°ïÖú£¬ºÜÊÇÐÀο¡£

Ò»£ºÏîÄ¿½á¹¹

΢ÐÅС³ÌÐòÏîÄ¿½á¹¹Ö÷ÒªÓÐËĸöÎļþÀàÐÍ,ÈçÏÂ

WXML £¨WeiXin Markup Language£©ÊÇ¿ò¼ÜÉè¼ÆµÄÒ»Ì×±êÇ©ÓïÑÔ£¬½áºÏ»ù´¡×é¼þ¡¢Ê¼þϵͳ£¬¿ÉÒÔ¹¹½¨³öÒ³ÃæµÄ½á¹¹¡£ÄÚ²¿Ö÷ÒªÊÇ΢ÐÅ×Ô¼º¶¨ÒåµÄÒ»Ì××é¼þ¡£

WXSS (WeiXin Style Sheets)ÊÇÒ»Ì×ÑùʽÓïÑÔ£¬ÓÃÓÚÃèÊö WXML µÄ×é¼þÑùʽ£¬

js Âß¼­´¦Àí£¬ÍøÂçÇëÇó

json С³ÌÐòÉèÖã¬ÈçÒ³Ãæ×¢²á£¬Ò³Ãæ±êÌâ¼°tabBar¡£

×¢Ò⣺ΪÁË·½±ã¿ª·¢Õß¼õÉÙÅäÖÃÏ¹æ¶¨ÃèÊöÒ³ÃæµÄÕâËĸöÎļþ±ØÐë¾ßÓÐÏàͬµÄ·¾¶ÓëÎļþÃû¡£

ÔÚ¸ùĿ¼ÏÂÓÃappÀ´ÃüÃûµÄÕâËÄÖÐÀàÐ͵ÄÎļþ£¬¾ÍÊdzÌÐòÈë¿ÚÎļþ¡£

app.json

±ØÐëÒªÓÐÕâ¸öÎļþ£¬Èç¹ûûÓÐÕâ¸öÎļþ£¬ÏîÄ¿ÎÞ·¨ÔËÐУ¬ÒòΪ΢ÐÅ¿ò¼Ü°ÑÕâ¸ö×÷ΪÅäÖÃÎļþÈë¿Ú£¬Õû¸öС³ÌÐòµÄÈ«¾ÖÅäÖᣰüÀ¨Ò³Ãæ×¢²á£¬ÍøÂçÉèÖã¬ÒÔ¼°Ð¡³ÌÐòµÄwindow±³¾°É«£¬ÅäÖõ¼º½ÌõÑùʽ£¬ÅäÖÃĬÈϱêÌâ¡£

app.js
±ØÐëÒªÓÐÕâ¸öÎļþ£¬Ã»ÓÐÒ²Êǻᱨ´í£¡µ«ÊÇÕâ¸öÎļþ´´½¨Ò»Ï¾ÍÐРʲô¶¼²»ÐèҪд
ÒÔºóÎÒÃÇ¿ÉÒÔÔÚÕâ¸öÎļþÖмàÌý²¢´¦ÀíС³ÌÐòµÄÉúÃüÖÜÆÚº¯Êý¡¢ÉùÃ÷È«¾Ö±äÁ¿¡£

app.wxss
È«¾ÖÅäÖõÄÑùʽÎļþ£¬ÏîÄ¿·Ç±ØÐë¡£

ÖªµÀС³ÌÐò»ù±¾Îļþ½á¹¹£¬¾Í¿ÉÒÔ¿ªÊ¼Ñо¿¹Ù·½demoÁË£¬Ñо¿¹ý³ÌÖÐÈç¹ûÓв»Ã÷°×µÄµØ·½¿ÉÒÔÈ¥¹Ù·½ÎĵµÑ°Çó´ð°¸£¬Èç¹ûÕÒ²»µ½´ð°¸»òÕßÓÐÒÉÎÊ£¬¿ÉÔٴ˲©¿ÍÁôÑÔ£¬Ï໥½»Á÷¡£ÏÂÃæ½éÉÜϳöÏÖ¸ÅÂʽϸߵļ¸¸öÎÊÌâ¡£

¶þ£º³£¼ûÎÊÌâ rpx£¨responsive pixel£©

΢ÐÅС³ÌÐòж¨ÒåÁËÒ»¸ö³ß´çµ¥Î»£¬¿ÉÒÔÊÊÅ䲻ͬ·Ö±æÂʵÄÆÁÄ»£¬Ëü¹æ¶¨ÆÁÄ»¿íΪ750rpx£¬ÈçÔÚ iPhone6 ÉÏ£¬ÆÁÄ»¿í¶ÈΪ375px£¬¹²ÓÐ750¸öÎïÀíÏñËØ£¬Ôò750rpx = 375px = 750ÎïÀíÏñËØ£¬1rpx = 0.5px = 1ÎïÀíÏñËØ¡£

Õâ¸öÏîÄ¿ÎÒÓõĶ¼ÊÇrpx³ß´çµ¥Î»£¬ÆÚ¼äÓöµ½Ò»¸öºÜÆæÝâµÄÎÊÌâ¡£ÔÚÏàÁÚµÄÁ½ÌõÐÅÏ¢Ö±½Ó¶¼»áÓÐÒ»¸ö·Ö¸îÏߣ¬ÎÒ½«Ïߵĸ߶ȶ¼ÉèÖóÉ1rpx,µ«ÊDz»Óиö±ð·Ö¸îÏßÊDz»ÏÔʾµÄ£¬ÈçÏÂͼ

¿´µ½Ã»ÔÚµÚÒ»ÌõºÍµÚ¶þÌõÖ±½Ó²¢Ã»ÓÐÏÖʵÕâÌõÏߣ¬µ«ÊÇÆäËûµÄ¶¼Õ¹Ê¾ÁË£¬·Ö¸îÏßµÄÊôÐÔÊÇÒ»ÑùµÄ£¬¶øÇÒÔÚ²»Í¬µÄÊÖ»úÉÏ£¨·Ö±æÂʲ»Í¬£©²»ÏÔʾµÄ·Ö¸îÏßÒ²ÊDz»Í¬µÄ£¬ÓеķֱæÂʺü¸Ìõ·Ö¸îÏ߶¼²»ÏÔʾ£¬²»ÖªµÀÕâÊÇÄ£ÄâÆ÷µÄbug»¹ÊÇrpxµÄbug¡£×îºó·Ö¸îÏߵĸ߶ȳߴ絥λʹÓÃÁËpx,½â¾öÁËÕâ¸öÎÊÌâ¡£

40013´íÎó

ÔÚ΢ÐÅС³ÌÐò¸Õ³öÀ´µÄʱºòÈç¹ûÊäÈëAppIDÌáʾÕâ¸öÐÅÏ¢¾Í±íʾûÓÐÆƽ⣬µ«ÊÇÏÖÔÚ¹Ù·½Èí¼þ¸üпÉÒÔÑ¡ÔñÎÞAppID¿ª·¢£¬ÈçÏÂͼ£¬ÎÒÃÇÖ®¼äÑ¡ÔñÎÞAppID£¬¼´¿É½â¾ö´Ë´íÎó¡£½¨Òé°²×°¹Ù·½¿ª·¢¹¤¾ß¡£¿ÉÈ¥´Ë´¦ÕÒÏÂÔØÁ´½Ó¡£

4058´íÎó

΢ÐÅС³ÌÐò´´½¨ÏîĿʱѡÔñÎÞAppID£¬´´½¨ÏîĿʱ»áÉú³Éapp.json£¬app.josnÊdzÌÐòÆô¶¯×îÖØÒªµÄÎļþ£¬³ÌÐòµÄÒ³Ãæ×¢²á£¬´°¿ÚÉèÖã¬tabÉèÖü°ÍøÂçÇëÇóʱ¼äÉèÖö¼ÊÇÔÚ´ËÎļþϵġ£Èç¹ûÄã´´½¨µÄÏîĿĿ¼ÏÂûÓÐapp.jsonÎļþ¾Í»á±¨ÏÂÃæµÄ´íÎó¡£

ÎÒÃÇ¿´µ½ÉÏÃæµÄ´íÎóÐÅÏ¢ÖÐÓиöÊý×Ö-4058£¬ÕâÓ¦¸ÃÊdzõÈë΢ÐÅС³ÌÐòÓöµ½×î¶àµÄ´íÎóÁË£¬ÕâÖÖÒ»°ã¶¼ÊÇÎļþȱʧ£¬ºóÃæÓиöpath£¬¿ÉÒÔ¶Ôן÷¾¶¿´¿´ÊÇ·ñ´æÔÚÕâ¸öÎļþ¡£Ôì³ÉÕâÖÖ´íÎóµÄÔ­ÒòÒ»°ã¶¼ÊÇ´´½¨ÏîÄ¿Ñ¡ÔñµÄĿ¼²»ÕýÈ·£¬»òÕßÔÚapp.json×¢²áÁËÒ»¸ö²»´æÔÚµÄÒ³Ãæ¡£
µ±È»»¹ÓÐÒ»ÖÖÇé¿ö¾ÍÊÇÔÚapp.jsonÎļþµÄpages×¢²áµÄÒ³ÃæÊÇûÓд´½¨µÄ£¬»òÕßÄãɾ³ýÁËij¸öÒ³Ã棬µ«ÊÇûÓÐÈ¡Ïû×¢²áÒ²»áÊÇ-4058´íÎó¡£

Page×¢²á´íÎó

Õâ¸ö´íÎó¿ÉÄܺÜÈÝÒ×Àí½â£¬Ò³Ãæ×¢²á´íÎó¡£Ò³ÃæÊÇͨ¹ýPage¶ÔÏóÀ´äÖȾµÄ£¬Ã¿¸öÒ³Ãæ¶ÔÓ¦µÄjsÎļþ±ØÐëÒª´´½¨page£¬×î¼òµ¥µÄ·½Ê½¾ÍÊÇÔÚjsÎļþÏÂдÈëPage({})£¬ÔÚpageÖÐÓйÜÀíÒ³ÃæäÖȾµÄÉúÃüÖÜÆÚ£¬ÒÔ¼°Êý¾Ý´¦Àí£¬Ê¼þ¶¼ÔÚÕâÍê³É¡£Õâ¸ö´íÎóÒýÆðµÄÔ­ÒòÒ»°ã¶¼ÊǸմ´½¨Ò³Ã棬jsÎļþ»¹ÓÐÓд¦Àí»òÕßÍüÁË´¦Àí¡£ËùÒÔÒªÑø³É´´½¨Ò³ÃæµÄͬʱÔÚjsÎļþÏÈ´´½¨PageµÄÏ°¹ß.

Page route´íÎó

×ÖÃæÒâ˼¾ÍÊÇÒ³Ãæ·ÓÉ´íÎó£¬ÔÚ΢ÐÅÖÐÓÐÁ½ÖÖ·ÓÉ·½Ê½Ò»ÖÖÊÇÔÚwxmlÎļþʹÓÃ

ÈçÏ´úÂ룺
wxmlÎļþ£º

jsÎļþʼþ´¦Àíº¯Êý£º
bindtap:function(event){
wx.navigateTo({
url: "search/search"
})
}
Èç¹ûÄãÕâÑùдµÄ»°£¬¹§Ï²Ä㣬Äã¾Í»á¿´µ½ÉÏÃæÌáʾµÄ´íÎó£¬ÕâÊÇÒòΪÖظ´µ÷Ó÷ÓÉÒýÆðµÄ£¬´¦Àí·½·¨¾ÍÊÇɾ³ýÒ»¸ö·ÓÉ£¬É¾³ý

<navigator url="search/search"> <navigator url="search/search"> <view bindtap="bindtap"> ËÑË÷</view> </navigator> </navigator>

ÕâÖÖÒ²ÊDz»ÔÊÐíµÄ£¬Ò²¾ÍÊÇ˵

Do not have * handler in current page.

´ó¸ÅÒâ˼¾ÍÊǵ±Ç°Ò³ÃæûÓд˴¦Àí£¬ÈÃÈ·¶¨ÊÇ·ñÒѾ­¶¨Ò壬»¹Ö¸³öÁË´íÎó³öÏֵĿÉÄÜλÖÃpages/message/message,ÆäʵÕâÖÖÎÊÌâ³öÏÖÒ»°ã¾ÍÊÇÎÒÃÇÔÚwxml¶¨ÒåÁËһЩ´¦Àíʼþ£¬µ«ÊÇÔÚjsÎļþÖÐûÓÐʵÏÖÕâ¸öʱʼþµÄ´¦Àí·½·¨£¬¾Í»á³öÏÖÕâ¸ö´íÎó¡£ÄÇôÎÒÃÇ°´ÌáʾÔÚjsÎļþ¼ÓÉÏʼþ´¦Àí£¬ÈçÏ´úÂ룬¼ÓÉϺó¾Í²»»áÔÙÓд˴íÎóÌáʾ¡£

bindtap:function(event){ wx.navigateTo({ url: "search/search" }) }, tabBarÉèÖò»ÏÔʾ

¶ÔÓÚtabBar²»ÏÔʾ£¬Ô­ÒòÓкܶ࣬²éÕÒÕâ¸ö´íÎóÖ±½ÓÈ¥app.jsonÕâ¸öÎļþ£¬×î³£¼ûµÄÒ²ÊǸÕѧϰ΢ÐÅС³ÌÐò×îÈÝÒ×·¸µÄ´íÎóÎÞÍâºõÏÂÃ漸ÖÖ
×¢²áÒ³Ãæ¼´½«Ò³Ãæдµ½app.jsonµÄpages×Ö¶ÎÖУ¬Èç

"pages":[ "pages/message/message", "pages/contact/contact", "pages/dynamic/dynamic", "pages/dynamic/music/music", "pages/index/index", "pages/logs/logs" ]

tabBarд·¨´íÎóµ¼ÖµIJ»ÏÔʾ£¬½«ÆäÖеĴóд×ÖĸBд³ÉСд£¬µ¼ÖÂtabBar²»ÏÔʾ¡£
tabBarµÄlistÖÐûÓÐдpagePath×ֶΣ¬»òÕßpagePathÖеÄÒ³ÃæûÓÐ×¢²á
tabBarµÄlistµÄpagePathÖ¸¶¨µÄÒ³ÃæûÓÐдÔÚ×¢²áÒ³ÃæµÚÒ»¸ö¡£Î¢ÐÅС³ÌÐòµÄÂß¼­ÊÇ"pages"ÖеĵÚÒ»¸öÒ³ÃæÊÇÊ×Ò³£¬Ò²¾ÍÊdzÌÐòÆô¶¯ºóµÚÒ»¸öÏÔʾµÄÒ³Ã棬Èç¹ûtabBarµÄlistµÄpagePathÖ¸¶¨µÄÒ³Ã涼²»ÊÇpagesµÄµÚÒ»¸ö£¬µ±È»Ò²¾Í²»»áµçÊÓtabBarÁË¡£
tabBarµÄÊýÁ¿µÍÓÚÁ½Ïî»òÕ߸ßÓÚÎåÏ΢ÐŹٷ½ÖÐÃ÷È·¹æ¶¨tabBarµÄÖÁÉÙÁ½Ïî×î¶àÎåÏî¡£³¬¹ý»òÕßÉÙÓÚ¶¼²»»áÏÔʾtabBar¡£

navigationBarTitleÏÔʾÎÊÌâ

¡¡

1.±¾Õ¾×ñÑ­ÐÐÒµ¹æ·¶£¬ÈκÎתÔصĸå¼þ¶¼»áÃ÷È·±ê×¢×÷ÕߺÍÀ´Ô´£»2.±¾Õ¾µÄÔ­´´ÎÄÕ£¬ÇëתÔØʱÎñ±Ø×¢Ã÷ÎÄÕÂ×÷ÕߺÍÀ´Ô´£¬²»×ðÖØÔ­´´µÄÐÐΪÎÒÃǽ«×·¾¿ÔðÈΣ»3.×÷ÕßͶ¸å¿ÉÄܻᾭÎÒÃDZ༭Ð޸Ļò²¹³ä¡£

Ïà¹ØÎÄÕÂ
  • ¡¾¾ø¶Ô¸É»õ¡¿·Â΢ÐÅQQÉèÖÃͼÐÎÍ·Ïñ²Ã¼ô£¬ÈÃÄãµÄApp´Ó´ËìÅÆðÀ´~ - Äϳ¾

    ¡¾¾ø¶Ô¸É»õ¡¿·Â΢ÐÅQQÉèÖÃͼÐÎÍ·Ïñ²Ã¼ô£¬ÈÃÄãµÄApp´Ó´ËìÅÆðÀ´~ - ÄÏ

    2016-10-17 10:00

  • Äã×ÔÈÏΪÁ˽â΢ÐÅС³ÌÐò£¿ÐÑÐÑ°É£¡ - ÎÞΪ·½ÄÜÎÞ²»Îª

    Äã×ÔÈÏΪÁ˽â΢ÐÅС³ÌÐò£¿ÐÑÐÑ°É£¡ - ÎÞΪ·½ÄÜÎÞ²»Îª

    2016-10-14 11:00

  • ΢ÐÅÓ¦ÓúÅ(΢ÐÅС³ÌÐò)¿ª·¢½Ì³Ì - nhbcyz

    ΢ÐÅÓ¦ÓúÅ(΢ÐÅС³ÌÐò)¿ª·¢½Ì³Ì - nhbcyz

    2016-09-26 10:00

  • ΢ÐÅС³ÌÐò¿ª·¢½Ì³Ì³õ¼¶°æ

    ΢ÐÅС³ÌÐò¿ª·¢½Ì³Ì³õ¼¶°æ

    2016-09-26 08:39

ÍøÓѵãÆÀ
Ó