趣味測試類微信小程式
先說說專案需求吧,
l 點選【再測一次】,重新開始測試流程,主持人回覆第一個題目,流程同上;答完全部題目後,底部不顯示【立即開始分析】按鈕,而是直接展示結果,且上一次測試內容不清空;如退出再進來,則清空全部歷史記錄。
圖片說明:
l 圖片上面顯示微信頭像和暱稱
l 名稱:左右腦人才鑑定,下面顯示2019權威測試標記;
l 分數、簡述文案與詳述文案
l 二維碼:H5聚合頁的二維碼
l 二維碼文案為:長按識別二維碼|快來領取你的左右腦成績單
l 點選【點選儲存結果】,將圖片儲存到手機相簿,且按鈕隱藏,顯示為文字:圖片已儲存到相簿,可分享至朋友圈。
l 點選【檢視大圖】,將圖片傳送給朋友。
至於分數就是每一題左腦得分xx分,右腦得分XX分 ,最後左腦總分XX分,右腦總分XX分,根據分數得出左腦優勢詳述右腦分數,詳述。
拿到這個小程式的時候,我覺得沒什麼內容應該能很快搞定,初始預期想的是使用者資訊這一塊服務端返回欄位給我即可,資料結果這一段我可以在前端自己處理。
我當時想的唯一的難點就是最後html生成圖片這部分,因為之前在移動端其實做過這個需求,使用的是html2canvas,裡面的坑多相容性不好,所以心裡有陰影。
最後做了才知道困住我的不是這一步,而是在不能操作dom的情況下,如何實現無線迴圈的再測一次。
那就從頭梳理一下這個小程式吧:
1.使用者資訊授權
這個是直接使用微信的getUserInfo
<a class="supend" wx:if="{{!hasUserInfo && canIUse && item==2}}"><button open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="supend-bth"> 立即分析結果 </button></a> <view wx:if="{{hasUserInfo}}"> <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image> <text class="userinfo-nickname">{{userInfo.nickName}}</text> </view> 這個微信規定必須使用button按鈕授權, 對應js getUserInfo: function(e) { var _this = this; console.log(e) if (!e.detail.userInfo){ return false; } app.globalData.userInfo = e.detail.userInfo console.log(e.detail.userInfo) _this.setData({ userInfo: e.detail.userInfo, hasUserInfo: true }) console.log("已有使用者資訊"); _this.resultShow(); }, if (app.globalData.userInfo) { this.setData({ userInfo: app.globalData.userInfo, hasUserInfo: true }) } else if (this.data.canIUse) { // 由於 getUserInfo 是網路請求,可能會在 Page.onLoad 之後才返回 // 所以此處加入 callback 以防止這種情況 app.userInfoReadyCallback = res => { this.setData({ userInfo: res.userInfo, hasUserInfo: true }) } console.log("支援button標籤獲取資訊"); } else { // 在沒有 open-type=getUserInfo 版本的相容處理 wx.getUserInfo({ success: res => { app.globalData.userInfo = res.userInfo this.setData({ userInfo: res.userInfo, hasUserInfo: true }) }, fail:function(){ return false; } }) console.log("不支援button標籤的相容寫法"); } 這樣直接可以獲取到使用者的暱稱和頭像,沒有進行服務端互動。 2.計算結果分數<scroll-view scroll-y class="container" enable-back-to-top="true" style="height: {{windowHeight}}rpx;" bindscroll="touchclose" scroll-with-animation="true" scroll-top="{{scrollTop}}">
<!-- 內容 -->
<view>-----略------</view>
</scroll-view>