趣味測試類微信小程式

2022-07-20 10:30:15 字數 2628 閱讀 9980

先說說專案需求吧,

l  點選【再測一次】,重新開始測試流程,主持人回覆第乙個題目,流程同上;答完全部題目後,底部不顯示【立即開始分析】按鈕,而是直接展示結果,且上一次測試內容不清空;如退出再進來,則清空全部歷史記錄。

l 名稱:左右腦人才鑑定,下面顯示2019權威測試標記;

l 分數、簡述文案與詳述文案

l 點選【檢視大圖】,將傳送給朋友。

至於分數就是每一題左腦得分xx分,右腦得分xx分 ,最後左腦總分xx分,右腦總分xx分,根據分數得出左腦優勢詳述右腦分數,詳述。

拿到這個小程式的時候,我覺得沒什麼內容應該能很快搞定,初始預期想的是使用者資訊這一塊服務端返回欄位給我即可,資料結果這一段我可以在前端自己處理。

我當時想的唯一的難點就是最後html生成這部分,因為之前在移動端其實做過這個需求,使用的是html2canvas,裡面的坑多相容性不好,所以心裡有陰影。

最後做了才知道困住我的不是這一步,而是在不能操作dom的情況下,如何實現無線迴圈的再測一次。

那就從頭梳理一下這個小程式吧:

1.使用者資訊授權

立即分析結果

}對應js

getuserinfo: function(e)

console.log(e.detail.userinfo)

_this.setdata()

console.log("已有使用者資訊");

_this.resultshow();

},this.setdata()

} else if (this.data.caniuse) )

}console.log("支援button標籤獲取資訊");

} else )

},fail:function()

})console.log("不支援button標籤的相容寫法");

}這樣直接可以獲取到使用者的暱稱和頭像,沒有進行服務端互動。

2.計算結果分數

直接將結果存成乙個物件,最後找出每個答案對應的值相加,返回總結果

optrst: function (ansarr) ,

"1": ,

"2": ,

"3": ,

"4":

};for (var i = 0; i < ansarr.length; i++)

}將計算得來的總資料存放在全域性data裡即可

3.繪製生成

wx.downloadfile()

//繪圖方法

},fail: function (res) )}})

然後獲取

let promise1 = new promise(function (resolve, reject)

})});

let promise2 = new promise(function (resolve, reject)

})});

獲取成功後去繪製

promise.all([

//promise1, promise2

promise2, promise3, promise4

]).then(res =>

else

}row.push(temp);

ctx.draw(true,settimeout(() => )

wx.hideloading()

},fail: function (res)

})}, 200))

})4.儲存到相簿(獲取使用者儲存到相簿授權)

wx.getsetting(,

fail(),})}

}})}}

})}})}else)}})

}}})5.長按分享

sharepic:function(e))

}6.//獲取頁面的高度,從而實現滾動pagescrolltobottom: function () )

}).exec()

},剛開始我是直接在裡面設定wx.pagescrollto來實現,每次將頁面滑到最底部,後來發現這種情況頁面抖動十分厲害,故只用上述方法獲取高度,

然後使用

-----略------

設定scrolltop的值即可

7.最後說說基於存在再測一次頁面實現的整體結構

因為頁面可以無限次迴圈,每次又是從第一次迴圈,所以這邊根據資料渲染得出,

當第一題有答案時顯示第二題,當第二題顯示時出現第三題,依次執行,五題執行完又可以實現再測一次從第一次實現

我想到了用wx:for,用wx:for一下迴圈五項,判斷是否展示的條件不變,用二維陣列儲存,剛開始測試的第一組存放在arr[0]一維陣列索引為0的

第乙個二維陣列裡,每點選再測一次,陣列的length加一,新增到下乙個arr[1]陣列裡,這樣即可實現無限迴圈。

如果有用到上述api出現問題的,可以共同**下原因,最後說一下,小程式官方api內容還是很全的,大家可以嘗試各種專案。

微信小程式測試

小程式分為三個版本型別 開發版 體驗版 正式版 我們在測試時候一般會準備三套環境 1 開發版本 對應開發 測試環境 2 體驗版本 對應預發布環境 3 正式版本 對應生產環境 指定小程式 路徑,測試人員可問開發 如果有jenkins,也可以直接在jenkins上拉取已編譯 1 設定 如果我們要使用抓包...

微信小程式測試指南

本文出自天外歸雲的 本地設定hosts為測試環境hosts 選擇專案路徑 事先在本地存放好小程式源 選擇小程式所在路徑,如果路徑正確的話專案名會自動出現,無需手動填寫 本地除錯小程式 我們可以在network下面檢視到網路請求,可以檢視具體某個請求的請求引數以及返回結果等資訊 fiddler 伺服器...

微信小程式 工具類

請求根位址 post請求 post url,data,cb else get請求 get url,data,cb else 成功資訊 successmsg msg,duration,image 失敗訊息 errormsg msg,duration,image 時間戳或時間 格式化 兩個引數 第乙個引...