資料

uni-app 官網(wǎng)

正文

1. 基本創(chuàng)建并啟動(dòng)工程操作

原文地址

• 項(xiàng)目的創(chuàng)建

  # 全局安裝腳手架的兩種方式
  npm install -g @vue/cli
  # OR
  yarn global add @vue/cli
  
  # 新建工程 => 選擇`默認(rèn)模板`即可
  vue create -p dcloudio/uni-preset-vue my-project
  

• 項(xiàng)目的啟動(dòng)（本地啟動(dòng)微信小程序服務(wù)）

  # 本地啟動(dòng)微信小程序服務(wù)
  yarn dev:mp-weixin
  

• 之后手動(dòng)在微信開發(fā)者工具中導(dǎo)入該項(xiàng)目，一次選中 my-project => dist => dev => mp-weixin 目錄點(diǎn)擊確定即可

2. 安裝 sass-loader 之后，由于版本過高，導(dǎo)致報(bào)錯(cuò)無法成功編譯

• 為了使用 sass 安裝相應(yīng)需要的依賴

  yarn add node-sass sass-loader -D
  

• 由于我安裝的 sass-loader 是 9.0.2 版本的，導(dǎo)致無法正常編譯，報(bào)錯(cuò)信息 options has an unknown property 'prependData'. These properties are valid:，解決方法修改版本號 9.0.2 => 8.0.2，重新安裝依賴

  該問題參考文章："【已解決】uniapp項(xiàng)目,通過cli指令新建的項(xiàng)目,在任意頁面style標(biāo)簽使用lang="scss"報(bào)錯(cuò):options has an unknown property 'prependData'"

3. 微信小程序底部的 icon

1. icon 尺寸需要是 81*81 的，不然會非常模糊

參考文章：小程序底部的tabbar圖片顯示老是會模糊，不管放多大的圖都模糊，什么原因

• 對比圖

  
  
  對比圖.png

2. icon 的周圍要適當(dāng)?shù)牧舭?，不能全部填滿，不然不好看

• 示意圖，如下所示對比非常的明顯

示意圖.png

4. 微信小程序相關(guān)的語法，在應(yīng)用中中需要注意的地方

1. image 標(biāo)簽高度隨寬度自適應(yīng)

   <image mode="widthFix" />
   

2. image 標(biāo)簽寬高自適應(yīng)鋪滿，但是會裁切掉部分的圖片

   <image mode="aspectFill" />
   

3. scroll-view 頁面下拉滾動(dòng)組件

   <template lang="pug">
       scroll-view.home(@scrolltolower="handelToLower" scroll-y)
   </template>
   
   <script>
       export default {
           methods: {
               /**
               * 頁面內(nèi)容滾動(dòng)到底部 回調(diào)函數(shù)
               */
               handelToLower() {
                  console.log("到底部啦！");
               }
           },
       }
   </script>
   

   • scss 需要特殊設(shè)置

     .home {
     // 小程序使用
     height: 100vh;
     // #ifdef  H5
     // 減去頂部標(biāo)題和底部導(dǎo)航的高度，與微信小程序保持一致，會覆蓋上方的設(shè)置
     height: calc(100vh - 44px - 50px);
     }
     

   • 當(dāng)內(nèi)部內(nèi)容有 flex 布局的話，需要在屬性中增加 enable-flex，否則無效

4. swiper 輪播圖組件

   <template lang="pug">
       swiper(autoplay indicator-dots circular)
           swiper-item(v-for='item in bannerList' :key="item.url")
           image(:src="item.url")
   </template>
   
   <script>
       export default {
           data() {
               return {
                   bannerList: [
                       {
                       url:
                           "https://img.alicdn.com/tfs/TB1g4DmcggP7K4jSZFqXXamhVXa-520-280.jpg_q90_.webp"
                       },
                       {
                       url:
                           "https://img.alicdn.com/simba/img/TB13oCCSpXXXXctaXXXSutbFXXX.jpg"
                       },
                       {
                       url:
                           "https://img.alicdn.com/simba/img/TB1b2svaODsXe8jSZR0SutK6FXa.jpg"
                       },
                       {
                       url:
                           "https://img.alicdn.com/simba/img/TB1x3imuXY7gK0jSZKzSuuikpXa.jpg"
                       },
                       {
                       url:
                           "https://img.alicdn.com/tfs/TB18NsRcsVl614jSZKPXXaGjpXa-520-280.jpg_q90_.webp"
                       }
                   ]
               };
           }
       };
   </script>
   

   • scss 需要特殊處理一下

     .swiper-content {
     swiper {
         // 1.9 是 banner 圖片的寬高比例 520/280 = 1.8571428571428572
         height: calc(750rpx / 1.9);
         image {
         height: 100%;
         }
     }
     }
     

