資料
正文
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:伊脓，解決方法修改版本號(hào)9.0.2 => 8.0.2平酿，重新安裝依賴
3. 微信小程序底部的 icon
-
icon尺寸需要是81*81的碗短，不然會(huì)非常模糊
-
對(duì)比圖
對(duì)比圖.png
-
icon的周圍要適當(dāng)?shù)牧舭踪怂荒苋刻顫M，不然不好看
- 示意圖纲堵，如下所示對(duì)比非常的明顯
示意圖.png
4. 微信小程序相關(guān)的語(yǔ)法巡雨，在應(yīng)用中中需要注意的地方
-
image標(biāo)簽高度隨寬度自適應(yīng)<image mode="widthFix" /> -
image標(biāo)簽寬高自適應(yīng)鋪滿，但是會(huì)裁切掉部分的圖片<image mode="aspectFill" /> -
scroll-view頁(yè)面下拉滾動(dòng)組件<template lang="pug"> scroll-view.home(@scrolltolower="handelToLower" scroll-y) </template> <script> export default { methods: { /** * 頁(yè)面內(nèi)容滾動(dòng)到底部 回調(diào)函數(shù) */ handelToLower() { console.log("到底部啦席函！"); } }, } </script>-
scss需要特殊設(shè)置.home { // 小程序使用 height: 100vh; // #ifdef H5 // 減去頂部標(biāo)題和底部導(dǎo)航的高度铐望，與微信小程序保持一致，會(huì)覆蓋上方的設(shè)置 height: calc(100vh - 44px - 50px); } - 當(dāng)內(nèi)部?jī)?nèi)容有
flex布局的話茂附，需要在屬性中增加enable-flex正蛙，否則無效
-
-
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%; } } }
-
-
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> -
navigator鏈接跳轉(zhuǎn)功能<template lang="pug"> navigator(url="/pages/home/home-album/details") text 測(cè)試 </template>這個(gè)跳轉(zhuǎn)的地址與
pages.json中設(shè)置的pages => path屬性值保持一致。需要注意的是：不可以和tabBar中使用的pagePath一致营曼，否則無效乒验。 text標(biāo)簽可以識(shí)別數(shù)據(jù)中的轉(zhuǎn)義字符，如\n會(huì)識(shí)別為換行符-
video標(biāo)簽- 視頻預(yù)覽圖充滿整個(gè)容器的屬性蒂阱，默認(rèn)是正常的比例展示的
objectFit="fill"
- 視頻預(yù)覽圖充滿整個(gè)容器的屬性蒂阱，默認(rèn)是正常的比例展示的
-
button標(biāo)簽- 設(shè)置分享锻全，使用微信小程序的內(nèi)置功能
button(open-type="share") 分享
- 設(shè)置分享锻全，使用微信小程序的內(nèi)置功能
5. 為 H5 方式的服務(wù)狂塘，設(shè)置代理，防止瀏覽器攔截接口請(qǐng)求
-
manifest.json文件鳄厌，增加 h5特有相關(guān) 配置/* h5特有相關(guān) */ "h5": { "devServer": { "port": 8000, //端口號(hào) "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) } })
- 需要注意的是荞胡，這樣寫微信小程序是不會(huì)識(shí)別的，所以還需要使用官方文檔中的 條件編譯 的方式來進(jìn)行處理了嚎，下文中可查看具體的使用方式
6. 使用 條件編譯 的方式泪漂，對(duì)某個(gè)平臺(tái)單獨(dú)設(shè)置
- 完善上方接口請(qǐng)求方式
-
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 // 接口請(qǐng)求地址 Vue.prototype.APINAME = "http://xxx.cn" // #endif // #ifdef APP-PLUS || H5 // 使用 manifest.json 中的 devServer 代理配置窖梁，防止瀏覽器阻攔接口請(qǐng)求 Vue.prototype.APINAME = "api" // #endif - 使用演示
wx.request({ url: `${this.APINAME}/xxxxx`, success(res) { console.log(res) } })
-
在樣式代碼中使用條件編譯
由于
100vh在微信小程序和H5兩個(gè)環(huán)境中不一樣的問題，才有了這樣的需求.home { // 小程序使用 height: 100vh; // #ifdef H5 // 減去頂部標(biāo)題和底部導(dǎo)航的高度夹囚，與微信小程序保持一致纵刘，會(huì)覆蓋上方的設(shè)置 height: calc(100vh - 44px - 50px); }
