123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200 |
- <!DOCTYPE html>
- <html lang="en-US">
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1">
- <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
- <title>基础教程 | 宇信科技-新一代移动金融开发平台YUMP</title>
- <meta name="description" content="">
- <link rel="shortcut icon" href="/yump-guide-v2/images/favicon.ico">
- <meta name="description" content="Yusys New Generation Mobile Platform.">
- <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/86.ca47122f.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/85.4150dcba.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">
- <link rel="stylesheet" href="/yump-guide-v2/assets/css/0.styles.55c6ad92.css">
- </head>
- <body>
- <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">
- 首页
- </a></div><div class="nav-item"><a href="/yump-guide-v2/guide/" class="nav-link router-link-active">
- 教程
- </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">
- 基础组件
- <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">
- 业务组件
- </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">
- API
- </a></li><li class="dropdown-item"><!----> <a href="/yump-guide-v2/utils/app.html" class="nav-link">
- 工具方法
- </a></li></ul></div></div><div class="nav-item"><a href="/yump-guide-v2/sdk/" class="nav-link">
- APP-SDK
- </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">
- 云打包
- <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">
- 典型场景
- </a></div><div class="nav-item"><a href="/yump-guide-v2/nativepackaging/" class="nav-link">
- 原生打包
- </a></div><div class="nav-item"><a href="/yump-guide-v2/yuga/config.html" class="nav-link">
- 埋点
- </a></div><div class="nav-item"><a href="/yump-guide-v2/FAQ/" class="nav-link">
- 常见问题
- </a></div><div class="nav-item"><a href="/yump-guide-v2/contact-us/" class="nav-link">
- 联系我们
- </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">
- 首页
- </a></div><div class="nav-item"><a href="/yump-guide-v2/guide/" class="nav-link router-link-active">
- 教程
- </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">
- 基础组件
- <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">
- 业务组件
- </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">
- API
- </a></li><li class="dropdown-item"><!----> <a href="/yump-guide-v2/utils/app.html" class="nav-link">
- 工具方法
- </a></li></ul></div></div><div class="nav-item"><a href="/yump-guide-v2/sdk/" class="nav-link">
- APP-SDK
- </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">
- 云打包
- <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">
- 典型场景
- </a></div><div class="nav-item"><a href="/yump-guide-v2/nativepackaging/" class="nav-link">
- 原生打包
- </a></div><div class="nav-item"><a href="/yump-guide-v2/yuga/config.html" class="nav-link">
- 埋点
- </a></div><div class="nav-item"><a href="/yump-guide-v2/FAQ/" class="nav-link">
- 常见问题
- </a></div><div class="nav-item"><a href="/yump-guide-v2/contact-us/" class="nav-link">
- 联系我们
- </a></div> <!----></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><a href="/yump-guide-v2/guide/" class="sidebar-heading clickable router-link-active open"><span>教程</span> <!----></a> <ul class="sidebar-links sidebar-group-items"><li><a href="/yump-guide-v2/guide/" aria-current="page" 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><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" aria-current="page" class="active 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"><h1 id="基础教程"><a href="#基础教程" class="header-anchor">#</a> 基础教程</h1> <h2 id="工程目录结构"><a href="#工程目录结构" class="header-anchor">#</a> 工程目录结构</h2> <p>工程目录结构</p> <div class="language-sh extra-class"><pre class="language-sh"><code><span class="token operator">|</span>-- yump-app-h5
- <span class="token operator">|</span>-- .editorconfig <span class="token comment"># 编辑器格式化配置</span>
- <span class="token operator">|</span>-- .env <span class="token comment"># dev模式默认加载环境配置</span>
- <span class="token operator">|</span>-- .env.mock <span class="token comment"># mock模式默认加载环境配置</span>
- <span class="token operator">|</span>-- .env.production <span class="token comment"># prod模式默认加载环境配置</span>
- <span class="token operator">|</span>-- .env.report <span class="token comment"># report模式默认加载环境配置</span>
- <span class="token operator">|</span>-- .gitignore
- <span class="token operator">|</span>-- .postcssrc.js <span class="token comment"># postcss配置文件</span>
- <span class="token operator">|</span>-- yump.config.js <span class="token comment"># 多模块相关全局配置</span>
- <span class="token operator">|</span>-- README.md
- <span class="token operator">|</span>-- babel.config.js <span class="token comment"># 语法兼容配置</span>
- <span class="token operator">|</span>-- jest.config.js <span class="token comment"># jest单元测试配置文件</span>
- <span class="token operator">|</span>-- package.json
- <span class="token operator">|</span>-- vue.config.js <span class="token comment"># 脚手架自定义配置</span>
- <span class="token operator">|</span>-- yarn.lock <span class="token comment"># 版本锁定文件</span>
- <span class="token operator">|</span>-- mocks <span class="token comment"># mocks目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- config.js <span class="token comment"># api清单配置文件,要与api目录文件一一对应</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- index.js <span class="token comment"># mock服务入口文件</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- util.js <span class="token comment"># mock工具函数</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- api <span class="token comment"># api的mock数据配置</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- login <span class="token comment"># 按业务模块创建目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- login.json <span class="token comment"># 具体业务接口挡板配置文件</span>
- <span class="token operator">|</span>-- public <span class="token comment"># 公共资源,不打包</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- favicon.ico
- <span class="token operator">|</span> <span class="token operator">|</span>-- index.html
- <span class="token operator">|</span> <span class="token operator">|</span>-- images <span class="token comment"># 外网广告图片,会经常变动的静态资源</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- template <span class="token comment"># 多模块模板目录</span>
- <span class="token operator">|</span>-- src <span class="token comment"># 源码目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- modules <span class="token comment"># 各模块入口</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- platfrom <span class="token comment"># 跨平台能力桥接层</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- assets <span class="token comment"># 静态资源目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- fonts <span class="token comment"># 字体目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- icons <span class="token comment"># 图标目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- img <span class="token comment"># 图片目录,一般建议放小图</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- style <span class="token comment"># 样式表目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- theme <span class="token comment"># 主题样式目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- common <span class="token comment"># 公共业务方法</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- vue-install.js <span class="token comment"># 全局插件挂载入口方法</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- directive <span class="token comment"># 自定义指令</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- index.js
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- filters <span class="token comment"># 自定义过滤器</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- index.js
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- mixin <span class="token comment"># Vue混入</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- index.js
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- model <span class="token comment"># 实例化目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- params <span class="token comment"># 业务数据字典目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- bsndef_action.js <span class="token comment"># 菜单ID与路由映射配置表</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- index.js <span class="token comment"># 业务数据字典</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- plugins <span class="token comment"># 工程依赖插件</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- axios.js <span class="token comment"># axios.js二次封装</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- utils <span class="token comment"># 工具类函数</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- index.js
- <span class="token operator">|</span> <span class="token operator">|</span>-- components <span class="token comment"># 业务公共组件目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- config
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- index.js <span class="token comment"># 配置全局使用到的参数,如微服务名称</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- i18n <span class="token comment"># 国际化目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- index.js <span class="token comment"># 国际化入口文件</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- config <span class="token comment"># 国际化配置文件目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- en.js <span class="token comment"># 英文配置文件</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- zhCN.js <span class="token comment"># 简体中文配置文件</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- zhTW.js <span class="token comment"># 繁体中文配置文件</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- plugins <span class="token comment"># 引入第三方插件,待定</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- router <span class="token comment"># 路由目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- index.js <span class="token comment"># 路由入口函数</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- router.conf.js <span class="token comment">#路由配置文件</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- store <span class="token comment"># 状态管理目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- i18n <span class="token comment"># 多语言目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- app.js <span class="token comment"># 业务相关状态</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- index.js <span class="token comment"># 入口函数</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- permission.js <span class="token comment"># 权限相关状态</span>
- <span class="token operator">|</span> <span class="token operator">|</span> <span class="token operator">|</span>-- session.js <span class="token comment"># 会话相关状态</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- views <span class="token comment"># 业务页面开发目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- mbank
- <span class="token operator">|</span> <span class="token operator">|</span>-- transfer <span class="token comment"># 模块1业务开发目录</span>
- <span class="token operator">|</span> <span class="token operator">|</span>-- deposit <span class="token comment"># 模块2业务开发目录</span>
- </code></pre></div><h2 id="配置文档"><a href="#配置文档" class="header-anchor">#</a> 配置文档</h2> <h3 id="全局配置"><a href="#全局配置" class="header-anchor">#</a> 全局配置</h3> <p>主要是指开发过程中的一些全局参数化配置,详见<a href="/yump-guide-v2/guide/#五、全局配置">快速上手-全局配置</a>,</p> <h3 id="多环境配置"><a href="#多环境配置" class="header-anchor">#</a> 多环境配置</h3> <p>项目默认支持配置多环境打包配置
- <br></p> <p>对应配置文件如下:</p> <ul><li><code>.env</code> 本地开发环境</li> <li><code>.env.sit</code>SIT测试环境</li> <li><code>.env.uat</code>UAT测试环境</li> <li><code>.env.development</code> 开发环境</li> <li><code>.env.production</code>生产环境</li> <li><code>.env.mock</code>mock环境</li></ul> <h3 id="模块模板配置"><a href="#模块模板配置" class="header-anchor">#</a> 模块模板配置</h3> <p><code>template</code>目录为<code>多模块</code>工程模板目录,以<code>template</code>目录为各模块,每个初始化好的模块,拥有模块入口文件目录-<code>src/modules/模块名</code>、router目录-<code>src/router/模块名</code>、vuex目录-<code>src/store/模块名</code>、业务代码开发目录-<code>src/views/模块名</code>,每个模块初始化完成之后可独立修改,也可通过修改<code>template</code>下模板页面后,执行更新命令批量更新各个模块,模板如下图:</p> <p><img src="/yump-guide-v2/images/guide/template.png" width="800px"><br></p> <h3 id="路由配置"><a href="#路由配置" class="header-anchor">#</a> 路由配置</h3> <p><code>src/router/模块名</code>目录为各模块路由配置目录,<code>src/router/模块名/route.conf.js</code>可定义各个模块的路由,<code>src/router/模块名/index.js</code>可定义各个模块公共路由,加载公共路由方法等。</p> <h3 id="请求配置"><a href="#请求配置" class="header-anchor">#</a> 请求配置</h3> <p><code>src/config/api</code>为项目请求配置目录,<code>src/config/index.js</code>文件中统一配置并导出服务名,<code>src/config/模块名</code>可配置每个功能模块的API请求。</p> <h3 id="vuex配置"><a href="#vuex配置" class="header-anchor">#</a> vuex配置</h3> <p><code>src/vuex/模块名</code>目录为各模块vuex目录,每个模块中包含各<code>action.js</code>, <code>getter.js</code>, <code>mutations.js</code>, <code>state.js</code>等vuex基础配置文件。</p> <h2 id="数据字典使用"><a href="#数据字典使用" class="header-anchor">#</a> 数据字典使用</h2> <ul><li>1.<code>src/common/params/index.js</code>存放常用数据字典,数据字典定义后,全局统一注册<code>filter</code>可在模板上直接使用:</li></ul> <p><img src="/yump-guide-v2/images/guide/params1.jpg" width="800px"><br></p> <p><img src="/yump-guide-v2/images/guide/params2.jpg" width="800px"><br></p> <ul><li><ol start="2"><li><code>find</code>方法可查找数据字典,返回数据字典对象,调用方法如下:</li></ol></li></ul> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">var</span> bankType <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'BANK_TYPE'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
- console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>bankType<span class="token punctuation">,</span> <span class="token string">'bankType'</span><span class="token punctuation">)</span>
- </code></pre></div><ul><li><ol start="3"><li><code>convertKey</code>方法可根据<code>字典名称</code>, <code>key</code>返回对应<code>value</code>,调用方法如下:</li></ol></li></ul> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">var</span> value <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">convertKey</span><span class="token punctuation">(</span><span class="token string">'BANK_TYPE'</span><span class="token punctuation">,</span> <span class="token string">'102'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
- console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>value<span class="token punctuation">,</span> <span class="token string">'value'</span><span class="token punctuation">)</span>
- </code></pre></div><ul><li><ol start="4"><li><code>convertValue</code>方法可根据<code>字典名称</code>, <code>value</code>返回对应<code>key</code>,调用方法如下:</li></ol></li></ul> <div class="language-js extra-class"><pre class="language-js"><code> <span class="token keyword">var</span> key <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$utils<span class="token punctuation">.</span><span class="token function">convertValue</span><span class="token punctuation">(</span><span class="token string">'BANK_TYPE'</span><span class="token punctuation">,</span> <span class="token string">'中国工商银行'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
- console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span> <span class="token string">'keys'</span><span class="token punctuation">)</span>
- </code></pre></div><h2 id="多语言使用"><a href="#多语言使用" class="header-anchor">#</a> 多语言使用</h2> <p><code>src/i18n</code>可对项目进行多语言配置,默认支持中文简体、英文、中文繁体。 实现步骤如下:</p> <ul><li>示例,代码地址;src/views/mbank/index/myIndex.vue</li></ul> <p><img src="/yump-guide-v2/images/guide/language1.jpg" width="400px"><br></p> <p><img src="/yump-guide-v2/images/guide/color2.jpg" width="400px"><br></p> <ul><li>1.<code>common/mixin/index.js</code>多语言切换的公共方法('zhCN'-中文简体,'en'-英文),<code>switchLanguage</code>为全局混入方法,可全局访问调用。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">switchLanguage</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token keyword">const</span> language <span class="token operator">=</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'locale'</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">'zhCN'</span><span class="token punctuation">;</span> <span class="token comment">// 语言标识</span>
- localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'locale'</span><span class="token punctuation">,</span> language <span class="token operator">===</span> <span class="token string">'zhCN'</span> <span class="token operator">?</span> <span class="token string">'en'</span> <span class="token operator">:</span> <span class="token string">'zhCN'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
- window<span class="token punctuation">.</span>location<span class="token punctuation">.</span><span class="token function">reload</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span>
- </code></pre></div><ul><li>2.获取当前语言的方法,调用方法如下:</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> language <span class="token operator">=</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'locale'</span><span class="token punctuation">)</span>
- </code></pre></div><ul><li>3.设置要使用语言的方法,调用方法如下:</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'locale'</span><span class="token punctuation">,</span> <span class="token string">'en'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
- </code></pre></div><h2 id="多主题配置"><a href="#多主题配置" class="header-anchor">#</a> 多主题配置</h2> <p><code>src/assets/style/theme.scss</code>可对项目进行多主题配置,默认支持蓝色主题、橙色主题,可根据项目的需求配置需要的主题。 脚手架中实现多主题示例, 实现效果及步骤步骤如下,如需定制化其他主题可参考此案例。</p> <ul><li>示例效果如下图,代码地址;src/views/mbank/index/myIndex.vue</li></ul> <p><img src="/yump-guide-v2/images/guide/color1.jpg" width="400px"><br></p> <p><img src="/yump-guide-v2/images/guide/color2.jpg" width="400px"><br></p> <ul><li><p>实现步骤</p></li> <li><p>1.初始化模块的主题配置</p></li></ul> <p><img src="/yump-guide-v2/images/guide/color_theme.jpg" width="800px"><br></p> <ul><li>2.<code>common/mixin/index.js</code>多主题切换的公共方法('blue'-蓝色主题,'orange'-橙色主题), <code>switchThemeColor</code>为混入方法,可在全局访问调用。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token function">switchThemeColor</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token keyword">let</span> colorType <span class="token operator">=</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'__color_theme__'</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">'blue'</span><span class="token punctuation">;</span>
- colorType <span class="token operator">=</span> colorType <span class="token operator">===</span> <span class="token string">'blue'</span> <span class="token operator">?</span> <span class="token string">'orange'</span> <span class="token operator">:</span> <span class="token string">'blue'</span>
- document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'color-theme'</span><span class="token punctuation">,</span> colorType<span class="token punctuation">)</span><span class="token punctuation">;</span>
- localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'__color_theme__'</span><span class="token punctuation">,</span> colorType<span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span>
- </code></pre></div><ul><li>3.获取当前主题的方法,调用方法如下:</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">const</span> colorType <span class="token operator">=</span> localStorage<span class="token punctuation">.</span><span class="token function">getItem</span><span class="token punctuation">(</span><span class="token string">'__color_theme__'</span><span class="token punctuation">)</span> <span class="token operator">||</span> <span class="token string">'blue'</span><span class="token punctuation">;</span>
- </code></pre></div><ul><li>4.设置要使用主题的方法,调用方法如下:</li></ul> <div class="language-js extra-class"><pre class="language-js"><code>document<span class="token punctuation">.</span>documentElement<span class="token punctuation">.</span><span class="token function">setAttribute</span><span class="token punctuation">(</span><span class="token string">'color-theme'</span><span class="token punctuation">,</span> colorType<span class="token punctuation">)</span><span class="token punctuation">;</span>
- localStorage<span class="token punctuation">.</span><span class="token function">setItem</span><span class="token punctuation">(</span><span class="token string">'__color_theme__'</span><span class="token punctuation">,</span> colorType<span class="token punctuation">)</span><span class="token punctuation">;</span>
- </code></pre></div><ul><li>5.在<code>src\assets\style\theme.scss</code>配置多主题样式('blue'-蓝色主题,'orange'-橙色主题),并增加自定义主题的相关样式代码。</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">.</span>font<span class="token operator">-</span>color<span class="token operator">-</span>theme <span class="token punctuation">{</span>
- <span class="token punctuation">[</span>color<span class="token operator">-</span>theme<span class="token operator">=</span><span class="token string">"blue"</span><span class="token punctuation">]</span> <span class="token operator">&</span> <span class="token punctuation">{</span>
- <span class="token literal-property property">color</span><span class="token operator">:</span> #205d96<span class="token punctuation">;</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">[</span>color<span class="token operator">-</span>theme<span class="token operator">=</span><span class="token string">"orange"</span><span class="token punctuation">]</span> <span class="token operator">&</span> <span class="token punctuation">{</span>
- <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span><span class="token number">245</span><span class="token punctuation">,</span> <span class="token number">90</span><span class="token punctuation">,</span> <span class="token number">59</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span>
- </code></pre></div><h2 id="权限配置"><a href="#权限配置" class="header-anchor">#</a> 权限配置</h2> <p>不同的用户有着不同的按钮权限控制,为了满足这个需求,做了权限配置。</p> <ul><li>1.获取当前用户所有按钮权限</li></ul> <p><img src="/yump-guide-v2/images/guide/permission.jpg" width="800px"><br></p> <ul><li>2.<code>common/mixin/index.js</code>获取按钮权限的公共方法</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">async</span> <span class="token function">hasPermission</span> <span class="token punctuation">(</span><span class="token parameter">permission</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token keyword">let</span> myBtns <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
- <span class="token keyword">await</span> <span class="token keyword">this</span><span class="token punctuation">.</span>$app<span class="token punctuation">.</span><span class="token function">getAPDataStorage</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
- <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">'set_btns_permission'</span><span class="token punctuation">,</span>
- <span class="token literal-property property">isRuntime</span><span class="token operator">:</span> <span class="token string">'1'</span><span class="token punctuation">,</span>
- <span class="token literal-property property">encrypt</span><span class="token operator">:</span> <span class="token string">'1'</span>
- <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
- myBtns <span class="token operator">=</span> res<span class="token punctuation">.</span>value<span class="token punctuation">.</span>permissionList<span class="token punctuation">;</span> <span class="token comment">// 当前用户所有按钮权限数组</span>
- <span class="token punctuation">}</span><span class="token punctuation">)</span>
- <span class="token keyword">return</span> myBtns<span class="token punctuation">.</span><span class="token function">indexOf</span><span class="token punctuation">(</span>permission<span class="token punctuation">)</span> <span class="token operator">></span> <span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">;</span>
- <span class="token punctuation">}</span><span class="token punctuation">,</span>
- </code></pre></div><ul><li>3.获取按钮权限公共方法的使用</li></ul> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">hasPermission</span><span class="token punctuation">(</span>permissionId<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">res</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token comment">//permissionId当前按钮的权限ID</span>
- <span class="token keyword">if</span> <span class="token punctuation">(</span>res<span class="token punctuation">)</span> <span class="token punctuation">{</span>
- <span class="token operator">...</span><span class="token operator">...</span>
- <span class="token punctuation">}</span>
- <span class="token punctuation">}</span><span class="token punctuation">)</span>
- </code></pre></div><h2 id="工具方法"><a href="#工具方法" class="header-anchor">#</a> 工具方法</h2> <p><code>src/common/utils/index.js</code>方法工具库中,内置几十种常见工具方法,例如常见的<code>时间格式化</code>方法,<code>用户信息脱敏</code>方法,<code>手机号校验</code>、<code>邮箱校验</code>、<code>金额格式化</code>等方法。</p> <h2 id="网络请求配置"><a href="#网络请求配置" class="header-anchor">#</a> 网络请求配置</h2> <p>使用<code>$app.request方法</code>发起网络请求</p> <ul><li>1.环境配置文件中配置是否使用外壳的接口请求服务</li></ul> <p>在环境配置文件中可以配置是否使用外壳的接口请求服务,以开发环境配置文件<code>工程路径/.env.development</code>为例,<code>VUE_APP_HAS_USE_YUSDK_REQUEST</code>字段配置当前是否使用外壳的接口请求服务。如图所示:</p> <img src="/yump-guide-v2/images/guide/env_development_7.jpg" alt="env_development_7" width="800px"> <p>当<code>VUE_APP_HAS_USE_YUSDK_REQUEST</code>字段配置为<code>true</code>时,在使用<code>$app.request方法</code>发起网络请求即是使用外壳的接口请求服务,配置为<code>false</code>时发起网络请求时走的是纯前端的请求。</p> <ul><li>2.添加拦截器</li></ul> <p>拦截器分为请求拦截器和响应拦截器,在<code>src/common/plugins/request.js</code>文件中可以添加拦截器。</p> <img src="/yump-guide-v2/images/guide/request_1.jpg" alt="env_development_7" width="800px"> <p>在请求拦截器中可以对发送请求前需要做些什么进行处理,也可以对请求错误进行处理。</p> <p>在响应拦截器中可以对返回的响应数据进行处理,也可以对响应错误进行处理。</p> <h2 id="mock使用"><a href="#mock使用" class="header-anchor">#</a> mock使用</h2> <ul><li>1.mock数据相关配置</li></ul> <p>VUE_APP_MOCK配置本地服务是否开启mock,本机调试时可开启;VUE_APP_MOCK_SERVE配置离线包是否打包mock,谨慎使用,会影响第三方库正常使用</p> <img src="/yump-guide-v2/images/guide/env_development_4.png" alt="env_development_4" width="800px"> <ul><li>2.使用详情</li></ul> <img src="/yump-guide-v2/images/guide/mock-01.png" alt="mock-01" width="800px"> <img src="/yump-guide-v2/images/guide/mock-03.png" alt="mock-02" width="800px"> <img src="/yump-guide-v2/images/guide/mock-03.png" alt="mock-03" width="800px"></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">5/15/2024, 4:47:26 PM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
- ←
- <a href="/yump-guide-v2/guide/" class="prev router-link-active">
- 快速上手
- </a></span> <span class="next"><a href="/yump-guide-v2/guide/debug.html">
- 调试方法
- </a>
- →
- </span></p></div> </main></div><div class="global-ui"><!----></div></div>
- <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/86.ca47122f.js" defer></script>
- </body>
- </html>
|