5. uni-segmented-control 分段器組件

   <template lang="pug">
       .home-tab
           .tab-title-list
           uni-segmented-control(:current="current" :values="items.map(v => v.title)" @clickItem="onClickItem" style-type="text" active-color="#2b7bff")
           .tab-title-search
       .home-content
           home-recommend(v-if="current === 0")
           home-category(v-if="current === 1")
           home-new(v-if="current === 2")
           home-album(v-if="current === 3")
   </template>
   
   <script>
       import homeAlbum from "@/pages/home/home-album";
       import homeCategory from "@/pages/home/home-category";
       import homeNew from "@/pages/home/home-new";
       import homeRecommend from "@/pages/home/home-recommend";
       import { uniSegmentedControl } from "@dcloudio/uni-ui";
       export default {
           components: {
               homeAlbum,
               homeCategory,
               homeNew,
               homeRecommend,
               uniSegmentedControl
           },
           data() {
               return {
                   items: [
                       {
                       title: "推薦"
                       },
                       {
                       title: "分類"
                       },
                       {
                       title: "最新"
                       },
                       {
                       title: "專輯"
                       }
                   ],
                   current: 0
               };
           },
           methods: {
               /**
               * tab 切換 回調(diào)函數(shù)
               */
               onClickItem(e) {
                   if (this.current !== e.currentIndex) {
                       this.current = e.currentIndex;
                   }
               }
           }
       };
   </script>
   

6. navigator 鏈接跳轉(zhuǎn)功能

   <template lang="pug">
       navigator(url="/pages/home/home-album/details")
           text 測試
   </template>
   

   這個(gè)跳轉(zhuǎn)的地址與 pages.json 中設(shè)置的 pages => path 屬性值保持一致。需要注意的是：不可以和 tabBar 中使用的 pagePath 一致，否則無效。

7. text 標(biāo)簽可以識別數(shù)據(jù)中的轉(zhuǎn)義字符，如 \n 會識別為換行符

8. video 標(biāo)簽

   • 視頻預(yù)覽圖充滿整個(gè)容器的屬性，默認(rèn)是正常的比例展示的

     objectFit="fill"
     

9. button 標(biāo)簽

   • 設(shè)置分享，使用微信小程序的內(nèi)置功能

     button(open-type="share") 分享
     

5. 為 H5 方式的服務(wù)，設(shè)置代理，防止瀏覽器攔截接口請求

1. manifest.json 文件，增加 h5特有相關(guān) 配置

   /* h5特有相關(guān) */
   "h5": {
       "devServer": {
           "port": 8000, //端口號
           "disableHostCheck": true,
           "proxy": {
               "/api": {
                   "target": "http://xxxx.cn", //目標(biāo)接口域名
                   "ws": true, // proxy websockets
                   "changeOrigin": true, //是否跨域
                   "pathRewrite": {
                       "^/api": ""
                   }
               }
           }
       }
   }
   

• 使用演示

  wx.request({
  url: "api/xxxxx",
  success(res) {
      console.log(res)
  }
  })
  

2. 需要注意的是，這樣寫微信小程序是不會識別的，所以還需要使用官方文檔中的 條件編譯 的方式來進(jìn)行處理，下文中可查看具體的使用方式

6. 使用 條件編譯 的方式，對某個(gè)平臺單獨(dú)設(shè)置

1. 完善上方接口請求方式

• main.js 文件，增加全局變量（也可以在 APP.vue 文件中使用 globalData 的方式增加全局變量）

  // 條件編譯，設(shè)置相應(yīng)環(huán)境的變量值 https://uniapp.dcloud.io/platform?id=%e6%9d%a1%e4%bb%b6%e7%bc%96%e8%af%91
  // #ifdef  MP-WEIXIN
  // 接口請求地址
  Vue.prototype.APINAME = "http://xxx.cn"
  // #endif
  
  // #ifdef  APP-PLUS || H5
  // 使用 manifest.json 中的 devServer 代理配置，防止瀏覽器阻攔接口請求
  Vue.prototype.APINAME = "api"
  // #endif
  

• 使用演示

  wx.request({
  url: `${this.APINAME}/xxxxx`,
  success(res) {
      console.log(res)
  }
  })
  

2. 在樣式代碼中使用條件編譯

   由于 100vh 在微信小程序和 H5 兩個(gè)環(huán)境中不一樣的問題，才有了這樣的需求

   .home {
   // 小程序使用
   height: 100vh;
   // #ifdef  H5
   // 減去頂部標(biāo)題和底部導(dǎo)航的高度，與微信小程序保持一致，會覆蓋上方的設(shè)置
   height: calc(100vh - 44px - 50px);
   }