<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          首頁

          超詳細的VSCode下載和安裝教程以及解決VSCode下載速度特別慢的問題

          前端達人

          1. 引言

          今天用WebStorm運行前端代碼時,發現不太好打斷點。

          于是,打算改用VSCode來運行前端代碼,但前提是要安裝VSCode,如下便是超詳細的VSCode安裝教程以及解決VSCode下載速度特別慢的問題。

          2. 下載VSCode

          1. 打開VSCode官網

          https://code.visualstudio.com

          在這里插入圖片描述

          1. download下載

          在這里插入圖片描述

          在這里插入圖片描述

          1. 下載特別慢
            在這里插入圖片描述

          你會發現VSCode官網地址下載很慢,或者下著下著就暫停了,如下圖所示:

          在這里插入圖片描述

          如果下載完成,那得等到猴年馬月。

          3. 解決VSCode下載速度特別慢

          1. 單擊右下角全部顯示

          我是用chrome瀏覽器,點擊右下角的全部顯示按鈕,可以跳轉到下載內容頁面。

          如果你是用其他瀏覽器,可能使用其他方式跳轉到下載內容頁面。

          在這里插入圖片描述

          在這里插入圖片描述

          1. 鼠標放置在下圖紅框中,右鍵鼠標,復制鏈接地址

          在這里插入圖片描述

          1. 將復制號的下載鏈接地址放到任意地方,并將藍色區域的地址替換成國內鏡像地址:vscode.cdn.azure.cn

          在這里插入圖片描述

          https://az764295.vo.msecnd.net/stable/129500ee4c8ab7263461ffe327268ba56b9f210d/VSCodeUserSetup-x64-1.72.1.exe修改為https://vscode.cdn.azure.cn/stable/129500ee4c8ab7263461ffe327268ba56b9f210d/VSCodeUserSetup-x64-1.72.1.exe

          將替換后的地址輸入到瀏覽器的地址欄中,如下圖所示,按enter鍵即可快速下載。

          在這里插入圖片描述

          在這里插入圖片描述

          速度是不是立刻提升了。

          4. 安裝VSCode

          1. 我同意此協議 -> 下一步

          在這里插入圖片描述

          1. 選擇更換文件夾 -> 下一步

          因為我的系統盤(C盤)的內存不夠用了,需要更換到其他盤符,我更換到D盤中。

          如果你不想更換到其他盤符,可以直接下一步即可。

          在這里插入圖片描述

          在這里插入圖片描述

          1. 選擇附加任務 -> 下一步。根據你的需求勾選復選框。

          在這里插入圖片描述

          1. 準備安裝 -> 安裝

          在這里插入圖片描述

          在這里插入圖片描述

          1. 安裝完成 -> 完成

          在這里插入圖片描述

          1. 打開VSCode

          在這里插入圖片描述





          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~

          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 



          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 



          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。

          HBuilderX uni-app簡單實現靜態登錄頁面(實例)

          前端達人

          本章用到......uni-app頁面跳轉uni.navigateTo方法、uni.navigateBack方法。uni-app簡單實現郵箱驗證碼發送點擊后讀秒樣式。登錄賬號、密碼正則表達式驗證等

          適合剛入門的小伙伴,大佬就沒必要看了

          靜態頁面!靜態頁面!沒有綁定后端數據接口

          目錄

          一、HBuilderX下載

          二、創建uni-app項目

          pages.json配置文件

          三、登錄頁面

           login.vue頁面

          login.css文件

          四、手機短信驗證頁面

           phoneVerify.vue頁面

           phoneVerify.css文件

          五、找回密碼頁面

          findBack.vue頁面

          findBack.css文件

          六、郵箱找回密碼頁面

           mailFandBack.vue頁面

          mailFandBack.css文件

          七、郵箱發送驗證成功頁面

           emailFinish.vue頁面

          emailFinish.css文件


          一、HBuilderX下載

          https://dcloud.io/hbuilderx.html

           官網直接下載解壓即可

          二、創建uni-app項目

          文件-新建-項目

           我這里直接選擇默認模板,Vue版本、uniCloud自行選擇即可

           創建完成后自動生成文件夾

           文件名這里自動生成原本是index,文件名自行定義即可

          頁面文件自己新建Vue文件即可

          pages.json配置文件

          注意??!這個文件后續如果需要新添加新頁面時這個文件里一定要配置參數不然頁面出不來,代碼格式看下面代碼↓↓↓↓↓↓↓↓↓

          
          
          1. {
          2. // 設置單頁面
          3. "pages": [ //pages數組中第一項表示應用啟動頁,參考:https://uniapp.dcloud.io/collocation/pages
          4. {
          5. "path": "pages/login/login",
          6. "style": {
          7. // 設置頂部導航欄
          8. "navigationBarTitleText": "",
          9. "navigationBarBackgroundColor": "#FFFFFF"
          10. }
          11. },
          12. {
          13. "path": "pages/login/findBack",
          14. "style": {
          15. "navigationBarTitleText": "找回密碼"
          16. }
          17. },
          18. {
          19. "path": "pages/login/mailFindBack",
          20. "style": {
          21. "navigationBarTitleText": "郵箱找回密碼"
          22. }
          23. },
          24. {
          25. "path": "pages/login/phoneVerify",
          26. "style": {
          27. "navigationBarTitleText": "",
          28. "navigationBarBackgroundColor": "#FFFFFF"
          29. }
          30. },
          31. {
          32. "path": "pages/login/emailFinish",
          33. "style": {
          34. "navigationBarTitleText": ""
          35. }
          36. }
          37. {
          38. //新添加的Vue頁面配置?。?!
          39. "path": "",
          40. "style": {
          41. "navigationBarTitleText": ""
          42. }
          43. }
          44. ],
          45. // 設置全部頁面
          46. "globalStyle": {
          47. "navigationBarTextStyle": "black",
          48. "navigationBarTitleText": "uni-app",
          49. "navigationBarBackgroundColor": "#F8F8F8",
          50. "backgroundColor": "#F8F8F8"
          51. },
          52. "uniIdRouter": {},
          53. // 設置底部導航欄
          54. "tabBar": {
          55. }
          56. }

          類似navigationBarTitleText(導航欄text)、navigationBarBackgroundColor(導航欄背景色)等等屬性可以查看相關資料自行配置即可

          pages里設置單頁面參數,每個頁面配置對應path路徑參數

          globalStyle里設置全局頁面參數

          js、josn、scss文件等等其他配置文件這里就不多說了自行研究吧?。?!因為我也還沒搞清楚到底怎么用哈哈哈

          進入正題↓↓↓↓↓↓↓↓↓↓↓↓↓代碼看著有些亂........湊合看慢慢理解吧

          代碼里的src圖片鏈接自行修改?。。。。ㄟ€有css里的URL)

          三、登錄頁面

          先看一下效果圖

           login.vue頁面

          
          
          1. <!-- 登錄頁面 -->
          2. <template>
          3. <view class="flex-col flex-auto group">
          4. <text class="self-center text_2" v-if="type==1000">手機號登錄</text>
          5. <text class="self-center text_2" v-if="type==2000">賬號登錄</text>
          6. <!-- 手機號登錄 -->
          7. <view class="" v-if="type==1000">
          8. <view class="flex-col justify-start items-start text-wrapper">
          9. <input type="text" class="font_1" @input="onInput" placeholder="請輸入手機號" v-model="phoneNumber">
          10. </view>
          11. <!-- svg畫線 -->
          12. <view style="height: 1px;">
          13. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
          14. <line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
          15. </svg>
          16. </view>
          17. <view class="flex-col justify-start items-start text-wrapper_2">
          18. <input type="text" password="true" class="font_1" @input="onInput" placeholder="請輸入密碼" v-model="phonePassword">
          19. </view>
          20. <!-- svg畫線 -->
          21. <view style="height: 1px;">
          22. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
          23. <line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
          24. </svg>
          25. </view>
          26. </view>
          27. <!-- 賬號登錄 -->
          28. <view class="" v-if="type==2000">
          29. <view class="flex-col justify-start items-start text-wrapper">
          30. <input type="text" class="font_1" @input="onInput" placeholder="請輸入用戶名" v-model="idNumber">
          31. </view>
          32. <!-- svg畫線 -->
          33. <view style="height: 1px;">
          34. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
          35. <line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
          36. </svg>
          37. </view>
          38. <view class="flex-col justify-start items-start text-wrapper_2">
          39. <input type="text" password="true" class="font_1" @input="onInput" placeholder="請輸入用戶密碼" v-model="idPassword">
          40. </view>
          41. <!-- svg畫線 -->
          42. <view style="height: 1px;">
          43. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
          44. <line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
          45. </svg>
          46. </view>
          47. </view>
          48. <view class="self-start font_1 text_3" @click="type=2000" v-if="type==1000">用賬號登錄</view>
          49. <view class="self-start font_1 text_3" @click="type=1000" v-if="type==2000">用手機號登錄</view>
          50. <!-- 登錄按鈕1 -->
          51. <view class="flex-col justify-start items-center button" v-if="btnShow">
          52. <button class="font_1 text_4" @click="onSubmit">登 錄</button>
          53. </view>
          54. <!-- 登錄按鈕2 -->
          55. <view class="flex-col justify-start items-center button2" v-else>
          56. <button class="font_1 text_66">登 錄</button>
          57. </view>
          58. <view class="flex-row justify-between group_2" v-if="type==1000">
          59. <text class="font_2" @click="onPageJump('/pages/login/phoneVerify')">短信驗證碼登錄</text>
          60. <text class="font_2" @click="onPageJump('/pages/login/findBack')">找回密碼</text>
          61. </view>
          62. <view class="flex-row justify-between group_3" v-else>
          63. <text class="font_2" @click="onPageJump('/pages/login/findBack')">找回密碼</text>
          64. </view>
          65. </view>
          66. </template>
          67. <script>
          68. export default {
          69. components:{
          70. },
          71. data() {
          72. return {
          73. type: 1000, //判斷登錄類型手機登錄或賬號登錄
          74. phoneNumber:'', //手機賬號
          75. phonePassword:'', //手機密碼
          76. idNumber:'', //賬號
          77. idPassword:'', //賬號密碼
          78. btnShow:false, //判斷登錄按鈕顯示隱藏
          79. timeOut:null, //添加定時器
          80. }
          81. },
          82. onLoad() {
          83. },
          84. created() {
          85. },
          86. // 方法
          87. methods: {
          88. // 找回密碼跳轉頁面
          89. onPageJump(url) {
          90. uni.navigateTo({
          91. url: url
          92. });
          93. },
          94. // 判斷顯示登錄按鈕
          95. onInput() {
          96. this.timeOut && clearTimeout(this.timeOut)
          97. this.timeOut = setTimeout(() => {
          98. if (this.type == 1000) {
          99. if (this.phoneNumber && this.phonePassword) {
          100. this.btnShow = true;
          101. } else {
          102. this.btnShow = false;
          103. }
          104. } else {
          105. if (this.idNumber && this.idPassword) {
          106. this.btnShow = true;
          107. } else {
          108. this.btnShow = false;
          109. }
          110. }
          111. }, 100);
          112. },
          113. // 點擊登錄
          114. onSubmit(){
          115. // 判斷登錄方式為手機號登錄
          116. if(this.type==1000){
          117. // 判斷驗證手機號
          118. if(!this.phoneNumber){
          119. uni.showToast({
          120. title: '請輸入手機號',
          121. icon: 'none',
          122. });
          123. return;
          124. }
          125. const phoneNumber= /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
          126. if(!phoneNumber.test(this.phoneNumber)){
          127. uni.showToast({
          128. title: '手機號輸入不正確',
          129. icon: 'none',
          130. });
          131. return;
          132. }
          133. // 判斷驗證手機密碼
          134. if(!this.phonePassword){
          135. uni.showToast({
          136. title: '請輸入密碼',
          137. icon: 'none',
          138. });
          139. return;
          140. }
          141. uni.showToast({
          142. title: '正在登錄',
          143. icon: 'loading',
          144. });
          145. }else{
          146. // 判斷驗證賬號
          147. if(!this.idNumber){
          148. uni.showToast({
          149. title: '請輸入賬號',
          150. icon: 'none',
          151. });
          152. return;
          153. }
          154. // 判斷驗證賬號密碼
          155. if(!this.idPassword){
          156. uni.showToast({
          157. title: '請輸入賬號密碼',
          158. icon: 'none',
          159. });
          160. return;
          161. }
          162. uni.showToast({
          163. title: '正在登錄',
          164. icon: 'loading',
          165. });
          166. }
          167. },
          168. }
          169. }
          170. </script>
          171. <style>
          172. @import"../../style/css/login.css";
          173. </style>

          一個小tips:

          先說一下這個頁面↑↑↑↑↑↑↑↑↑↑↑↑↑↑

          svg因為我這里賬號、密碼input輸入框的border邊框要設置成小數1px以下0.1px、0.2px、0.3px等等,所以這里用了svg的畫圖,如果有小伙伴碰到同樣問題可以參考一下,不需要的直接style里直接設置border參數即可

          uni.showToast是uni-app彈出框的方法直接用就行,參數么。。自己研究研究就行   (例:icon圖標參數有四種類型none、loading、success、error)

          style外部引用css樣式直接用@import相對路徑即可

          login.css文件

          style樣式最好還是用自己寫的就別直接復制了,我這里用的是平臺自動生成的所以比較亂隨便看看就行了看多了頭疼(僅供參考全局樣式可以直接略過)

          
          
          1. /************************************************************
          2. ** 全局樣式 ** **
          3. ************************************************************/
          4. html {
          5. font-size: 16px;
          6. }
          7. body {
          8. margin: 0;
          9. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
          10. 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
          11. -webkit-font-smoothing: antialiased;
          12. -moz-osx-font-smoothing: grayscale;
          13. }
          14. view,
          15. image,
          16. text {
          17. box-sizing: border-box;
          18. flex-shrink: 0;
          19. }
          20. #app {
          21. width: 100vw;
          22. height: 100vh;
          23. }
          24. .flex-row {
          25. display: flex;
          26. flex-direction: row;
          27. }
          28. .flex-col {
          29. display: flex;
          30. flex-direction: column;
          31. }
          32. .justify-start {
          33. justify-content: flex-start;
          34. }
          35. .justify-end {
          36. justify-content: flex-end;
          37. }
          38. .justify-center {
          39. justify-content: center;
          40. }
          41. .justify-between {
          42. justify-content: space-between;
          43. }
          44. .justify-around {
          45. justify-content: space-around;
          46. }
          47. .justify-evenly {
          48. justify-content: space-evenly;
          49. }
          50. .items-start {
          51. align-items: flex-start;
          52. }
          53. .items-end {
          54. align-items: flex-end;
          55. }
          56. .items-center {
          57. align-items: center;
          58. }
          59. .items-baseline {
          60. align-items: baseline;
          61. }
          62. .items-stretch {
          63. align-items: stretch;
          64. }
          65. .self-start {
          66. align-self: flex-start;
          67. }
          68. .self-end {
          69. align-self: flex-end;
          70. }
          71. .self-center {
          72. align-self: center;
          73. }
          74. .self-baseline {
          75. align-self: baseline;
          76. }
          77. .self-stretch {
          78. align-self: stretch;
          79. }
          80. .flex-1 {
          81. flex: 1 1 0%;
          82. }
          83. .flex-auto {
          84. flex: 1 1 auto;
          85. }
          86. .grow {
          87. flex-grow: 1;
          88. }
          89. .grow-0 {
          90. flex-grow: 0;
          91. }
          92. .shrink {
          93. flex-shrink: 1;
          94. }
          95. .shrink-0 {
          96. flex-shrink: 0;
          97. }
          98. .relative {
          99. position: relative;
          100. }
          101. /* ---------------------------------------------------------------------- */
          102. .group {
          103. padding: 20px 40px 10px;
          104. overflow-y: auto;
          105. }
          106. .text_2 {
          107. color: #020202;
          108. font-size: 20px;
          109. font-family: 'PingFang SC';
          110. line-height: 28px;
          111. text-align: center;
          112. }
          113. .text-wrapper {
          114. margin-top: 42px;
          115. padding-bottom: 12px;
          116. /* border-bottom: solid 1px #888888; */
          117. }
          118. .font_1 {
          119. width: 100%;
          120. font-size: 15px;
          121. font-family: 'PingFang SC';
          122. line-height: 21px;
          123. color: #00000;
          124. }
          125. .text-wrapper_2 {
          126. padding: 20px 0 12px;
          127. /* border-bottom: solid 1px #888888; */
          128. }
          129. .text_3 {
          130. margin-top: 22px;
          131. color: #166bf8;
          132. }
          133. /* 登錄按鈕1 */
          134. .button button {
          135. margin-top: 324px;
          136. padding: 8px 0 11px;
          137. /* background-color: #166bf880; */
          138. background-image: url('。。。。。。。。。。。。。。。。。。。。');
          139. background-size: 100% 100%;
          140. background-repeat: no-repeat;
          141. border-radius: 5px;
          142. width: 100%;
          143. }
          144. .text_4 {
          145. color: #ffffff;
          146. }
          147. .group_2 {
          148. padding: 50px 62px;
          149. }
          150. .group_3 {
          151. padding: 50px 42%;
          152. }
          153. .font_2 {
          154. font-size: 12px;
          155. font-family: 'PingFang SC';
          156. line-height: 17px;
          157. color: #555555;
          158. }
          159. /* 登錄按鈕2*/
          160. .button2 button{
          161. width: 100%;
          162. margin-top: 324px;
          163. padding: 8px 0 11px;
          164. background-color: #166bf880;
          165. border-radius: 5px;
          166. line-height: 21px;
          167. font-size: 15px;
          168. }
          169. .text_66 {
          170. color: #ffffff;
          171. }

          四、手機短信驗證頁面

          點擊登錄頁面上的短信驗證碼登錄后跳轉到此頁,跳轉方法會用到uni.navigateTo方法在登錄頁面看代碼自行理解吧↑↑↑↑↑↑↑↑↑↑↑

          跳轉、返回的方法參考文檔:

          https://www.bookstack.cn/read/uniapp-api/spilt.5.ead34267bd06d88a.mdhttps://www.bookstack.cn/read/uniapp-api/spilt.5.ead34267bd06d88a.md

          注意!!添加新頁面的時候上面的↑↑↑↑↑↑↑↑↑↑↑pages.json配置文件也需要添加對應的頁面配置才行不然頁面出不來

          效果圖:

           phoneVerify.vue頁面

          
          
          1. <!-- 手機驗證找回密碼 -->
          2. <template>
          3. <view class="flex-col flex-auto group">
          4. <text class="self-center text_2">手機號+短信驗證碼登錄</text>
          5. <view class="flex-col group_2 space-y-10">
          6. <input type="number" class="self-start font_1" @input="onInput" placeholder="請輸入手機號碼" v-model="phoneNumber">
          7. <!-- svg畫線 -->
          8. <view style="height: 1px;">
          9. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
          10. <line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
          11. </svg>
          12. </view>
          13. <view class="flex-row justify-between group_3">
          14. <input type="number" class="self-start font_1 text_4" maxlength="6" @input="onInput" placeholder="請輸入驗證碼" v-model="code">
          15. <view class="flex-col justify-start items-center self-center text-wrapper">
          16. <!-- <text class="font_1 text_3" @click="onSetCode()">獲取驗證碼</text> -->
          17. <text v-bind:class="{acquire:isGrey,again:!isGrey}"
          18. v-bind:disabled="dis" type="primary"
          19. @click="onSetCode">
          20. <span v-if="show">獲取驗證碼</span>
          21. <span v-else>重新發送({{count}}s)</span>
          22. </text>
          23. </view>
          24. </view>
          25. <!-- svg畫線 -->
          26. <view style="height: 1px;">
          27. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
          28. <line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
          29. </svg>
          30. </view>
          31. </view>
          32. <view class="self-start font_1 text_5" @click="onPageJump('/pages/login/login')">用密碼登錄</view>
          33. <view class="flex-col justify-start items-center button" v-if="btnShow">
          34. <button class="font_1 text_6" @click="onSubmit()">登 錄</button>
          35. </view>
          36. <!-- 登錄按鈕2 -->
          37. <view class="flex-col justify-start items-center button2" v-else>
          38. <button class="font_1 text_66">登 錄</button>
          39. </view>
          40. <text class="self-center text_7" @click="onPageJump('/pages/login/findBack')">找回密碼</text>
          41. </view>
          42. </template>
          43. <script>
          44. export default {
          45. components: {
          46. },
          47. data() {
          48. return {
          49. phoneNumber:'', //手機號驗證
          50. code:'', //驗證碼
          51. dis: false, //判斷是否禁用狀態
          52. show: true, //判斷顯示為發送還是重新發送
          53. isGrey: false, //class判斷按鈕樣式
          54. timer: null, //設置計時器,
          55. count: "", //定義常量
          56. num:'', //判斷是否為第一次點擊
          57. btnShow:false, //判斷登錄按鈕顯示隱藏
          58. timeOut:null, //添加定時器
          59. };
          60. },
          61. // 方法
          62. methods: {
          63. // 找回密碼跳轉頁面
          64. onPageJump(url) {
          65. uni.navigateTo({
          66. url: url
          67. });
          68. },
          69. // 發送驗證碼
          70. onSetCode() {
          71. let TIME_COUNT = 60;
          72. if (!this.timer) {
          73. uni.showToast({
          74. title: '已發送驗證碼',
          75. icon: 'success',
          76. });
          77. this.count = TIME_COUNT;
          78. this.isGrey = true;
          79. this.show = false;
          80. this.dis = true;
          81. this.timer = setInterval(() => {
          82. if (this.count > 0 && this.count <= TIME_COUNT) {
          83. this.count--;
          84. } else {
          85. this.dis = false;
          86. this.isGrey = false;
          87. this.show = true;
          88. clearInterval(this.timer);
          89. this.timer = null;
          90. }
          91. }, 1000);
          92. }
          93. },
          94. // 判斷顯示登錄按鈕
          95. onInput() {
          96. this.timeOut && clearTimeout(this.timeOut)
          97. this.timeOut = setTimeout(() => {
          98. if (this.phoneNumber && this.code) {
          99. this.btnShow = true;
          100. } else {
          101. this.btnShow = false;
          102. }
          103. }, 100);
          104. },
          105. //點擊登錄
          106. onSubmit(){
          107. // 判斷驗證手機號
          108. if(!this.phoneNumber){
          109. uni.showToast({
          110. title: '請輸入手機號',
          111. icon: 'none',
          112. });
          113. return;
          114. }
          115. const phoneNumber= /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
          116. if(!phoneNumber.test(this.phoneNumber)){
          117. uni.showToast({
          118. title: '手機號輸入不正確',
          119. icon: 'none',
          120. });
          121. return;
          122. }
          123. // 判斷驗證碼
          124. if(!this.code){
          125. uni.showToast({
          126. title: '請輸入驗證碼',
          127. icon: 'none',
          128. });
          129. return;
          130. }
          131. uni.showToast({
          132. title: '請稍后...',
          133. icon: 'loading',
          134. });
          135. },
          136. },
          137. };
          138. </script>
          139. <style>
          140. @import"../../style/css/phoneVerify.css";
          141. /* 驗證碼按鈕樣式 */
          142. .acquire{
          143. padding: 3px 0px;
          144. background-color: #eeeeee;
          145. border-radius: 5px;
          146. width: 92px;
          147. height: 29px;
          148. color: #666;
          149. font-size: 14px;
          150. line-height: 20px;
          151. text-align: center;
          152. }
          153. .again{
          154. padding: 3px 0px;
          155. background-color: #eeeeee;
          156. border-radius: 5px;
          157. width: 92px;
          158. height: 29px;
          159. color: #000000;
          160. font-size: 14px;
          161. line-height: 20px;
          162. text-align: center;
          163. }
          164. </style>

          這個頁面因為是靜態的沒有后端接口只是做的樣式,所以驗證碼讀秒這塊內容刷新頁面時會重置重新開始讀秒這里注意一下就行,如果接后端接口實現的話原理也差不多自己慢慢理解就行

          大概就長這樣:

          至于左上角這個返回鍵的小鈕鈕是uni-app創建項目時自帶的 pages.json配置文件可以配置關閉 用("navigationStyle":"custom")這個參數就能關閉,單頁面關閉在pages里配置,全部關閉在globalStyle里配置。

          大概長這樣:

          也可以在Vue頁面的方法里用uni.navigateBack方法自己寫一個返回的方法。uni.navigateBack返回頁面的方法具體怎么用↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓后面的頁面會有用到

           phoneVerify.css文件

          
          
          1. /************************************************************
          2. ** 全局樣式 **
          3. ************************************************************/
          4. html {
          5. font-size: 16px;
          6. }
          7. body {
          8. margin: 0;
          9. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
          10. 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
          11. -webkit-font-smoothing: antialiased;
          12. -moz-osx-font-smoothing: grayscale;
          13. }
          14. view,
          15. image,
          16. text {
          17. box-sizing: border-box;
          18. flex-shrink: 0;
          19. }
          20. #app {
          21. width: 100vw;
          22. height: 100vh;
          23. }
          24. .flex-row {
          25. display: flex;
          26. flex-direction: row;
          27. }
          28. .flex-col {
          29. display: flex;
          30. flex-direction: column;
          31. }
          32. .justify-start {
          33. justify-content: flex-start;
          34. }
          35. .justify-end {
          36. justify-content: flex-end;
          37. }
          38. .justify-center {
          39. justify-content: center;
          40. }
          41. .justify-between {
          42. justify-content: space-between;
          43. }
          44. .justify-around {
          45. justify-content: space-around;
          46. }
          47. .justify-evenly {
          48. justify-content: space-evenly;
          49. }
          50. .items-start {
          51. align-items: flex-start;
          52. }
          53. .items-end {
          54. align-items: flex-end;
          55. }
          56. .items-center {
          57. align-items: center;
          58. }
          59. .items-baseline {
          60. align-items: baseline;
          61. }
          62. .items-stretch {
          63. align-items: stretch;
          64. }
          65. .self-start {
          66. align-self: flex-start;
          67. }
          68. .self-end {
          69. align-self: flex-end;
          70. }
          71. .self-center {
          72. align-self: center;
          73. }
          74. .self-baseline {
          75. align-self: baseline;
          76. }
          77. .self-stretch {
          78. align-self: stretch;
          79. }
          80. .flex-1 {
          81. flex: 1 1 0%;
          82. }
          83. .flex-auto {
          84. flex: 1 1 auto;
          85. }
          86. .grow {
          87. flex-grow: 1;
          88. }
          89. .grow-0 {
          90. flex-grow: 0;
          91. }
          92. .shrink {
          93. flex-shrink: 1;
          94. }
          95. .shrink-0 {
          96. flex-shrink: 0;
          97. }
          98. .relative {
          99. position: relative;
          100. }
          101. /* ------------------------------------------------ */
          102. .group {
          103. padding: 30px 40px 60px;
          104. overflow-y: auto;
          105. }
          106. .text_2 {
          107. color: #020202;
          108. font-size: 20px;
          109. font-family: 'PingFang SC';
          110. line-height: 28px;
          111. }
          112. .group_2 {
          113. margin-top: 42px;
          114. /* border-bottom: solid 1px #888888; */
          115. }
          116. .space-y-10 > view:not(:first-child),
          117. .space-y-10 > text:not(:first-child),
          118. .space-y-10 > image:not(:first-child) {
          119. margin-top: 10px;
          120. }
          121. .font_1 {
          122. font-size: 15px;
          123. font-family: 'PingFang SC';
          124. line-height: 21px;
          125. color: #000000;
          126. }
          127. .group_3 {
          128. padding: 5px 0;
          129. /* border-top: solid 1px #888888; */
          130. }
          131. .text_4 {
          132. margin-top: 8px;
          133. }
          134. .text-wrapper {
          135. padding: 4px 0;
          136. background-color: #eeeeee;
          137. border-radius: 5px;
          138. width: 92px;
          139. height: 29px;
          140. }
          141. .text_3 {
          142. color: #000000;
          143. font-size: 14px;
          144. line-height: 20px;
          145. }
          146. .text_5 {
          147. margin-top: 22px;
          148. color: #166bf8;
          149. }
          150. .button button{
          151. margin-top: 324px;
          152. padding: 8px 0 11px;
          153. /* background-color: #166bf880; */
          154. background-image: url('。。。。。。。。。。。。。。。。。。。。。。');
          155. background-size: 100% 100%;
          156. background-repeat: no-repeat;
          157. border-radius: 5px;
          158. width: 100%;
          159. }
          160. .text_6 {
          161. color: #ffffff;
          162. }
          163. .text_7 {
          164. margin-top: 50px;
          165. color: #555555;
          166. font-size: 12px;
          167. font-family: 'PingFang SC';
          168. line-height: 17px;
          169. }
          170. /* 登錄按鈕2*/
          171. .button2 button{
          172. width: 100%;
          173. margin-top: 324px;
          174. padding: 8px 0 11px;
          175. background-color: #166bf880;
          176. border-radius: 5px;
          177. line-height: 21px;
          178. font-size: 15px;
          179. }
          180. .text_66 {
          181. color: #ffffff;
          182. }

          五、找回密碼頁面

          在登錄頁面點擊找回密碼后跳轉到此頁面

          同樣在pages.json文件里配置對應頁面參數↑↑↑↑↑↑↑↑↑

          效果圖:

           點擊通過手機號跳轉到手機短信驗證頁面 也就是第四步的頁面點擊通過郵箱驗證跳轉到郵箱驗證頁面 也就是第六步的頁面

          findBack.vue頁面

          
          
          1. <!-- 找回密碼 -->
          2. <template>
          3. <view class="flex-col justify-start flex-auto group_3">
          4. <view class="flex-col section">
          5. <view class="flex-row justify-between items-center group_4" @click="onPageJump('/pages/login/phoneVerify')">
          6. <text class="font_1">通過已綁定手機號,用短信驗證登錄</text>
          7. <image
          8. class="image_5"
          9. src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/637d8bf95a7e3f031010c80e/63e351ec66570000128a304a/16758423632990405565.png"
          10. />
          11. </view>
          12. <view class="flex-row justify-between items-center group_4" @click="onPageJump('/pages/login/mailFindBack')">
          13. <text class="font_1">通過已綁定郵箱重設密碼</text>
          14. <image
          15. class="image_5"
          16. src="。。。。。。。。。。。。。。。"
          17. />
          18. </view>
          19. </view>
          20. </view>
          21. </template>
          22. <script>
          23. export default {
          24. components: {},
          25. data() {
          26. return {
          27. };
          28. },
          29. methods: {
          30. onPageJump(url) {
          31. uni.navigateTo({
          32. url:url
          33. })
          34. },
          35. },
          36. };
          37. </script>
          38. <style>
          39. @import"../../style/css/findBack.css";
          40. </style>

          findBack.css文件

          
          
          1. /************************************************************
          2. ** 全局樣式 **
          3. ************************************************************/
          4. html {
          5. font-size: 16px;
          6. }
          7. body {
          8. margin: 0;
          9. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
          10. 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
          11. -webkit-font-smoothing: antialiased;
          12. -moz-osx-font-smoothing: grayscale;
          13. }
          14. view,
          15. image,
          16. text {
          17. box-sizing: border-box;
          18. flex-shrink: 0;
          19. }
          20. #app {
          21. width: 100vw;
          22. height: 100vh;
          23. }
          24. .flex-row {
          25. display: flex;
          26. flex-direction: row;
          27. }
          28. .flex-col {
          29. display: flex;
          30. flex-direction: column;
          31. }
          32. .justify-start {
          33. justify-content: flex-start;
          34. }
          35. .justify-end {
          36. justify-content: flex-end;
          37. }
          38. .justify-center {
          39. justify-content: center;
          40. }
          41. .justify-between {
          42. justify-content: space-between;
          43. }
          44. .justify-around {
          45. justify-content: space-around;
          46. }
          47. .justify-evenly {
          48. justify-content: space-evenly;
          49. }
          50. .items-start {
          51. align-items: flex-start;
          52. }
          53. .items-end {
          54. align-items: flex-end;
          55. }
          56. .items-center {
          57. align-items: center;
          58. }
          59. .items-baseline {
          60. align-items: baseline;
          61. }
          62. .items-stretch {
          63. align-items: stretch;
          64. }
          65. .self-start {
          66. align-self: flex-start;
          67. }
          68. .self-end {
          69. align-self: flex-end;
          70. }
          71. .self-center {
          72. align-self: center;
          73. }
          74. .self-baseline {
          75. align-self: baseline;
          76. }
          77. .self-stretch {
          78. align-self: stretch;
          79. }
          80. .flex-1 {
          81. flex: 1 1 0%;
          82. }
          83. .flex-auto {
          84. flex: 1 1 auto;
          85. }
          86. .grow {
          87. flex-grow: 1;
          88. }
          89. .grow-0 {
          90. flex-grow: 0;
          91. }
          92. .shrink {
          93. flex-shrink: 1;
          94. }
          95. .shrink-0 {
          96. flex-shrink: 0;
          97. }
          98. .relative {
          99. position: relative;
          100. }
          101. .font_1 {
          102. font-size: 16px;
          103. font-family: 'PingFang SC';
          104. line-height: 22px;
          105. color: #020202;
          106. }
          107. .group_3 {
          108. padding: 10px 0 586px;
          109. overflow-y: auto;
          110. }
          111. .section {
          112. padding: 0px 16px;
          113. background-color: #ffffff;
          114. }
          115. .group_4 {
          116. padding: 18px 0;
          117. border-bottom: solid 1px #979797;
          118. }
          119. .image_5 {
          120. margin-right: 14px;
          121. width: 12px;
          122. height: 12px;
          123. }

          六、郵箱找回密碼頁面

          效果圖:

           mailFandBack.vue頁面

          
          
          1. <!-- 郵件找回密碼 -->
          2. <template>
          3. <view class="flex-col flex-auto group">
          4. <text class="self-center text_2">通過郵箱找回密碼</text>
          5. <input type="text" class="self-start font_1 text_3" @input="onInput" placeholder="請輸入您綁定的郵箱地址" v-model="email">
          6. <!-- svg畫線 -->
          7. <view style="height: 1px;">
          8. <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
          9. <line x1="0" y1="0" x2="400" y2="0" style="stroke:rgb(0,0,0);stroke-width:0.2" />
          10. </svg>
          11. </view>
          12. <view class="flex-col justify-start items-center button" v-if="btnShow">
          13. <text class="font_1 text_4" @click="onSubmit()">下一步</text>
          14. </view>
          15. <!-- 下一步按鈕2 -->
          16. <view class="flex-col justify-start items-center button2" v-else>
          17. <button class="font_1 text_66">下一步</button>
          18. </view>
          19. </view>
          20. </template>
          21. <script>
          22. export default {
          23. components: {
          24. },
          25. data() {
          26. return {
          27. email:'', //郵箱
          28. btnShow:false, //判斷登錄按鈕顯示隱藏
          29. timeOut:null, //添加定時器
          30. };
          31. },
          32. methods: {
          33. // 判斷顯示下一步按鈕
          34. onInput() {
          35. this.timeOut && clearTimeout(this.timeOut)
          36. this.timeOut = setTimeout(() => {
          37. if (this.email) {
          38. this.btnShow = true;
          39. } else {
          40. this.btnShow = false;
          41. }
          42. }, 100);
          43. },
          44. // 點擊下一步
          45. onSubmit(){
          46. if(!this.email){
          47. uni.showToast({
          48. title: '請輸入郵箱',
          49. icon: 'none',
          50. });
          51. return;
          52. }
          53. const email= /^\w{3,}@\w{2,}\.(com|cn|net|com\.cn)$/;
          54. if(!email.test(this.email)){
          55. uni.showToast({
          56. title: '郵箱輸入不正確',
          57. icon: 'none',
          58. });
          59. return;
          60. }
          61. uni.showToast({
          62. title: '請稍后...',
          63. icon: 'loading',
          64. });
          65. // 添加定時器延時跳轉頁面
          66. setTimeout(function(){
          67. uni.navigateTo({
          68. url: '/pages/login/emailFinish'
          69. });
          70. },2000)
          71. }
          72. },
          73. };
          74. </script>
          75. <style>
          76. @import"../../style/css/mailFindBack.css";
          77. </style>

          mailFandBack.css文件

          
          
          1. /************************************************************
          2. ** 全局樣式 **
          3. ************************************************************/
          4. html {
          5. font-size: 16px;
          6. }
          7. body {
          8. margin: 0;
          9. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
          10. 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
          11. -webkit-font-smoothing: antialiased;
          12. -moz-osx-font-smoothing: grayscale;
          13. }
          14. view,
          15. image,
          16. text {
          17. box-sizing: border-box;
          18. flex-shrink: 0;
          19. }
          20. #app {
          21. width: 100vw;
          22. height: 100vh;
          23. }
          24. .flex-row {
          25. display: flex;
          26. flex-direction: row;
          27. }
          28. .flex-col {
          29. display: flex;
          30. flex-direction: column;
          31. }
          32. .justify-start {
          33. justify-content: flex-start;
          34. }
          35. .justify-end {
          36. justify-content: flex-end;
          37. }
          38. .justify-center {
          39. justify-content: center;
          40. }
          41. .justify-between {
          42. justify-content: space-between;
          43. }
          44. .justify-around {
          45. justify-content: space-around;
          46. }
          47. .justify-evenly {
          48. justify-content: space-evenly;
          49. }
          50. .items-start {
          51. align-items: flex-start;
          52. }
          53. .items-end {
          54. align-items: flex-end;
          55. }
          56. .items-center {
          57. align-items: center;
          58. }
          59. .items-baseline {
          60. align-items: baseline;
          61. }
          62. .items-stretch {
          63. align-items: stretch;
          64. }
          65. .self-start {
          66. align-self: flex-start;
          67. }
          68. .self-end {
          69. align-self: flex-end;
          70. }
          71. .self-center {
          72. align-self: center;
          73. }
          74. .self-baseline {
          75. align-self: baseline;
          76. }
          77. .self-stretch {
          78. align-self: stretch;
          79. }
          80. .flex-1 {
          81. flex: 1 1 0%;
          82. }
          83. .flex-auto {
          84. flex: 1 1 auto;
          85. }
          86. .grow {
          87. flex-grow: 1;
          88. }
          89. .grow-0 {
          90. flex-grow: 0;
          91. }
          92. .shrink {
          93. flex-shrink: 1;
          94. }
          95. .shrink-0 {
          96. flex-shrink: 0;
          97. }
          98. .relative {
          99. position: relative;
          100. }
          101. /* ------------------------------------------------------------------------------ */
          102. .group {
          103. padding: 25px 40px 127px;
          104. overflow-y: auto;
          105. }
          106. .text_2 {
          107. color: #020202;
          108. font-size: 20px;
          109. font-family: 'PingFang SC';
          110. line-height: 28px;
          111. }
          112. .font_1 {
          113. font-size: 15px;
          114. font-family: 'PingFang SC';
          115. line-height: 21px;
          116. }
          117. .text_3 {
          118. margin-top: 42px;
          119. margin-bottom: 12px;
          120. color: #999999;
          121. }
          122. /* .section {
          123. margin-top: 12px;
          124. background-color: #888888;
          125. height: 1px;
          126. } */
          127. .button {
          128. margin-top: 324px;
          129. padding: 8px 0 11px;
          130. /* background-color: #166bf880; */
          131. background-image: url('。。。。。。。。。。。。');
          132. background-size: 100% 100%;
          133. background-repeat: no-repeat;
          134. border-radius: 5px;
          135. }
          136. .text_4 {
          137. color: #ffffff;
          138. }
          139. /* 下一步按鈕2*/
          140. .button2 button{
          141. width: 100%;
          142. margin-top: 324px;
          143. padding: 8px 0 11px;
          144. background-color: #166bf880;
          145. border-radius: 5px;
          146. line-height: 21px;
          147. font-size: 15px;
          148. }
          149. .text_66 {
          150. color: #ffffff;
          151. }

          七、郵箱發送驗證成功頁面

          效果圖:

           emailFinish.vue頁面

          
          
          1. <template>
          2. <view class="flex-col flex-auto group">
          3. <view class="flex-col group_2">
          4. <image
          5. class="self-center image_5"
          6. src="。。。。。。。。。。。。。。"
          7. />
          8. <text class="self-center text_2">請訪問郵件中給出的網頁鏈接地址,根據頁面提示完成密碼重設。</text>
          9. <view class="flex-col justify-start items-center button">
          10. <button class="text_3" @click="Back">確定</button>
          11. </view>
          12. </view>
          13. </view>
          14. </template>
          15. <script>
          16. export default {
          17. components: {
          18. },
          19. data() {
          20. return {
          21. };
          22. },
          23. methods: {
          24. // 點擊確定返回上一頁
          25. Back(){
          26. // 返回到上一個頁面
          27. uni.navigateBack({
          28. delta:1,//返回層數,2則上上頁,默認delta:1
          29. })
          30. },
          31. },
          32. };
          33. </script>
          34. <style>
          35. @import"../../style/css/emailFinish.css";
          36. </style>

          點擊返回上一頁面可以用uni.navigateBack方法

          點擊跳轉到指定頁面可以用uni.navigateTo方法(因為都屬于跳轉頁面也可以用這個方法返回上一頁自行理解吧)

          大概長這樣:

          emailFinish.css文件

          
          
          1. /************************************************************
          2. ** 全局樣式 **
          3. ************************************************************/
          4. html {
          5. font-size: 16px;
          6. }
          7. body {
          8. margin: 0;
          9. font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
          10. 'Droid Sans', 'Helvetica Neue', 'Microsoft Yahei', sans-serif;
          11. -webkit-font-smoothing: antialiased;
          12. -moz-osx-font-smoothing: grayscale;
          13. }
          14. view,
          15. image,
          16. text {
          17. box-sizing: border-box;
          18. flex-shrink: 0;
          19. }
          20. #app {
          21. width: 100vw;
          22. height: 100vh;
          23. }
          24. .flex-row {
          25. display: flex;
          26. flex-direction: row;
          27. }
          28. .flex-col {
          29. display: flex;
          30. flex-direction: column;
          31. }
          32. .justify-start {
          33. justify-content: flex-start;
          34. }
          35. .justify-end {
          36. justify-content: flex-end;
          37. }
          38. .justify-center {
          39. justify-content: center;
          40. }
          41. .justify-between {
          42. justify-content: space-between;
          43. }
          44. .justify-around {
          45. justify-content: space-around;
          46. }
          47. .justify-evenly {
          48. justify-content: space-evenly;
          49. }
          50. .items-start {
          51. align-items: flex-start;
          52. }
          53. .items-end {
          54. align-items: flex-end;
          55. }
          56. .items-center {
          57. align-items: center;
          58. }
          59. .items-baseline {
          60. align-items: baseline;
          61. }
          62. .items-stretch {
          63. align-items: stretch;
          64. }
          65. .self-start {
          66. align-self: flex-start;
          67. }
          68. .self-end {
          69. align-self: flex-end;
          70. }
          71. .self-center {
          72. align-self: center;
          73. }
          74. .self-baseline {
          75. align-self: baseline;
          76. }
          77. .self-stretch {
          78. align-self: stretch;
          79. }
          80. .flex-1 {
          81. flex: 1 1 0%;
          82. }
          83. .flex-auto {
          84. flex: 1 1 auto;
          85. }
          86. .grow {
          87. flex-grow: 1;
          88. }
          89. .grow-0 {
          90. flex-grow: 0;
          91. }
          92. .shrink {
          93. flex-shrink: 1;
          94. }
          95. .shrink-0 {
          96. flex-shrink: 0;
          97. }
          98. .relative {
          99. position: relative;
          100. }
          101. /* ------------------------------------------------------------------------------ */
          102. .group {
          103. padding: 25px 40px 127px;
          104. overflow-y: auto;
          105. }
          106. .text_2 {
          107. color: #020202;
          108. font-size: 20px;
          109. font-family: 'PingFang SC';
          110. line-height: 28px;
          111. }
          112. .font_1 {
          113. font-size: 15px;
          114. font-family: 'PingFang SC';
          115. line-height: 21px;
          116. }
          117. .text_3 {
          118. margin-top: 42px;
          119. margin-bottom: 12px;
          120. color: #999999;
          121. }
          122. /* .section {
          123. margin-top: 12px;
          124. background-color: #888888;
          125. height: 1px;
          126. } */
          127. .button {
          128. margin-top: 324px;
          129. padding: 8px 0 11px;
          130. /* background-color: #166bf880; */
          131. background-image: url('。。。。。。。。。。。。。。。');
          132. background-size: 100% 100%;
          133. background-repeat: no-repeat;
          134. border-radius: 5px;
          135. }
          136. .text_4 {
          137. color: #ffffff;
          138. }
          139. /* 下一步按鈕2*/
          140. .button2 button{
          141. width: 100%;
          142. margin-top: 324px;
          143. padding: 8px 0 11px;
          144. background-color: #166bf880;
          145. border-radius: 5px;
          146. line-height: 21px;
          147. font-size: 15px;
          148. }
          149. .text_66 {
          150. color: #ffffff;
          151. }

          本章也是自己參考相關資料和各位大佬的文章自行整理僅供參考,希望可以幫助到和我一樣菜雞的小伙伴

          參考資料:

          https://blog.csdn.net/weixin_40614372/article/details/101537653

          uni-app官網:

          https://uniapp.dcloud.net.cn/component/

          登錄頁面完成后我用的是Strophe.js對接Openfire的接口,然后把Strophe.js的用法加到↑本文的登錄頁里使用

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。

          01 【Sass的安裝使用】

          前端達人

          Sass的安裝使用

          1.介紹

          1.1 CSS預處理技術,及種類介紹

          什么是css預處理技術

          • CSS 預處理器定義了一種新的語言,其基本思想是,用一種專門的編程語言,為 CSS 增加了一些編程的特性,將 CSS 作為目標生成文件,然后開發者就只要使用這種語言進行編碼工作。
          • 通俗的說,“CSS 預處理器用一種專門的編程語言,進行 Web 頁面樣式設計,然后再編譯成正常的 CSS 文件,以供項目使用。CSS 預處理器為 CSS 增加一些編程的特性,無需考慮瀏覽器的兼容性問題”,例如你可以在 CSS 中使用變量、簡單的邏輯程序、函數(如變量$main-color)等等在編程語言中的一些基本特性,可以讓你的 CSS 更加簡潔、適應性更強、可讀性更佳,更易于代碼的維護等諸多好處。

          css預處理技術的種類

          • Sass(SCSS)
          • LESS
          • Stylus
          • Turbine
          • Swithch CSS
          • CSS Cacheer
          • DT CSS

          如此之多的 CSS 預處理器,那么“我應該選擇哪種 CSS 預處理器?”也相應成了最近網上的一大熱門話題,各大技術論壇也是爭論不休。

          到目前為止,在眾多優秀的 CSS 預處理器語言中就屬 SassLESS 和 Stylus 最優秀。

          1.2 什么是sass

          Sass(Syntactically Awesome StyleSheets)是一種CSS預處理器(preprocessor), 是一款強化 CSS 的輔助工具。可以高效的編寫樣式,同時實現變量、嵌套、組合、繼承等編程語言功能。

          css是一門非程序式語言,沒有變量、函數、scope(作用域)等概念。

          • CSS需要書寫大量看似沒有邏輯的代碼,冗余度比較高
          • 不方便維護及擴展,難以復用
          • css沒有很好的計算能力
          • 非前端工程師往往會因為缺少CSS編寫經驗而很難寫出組織良好且易于維護的CSS代碼

          CSS 預處理器定義了一種新的語言,其基本思想是,用一種專門的編程語言,為 CSS 增加了一些編程的特性,將 CSS 作為目標生成文件,然后開發者只要使用這種語言進行CSS的編碼工作就可以了。

          “用一種專門的編程語言,進行 Web 頁面樣式設計,再通過編譯器轉化為正常的 CSS 文件,以供項目使用?!?

          2.關于scss和sass

          sass是最早出現的css預處理語言,有著比less更強大的功能。采用Ruby語言編寫。

          最初版本采用的是嚴格縮進的風格(不帶大括號( {} )和分號( ; ),這一語法也導致一開始,sass并不太為開發者所接受)。

          從 V3 版本開始放棄了縮進式的風格,并完全兼容普通的css代碼,也因此從第三代開始,sass也被稱為scss。

          Sass 3 就是 Scss,是Sassy CSS的簡寫,它是CSS3語法的超集,也就是說所有有效的CSS/CSS3樣式也同樣適合于Sass。

          對現代編程來說,sass就是scss,也因此,sass現在的擴展名為.scss(如果是舊版本的sass,可能擴展名會為.sass)。

          3.安裝和命令行編譯

          cmd打開本地命令控制窗口,輸入下面字符串然后回車就裝好了。

          npm install -g sass 
          
          • 1

          編譯.scss文件為.css文件:

          Sass使用.scss作為文件后綴名,不能直接在< link >標簽里使用,需要編譯為 .css文件。 演示:

          1. 建一個html文件,隨便寫個h1標簽:

          image-20220823140518434

          1. 建一個.scss后綴的文件,如input.scss,寫點基本樣式sass的語法:
            image-20220823140550201

          2. 在html文件所在的路徑下打開cmd命令控制符,輸入:

            //單文件轉換命令
            sass input.scss:output.css
            
            // 或 sass input.scss output.css 
                    
            • 1
            • 2
            • 3
            • 4

            表示把名字為 input.scss 轉換成名字為 ouput.css 的文件。
            回車后,接下來發現就得到了css的文件。

            image-20220823140645814

          使用 : 編譯輸出時,前后不能有空格,即 : 前緊跟輸入的scss文件,: 后緊跟輸出的css文件。

          : 冒號形式的命令,常用于編譯文件夾(中的所有sass文件)的輸入輸出。

          css文件內容如下,可以看出轉換好了:
           image-20220823140750386
          接下來就是老操作了,在HTML里用 < link >標簽把css文件引入就行。

          1. 但是不可能說寫一句.scss語句就轉換一次,太麻煩,所以可以自動轉換,當我在.scss里寫一句,.css就自動生成一句。在cmd輸入以下:

            sass --watch input.scss:ouput.css 
                    
            • 1

            表示監視變化,當input.scss一變化,output.css就變化

          空格和冒號對應生成css的兩中模式,如果是一對一模式(一個scss生成一個css),使用空格即可;如果是多對多模式,比如一個文件夾生成到另一個文件夾,同時一次性有多個scss文件生成css文件等。

          # 編譯 light.scss 和 dark.scss 到 light.css 和 dark.css. > sass light.scss:light.css dark.scss:dark.css
          
          sass  --watch  fileFolder:outputFolder/css 
          
          • 1
          • 2
          • 3
          • 4

          當名字為fileFolder這個文件夾里任意一個.scss后綴的文件變化時,就將其編譯到名字outputFolder/css這個文件夾里面(會自動生成相應的.css文件)

          4.Sass文件編譯快覽

          4.1 命令行編譯配置選項

          可以通過 sass -h 或 sass --help 查看詳細配置項。

          配置選項可以指定編譯后的css的排版、是否生成調試map、開啟debug等,最常用的是 --style 和 --sourcemap

          4.2 --watch監聽文件變化

          sass使用--watch選項,用于監聽scss文件的變化。這樣,當scss文件內容有改動時,會自動編譯為css。

          • 監聽單個scss文件
          sass --watch .\firstsass.scss .\firstsass1.css 
          
          • 1
          • 監聽scss文件夾
          sass --watch .\scssdir\ .\cssdir\
          
          sass --watch scssdir:cssdir 
          
          • 1
          • 2
          • 3

          可以看到,使用 : 可以指定輸出的路徑(文件夾),否則css將默認生成在源scss文件所在目錄中。

          • 結合 --style 監聽
          sass --watch app/sass:public/stylesheets --style=compressed 
          
          • 1

          使用壓縮(compressed)的樣式(style)輸出 css 文件

          4.3 --style指定css的樣式

          --style 的css格式有兩種:expanded(默認)、compressed。

          舊版本的Ruby實現中有四種樣式,還有nested、compact

          // 指定編譯格式
          sass input.scss:output.css --style=expanded 
          
          • 1
          • 2

          比如,一個scss文件如下:

          .box {
            width: 300px;
            height: 400px;
            &-title {
              height: 30px;
              line-height: 30px;
            }
          } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8

          下面,可以查看expanded、compressed編譯后的css格式。

          1. expanded :默認值,未壓縮的展開的css格式

          每個選擇器和聲明單獨一行。

          執行如下命令編譯:

          sass styletest.scss styletest.css --style=expanded
          
          # 或 sass styletest.scss styletest.css 
          
          • 1
          • 2
          • 3

          expanded編譯過后的樣式,是標準的沒有經過任何壓縮,全部字符展開的css格式:

          .box { width: 300px; height: 400px; } .box-title { height: 30px; line-height: 30px; } 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          1. compressed 去除所有的空白字符,全部css內容壓縮為一行

          生產環境中推薦的css格式。

          執行如下命令編譯,將css結果輸出在命令行中:

          sass --style=compressed styletest.scss
          
          .box{width:300px;height:400px}.box-title{height:30px;line-height:30px} 
          
          • 1
          • 2
          • 3

          5.使用VSCode插件編譯

          5.1 基本使用

          live sass compiler是VSCode擴展,可以實時地將SASS / SCSS文件編譯/轉換為CSS文件。

          • 可以自動添加css兼容性前綴,-webkit-,-moz-,-ms,-o-等。
          • 可以自定義css文件解析后的代碼樣式(expanded 展開,compact,compressed 壓縮,nested)。
          • 可自定義編譯/轉換后的文件擴展名(.css或.min.css)。

          1.在vscode插件里搜索live sass compiler安裝。

          2.安裝后,新建scss文件,在vscode底部狀態欄中點擊watch sass,此時狀態為 Watching ,即可自動解析sass為css文件。

          image-20220823173100339

          5.2 自定義設置

          在使用live sass compiler插件時,并不是所有的默認設置都如我們所愿,那么,我們來看一下如何自定義設置。

          1.編譯/轉換后的文件格式、擴展名、保存位置

          • 文件格式
            格式可以是expanded,compact,compressed或nested。默認值為 expanded。
          • 擴展名
            擴展名可以是.css或.min.css。默認值為.css。
          • 保存位置
            默認的轉換后的css文件保存在scss文件的同級目錄下,但實際,我們通常需要把所有scss文件保存在scss文件夾,而css文件希望保存在css的文件夾,如圖所示:
            image-20220823173159840

          我們在配置中如下設置:

          "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/" } ] 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7

          savePath即為導出后的文件保存位置。

          2.去掉編譯時出現的css.map文件
          在每個文件編譯后,默認設置下,會同時出現一個map格式的文件,有時并不需要該文件,那么我們如何去掉呢?

          "liveSassCompile.settings.generateMap": false, 
          
          • 1

          默認值為true,我們設置為false即可。

          3.設置css兼容性前綴
          live sass compiler可以在編譯時自動添加CSS兼容性前綴(-webkit-,-moz-,-ms,-o-等),如下設置:

          "liveSassCompile.settings.autoprefix": [ "> 1%", "last 3 versions" ], 
          
          • 1
          • 2
          • 3
          • 4

          其中,

          • ">1%"是指 通過全球使用情況統計信息選擇出的高于1%使用率的瀏覽器版本。
          • "last 3 versions"是指 每個瀏覽器的最后3個版本。

          這里也可以設置為具體的瀏覽器,如下:

          "liveSassCompile.settings.autoprefix": [ "ie >= 6", //ie6以上 "firefox >= 8", "chrome >= 24", "Opera>=10" ], 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          總結

          個人配置:

          "liveSassCompile.settings.generateMap": true, "liveSassCompile.settings.autoprefix": [ "ie >= 6", //ie6以上 "firefox >= 8", "chrome >= 24", "Opera>=10" ], "liveSassCompile.settings.excludeList": [ "**/node_modules/**", ".vscode/**" ], "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/../css/" }, "liveSassCompile.settings.showOutputWindow": true ] 
          
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          壓縮生成min.css文件 "liveSassCompile.settings.formats": [ // More Complex { "format": "compressed", "extensionName": ".min.css", "savePath": "~/../css/" } ] 
              
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9

          感覺總體作用不大,還是結合webpack等工具,實時更新頁面內容時,實時編譯scss,而不需要單獨使用該工具。

          6.使用webpack編譯

          在目前主流的前端項目中,一般是使用 Webpack 來構建我們的前端項目,并且大多數都跑在 Node 環境下。

          行如下命令安裝 sass-loader :

          npm install mini-css-extract-plugin -D npm install css-loader -D npm install sass-loader --save-dev 
          
          • 1
          • 2
          • 3

          webpack.config.js

          
          

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作,也請與我們聯系01063334945。  分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。  藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。

          layui表格種單選框中的回顯

          前端達人

          let form = layui.form
                  layui.table.render({
                      id: 'commanderId',
                      elem: '#users-list',
                      url: '/team-cpt/competition/findUserByUnitId',
                      method: 'post',
                      request: {pageName: 'pageNum'},
                      where: {cptId: cptId, unitId: unitId,realName:realName,phone:phone},
                      parseData: convert2LayuiGrid,
                      page: true,
                      cols: [[
                          {field: 'id', title: 'ID', fixed: 'left', hide: true},
                          {type: 'radio', fixed: 'left', width: '10%', hide: false},
                          {field: 'realName', title: '姓名', align: 'center', fixed: 'left'},
                          {field: 'username', title: '手機號', align: 'center', fixed: 'left'}
                      ]],
                      done: function (res, curr, count) {
                          for (let i = 0; i <res.data.length ; i++) {
                              if (res.data[i].id === commanedrId) {
                                  $('div.layui-unselect.layui-form-radio')[i].click()//選中
                                  //下面三句是通過更改css來實現選中的效果
                                  var index = res.data[i]['LAY_TABLE_INDEX'];
                                  // $('tr[data-index=' + index + '] ').addClass('layui-table-click');
                                  $('tr[data-index=' + index + '] input[type="radio"]').prop('checked', true);
                                  $('tr[data-index=' + index + '] input[type="radio"]').next().addClass('layui-form-radioed');
                                  $('tr[data-index=' + index + '] i').addClass('layui-anim-scaleSpring');
                              }
                          }
                          form.render('radio'); //layui表單中改變屬性一定要重新渲染
          
          

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~ 希望得到建議咨詢、商務合作,也請與我們聯系01063334945。  分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。  藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。

          JavaScript自定義事件廣播與訂閱

          前端達人

          昨天寫聊天室用到nodejs的event模塊,今天也用JavaScript前端的 event寫一個,通過一次觸發,全局響應,接下來做單頁應用,嘗試不以傳統方式進行事件處理,改為以自定義event進行處理,看看對傳統單頁應用的與我的想法在實際實施上有什么區別和影響。

          <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title></title> </head> <body> <input id="bu1" type="button" value="點我"> <script> //自定義test1事件 var ev1 = new Event('t1', {bubbles: 'true', cancelable: 'true'});
              ev1.aaa='ev1'; //創建event的對象實例。 var ev2 = document.createEvent('HTMLEvents'); // 3個參數:事件類型,是否冒泡,是否阻止瀏覽器的默認行為 ev2.initEvent('t2', true, true);
              ev2.aaa = 'ev2';
          
              document.getElementById("bu1").addEventListener('click', function () { document.dispatchEvent(ev1);
                  document.dispatchEvent(ev2);
              }, false);
          
              (function () { document.addEventListener('t1', function (e) { console.log(e.aaa+1);
                  }, false); //document上綁定自定義事件oneating document.addEventListener('t2', function (e) { console.log(e.aaa+2);
                  }, false);
              })();
              (function () { document.addEventListener('t1', function (e) { console.log(e.aaa+3);
                  }, false); //document上綁定自定義事件oneating document.addEventListener('t2', function (e) { console.log(e.aaa+4);
                  }, false);
              })();
              (function () { document.addEventListener('t1', function (e) { console.log(e.aaa+5);
                  }, false); //document上綁定自定義事件oneating document.addEventListener('t2', function (e) { console.log(e.aaa+6);
                  }, false);
              })(); </script> </body> </html>
                      
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
          • 27
          • 28
          • 29
          • 30
          • 31
          • 32
          • 33
          • 34
          • 35
          • 36
          • 37
          • 38
          • 39
          • 40
          • 41
          • 42
          • 43
          • 44
          • 45
          • 46
          • 47
          • 48
          • 49
          • 50
          • 51
          • 52
          • 53
          • 54
          • 55
          • 56
          • 57

          input輸入框改變顏色 以及input輸入內容更改顏色

          前端達人

          效果圖
          在這里插入圖片描述
          1- 改變input輸入框顏色
          border: 1px solid pink;
          2-改變input輸入內容顏色
          color: pink;
          全部代碼

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <title>css新增屬性值</title>
              <style>
                  /* 必須是input元素;但是同時也具備input元素有value這個值    用中括號[]*/
                  /* input[value]{
                      color:red
                  } */
          
                  *{
                      padding: 0;
                      margin: 0;
                  }
                  input[type=password]{
                      color: pink;
                      border: 1px solid pink;
                      outline: none;
          
                  }
              </style>
          </head>
          <body>
              <!--1.利用屬性選擇器就可以不用借助于類或者id選擇器  -->
          
              <!-- <input type="text" value="請輸入你喜歡的人">
              <input type="text"> -->
                <!-- 2.屬性選擇器還可以選擇屬性=值的某些元素 -->
                <input type="text">
                <input type="password">
          
          </body>
          </html>``` 
                      
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24
          • 25
          • 26
          • 27
          • 28
          • 29
          • 30
          • 31
          • 32
          • 33
          • 34
          • 35
          • 36
          • 37

          jquery 根據下標獲取classname,以及其子元素,修改classname的值

          前端達人

          1. 根據下標獲取對應的classname,實現點擊按鈕觸發當前塊的點擊事件

          <div class="right" @click="meetingfileVisible(index)">
            <span class="foldIcon">
               <i class="el-icon-caret-bottom"></i>
            </span>
          </div>
          <div class="meeting-file">
            <span>與現實生活一致</span>
          </div> 
                      
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          .meeting-file{ display:none; } 
                      
          • 1
          • 2
          • 3
          meetingfileVisible(index) { $(".meeting-file").eq(index).slideToggle("slow"); var cal =$(".foldIcon").eq(index).children("i").attr("class"); cal = cal === 'el-icon-caret-bottom' ? 'el-icon-caret-top' : 'el-icon-caret-bottom'; $(".foldIcon").eq(index).children("i").attr("class", cal); }, 
                      
          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          jquery里判斷數組內是否包含了指定的值或元素的方法

          前端達人

          本文講的是在jquery里,如何判斷一個數組里是否包含了指定的值,變量,或其它對象元素的方法。

          在jquery里,我們可以用$.inArray來判斷一個數組里是否包含了指定的值或其它對象元素,來看一個簡單的實例:

          
              
          1. var arr=["aijquery","jquery","I like it"];
          2. var str="aijquery.cn";
          3. if($.inArray(str,arr)<0){
          4. alert("數組里不包含!");
          5. }

          $.inArray是用來獲取指定的值在數組中的位置,從0開始計數(如果沒有找到則返回 -1 。

           

          上面的數組只是普通的字符型數組,下面我們來看其它類型的數組,比如jquery里用$.makeArray來生成的HTML元素類數組:

          
              
          1. //我們首先使用$.makeArray來生成一個數組
          2. var arr=$.makeArray($("div"));

          現在假設這些div里,我們其中有一個ID為"aijquery"的div,那么我們是否可以用上面的方法來判斷這個div是否包含在這個數組里呢?

          答案是可以的,不過需要注意轉換jquery對象為js對象,來看下面站長的測試結果:

          
              
          1. $.inArray($("#aijquery"),arr);//返回-1 這是錯誤的結果
          2. $.inArray($("#aijquery")[0],arr);//返回0 這才是正確的結果

           

           

          PS:關于jquery對象與js對象之間的轉換:jquery對象與dom對象之間互相轉換的方法,使jquery對象可以直接使用js里的方法

           

           
          <!doctype html>
          <html lang="en">
          <head>
          <title>$.inArray判斷元素是否包含在數組中的在線演示-aijQuery.cn</title>
          <script language="JavaScript" src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
          <link rel="stylesheet" >
          </head>
          <body>
            <div id="aijquery">aijquery</div>
            <div>1</div><div>2</div><div>3</div>
            <P id="inarray">div#aijquery在數組里的位置是:</P>
          <script language="javascript"> var arr=$.makeArray($("div")); //在測試的時候,可以把下面代碼中的[0]去掉,換成jquery對象來試 $("#inarray").append($.inArray($("#aijquery")[0],arr)); </script>
          </body>
          </html>
          View Code

          摘自:http://www.aijquery.cn/Html/jqueryrumen/79.html


          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
          希望得到建議咨詢、商務合作,也請與我們聯系01063334945。 

          分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。 

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司。

          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合