最新踩坑記錄canvas使用drawImage報(bào)的錯(cuò)
-
這個(gè)主要是在最新的api中canvas是使用wx.createSelectorQuery獲取的節(jié)點(diǎn)学赛，當(dāng)生成圖片的時(shí)候璃哟，不能使用wx.canvasToTempFilePath這個(gè)api倘是，需要使用canvas.createImage()這個(gè)api創(chuàng)建圖片黄虱，在圖片的onload中使用ctx.drawImage第一個(gè)參數(shù)記得是當(dāng)前創(chuàng)建的圖片標(biāo)簽惨驶，不是圖片的路徑白热，否則就會(huì)提示上面的報(bào)錯(cuò)
image.png
1、寫(xiě)class中的三木運(yùn)算符的時(shí)候不要進(jìn)行換行粗卜，否則編輯器報(bào)錯(cuò)
2屋确、在小程序中使用flex進(jìn)行布局，在ios手機(jī)上续扔，也就是ipone等機(jī)型攻臀，底部會(huì)有問(wèn)題，我們需要加一個(gè)代碼padding-bottom: env(safe-area-inset-bottom);（可以加到當(dāng)前整個(gè)大的盒子中就可以）（可以百度這一句代碼纱昧，詳細(xì)的看看）將底部的安全距離進(jìn)行流出來(lái)刨啸，還有有時(shí)候底部固定，中間進(jìn)行overflow:auto识脆；flex:1;的時(shí)候设联，底部的高度會(huì)沒(méi)有了善已，這個(gè)時(shí)候第一種就是將高度加多一點(diǎn)，第二種就是外部不加高度离例，使用子元素的高度加margin或者是padding進(jìn)行頂一下
-
不加底部安全距離的
image.png -
加了底部安全距離的
image.png
3换团、自定義的底部彈窗，點(diǎn)擊陰影和關(guān)閉按鈕進(jìn)行隱藏粘招，但是點(diǎn)擊其他的空白區(qū)域也會(huì)觸發(fā)冒泡事件啥寇，直接給白色的部分，大的盒子加上catchtap洒扎，這個(gè)點(diǎn)擊事件可以什么也不做辑甜，這樣的話，再點(diǎn)擊其他的空白區(qū)域就不會(huì)進(jìn)行觸發(fā)冒泡事件了
4袍冷、 當(dāng)我們使用點(diǎn)擊按鈕或者是三個(gè)點(diǎn)進(jìn)行分享磷醋，由于在生命周期中，沒(méi)有成功胡诗，失敗的回調(diào)函數(shù)邓线，我們不知道用戶有沒(méi)有點(diǎn)擊分享出去，點(diǎn)擊分享煌恢，在進(jìn)行取消骇陈，也是會(huì)被認(rèn)為是分享成功的，可以使用wx.showShareMenu這個(gè)解決瑰抵，不過(guò)這個(gè)目前是測(cè)試版本你雌，只支持安卓手機(jī)，所以會(huì)有點(diǎn)問(wèn)題
5二汛、微信小程序中input框禁止輸入表情符號(hào)
-
注：在小米手機(jī)的輸入法上婿崭，表情會(huì)帶一個(gè)空格，會(huì)有點(diǎn)問(wèn)題
//禁止input框中輸入表情符號(hào)
const emoji = function(data){//data就是input框中的value值
let reg = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi ;
if(data.match(reg)){
data = data.replace(reg,'');
}
return data;
}
6肴颊、websocket的注意事項(xiàng)（可以查看我的這篇文章）
7氓栈、在小程序中使用web-view的注意事項(xiàng)
- 首先需要?jiǎng)?chuàng)建一個(gè)頁(yè)面進(jìn)行使用web-view
<web-view src="https://www.baidu.com"></web-view>
- 還有登錄微信公眾平臺(tái)，開(kāi)發(fā)管理---->開(kāi)發(fā)設(shè)置中將我們的業(yè)務(wù)域名進(jìn)行配置婿着，注意是https的別加錯(cuò)了
- 注意：如果你的h5頁(yè)面更新的很頻繁授瘦，那么你直接使用時(shí)間戳的形式（加載h5頁(yè)面的時(shí)候會(huì)很慢），如果長(zhǎng)時(shí)間才進(jìn)行更新一次竟宋，可以直接將隨機(jī)數(shù)進(jìn)行寫(xiě)死就可以出來(lái)了
<web-view src="https://www.baidu.com/help.html?p=123'}}"></web-view>
<!-- <web-view src="https://www.baidu.com/help.html?p=timestamp'}}"></web-view> -->
- 每次更新h5后提完，因?yàn)橛芯彺娴脑颍覀円獙㈦S機(jī)數(shù)進(jìn)行修改袜硫，這樣的話，頁(yè)面就會(huì)是你修改后的了
- 我之前看好像還需要下載證書(shū)啥的需要進(jìn)行驗(yàn)證挡篓，這個(gè)的話婉陷，你可以百度下哈帚称，這里直說(shuō)修改h5后，頁(yè)面沒(méi)有進(jìn)行更新怎么解決的
小程序跳轉(zhuǎn)到其他的小程序秽澳，接收到的參數(shù)闯睹，一般會(huì)在app.js中的onLaunch和onShow中都可以接收到
- 在這里說(shuō)得是要在onShow中進(jìn)行接收，原因：在onlaunch中首次可以接收到担神，當(dāng)用戶點(diǎn)擊A小程序跳轉(zhuǎn)到B小程序楼吃，第一次參數(shù)是沒(méi)有問(wèn)題的，用戶關(guān)閉B小程序妄讯，在次點(diǎn)擊A小程序跳轉(zhuǎn)到B小程序孩锡，（多次重復(fù)這個(gè)操作），就會(huì)導(dǎo)致我們參數(shù)接收的出現(xiàn)問(wèn)題
小程序獲取用戶的運(yùn)動(dòng)步數(shù)的問(wèn)題
使用wx.getSetting可以獲取用戶有沒(méi)有進(jìn)行授權(quán)亥贸，在使用wx.authorize進(jìn)行獲取的某一個(gè)權(quán)限進(jìn)行彈框躬窜，提示用戶進(jìn)行授權(quán)，也可以使用需要授權(quán)的api炕置，也會(huì)進(jìn)行彈框提示的
-
注意：
1荣挨、這里當(dāng)彈框授權(quán)后，需要用戶進(jìn)行授權(quán)朴摊，用戶點(diǎn)了拒絕之后默垄，不可以再次調(diào)用授權(quán)的api進(jìn)行彈框提示用戶授權(quán)（此時(shí)會(huì)直接默認(rèn)是拒絕的狀態(tài)），我們可以進(jìn)行提示用戶甚纲，并且使用wx.openSetting直接打開(kāi)設(shè)置的頁(yè)面口锭，讓用戶進(jìn)行手動(dòng)的授權(quán)
2、獲取微信運(yùn)動(dòng)步數(shù)的時(shí)候贩疙，使用api獲取的是三十天內(nèi)的讹弯，也可以獲取到用戶當(dāng)天的步數(shù)，但是需要用戶先點(diǎn)擊進(jìn)入微信運(yùn)動(dòng)这溅，在點(diǎn)擊進(jìn)入小程序组民，這樣我們拿到的數(shù)據(jù)就是最新的了，不然就需要等待微信的刷新機(jī)制進(jìn)行刷新后悲靴，我們才能獲取到用戶最新的步數(shù)（這樣的話臭胜，會(huì)有延遲，數(shù)據(jù)不是最新的問(wèn)題癞尚，目前沒(méi)有好的解決辦法）
wx.getWeRunData({//獲取微信用戶運(yùn)動(dòng)步數(shù)的api
success:res=>{
console.log(res);
},
fail:msg=>{//用戶拒絕后的處理
console.log('用戶拒絕');
console.log(msg);
wx.showModal({
title:'需要授權(quán)才可以',
success:res=>{
if(res.confirm){
wx.openSetting({//直接打開(kāi)到設(shè)置頁(yè)面耸三，讓用戶自己手動(dòng)的進(jìn)行授權(quán)
success (res) {
console.log(res.authSetting['scope.werun']);//返回true，說(shuō)明用戶授權(quán)了浇揩，返回false仪壮，說(shuō)明用戶沒(méi)有或者是關(guān)閉了，需要進(jìn)行提示
}
})
}
}
})
}
})
=================使用wx.getSetting獲取用戶是否授權(quán)===============
wx.getSetting({
success(res) {
console.log('---------sasa-----------');
console.log(res.authSetting['scope.werun']);
if (!res.authSetting['scope.werun']) {
wx.authorize({
scope: 'scope.werun',
success () {
console.log('111');
},
fail:_msg=>{
// console.log((_msg));
}
})
}
},
fail:msg=>{
console.log('錯(cuò)誤');
console.log(msg);
},
complete:_s=>{
console.log(_s);
}
})
小程序中使用canvas胳徽，獲取不到node积锅，這個(gè)我們要將canvas寫(xiě)成是單標(biāo)簽就可以了(或者你直接將我的這段代碼直接進(jìn)行cv就可以了)
<view class="wrap">
<canvas type="2d" id="canvas" style="width: 100%; height: 100%;" />
</view>
onReady: function () {
// 使用 wx.createContext 獲取繪圖上下文 context
const query = wx.createSelectorQuery()
query.select('#canvas')
.fields({ node: true, size: true })
.exec((res) => {
console.log(res);
const canvas = res[0].node
const ctx = canvas.getContext('2d')
const dpr = wx.getSystemInfoSync().pixelRatio
canvas.width = res[0].width * dpr
canvas.height = res[0].height * dpr
ctx.scale(dpr, dpr)
ctx.fillRect(0, 0, 100, 100)
})
},
微信小程序中使用uCharts
-
根據(jù)項(xiàng)目的需求爽彤，選用了uCharts中的刻度表的功能，uCharts是使用uniapp編寫(xiě)的插件缚陷，可以在全端使用适篙，但是我當(dāng)時(shí)看了好幾遍的文檔，還是沒(méi)有看出來(lái)箫爷，在gitee上的項(xiàng)目實(shí)例中是可以顯示的嚷节，但是我想要其他的功能，不知道怎么整虎锚，最后只能根據(jù)項(xiàng)目實(shí)例中的UNIAPP硫痰，直接復(fù)制進(jìn)行簡(jiǎn)單的一些修改就行，他有個(gè)小程序掃碼體驗(yàn)翁都，里面的每個(gè)功能都會(huì)顯示在那個(gè)頁(yè)面下碍论，根據(jù)這個(gè)進(jìn)行查找就可以了，根據(jù)你的項(xiàng)目需求柄慰，或許還需要進(jìn)行簡(jiǎn)單的修改下源碼
image.png 第一種是uCharts中提供的鳍悠，進(jìn)行簡(jiǎn)單的修改了下源碼
第二個(gè)是百度就有的，進(jìn)行簡(jiǎn)單的修改了下
圖片中的紅色部分是項(xiàng)目中要有個(gè)圖片坐搔，這里就簡(jiǎn)單的用了一個(gè)圖片進(jìn)行展示了
這個(gè)的源碼的話藏研，就放到我的gitee上的倉(cāng)庫(kù)了，有需要的小伙伴可以看看概行，這個(gè)是測(cè)試所以寫(xiě)的沒(méi)怎么進(jìn)行優(yōu)化蠢挡，可以湊活看哈https://gitee.com/fen-xin/progress-bar.git
微信小程序中生成小程序碼，長(zhǎng)按手機(jī)不展示識(shí)別二維碼的情況
- 由于生成小程序碼是通過(guò)后臺(tái)請(qǐng)求微信返回的一個(gè)圖片路徑凳忙，然后使用canvas進(jìn)行畫(huà)上去的业踏，并生成圖片，此時(shí)長(zhǎng)按點(diǎn)擊沒(méi)有顯示識(shí)別二維碼涧卵，解決：1勤家、可能是生成的小程序碼是個(gè)透明的，然后canvas中底部的背景不是白色的柳恐，所以導(dǎo)致的
在小程序中生成條形碼
- 一定要使用wxapp-barcode這個(gè)插件伐脖，使用wxbarcode這個(gè)插件生成的條形碼不會(huì)被識(shí)別，切記＠稚琛Ｋ媳印！
- 使用方法近尚，首先下載安裝(將文件提取放到小程序的文件夾中)
npm i wxapp-barcode
-
下載下來(lái)的文件中有demo蠕啄，作者寫(xiě)的案例，不會(huì)的可以看看那個(gè)
image.png
使用scroll-view的上拉加載及頁(yè)面本身的下拉刷新的問(wèn)題
- 當(dāng)我們下拉刷新時(shí)戈锻，清空當(dāng)前數(shù)據(jù)歼跟，加載后重新賦值却嗡，為了讓頁(yè)面回到頂部，此時(shí)嘹承，你會(huì)發(fā)現(xiàn)接口被調(diào)用了兩遍
- 觸發(fā)下拉刷新的方法后，他加載的數(shù)據(jù)要是有10條如庭，那么滿足scroll-view的上拉加載的條件叹卷，此時(shí)，又會(huì)觸發(fā)一次
-
解決方法： 我們可以不讓當(dāng)前的數(shù)據(jù)為空坪它，加載后骤竹，讓scroll-view的有個(gè)scroll-top為0 ，就可以滾動(dòng)到頂部了
image.png -
data 中進(jìn)行聲明
image.png -
數(shù)據(jù)加載出來(lái)之后往毡，進(jìn)行重新賦值
image.png
在微信小程序中使用搜索功能蒙揣，點(diǎn)擊歷史記錄要進(jìn)行排序，將當(dāng)前點(diǎn)擊的放到第一位
- 思路：
- 1开瞭、當(dāng)我們進(jìn)行搜索的時(shí)候懒震，要進(jìn)行去重，還有進(jìn)行默認(rèn)不排序嗤详，歷史記錄進(jìn)行存儲(chǔ)
- 2个扰、點(diǎn)擊歷史記錄的時(shí)候，進(jìn)行排序葱色，存儲(chǔ)歷史記錄進(jìn)行覆蓋
- 3递宅、每次進(jìn)入當(dāng)前的搜索頁(yè)面的 時(shí)候，在onshow中進(jìn)行獲取歷史記錄的存儲(chǔ)數(shù)據(jù)苍狰，進(jìn)行排序办龄，賦值
在微信小程序中，需要一直進(jìn)行頁(yè)面的跳轉(zhuǎn)淋昭，但是navigateTo只能嵌套10層
- 使用getCurrentPages() 可以獲取當(dāng)前的頁(yè)數(shù)俐填，當(dāng)超過(guò)幾頁(yè)之后進(jìn)行關(guān)閉當(dāng)前頁(yè)面，在進(jìn)行跳轉(zhuǎn)
(要想實(shí)現(xiàn)canvas簽名可使用mini-smooth-signature這個(gè)插件)
- 使用canvas最新的api進(jìn)行繪制响牛，需要獲取canvas的節(jié)點(diǎn)信息玷禽，返回null的問(wèn)題
- 首先要有type和id，id不是canvas-id看清楚哦
- 要有默認(rèn)的高度和寬度呀打，初始化的時(shí)候矢赁，可以將高度進(jìn)行重新賦值
<canvas type="2d" id="signature1" style="width:{{width1}}px;height:{{height1}}px;"></canvas>
data: {
width1: 320,
height1: 200,
},
