index.html 53 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122
  1. <!DOCTYPE html>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width,initial-scale=1">
  6. <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
  7. <title>立即体验 | 宇信科技-新一代移动金融开发平台YUMP</title>
  8. <meta name="description" content="">
  9. <link rel="shortcut icon" href="/yump-guide-v2/images/favicon.ico">
  10. <meta name="description" content="Yusys New Generation Mobile Platform.">
  11. <link rel="preload" href="/yump-guide-v2/assets/css/0.styles.55c6ad92.css" as="style"><link rel="preload" href="/yump-guide-v2/assets/js/app.896f6ac7.js" as="script"><link rel="preload" href="/yump-guide-v2/assets/js/2.51c90e44.js" as="script"><link rel="preload" href="/yump-guide-v2/assets/js/1.a9756c7a.js" as="script"><link rel="preload" href="/yump-guide-v2/assets/js/85.4150dcba.js" as="script"><link rel="prefetch" href="/yump-guide-v2/assets/js/10.b899c03d.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/100.96e0ca3e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/101.7a3c98e7.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/102.317715ca.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/103.d1f17eea.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/104.639a7b14.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/105.5ef3a72c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/106.e8145609.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/107.1c4c3b98.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/108.25c1bbb4.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/109.c5cc2d99.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/11.79468af0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/110.5bd65915.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/111.f154840e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/112.6557da1b.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/113.fa7dcb7c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/114.3775b454.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/115.2d8ef594.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/116.f5a4fa70.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/117.91c276de.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/118.24469bef.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/119.7f0f2a6d.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/12.af97c3b0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/120.28bcb854.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/121.c73b2ca1.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/122.3b756d9e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/123.787b6261.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/124.3cadb4cb.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/125.aaa20687.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/126.e1f1c469.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/127.51ac4f3c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/128.a389b013.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/129.c902f624.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/13.4240fb0f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/130.c7988b69.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/131.be40d11d.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/132.5706a673.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/133.e13e29b7.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/134.63ad6dc2.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/135.b9a9c24c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/136.f4c5bd04.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/137.df75f133.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/138.dd38c4a9.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/139.286cf8c3.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/14.7796bbb6.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/140.b6973a53.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/141.d1f2c245.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/142.416c6362.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/143.27dc8736.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/144.7b9fd1d5.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/145.68432b8f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/146.9418526f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/147.84911b0e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/148.5e5b9fa2.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/149.df59bd0e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/15.32b7468f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/150.cb46d058.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/151.e028671a.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/152.99edd436.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/153.de762758.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/154.332cdcb5.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/155.a64303d0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/156.bb98520c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/16.84b2b202.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/17.257af1e4.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/18.068a2108.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/19.b443bc8f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/20.51f5877f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/21.6479fbc0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/22.874c6b4b.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/23.7fadcc50.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/24.5b3c6fee.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/25.9d077073.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/26.d92ec3f7.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/27.38f8f436.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/28.2bd84691.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/29.f7f911b0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/3.2661404a.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/30.fe7be147.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/31.8b00765d.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/32.b4379835.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/33.7480a1a9.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/34.28155497.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/35.8e1572c6.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/36.88cbe849.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/37.57a0a535.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/38.f5feba8c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/39.099c134a.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/4.0605f027.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/40.cb743a61.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/41.9b04589b.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/42.8469b0b2.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/43.9eb1b92c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/44.dc802510.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/45.84fb7590.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/46.3431733e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/47.525cbce2.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/48.16b4219a.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/49.f27edbe4.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/5.c75411ab.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/50.7607d9da.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/51.e9c81e5a.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/52.ffbc5bbe.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/53.177fa16f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/54.14076286.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/55.f1fab994.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/56.8696946c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/57.003ca5b0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/58.033b0211.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/59.cd356469.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/6.1d75269f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/60.8e33f749.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/61.b54c085e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/62.25c04659.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/63.7976f910.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/64.ac643e8d.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/65.55e606b3.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/66.90c23713.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/67.18846762.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/68.5ad83596.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/69.5008d2cc.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/7.8edc6650.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/70.8e91e18e.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/71.42f55c96.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/72.42ff84ec.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/73.f652329b.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/74.134aa0ff.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/75.87205394.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/76.99b23dfb.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/77.63e82002.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/78.fe5a1829.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/79.ce2f0aba.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/80.4762ae2f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/81.e0f47584.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/82.51d99b1c.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/83.9a2bec3a.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/84.70e27662.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/86.ca47122f.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/87.9806fd1a.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/88.408e5802.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/89.5a7330f6.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/90.71f8fe53.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/91.8c5e0db0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/92.4fecf5f0.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/93.73314cb4.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/94.6a90e063.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/95.05ec0274.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/96.df0e55aa.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/97.97112e61.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/98.0a637add.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/99.942048ae.js"><link rel="prefetch" href="/yump-guide-v2/assets/js/vendors~docsearch.8ff0dd7b.js">
  12. <link rel="stylesheet" href="/yump-guide-v2/assets/css/0.styles.55c6ad92.css">
  13. </head>
  14. <body>
  15. <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/yump-guide-v2/" class="home-link router-link-active"><!----> <span class="site-name">宇信科技-新一代移动金融开发平台YUMP</span></a> <div class="links"><!----> <nav class="nav-links can-hide"><div class="nav-item"><a href="/yump-guide-v2/" class="nav-link">
  16. 首页
  17. </a></div><div class="nav-item"><a href="/yump-guide-v2/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  18. 教程
  19. </a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="组件" class="dropdown-title"><span class="title">组件</span> <span class="arrow down"></span></button> <button type="button" aria-label="组件" class="mobile-dropdown-title"><span class="title">组件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://vant-contrib.gitee.io/vant/v2/#/zh-CN/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  20. 基础组件
  21. <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="/yump-guide-v2/components/" class="nav-link">
  22. 业务组件
  23. </a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="H5-API" class="dropdown-title"><span class="title">H5-API</span> <span class="arrow down"></span></button> <button type="button" aria-label="H5-API" class="mobile-dropdown-title"><span class="title">H5-API</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/yump-guide-v2/api/" class="nav-link">
  24. API
  25. </a></li><li class="dropdown-item"><!----> <a href="/yump-guide-v2/utils/app.html" class="nav-link">
  26. 工具方法
  27. </a></li></ul></div></div><div class="nav-item"><a href="/yump-guide-v2/sdk/" class="nav-link">
  28. APP-SDK
  29. </a></div><div class="nav-item"><a href="http://210.12.198.141:18080/yump-build/#/login?redirect=%2Fdashboard" target="_blank" rel="noopener noreferrer" class="nav-link external">
  30. 云打包
  31. <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/yump-guide-v2/typical/" class="nav-link">
  32. 典型场景
  33. </a></div><div class="nav-item"><a href="/yump-guide-v2/nativepackaging/" class="nav-link">
  34. 原生打包
  35. </a></div><div class="nav-item"><a href="/yump-guide-v2/yuga/config.html" class="nav-link">
  36. 埋点
  37. </a></div><div class="nav-item"><a href="/yump-guide-v2/FAQ/" class="nav-link">
  38. 常见问题
  39. </a></div><div class="nav-item"><a href="/yump-guide-v2/contact-us/" class="nav-link">
  40. 联系我们
  41. </a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/yump-guide-v2/" class="nav-link">
  42. 首页
  43. </a></div><div class="nav-item"><a href="/yump-guide-v2/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  44. 教程
  45. </a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="组件" class="dropdown-title"><span class="title">组件</span> <span class="arrow down"></span></button> <button type="button" aria-label="组件" class="mobile-dropdown-title"><span class="title">组件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://vant-contrib.gitee.io/vant/v2/#/zh-CN/" target="_blank" rel="noopener noreferrer" class="nav-link external">
  46. 基础组件
  47. <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="/yump-guide-v2/components/" class="nav-link">
  48. 业务组件
  49. </a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="H5-API" class="dropdown-title"><span class="title">H5-API</span> <span class="arrow down"></span></button> <button type="button" aria-label="H5-API" class="mobile-dropdown-title"><span class="title">H5-API</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/yump-guide-v2/api/" class="nav-link">
  50. API
  51. </a></li><li class="dropdown-item"><!----> <a href="/yump-guide-v2/utils/app.html" class="nav-link">
  52. 工具方法
  53. </a></li></ul></div></div><div class="nav-item"><a href="/yump-guide-v2/sdk/" class="nav-link">
  54. APP-SDK
  55. </a></div><div class="nav-item"><a href="http://210.12.198.141:18080/yump-build/#/login?redirect=%2Fdashboard" target="_blank" rel="noopener noreferrer" class="nav-link external">
  56. 云打包
  57. <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="/yump-guide-v2/typical/" class="nav-link">
  58. 典型场景
  59. </a></div><div class="nav-item"><a href="/yump-guide-v2/nativepackaging/" class="nav-link">
  60. 原生打包
  61. </a></div><div class="nav-item"><a href="/yump-guide-v2/yuga/config.html" class="nav-link">
  62. 埋点
  63. </a></div><div class="nav-item"><a href="/yump-guide-v2/FAQ/" class="nav-link">
  64. 常见问题
  65. </a></div><div class="nav-item"><a href="/yump-guide-v2/contact-us/" class="nav-link">
  66. 联系我们
  67. </a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/yump-guide-v2/guide/" aria-current="page" class="sidebar-heading clickable router-link-exact-active router-link-active open active"><span>教程</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/yump-guide-v2/guide/" aria-current="page" class="active sidebar-link">快速上手</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#立即体验" class="sidebar-link">立即体验</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#如何学习" class="sidebar-link">如何学习</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#获取工程" class="sidebar-link">获取工程</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#项目依赖软件安装" class="sidebar-link">项目依赖软件安装</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#环境准备" class="sidebar-link">环境准备</a></li></ul></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#安装依赖" class="sidebar-link">安装依赖</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#yump-cli工具" class="sidebar-link">yump-cli工具</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#全局配置" class="sidebar-link">全局配置</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#编译配置" class="sidebar-link">编译配置</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#环境配置" class="sidebar-link">环境配置</a></li></ul></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#运行工程" class="sidebar-link">运行工程</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#前端脚手架打包" class="sidebar-link">前端脚手架打包</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#打包成app" class="sidebar-link">打包成app</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#发布离线包" class="sidebar-link">发布离线包</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#vant-ui基础组件库主题定制" class="sidebar-link">vant-ui基础组件库主题定制</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/#页面跳转转场动画" class="sidebar-link">页面跳转转场动画</a></li></ul></li><li><a href="/yump-guide-v2/guide/base.html" class="sidebar-link">基础教程</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#工程目录结构" class="sidebar-link">工程目录结构</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#配置文档" class="sidebar-link">配置文档</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#全局配置" class="sidebar-link">全局配置</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#多环境配置" class="sidebar-link">多环境配置</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#模块模板配置" class="sidebar-link">模块模板配置</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#路由配置" class="sidebar-link">路由配置</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#请求配置" class="sidebar-link">请求配置</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#vuex配置" class="sidebar-link">vuex配置</a></li></ul></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#数据字典使用" class="sidebar-link">数据字典使用</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#多语言使用" class="sidebar-link">多语言使用</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#多主题配置" class="sidebar-link">多主题配置</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#权限配置" class="sidebar-link">权限配置</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#工具方法" class="sidebar-link">工具方法</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#网络请求配置" class="sidebar-link">网络请求配置</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/base.html#mock使用" class="sidebar-link">mock使用</a></li></ul></li><li><a href="/yump-guide-v2/guide/debug.html" class="sidebar-link">调试方法</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/debug.html#h5平台调试" class="sidebar-link">H5平台调试</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/debug.html#yump-app专用-app平台调试" class="sidebar-link">YUMP app专用-APP平台调试</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/debug.html#通用-移动端真机调试" class="sidebar-link">通用-移动端真机调试</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/debug.html#前言" class="sidebar-link">前言</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/debug.html#安卓系统下的h5真机联调" class="sidebar-link">安卓系统下的h5真机联调</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/debug.html#ios系统下的h5真机联调" class="sidebar-link">iOS系统下的h5真机联调</a></li></ul></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/debug.html#vconsole调试工具" class="sidebar-link">vConsole调试工具</a></li></ul></li><li><a href="/yump-guide-v2/guide/LICENSE.html" class="sidebar-link">license</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/LICENSE.html#申请license" class="sidebar-link">申请license</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/LICENSE.html#license在移动前端脚手架" class="sidebar-link">license在移动前端脚手架</a></li></ul></li><li><a href="/yump-guide-v2/guide/official.html" class="sidebar-link">微信公众号</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/official.html#申请微信公众号" class="sidebar-link">申请微信公众号</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/official.html#开发微信公众号网页应用的开发脚手架工程" class="sidebar-link">开发微信公众号网页应用的开发脚手架工程</a></li></ul></li><li><a href="/yump-guide-v2/guide/enterprise.html" class="sidebar-link">企业微信</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/enterprise.html#接入企业微信" class="sidebar-link">接入企业微信</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/enterprise.html#企业微信能力" class="sidebar-link">企业微信能力</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/enterprise.html#官方客户端api" class="sidebar-link">官方客户端API</a></li></ul></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/enterprise.html#开发脚手架工程" class="sidebar-link">开发脚手架工程</a></li></ul></li><li><a href="/yump-guide-v2/guide/mini.html" class="sidebar-link">微信小程序</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/mini.html#申请微信小程序开发者账号" class="sidebar-link">申请微信小程序开发者账号</a></li><li class="sidebar-sub-header"><a href="/yump-guide-v2/guide/mini.html#使用移动前端脚手架开发" class="sidebar-link">使用移动前端脚手架开发</a></li></ul></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h2 id="立即体验"><a href="#立即体验" class="header-anchor">#</a> 立即体验</h2> <p><img src="/yump-guide-v2/images/guide/example.png" width="200px"><br></p> <ul><li>扫码查看示例移动应用</li></ul> <h2 id="如何学习"><a href="#如何学习" class="header-anchor">#</a> 如何学习</h2> <p>如果你没有接触前端,没有接触过<code>javaScript</code>、<code>css</code>、<code>html</code>、<code>vue</code>等前端基础内容,建议学习此教程的同时,补充学习以下内容:</p> <ul><li><p><code>javaScript</code>基础教程<a href="https://www.runoob.com/js/js-intro.html" target="_blank" rel="noopener noreferrer">点击访问<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>;</p></li> <li><p><code>css</code>基础教程<a href="https://www.runoob.com/css/css-tutorial.html" target="_blank" rel="noopener noreferrer">点击访问<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>;</p></li> <li><p><code>html</code>基础教程<a href="https://www.runoob.com/html/html-tutorial.html" target="_blank" rel="noopener noreferrer">点击访问<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>;</p></li> <li><p><code>vue.js</code>官方教程<a href="https://v2.cn.vuejs.org/" target="_blank" rel="noopener noreferrer">点击访问<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>;</p></li> <li><p><code>vue-router</code>官方教程<a href="https://v3.router.vuejs.org/zh/" target="_blank" rel="noopener noreferrer">点击访问<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>;</p></li> <li><p><code>vuex</code>官方教程<a href="https://v3.vuex.vuejs.org/zh/" target="_blank" rel="noopener noreferrer">点击访问<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>;</p></li></ul> <h2 id="获取工程"><a href="#获取工程" class="header-anchor">#</a> 获取工程</h2> <p>从<code>总工办</code>获取产品,可直接联系<code>统一开发平台助手-小宇</code><a href="/yump-guide-v2/contact-us/#联系我们">点击查看联系方式</a>,或发邮件联系产品负责人。邮箱: zhouby@yusys.com.cn</p> <h2 id="项目依赖软件安装"><a href="#项目依赖软件安装" class="header-anchor">#</a> 项目依赖软件安装</h2> <h3 id="环境准备"><a href="#环境准备" class="header-anchor">#</a> 环境准备</h3> <ol><li>工具依赖</li></ol> <div class="language- extra-class"><pre class="language-text"><code> node -v # v14.16.0+
  68. npm -v # v6.9.0+
  69. yump # 1.21.0+ (yump版本在工程中package.json文件中查看,若不存在或者版本号有误请联系我们)
  70. vue --version # @vue/cli 4.1.1+ (可选)
  71. webpack-cli -v # 3.3.10+ (可选)
  72. npx webpack -v # 4.44.2+ (可选)
  73. </code></pre></div><h2 id="安装依赖"><a href="#安装依赖" class="header-anchor">#</a> 安装依赖</h2> <p>下载工程依赖包,安装<code>yump-cli</code>相关依赖包。</p> <blockquote><p>在工程终端运行如下命令:</p></blockquote> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">yarn</span> <span class="token function">install</span>
  74. </code></pre></div><h2 id="yump-cli工具"><a href="#yump-cli工具" class="header-anchor">#</a> yump-cli工具</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>yump-cli</code>工具将脚手架中的多模块编译、模块更新、模块打包,公共资源抽取以及mock服务和产品license控制进行npm包封装。封装后仅需在脚手架中引入依赖包,依赖工具包的能力中以命令的形式暴露给用户,执行对应命令即可执行相应操作。为多模块独立编译、独立打包、公共资源抽取等能力提供支撑。用于模块维护相关操作命令需慎重使用,以免误更新、删除模块,开发人员在项目初始化完成之后,一般无需关注此部分操作,可跳过。</p></div> <div class="language- extra-class"><pre class="language-text"><code> yarn add:module 模块名称 #新增一个业务模块
  75. yarn remove:module 模块名称 #删除一个业务模块
  76. yarn list:module #列表现有的业务模块
  77. yarn update:module 模块名称 #更新模块入口相关文件
  78. yarn updateAll:module #更新所有模块入口相关文件
  79. yarn upload #上传离线包至管理平台
  80. </code></pre></div><ol><li>若工程还未初始化,则使用命令<code>yarn add:module 模块名称</code>初始化工程模块。模块创建完成之后,模块中以下内容自动创建完成:</li></ol> <ul><li>入口文件目录-<code>src/modules/模块名</code></li> <li>router目录-<code>src/router/模块名</code></li> <li>vuex目录-<code>src/store/模块名</code></li> <li>业务代码开发目录-<code>src/views/模块名</code></li></ul> <ol start="2"><li>删除模块,则使用命令<code>yarn remove:module 模块名称</code>。</li></ol> <p><img src="/yump-guide-v2/images/guide/remove.png" width="800px"><br></p> <ol start="3"><li><p>更新模块内容则调用<code>yarn update:module 模块名称</code>,每个模块初始化完成之后可独立修改,也可通过修改<code>template</code>下<code>module</code>目录页面后,执行更新命更新模块。也可调用<code>yarn updateAll:module,</code>批量更新各个模块。需要注意的是模块内容更新时仅更新入口文件目录-<code>src/modules/模块名</code>,其他目录内容各模块间差异较大,因此不使用命令统一更新。</p></li> <li><p>查看当前所有模块则调用<code>yarn list:module</code>,控制台即输入当前模块列表</p></li></ol> <p><img src="/yump-guide-v2/images/guide/yump_list.jpg" width="800px"><br></p> <h2 id="全局配置"><a href="#全局配置" class="header-anchor">#</a> 全局配置</h2> <h3 id="编译配置"><a href="#编译配置" class="header-anchor">#</a> 编译配置</h3> <p>编译配置文件<code>工程路径/yump.config.js</code>中可对项目进行一些资源配置,<code>buildEntries</code>可指定<code>编译模块</code>, <code>H5APP_APPID_MODULES_REFS</code>可配置<code>全量模块</code>、<code>H5APP_CDNS_CONFIG</code>可按需配置cdn文件、<code>H5APP_PLUGIN_CONFIG</code> 可按需配置plugin文件等,比如指定编译模块和全量模块的配置如下:</p> <p>1、 修改编译模块
  81. 根据<code>工程路径/yump.config.js</code>配置文件中<code>buildEntries</code>来进行指定需要打包的模块,未配置则全量打包</p> <img src="/yump-guide-v2/images/guide/yump_config.png" alt="yump_config" width="800px"> <p>2、修改全量模块配置
  82. 根据<code>工程路径/yump.config.js</code>配置文件中<code>H5APP_APPID_MODULES_REFS</code>来配置项目全量的模块,每一个模块都需要在此配置中。
  83. <br> <br> <img src="/yump-guide-v2/images/guide/H5APP_APPID_MODULES_REFS.png" width="800px"><br></p> <p>3、<code>HAS_USE_CDN</code>是否使用公共资源包(打包执行yarn build时关注)</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>此脚手架支持多应用、多模块开发,各个模块都依赖的公共js,图标,图片,配置文件<code>工程路径/yump.config.js</code>中<code>HAS_USE_CDN</code>配置成<code>true</code>,可将公共资源统一打包至<code>公共资源包</code>离线包中,此公共包可作为普通离线包放在外壳中使用,资源拦截机制由原生外壳配合前端一起实现,需使用<code>宇信外壳</code>,也可使用线上<code>CDN</code>服务,将公共资源放在文件服务器。<code>HAS_USE_CDN</code>默认值为<code>false</code>,即将所有资源都打包至当前离线包中。</p></div> <h4 id="采用公共资源包"><a href="#采用公共资源包" class="header-anchor">#</a> 采用公共资源包</h4> <p><code>工程路径/yump.config.js</code>配置文件中<code>HAS_USE_CDN</code>变量设置成<code>true</code>,环境配置文件<code>VUE_APP_COMM_RES_SRC</code>变量为公共资源地址,打包完成后将在<code>dist/packages</code>目录下生成名称为此地址的<code>域名</code>加上<code>www</code>的<code>公共资源包</code>,在资源加载时,引用的资源将被拦截到此公共资源包。这种模式适用于项目中有多个开发模块,避免公共资源打包至每个模块中造成冗余。</p> <img src="/yump-guide-v2/images/guide/common_src2.png" alt="common_src2" width="800px"> <img src="/yump-guide-v2/images/guide/common_src3.png" alt="common_src3" width="800px"> <h4 id="不采用公共资源包"><a href="#不采用公共资源包" class="header-anchor">#</a> 不采用公共资源包</h4> <p><code>工程路径/yump.config.js</code>配置文件中<code>HAS_USE_CDN</code>变量设置成<code>false</code>,所有资源会被打包至当前离线包中,所有资源从当前离线包中加载,适用于项目中只有一个开发模块,不和其他模块共享资源的情况。</p> <img src="/yump-guide-v2/images/guide/common_src5.jpg" alt="common_src5" width="800px"> <img src="/yump-guide-v2/images/guide/common_src4.jpg" alt="common_src4" width="800px"> <h3 id="环境配置"><a href="#环境配置" class="header-anchor">#</a> 环境配置</h3> <p>项目默认支持配置多环境打包配置,环境文件<code>工程路径/.env</code>中可对项目进行环境配置,项目中可以配置的环境有:<code>.env</code>配置本地开发环境<code>.env.mock</code>配置mock环境、<code>.env.development</code>配置开发环境、<code>.env.production</code>配置生产环境、<code>.env.sit</code>配置SIT测试环境、<code>.env.uat</code>配置UAT测试环境。</p> <img src="/yump-guide-v2/images/guide/env_development_0.png" alt="env_development_0" width="800px"> <p>打包时可以选择不同的打包环境,以<code>.env.development</code>为例其中的配置项如下:</p> <p>1、虚拟域名、服务地址、网关地址配置</p> <p><code>VUE_APP_VIRTUAL_CDN_URL</code>配置虚拟域名;<code>VUE_APP_BASE_URL</code>配置服务地址;<code>VUE_APP_BASE_URL_GATEWAY</code>配置网关地址;</p> <img src="/yump-guide-v2/images/guide/env_development_1.png" alt="env_development_1" width="800px"> <p>2、公共资源相关配置</p> <p><code>VUE_APP_COMM_RES_SRC</code>配置公共资源包地址/可映射到本地离线包(<a href="#%E9%87%87%E7%94%A8%E5%85%AC%E5%85%B1%E8%B5%84%E6%BA%90%E5%8C%85%E4%B8%AD%E7%9A%84%E5%85%AC%E5%85%B1js%E4%BE%9D%E8%B5%96">了解详细配置</a>),离线包报名为地址域名,www文件夹关键字不能更改,若更改需要修改打包逻辑;<code>VUE_APP_PUB_MODULE_SRC</code>配置公共模块资源地址;<code>VUE_APP_CDN_URL</code>配置线上CDN地址;</p> <img src="/yump-guide-v2/images/guide/env_development_2.png" alt="env_development_2" width="800px"> <p>3、外壳配置</p> <p><code>VUE_APP_H5CONTAINER_NAME</code> 配置当前外壳类型,默认为宇信外壳配置为YUMP, 使用TMF外壳时配置为TMFcore, 使用mPaaS外壳时配置为Nebula,若对接者三种外壳之一时可配置,打包时可打包成对应平台要求的离线包。</p> <img src="/yump-guide-v2/images/guide/env_development_3.png" alt="env_development_3" width="800px"> <p>4、调试模式配置</p> <p>v-console可以帮助移动端进行调试,<code>VUE_APP_DEBUG</code>配置是否开启调试模式,开启时(为true时)可使用v-console</p> <img src="/yump-guide-v2/images/guide/env_development_5.png" alt="env_development_5" width="800px"> <p>5、移动管理平台相关配置</p> <p><code>VUE_APP_ID</code>配置应用ID,用于管理平台关联的当前应用ID,<code>VUE_APP_MGR_URL</code>配置移动管理平台地址
  84. <code>VUE_APP_USERNAME</code>配置移动管理平台账号</p> <img src="/yump-guide-v2/images/guide/env_development_6.png" alt="env_development_6" width="800px"> <p>6、mock数据相关配置</p> <p><code>VUE_APP_MOCK</code>配置本地服务是否开启mock;<code>VUE_APP_MOCK_SERVE</code>配置离线包是否打包mock</p> <img src="/yump-guide-v2/images/guide/env_development_4.png" alt="env_development_4" width="800px"> <h2 id="运行工程"><a href="#运行工程" class="header-anchor">#</a> 运行工程</h2> <blockquote><p>运行如下命令:</p></blockquote> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token function">yarn</span> serve
  85. </code></pre></div><p>访问指定业务模块[moduleName]的页面,浏览器输入地址<code>http://localhost:端口号/moduleName/index.html</code>即可访问</p> <h2 id="前端脚手架打包"><a href="#前端脚手架打包" class="header-anchor">#</a> 前端脚手架打包</h2> <p>APP打包相关命令如下,</p> <div class="language- extra-class"><pre class="language-text"><code>yarn build # 在dist目录会生成不同业务模块目录,公共资源目录等
  86. yarn build # 打包所有业务模块及公共离线包,需要用户选择打包环境
  87. yarn build:pro # 打包生产环境离线包
  88. yarn build:dev # 打包开发环境离线包
  89. yarn upload # 上传离线包至移动管理平台
  90. </code></pre></div><p>打包完成之后,在<code>dist/packages</code>目录下生成各个<code>业务模块离线包</code>, <code>公共资源离线包</code>,如下图1,若使用<code>v3.3.1.20221220.RELEASE</code>版本及以上的前端框架,打包生成的离线包则带有当前打包环境后缀,如下图2</p> <ul><li>图1</li></ul> <p><img src="/yump-guide-v2/images/guide/resuoce_zip.jpg"><br></p> <ul><li>图2</li></ul> <p><img src="/yump-guide-v2/images/guide/resuoce_zip1.jpg"><br></p> <ul><li>打包完成后的离线包,可在开发工具中上传至<a href="#%E5%85%AB%E3%80%81%E5%8F%91%E5%B8%83%E7%A6%BB%E7%BA%BF%E5%8C%85"><code>移动管理平台</code></a>,使用此功能需要在脚手架中环境配置文件中配置<code>移动管理平台地址</code>, <code>应用ID</code>, <code>登录账户</code>,这三个配置项都随着代码版本下发时一同下发,配置完成后,使用步骤如下:</li></ul> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>在开发工具中上传离线包至管理平台的功能需要和移动管理平台配合使用,若不使用移动管理平台,则无法使用此功能,并且需要使用<code>v3.3.1.20221220.RELEASE</code>版本及以上的前端框架才支持此功能</p></div> <p><img src="/yump-guide-v2/images/guide/upload2.jpg" width="800px"><br></p> <ul><li><ol><li>终端命令中输入<code>yarn upload</code>命令,随后在弹出的选择向中选择上传的环境配置</li></ol></li></ul> <p><img src="/yump-guide-v2/images/guide/upload1.jpg" width="800px"><br></p> <ul><li><ol start="2"><li>输入环境配置中用户名配置<code>VUE_APP_USERNAME</code>配置的用户名对应的密码</li></ol></li></ul> <p><img src="/yump-guide-v2/images/guide/upload3.jpg" width="800px"><br></p> <ul><li><ol start="3"><li>选择需要上传的离线包,选择<code>all</code>即上传当前<code>/dist/packages</code>目录下所有离线包。</li></ol></li></ul> <p><img src="/yump-guide-v2/images/guide/upload4.jpg" width="800px"><br></p> <p><img src="/yump-guide-v2/images/guide/upload6.jpg" width="800px"><br></p> <ul><li><ol start="4"><li>上传成功后,可登录<code>移动管理平台</code>, 访问菜单<code>离线包发布</code>-》<code>离线包管理</code> 查看已上传的离线包,发布离线包时选择对应离线包即可。</li></ol></li></ul> <p><img src="/yump-guide-v2/images/guide/upload7.jpg" width="800px"><br></p> <p><img src="/yump-guide-v2/images/guide/upload8.png" width="800px"><br></p> <h2 id="打包成app"><a href="#打包成app" class="header-anchor">#</a> 打包成app</h2> <ul><li><ol><li>如果是宇信内部使用,向产品团队申请云打包账号,然后登云打包系统打包app。点击访问<code>宇信科技-云打包</code><a href="http://210.12.198.141:18080/yump-build/#/login?redirect=%2Fdashboard" target="_blank" rel="noopener noreferrer">点击访问<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ol></li> <li><ol start="2"><li>如果是宇信外部客户使用,请访问客户私有化部署的云打包系统进行打包</li></ol></li></ul> <h2 id="发布离线包"><a href="#发布离线包" class="header-anchor">#</a> 发布离线包</h2> <p>完成上述步骤之后,生成各个<code>业务模块离线包</code>, <code>公共资源离线包</code>之后,可到移动管理平台上发布新的离线包,各个平台离线包发布模式有所差异,若采用<code>宇信科技-移动管理平台</code>,操作步骤如下:</p> <p>1.点击访问<code>宇信科技-移动管理平台</code><a href="http://210.12.198.141:18080/yump-web" target="_blank" rel="noopener noreferrer">点击访问<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> ,每个项目有单独的移动管理平台账号,账号在项目版本下发时同时下发。</p> <p><img src="/yump-guide-v2/images/guide/resuoce_zip2.jpg" width="800px"><br></p> <ol start="2"><li>登录之后,顺序点击<code>移动发布</code>、<code>离线包发布</code>,即可发布离线包页面。可新增<code>离线包</code>,<code>发布离线包</code>等。下面演示新增一个<code>login</code>离线包并发布的过程。</li></ol> <p><img src="/yump-guide-v2/images/guide/resuoce_zip3.jpg" width="800px"><br></p> <p>3.新增<code>login</code>离线包,点击左侧<code>子应用</code>中点击<code>新增</code>,在弹出框中输入<code>子应用ID</code>,<code>子应用名称</code>,一般和离线包压缩包一致即可,但不能重复。</p> <p><img src="/yump-guide-v2/images/guide/resuoce_zip4.jpg" width="800px"><br></p> <p>4.离线包新建完成之后,在左侧的应用列表中选择需要上传的离线包,再点击右侧<code>离线包发布</code>的<code>新增</code>,打开离线包发布弹出框。填入相应信息。</p> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>其中离线包版本号需要大于当前最高版本号。</p></div> <p><img src="/yump-guide-v2/images/guide/resuoce_zip5.jpg" width="800px"><br></p> <ol start="5"><li>保存之后,生成一条待发布的离线包记录,选中记录,点击发布,即完成离线包发布流程。</li></ol> <p><img src="/yump-guide-v2/images/guide/resuoce_zip6.jpg" width="800px"><br></p> <ol start="6"><li>发布完成之后,在手机客户端重启应用,即可更新新的离线包内容。</li></ol> <h2 id="vant-ui基础组件库主题定制"><a href="#vant-ui基础组件库主题定制" class="header-anchor">#</a> vant-ui基础组件库主题定制</h2> <p>Vant 提供了一套默认主题,CSS 命名采用 BEM 的风格,方便使用者覆盖样式。如果你想完全替换主题色或者其他样式,可以按照如下步骤进行主题定制。</p> <ul><li><ol><li>修改<code>src\assets\style\vant-var.less</code>主题变量,样式变量名参考<a href="https://github.com/vant-ui/vant/blob/2.x/src/style/var.less" target="_blank" rel="noopener noreferrer">vant-ui主题配置文件<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> <br></li></ol></li> <li><ol start="2"><li>配置环境配置文件中<code>VUE_APP_VANT_CUSTOM_THEME</code>变量为<code>true</code></li></ol></li> <li><ol start="3"><li><p>确保<code>vue.config.js</code>中如下配置打开:</p> <div class="language-js extra-class"><pre class="language-js"><code>module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span>
  91. <span class="token literal-property property">css</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  92. <span class="token literal-property property">loaderOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  93. <span class="token literal-property property">less</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  94. <span class="token literal-property property">lessOptions</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  95. <span class="token literal-property property">modifyVars</span><span class="token operator">:</span> <span class="token punctuation">{</span>
  96. <span class="token comment">// 直接覆盖变量</span>
  97. <span class="token comment">// 'text-color': '#111',</span>
  98. <span class="token comment">// 或者可以通过 less 文件覆盖(文件路径为绝对路径)</span>
  99. <span class="token literal-property property">hack</span><span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">true; @import &quot;src/assets/style/vant-var.less&quot;;</span><span class="token template-punctuation string">`</span></span>
  100. <span class="token punctuation">}</span>
  101. <span class="token punctuation">}</span>
  102. <span class="token punctuation">}</span><span class="token punctuation">,</span>
  103. <span class="token punctuation">}</span><span class="token punctuation">,</span>
  104. <span class="token punctuation">}</span><span class="token punctuation">,</span>
  105. <span class="token punctuation">}</span><span class="token punctuation">;</span>
  106. </code></pre></div></li></ol></li></ul> <h2 id="页面跳转转场动画"><a href="#页面跳转转场动画" class="header-anchor">#</a> 页面跳转转场动画</h2> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在移动应用中,嵌入APP的<code>Hybrid项目</code>,<code>h5</code>页面每次进行push操作,页面都是一闪切到下个界面,可以给页面跳转的时候设置转场动画,优化用户体验。</p></div> <p>在项目中可通过以下步骤开始内置的转场动画,动画形式主要参考iOS系统push页面时的过渡效果:</p> <ul><li>1.项目根目录下环境配置文件中设置<code>VUE_APP_ROUTE_ANIMATE</code>为<code>true</code>;</li></ul> <p><img src="/yump-guide-v2/images/guide/animate1.jpg" width="800px"><br></p> <ul><li><ol start="2"><li>动画形式主要参考iOS系统push页面时的过渡效果,也可在<code>src\modules\模块名\App.vue</code>中自定义动画效果。</li></ol></li></ul></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">4/24/2024, 2:43:07 PM</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/yump-guide-v2/guide/base.html">
  107. 基础教程
  108. </a>
  109. </span></p></div> </main></div><div class="global-ui"><!----></div></div>
  110. <script src="/yump-guide-v2/assets/js/app.896f6ac7.js" defer></script><script src="/yump-guide-v2/assets/js/2.51c90e44.js" defer></script><script src="/yump-guide-v2/assets/js/1.a9756c7a.js" defer></script><script src="/yump-guide-v2/assets/js/85.4150dcba.js" defer></script>
  111. </body>
  112. </html>