小程序-- 工作中一些比較實用的知識點
小程序中設置背景圖片
小程序中不能通過css的background 設置小程序的背景圖片
.container{
background-image:url(../back.jpg)
}
這樣小程序是識別不出來。
目前是通過image的標簽進行設置背景圖,但是src也只支持本地圖片，不支持網絡圖片，如果要實用網絡圖片，只能通過一個wx.downloadFile這個api把圖片下載到本地才可以
<view class="head">
<image class="head-img" src="../images/homePage/head.png"></image>
</view>
.head {
width: 100%;
height: 492rpx;
}
.head-img {
width: 100%;
height: 100%;
}
如果要定位的就父層使用position：relative圖片層使用position：absolute
在本頁面改變上一頁面的值
此需求類似于點擊輸入框 ( 使用text寫，而不是input，會彈出小鍵盤的 ) 進入一個搜索的頁面，搜索完成后點擊選擇項或者點擊小鍵盤的右下角都會返回上一頁面，點擊選擇項的值或者搜索的值要顯示在輸入框中；我做的就是在搜索框完成后把搜索完成的值傳到上一頁面。
image.png
image.png
image.png
wxml
<view class='input-container'>
<text class='input-text' name='school' data-type-name='school' bindtap ='onFocusInput' style="color:{{school?'#000':'#ddd'}}">{{school ?school : '請輸入畢業學校'}}</text>
</view>
data-type-name 是識別哪一個輸入框的。
使用三元運算符來顯示空還是學校
js
//點擊輸入框后開始跳轉
onFocusInput:function(event){
var that = this;
console.log("eeee", event);
// var select = event.detail.value
if (event.currentTarget.dataset.typeName =='school'){
var select = that.data.school;
}else{
var select = that.data.industry;
}
console.log("select",select);
var typeName = event.currentTarget.dataset.typeName
console.log("type", typeName);
wx.navigateTo({
url: '../search/search?select=' + select + "&typeName=" + typeName
})
},
search.wxml
<view class='wrap-container'>
<view class='main-container'>
<view class='search-container'>
<input class='search-input' focus='true' placeholder="{{typeName == 'school' ? '搜索畢業學校' : '搜索所學專業'}}" bindinput='onSearchInput' focus='true' bindconfirm='onBindConfirm' value="{{typeName == 'school' ? school : industry}}"></input>
</view>
</view>
<view class='content-container'>
<scroll-view scroll-y style="height: {{screenHeight}}px;" class='content' >
<view class='content-li' wx:for='{{datasets}}' data-index="{{item}}" bindtap='selectIndex'>
{{item}}
</view>
</scroll-view>
</view>
</view>
search.js
//點擊完成后的函數
searchConfirmSuccess(res) {
var that = this;
this.setData({
datasets: res.data.data
})
var pages = getCurrentPages() //獲取當前加載的頁面
pages是一個數組棧，記錄著頁面的狀態以及data值
console.log("pages", pages)
var upToPage = pages[pages.length - 2] //獲取上一頁面的對象
// 設置上以頁面的data
if (that.data.typeName == 'school') {
upToPage.setData({
school: that.data.key
})
} else if (that.data.typeName == 'industry') {
upToPage.setData({
industry: that.data.key
})
}
wx.navigateBack({
// 返回的頁面數
data: 1
})
}
//點擊搜索之后的選擇項的函數
//搜索后進行點擊選擇
selectIndex(options){
console.log("eeee2222222222222", options)
var pages = getCurrentPages() //獲取加載的頁面
console.log("pages",pages)
var upToPage = pages[pages.length - 2] //獲取上一頁面的對象
var currentPage = pages[pages.length - 1] //獲取當前頁面的對象
var option = currentPage.options //如果要獲取url中所帶的參數可以查看options
console.log("555555555555555",option)
//點擊選擇框后選擇后的學校或者專業；根據option.typeName;
let select = options.currentTarget.dataset.index
console.log("location", select)
// 設置上以頁面的data
if (option.typeName == 'school') {
upToPage.setData({
school: select
})
} else if (option.typeName == 'industry') {
upToPage.setData({
industry: select
})
}
wx.navigateBack({
// 返回的頁面數
data: 1
})
},
小程序的canvas
小程序中不支持轉發到朋友圈，唯一個方式就是通過保存一張帶有二維碼的圖片，進行發送到朋友圈，這就用到了canvas畫出得到一張帶有二維碼的圖片，進行保存。
wxml
<canvas bindlongtap="saveImage" style="width:{{screenWidth}}px;height:{{screenHeight}}px;" canvas-id="qr-canvas" bindtouchend='bindEnd' disable-scroll = 'true' />
1. style是定義畫布的寬高
2. canvas-id 是定義canvas的唯一標識
3. bindtouchend 是觸摸結束之后觸發的函數，當成點擊函數
4. bindlongtap是長按canvas的觸發函數，可當做為長按保存
5. disable-scroll 是當前頁面禁止滾動，
比如我們就繪制一個這樣的圖片
image.png
其中只有可少奮斗4.1年是繪制上去的，其他的是圖片
//res是后臺返回的數據 小于10的數字保留一個小數，大于10 保留整數 因為canvas.measureText的計算的是字符串的長度，所以需要將數字進行數字化
// 可少奮斗多少年
if (Number(res.years_saved) < 10) {
var headerTextTwo = Number(res.years_saved).toFixed(1) + '';
} else {
var headerTextTwo = parseInt(res.years_saved) + '';
}
var headerTextOne = '可少奮斗'
var headerTextThree = '年'
//根據屏幕的寬度調整系數
var scale = that.data.screenWidth / that.data.DEF_IMAGE_HEADER_WIDTH
//繪制圖片
const ctx = wx.createCanvasContext('qr-canvas');
//計算第一個設置大小之后的長度
//大寫的都是事先設置好的字號 ctx.setFontSize(that.data.DEF_HEADER_TEXT_SIZE * scale)
var headerTextWidthOne = ctx.measureText(headerTextOne).width
//計算第三個設置大小之后的長度
ctx.setFontSize(that.data.DEF_HEADER_TEXT_SIZE * scale)
var headerTextWidthThree = ctx.measureText(headerTextThree).width
console.log("headerTextWidthThree", headerTextWidthThree)
//計算第二個設置大小之后的長度
ctx.setFontSize(that.data.DEF_HEADER_HEIGHT * scale)
var headerTextWidthTwo = ctx.measureText(headerTextTwo).width
console.log("headerTextWidthTwo6666666666666", headerTextWidthTwo)
//設置左外邊距 為了居中顯示
var marginLeftOne = (that.data.screenWidth - headerTextWidthOne - headerTextWidthTwo - headerTextWidthThree) / 2
//setFontSize 是設置字號的，setFillStyle 是設置字體顏色，每次設置都要設置一下字號和顏色，除非都一樣的字號和顏色。 ctx.setFontSize(that.data.DEF_HEADER_TEXT_SIZE * scale)
ctx.fillText(headerTextOne, marginLeftOne, that.data.DEF_HEADER_MARGIN_TOP * scale + 100 * scale)
//設置第二個文字的顏色
ctx.setFillStyle(that.data.canvasFontColor);
ctx.setFontSize(that.data.DEF_HEADER_HEIGHT * scale)
ctx.fillText(headerTextTwo, marginLeftOne + headerTextWidthOne, that.data.DEF_HEADER_MARGIN_TOP * scale + 100 * scale + 5 * scale)
//設置第三個文字的顏色
ctx.setFontSize(that.data.DEF_HEADER_TEXT_SIZE * scale)
ctx.setFillStyle('black');
ctx.fillText(headerTextThree, marginLeftOne + headerTextWidthOne + headerTextWidthTwo, that.data.DEF_HEADER_MARGIN_TOP * scale + 100 * scale)
//背景圖片的大小
ctx.drawImage(canvasHeader, 0, 0, that.data.DEF_IMAGE_HEADER_WIDTH * scale, that.data.DEF_IMAGE_HEADER_HEIGHT * scale);
//draw 可有可無里面的布爾值，當為false時，時清空畫布的內容，true是保留畫布的內容，也有回調函數。表示當畫布繪制完成
ctx.draw(true,function(res){
console.log("繪制完成")
})
//保存圖片
saveImage() {
console.log("我要保存圖片了")
var that = this
//小程序彈出的一個數組，最上層的index為0
wx.showActionSheet({
itemList: ['保存'],
success: res => {
if (res.tapIndex == 0) {
//小程序的圖片輸出一個路徑
wx.canvasToTempFilePath({
canvasId: 'qr-canvas',
success: res => {
console.log(res)
//保存圖片到相冊
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: res => {
console.log('saveImageToPhotosAlbum success', res)
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 3000
})
// that.cancel()
},
fail: res => {
console.log(JSON.stringify(res))
}
})
},
}, that)
}
}
})
},
是在工作當中出現的有canvas的一個bug存在，就是設定disable-scroll 之后，canvas的長按（bindlongtap）失效，所以如果設定start事件和end事件之間的差值做長按功能就會導致只有end結束之后才會觸發事件，有點傻，所以就只能去掉disable-scroll 事件，使用position定位使得canvas處于不同視線內。
<!--pages/analysis-canvas/analysis-canvas.wxml-->
<!-- <text>pages/analysis-canvas/analysis-canvas.wxml</text> -->
<view class='container' disable-scrool>
<canvas disable-scroll= 'true' style="width:{{screenWidth}}px;height:{{canvasCodeHeight}}px;position:absolute;top:-2000px;left:0;" canvas-id="qr-code-canvas" />
<canvas style="width:500px;height:400px;position:absolute;top:0;left:-5000px;" canvas-id="qr-share-canvas" />
<canvas bindlongtap="saveImage" style="width:{{screenWidth}}px;height:{{screenHeight}}px; position:absolute;top:0;left:0;" canvas-id="qr-canvas" bindtouchend='bindEnd' />
</view>
