小程序｜炎炎夏日、清爽一夏、头像大换装
寫作背景：
???? 炎炎的夏日一起來為頭像增加點夏天的元素，讓清爽的頭像陪伴你一整個夏天。通過一個完整的小程序串通整個開發生命周期。
需求設計：
???? 開發一款可以為頭像增加夏日元素貼紙的小程序。支持直接使用用戶當前頭像信息，支持將制作的頭像保存到用戶相冊。
首頁模塊設計：
???? 首頁模塊分為未授權和已授權使用用戶信息兩種狀態，當用戶剛進入頁面未操作的情況下提供授權的操作按鈕，當用戶完成授權后展示頭像制作的視圖。
未授權使用頭像狀態功能概述：
- “Get 新頭像 清爽一夏～”按鈕：用戶點擊后進行用戶信息獲取授權的操作。
成品圖：
已授權使用頭像狀態功能概述：
- 頭像制作區域，用來顯示授權的頭像，并在這個區域完成貼紙的調整；
- 貼紙區，用來展示小程序內置的夏日貼紙素材，并提供選取；
- 按鈕【保存下來】：將頭像和貼紙保存至用戶手機相冊；
- 按鈕【重來一次】：將重置貼紙移動、選中、縮放的數據到初始值；
成品圖：
關于頁面設計：
- 提供小程序及作者的相關信息展示
成品圖：
注冊微信小程序：
???? 微信小程序注冊流程包括賬號信息填寫、郵箱激活、信息登記三個步驟，按網站提示注冊即可。
Tips:
快速開始小程序項目：
創建項目
???? 使用微信開發者工具創建一個不使用任意模板的項目并按照下面的目錄約定進行少許調整，見注釋的特別約定：
CoolAvatar ├─app.js // 默認約定：app主函數 ├─app.json // 默認約定：窗口、頁面、組件配置 ├─app.wxss // 默認約定：app全局樣式定義文件 ├─package.json // 默認約定：使用npm安裝依賴后自動生成更新 ├─project.config.json // 默認約定：配置npm依賴文件、文件夾、appid等 ├─project.private.config.json ├─sitemap.json ├─utils // 默認約定：開發過程中用到的工具函數 | └─util.js ├─templates // 特別約定：用來放置頁面用到的模板 | ├─authorization | | ├─authorization.wxml | | └─authorization.wxss ├─pages // 默認約定：每個頁面的位置 | ├─index | | ├─index.js | | ├─index.json | | ├─index.wxml | | └─index.wxss ├─images // 特別約定：項目基礎圖片素材 | ├─icon-about-default.png | ├─icon-about-selected.png | ├─logo.png | ├─material // 特別約定：貼紙素材 | | ├─1.png | | └─2.png選裝vant-ui：
???? 根據自己的喜好和習慣可以自行選擇，一個順手的UI庫對于快速開發還是很有必要的，安裝、配置及組件使用支持參照vant-ui組件文檔即可。
Tips：
配置tabbar：
???? 配置tabbar，滿足首頁和關于頁面的切換。通過微信開發者工具【右鍵】=>【新建 Page】創建about頁面后將下面的配置添加到 app.json 完成底部標簽欄的配置：
| tabbar.color | 未選中字體顏色 |
| tabbar.selectedColor | 選中的字體顏色 |
| tabbar.list | 配置每個標簽的內容 |
| tabbar.list.text | 標簽文案 |
| tabbar.list.pagePath | 頁面的實際路徑 |
| tabbar.list.iconPath | 未選中的標簽ICON |
| tabbar.list.selectedIconPath | 選中的標簽ICON |
配置完成后結果：
配置合法域名：
???? 因為我們存在讀取用戶頭像并下載的操作，所以需要將微信頭像的域名地址配置到downloadFile里面，開發過程中雖然可以在開發者工具設置不校驗域名，但還是建議一開始就配置好：
頁面開發：
???? 我們主要來實現首頁中夏日新頭像的制作，關于頁面僅展示靜態文案就不過多講述了，完整代碼在文末提供。
模板使用：
???? 微信小程序在開發過程中提供了模塊的概念，使得我們可以將一個視圖文件中的”一塊“提取到單獨的文件中，既能減少原視圖文件中的代碼量又能在可能存在復用的情況下進行復用，節省開發工作。
定義模板：
引用模板：
視圖內容：
我們通過使用模板將各版塊拆分到 templates 目錄：
獲取微信用戶頭像：
涉及 API：wx.getUserProfile(Object object)
???? 用戶主動觸發定義的 getUserProfile 函數來打開小程序內置的授權提示窗口，在用戶同意后成功拿到用戶的 UserInfo 對象，從中解析到用戶的頭像信息，我們通過 hasUserInfo 變量的狀態來控制未授權和已授權頁面狀態的顯示。
getUserProfile(e) {wx.getUserProfile({desc: '展示用戶頭像',success: (res) => {const {material} = this.data;this.setData({userInfo: res.userInfo,hasUserInfo: res.userInfo != null,festivalSrc: material[0].url,});}}) }貼紙移動、旋轉、縮放：
???? 在 switch-rect.wxml 模板中定義了貼紙操作的容器，并在容器中顯示當前選中的貼紙素材，將容器設置固定定位后通過實時改變 css 的選中角度、寬高及邊距的數據來完成。
???? 容器事件的綁定包含了catchtouchstart、catchtouchmove、catchtouchend，右下角的選中按鈕同樣綁定了這三個屬性。catch在這里表示會阻止事件向上冒泡事件的具體處理可以在文末的提供的源碼地址查看。
保存新頭像：
檢查用戶是否同意使用相冊：
涉及 API：
???? 使用 wx.getSetting 可以得到當前用戶設置列表的權限狀態，通過查看指定狀態是否已授權來決定能否繼續執行下一步，否則我們配置來提示框口來引導用戶使用 wx.openSetting 跳轉到設置頁面手動操作授權。
wx.getSetting({success(res) {if (!res.authSetting[scope]) {wx.authorize({scope,success() {callback && callback(true);},fail() {self.setData({isOpenSetting: true,});}})} else {callback && callback(true);}},fail(err) {console.log(err)} })使用canvas繪制并輸出新頭像：
涉及 API：wx.saveImageToPhotosAlbum
???? 通過調用封裝的 saveImage 函數，傳入 canvasid 和尺寸數據可以得到合成后的圖像信息。再調用 wx.saveImageToPhotosAlbum 將圖像信息保存到用戶的手機相冊，至此首頁功能的 MVP 版本就完結了~
saveImage(this.data, res.tempFilePath, {canvasid: 'festivalCanvas',width: 700,height: 700,offsetTop: 0,offsetLeft: 0, }, (img) => {wx.hideLoading();if (img) {this.saveImageToPhotosAlbum(img)} });代碼質量：
???? 在微信開發者工具中有一個代碼質量檢查的功能，我們可以通過提示的處理方案進行操作，我們這個小程序沒有使用CDN來放貼紙素材，所以圖片資源超出了默認的200k的限制，有條件的時候可以優化一下~。
上線發布~：
推送代碼：
這里的推送代碼指的是通過微信開發者工具將編寫的代碼打包上傳到小程序平臺做發布，并非代碼管理~。
提交審核：
推送代碼后就可以在這里查看到了，核實沒有問題就提交審核后耐心等待吧。
提交發布：
等審核通過后就可以再次來到小程序平臺執行提交發布的操作了，發布以后可以先用過掃描進入正式版小程序，稍后才能在微信搜索到。
源碼分享：
搬運說明：
問題集錦：
樣式覆蓋問題
Q: 在使用 van-button 的時候發現通過在 app.wxss 中使用重新編寫 css 類無法正常覆蓋樣式；
A：在 .van-button 前增加 view 標識可以完成，如下；
view .van-button {height: 75rpx; }自動執行授權函數？
Q：嘗試在 onload 后直接調用 wx.getUserProfile 函數來減少操作，但沒有正常彈出窗口？
A：頁面設計未授權狀態，讓用戶主動觸發才能正常彈窗。
用戶頭像清晰度
Q：在獲取到用戶的頭像信息后發現頭像特別模糊，完全無法進行新頭像的成？
A：UserInfo在說明 avatarUrl 提到了地址最后一段的含義，0、46、64、96、132 數值可選，0 代表 640x640 的正方形頭像，46 表示 46x46 的正方形頭像，剩余數值以此類推。默認132。所以我們需要將默認的 132 替換成 0 得到最高清的一張頭像。
const index = res.userInfo.avatarUrl.lastIndexOf('/132'); if (index != -1) {res.userInfo.avatarUrl = res.userInfo.avatarUrl.substring(0, index) + '/0'; }為什么不支持相冊選擇
Q：應開發用戶自行拍照或上傳相冊中的圖片來制作頭像，為啥沒有這個功能？
A：目前微信小程序提供的 wx.editImage(Object object)不支持按比例裁剪，這樣的功能居然是準備酌情增加，非 1:1 的頭像在選擇后的效果太差。上面提到的參考項目中有關于等比例裁剪的實現，感興趣的小伙伴可以嘗試。
本地圖像和授權拿到的用戶頭像區別
Q：在開發中相冊選擇的圖像和授權得到的用戶頭像有什么區別，可以直接使用么？
A：我們在畫布中操作的圖片都是圖像本身，授權得到的用戶頭像僅是圖像的地址，所以我們需要使用 wx.downloadFile(Object object) 函數將頭像資源下載后使用。
使用模板后樣式為生效
Q：我也使用的項目來整合視圖，可以樣式為啥沒有生效呢？
A：在微信小程序的開發文檔有關于模板的使用但未提供樣式的處理，我們需要在目標視圖的 wxss 文件中使用 @import 導入模板的樣式。
結語：
???? 第一次完整的小程序開發到上線就到此結束了，可以在微信搜索”夏日貼紙頭像“來為自己的頭像做一次換裝吧。
???? 在體驗了原生的小程序開發和跨小程序平臺的開發模式后感覺還是原生的體驗要更好，跨平臺的支持在中間層轉換的穩定性還有待提升，要不也不至于一個白屏的問題是通重新CV了一遍就搞定的吧~
theme: vuepress
我正在參加「初夏創意投稿大賽」詳情請看：初夏創意投稿大賽
寫作背景：
???? 炎炎的夏日一起來為頭像增加點夏天的元素，讓清爽的頭像陪伴你一整個夏天。通過一個完整的小程序串通整個開發生命周期。
需求設計：
???? 開發一款可以為頭像增加夏日元素貼紙的小程序。支持直接使用用戶當前頭像信息，支持將制作的頭像保存到用戶相冊。
首頁模塊設計：
???? 首頁模塊分為未授權和已授權使用用戶信息兩種狀態，當用戶剛進入頁面未操作的情況下提供授權的操作按鈕，當用戶完成授權后展示頭像制作的視圖。
未授權使用頭像狀態功能概述：
- “Get 新頭像 清爽一夏～”按鈕：用戶點擊后進行用戶信息獲取授權的操作。
成品圖：
已授權使用頭像狀態功能概述：
- 頭像制作區域，用來顯示授權的頭像，并在這個區域完成貼紙的調整；
- 貼紙區，用來展示小程序內置的夏日貼紙素材，并提供選取；
- 按鈕【保存下來】：將頭像和貼紙保存至用戶手機相冊；
- 按鈕【重來一次】：將重置貼紙移動、選中、縮放的數據到初始值；
成品圖：
關于頁面設計：
- 提供小程序及作者的相關信息展示
成品圖：
注冊微信小程序：
???? 微信小程序注冊流程包括賬號信息填寫、郵箱激活、信息登記三個步驟，按網站提示注冊即可。
Tips:
快速開始小程序項目：
創建項目
???? 使用微信開發者工具創建一個不使用任意模板的項目并按照下面的目錄約定進行少許調整，見注釋的特別約定：
CoolAvatar ├─app.js // 默認約定：app主函數 ├─app.json // 默認約定：窗口、頁面、組件配置 ├─app.wxss // 默認約定：app全局樣式定義文件 ├─package.json // 默認約定：使用npm安裝依賴后自動生成更新 ├─project.config.json // 默認約定：配置npm依賴文件、文件夾、appid等 ├─project.private.config.json ├─sitemap.json ├─utils // 默認約定：開發過程中用到的工具函數 | └─util.js ├─templates // 特別約定：用來放置頁面用到的模板 | ├─authorization | | ├─authorization.wxml | | └─authorization.wxss ├─pages // 默認約定：每個頁面的位置 | ├─index | | ├─index.js | | ├─index.json | | ├─index.wxml | | └─index.wxss ├─images // 特別約定：項目基礎圖片素材 | ├─icon-about-default.png | ├─icon-about-selected.png | ├─logo.png | ├─material // 特別約定：貼紙素材 | | ├─1.png | | └─2.png選裝vant-ui：
???? 根據自己的喜好和習慣可以自行選擇，一個順手的UI庫對于快速開發還是很有必要的，安裝、配置及組件使用支持參照vant-ui組件文檔即可。
Tips：
配置tabbar：
???? 配置tabbar，滿足首頁和關于頁面的切換。通過微信開發者工具【右鍵】=>【新建 Page】創建about頁面后將下面的配置添加到 app.json 完成底部標簽欄的配置：
| tabbar.color | 未選中字體顏色 |
| tabbar.selectedColor | 選中的字體顏色 |
| tabbar.list | 配置每個標簽的內容 |
| tabbar.list.text | 標簽文案 |
| tabbar.list.pagePath | 頁面的實際路徑 |
| tabbar.list.iconPath | 未選中的標簽ICON |
| tabbar.list.selectedIconPath | 選中的標簽ICON |
配置完成后結果：
配置合法域名：
???? 因為我們存在讀取用戶頭像并下載的操作，所以需要將微信頭像的域名地址配置到downloadFile里面，開發過程中雖然可以在開發者工具設置不校驗域名，但還是建議一開始就配置好：
頁面開發：
???? 我們主要來實現首頁中夏日新頭像的制作，關于頁面僅展示靜態文案就不過多講述了，完整代碼在文末提供。
模板使用：
???? 微信小程序在開發過程中提供了模塊的概念，使得我們可以將一個視圖文件中的”一塊“提取到單獨的文件中，既能減少原視圖文件中的代碼量又能在可能存在復用的情況下進行復用，節省開發工作。
定義模板：
引用模板：
視圖內容：
我們通過使用模板將各版塊拆分到 templates 目錄：
獲取微信用戶頭像：
涉及 API：wx.getUserProfile(Object object)
???? 用戶主動觸發定義的 getUserProfile 函數來打開小程序內置的授權提示窗口，在用戶同意后成功拿到用戶的 UserInfo 對象，從中解析到用戶的頭像信息，我們通過 hasUserInfo 變量的狀態來控制未授權和已授權頁面狀態的顯示。
getUserProfile(e) {wx.getUserProfile({desc: '展示用戶頭像',success: (res) => {const {material} = this.data;this.setData({userInfo: res.userInfo,hasUserInfo: res.userInfo != null,festivalSrc: material[0].url,});}}) }貼紙移動、旋轉、縮放：
???? 在 switch-rect.wxml 模板中定義了貼紙操作的容器，并在容器中顯示當前選中的貼紙素材，將容器設置固定定位后通過實時改變 css 的選中角度、寬高及邊距的數據來完成。
???? 容器事件的綁定包含了catchtouchstart、catchtouchmove、catchtouchend，右下角的選中按鈕同樣綁定了這三個屬性。catch在這里表示會阻止事件向上冒泡事件的具體處理可以在文末的提供的源碼地址查看。
保存新頭像：
檢查用戶是否同意使用相冊：
涉及 API：
???? 使用 wx.getSetting 可以得到當前用戶設置列表的權限狀態，通過查看指定狀態是否已授權來決定能否繼續執行下一步，否則我們配置來提示框口來引導用戶使用 wx.openSetting 跳轉到設置頁面手動操作授權。
wx.getSetting({success(res) {if (!res.authSetting[scope]) {wx.authorize({scope,success() {callback && callback(true);},fail() {self.setData({isOpenSetting: true,});}})} else {callback && callback(true);}},fail(err) {console.log(err)} })使用canvas繪制并輸出新頭像：
涉及 API：wx.saveImageToPhotosAlbum
???? 通過調用封裝的 saveImage 函數，傳入 canvasid 和尺寸數據可以得到合成后的圖像信息。再調用 wx.saveImageToPhotosAlbum 將圖像信息保存到用戶的手機相冊，至此首頁功能的 MVP 版本就完結了~
saveImage(this.data, res.tempFilePath, {canvasid: 'festivalCanvas',width: 700,height: 700,offsetTop: 0,offsetLeft: 0, }, (img) => {wx.hideLoading();if (img) {this.saveImageToPhotosAlbum(img)} });代碼質量：
???? 在微信開發者工具中有一個代碼質量檢查的功能，我們可以通過提示的處理方案進行操作，我們這個小程序沒有使用CDN來放貼紙素材，所以圖片資源超出了默認的200k的限制，有條件的時候可以優化一下~。
上線發布~：
推送代碼：
這里的推送代碼指的是通過微信開發者工具將編寫的代碼打包上傳到小程序平臺做發布，并非代碼管理~。
提交審核：
推送代碼后就可以在這里查看到了，核實沒有問題就提交審核后耐心等待吧。
提交發布：
等審核通過后就可以再次來到小程序平臺執行提交發布的操作了，發布以后可以先用過掃描進入正式版小程序，稍后才能在微信搜索到。
源碼分享：
搬運說明：
問題集錦：
樣式覆蓋問題
Q: 在使用 van-button 的時候發現通過在 app.wxss 中使用重新編寫 css 類無法正常覆蓋樣式；
A：在 .van-button 前增加 view 標識可以完成，如下；
view .van-button {height: 75rpx; }自動執行授權函數？
Q：嘗試在 onload 后直接調用 wx.getUserProfile 函數來減少操作，但沒有正常彈出窗口？
A：頁面設計未授權狀態，讓用戶主動觸發才能正常彈窗。
用戶頭像清晰度
Q：在獲取到用戶的頭像信息后發現頭像特別模糊，完全無法進行新頭像的成？
A：UserInfo在說明 avatarUrl 提到了地址最后一段的含義，0、46、64、96、132 數值可選，0 代表 640x640 的正方形頭像，46 表示 46x46 的正方形頭像，剩余數值以此類推。默認132。所以我們需要將默認的 132 替換成 0 得到最高清的一張頭像。
const index = res.userInfo.avatarUrl.lastIndexOf('/132'); if (index != -1) {res.userInfo.avatarUrl = res.userInfo.avatarUrl.substring(0, index) + '/0'; }為什么不支持相冊選擇
Q：應開發用戶自行拍照或上傳相冊中的圖片來制作頭像，為啥沒有這個功能？
A：目前微信小程序提供的 wx.editImage(Object object)不支持按比例裁剪，這樣的功能居然是準備酌情增加，非 1:1 的頭像在選擇后的效果太差。上面提到的參考項目中有關于等比例裁剪的實現，感興趣的小伙伴可以嘗試。
本地圖像和授權拿到的用戶頭像區別
Q：在開發中相冊選擇的圖像和授權得到的用戶頭像有什么區別，可以直接使用么？
A：我們在畫布中操作的圖片都是圖像本身，授權得到的用戶頭像僅是圖像的地址，所以我們需要使用 wx.downloadFile(Object object) 函數將頭像資源下載后使用。
使用模板后樣式為生效
Q：我也使用的項目來整合視圖，可以樣式為啥沒有生效呢？
A：在微信小程序的開發文檔有關于模板的使用但未提供樣式的處理，我們需要在目標視圖的 wxss 文件中使用 @import 導入模板的樣式。
結語：
???? 第一次完整的小程序開發到上線就到此結束了，可以在微信搜索”夏日貼紙頭像“來為自己的頭像做一次換裝吧。
???? 在體驗了原生的小程序開發和跨小程序平臺的開發模式后感覺還是原生的體驗要更好，跨平臺的支持在中間層轉換的穩定性還有待提升，要不也不至于一個白屏的問題是通重新CV了一遍就搞定的吧~
總結
以上是生活随笔為你收集整理的小程序｜炎炎夏日、清爽一夏、头像大换装的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Github已星标180K又一神作，阿里
- 下一篇： C4D-学习笔记-4-渲染（ProRen