小程序--一些工作中的比較實(shí)用的知識(shí)點(diǎn)

小程序-- 工作中一些比較實(shí)用的知識(shí)點(diǎn)

小程序中設(shè)置背景圖片

小程序中不能通過css的background 設(shè)置小程序的背景圖片

    .container{
        background-image:url(../back.jpg)
    }

這樣小程序是識(shí)別不出來。
目前是通過image的標(biāo)簽進(jìn)行設(shè)置背景圖,但是src也只支持本地圖片，不支持網(wǎng)絡(luò)圖片，如果要實(shí)用網(wǎng)絡(luò)圖片，只能通過一個(gè)wx.downloadFile這個(gè)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

在本頁面改變上一頁面的值

此需求類似于點(diǎn)擊輸入框 ( 使用text寫，而不是input，會(huì)彈出小鍵盤的 ) 進(jìn)入一個(gè)搜索的頁面，搜索完成后點(diǎn)擊選擇項(xiàng)或者點(diǎn)擊小鍵盤的右下角都會(huì)返回上一頁面，點(diǎn)擊選擇項(xiàng)的值或者搜索的值要顯示在輸入框中；我做的就是在搜索框完成后把搜索完成的值傳到上一頁面。


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 : '請(qǐng)輸入畢業(yè)學(xué)校'}}</text>
</view>
 data-type-name 是識(shí)別哪一個(gè)輸入框的。
 使用三元運(yùn)算符來顯示空還是學(xué)校
 js

  //點(diǎn)擊輸入框后開始跳轉(zhuǎn)
  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' ? '搜索畢業(yè)學(xué)校' : '搜索所學(xué)專業(yè)'}}" 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
//點(diǎn)擊完成后的函數(shù)
  searchConfirmSuccess(res) {
    var that = this;
    this.setData({
      datasets: res.data.data
    })

    var pages = getCurrentPages()    //獲取當(dāng)前加載的頁面
    pages是一個(gè)數(shù)組棧，記錄著頁面的狀態(tài)以及data值
    console.log("pages", pages)
    var upToPage = pages[pages.length - 2]    //獲取上一頁面的對(duì)象
    
    // 設(shè)置上以頁面的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({
      // 返回的頁面數(shù)
      data: 1
    })
    }
//點(diǎn)擊搜索之后的選擇項(xiàng)的函數(shù)
//搜索后進(jìn)行點(diǎn)擊選擇
  selectIndex(options){
    console.log("eeee2222222222222", options)
    var pages = getCurrentPages()    //獲取加載的頁面
    console.log("pages",pages)
    var upToPage = pages[pages.length - 2]    //獲取上一頁面的對(duì)象

    var currentPage = pages[pages.length - 1]  //獲取當(dāng)前頁面的對(duì)象

    var option = currentPage.options    //如果要獲取url中所帶的參數(shù)可以查看options

    console.log("555555555555555",option)
    //點(diǎn)擊選擇框后選擇后的學(xué)校或者專業(yè)；根據(jù)option.typeName;
      let select = options.currentTarget.dataset.index
      console.log("location", select)
    // 設(shè)置上以頁面的data
    if (option.typeName == 'school') {
      upToPage.setData({
        school: select
      })
   
    } else if (option.typeName == 'industry') {
      upToPage.setData({
        industry: select
      })
    }
    wx.navigateBack({
      // 返回的頁面數(shù)
      data: 1
    })


    },

小程序的canvas

小程序中不支持轉(zhuǎn)發(fā)到朋友圈，唯一個(gè)方式就是通過保存一張帶有二維碼的圖片，進(jìn)行發(fā)送到朋友圈，這就用到了canvas畫出得到一張帶有二維碼的圖片，進(jìn)行保存。

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的唯一標(biāo)識(shí)
 3. bindtouchend 是觸摸結(jié)束之后觸發(fā)的函數(shù)，當(dāng)成點(diǎn)擊函數(shù)
 4. bindlongtap是長按canvas的觸發(fā)函數(shù)，可當(dāng)做為長按保存
 5. disable-scroll 是當(dāng)前頁面禁止?jié)L動(dòng)，

比如我們就繪制一個(gè)這樣的圖片


image.png

其中只有可少奮斗4.1年是繪制上去的，其他的是圖片

//res是后臺(tái)返回的數(shù)據(jù) 小于10的數(shù)字保留一個(gè)小數(shù)，大于10 保留整數(shù) 因?yàn)閏anvas.measureText的計(jì)算的是字符串的長度，所以需要將數(shù)字進(jìn)行數(shù)字化

    // 可少奮斗多少年
    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 = '年'
    //根據(jù)屏幕的寬度調(diào)整系數(shù)
    var scale = that.data.screenWidth / that.data.DEF_IMAGE_HEADER_WIDTH
    //繪制圖片
    const ctx = wx.createCanvasContext('qr-canvas');
    

    //計(jì)算第一個(gè)設(shè)置大小之后的長度
//大寫的都是事先設(shè)置好的字號(hào)    ctx.setFontSize(that.data.DEF_HEADER_TEXT_SIZE * scale)
    var headerTextWidthOne = ctx.measureText(headerTextOne).width

    //計(jì)算第三個(gè)設(shè)置大小之后的長度
    ctx.setFontSize(that.data.DEF_HEADER_TEXT_SIZE * scale)
    var headerTextWidthThree = ctx.measureText(headerTextThree).width

    console.log("headerTextWidthThree", headerTextWidthThree)
    //計(jì)算第二個(gè)設(shè)置大小之后的長度
    ctx.setFontSize(that.data.DEF_HEADER_HEIGHT * scale)
    var headerTextWidthTwo = ctx.measureText(headerTextTwo).width
    console.log("headerTextWidthTwo6666666666666", headerTextWidthTwo)
    
    //設(shè)置左外邊距 為了居中顯示
    var marginLeftOne = (that.data.screenWidth - headerTextWidthOne - headerTextWidthTwo - headerTextWidthThree) / 2

//setFontSize 是設(shè)置字號(hào)的，setFillStyle 是設(shè)置字體顏色，每次設(shè)置都要設(shè)置一下字號(hào)和顏色，除非都一樣的字號(hào)和顏色。    ctx.setFontSize(that.data.DEF_HEADER_TEXT_SIZE * scale)
    ctx.fillText(headerTextOne, marginLeftOne, that.data.DEF_HEADER_MARGIN_TOP * scale + 100 * scale)

    //設(shè)置第二個(gè)文字的顏色
    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)

    //設(shè)置第三個(gè)文字的顏色
    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 可有可無里面的布爾值，當(dāng)為false時(shí)，時(shí)清空畫布的內(nèi)容，true是保留畫布的內(nèi)容，也有回調(diào)函數(shù)。表示當(dāng)畫布繪制完成
ctx.draw(true,function(res){
    console.log("繪制完成")
})

 //保存圖片
  saveImage() {
    console.log("我要保存圖片了")
    var that = this
    //小程序彈出的一個(gè)數(shù)組，最上層的index為0 
    wx.showActionSheet({
      itemList: ['保存'],
      success: res => {
        if (res.tapIndex == 0) {
            //小程序的圖片輸出一個(gè)路徑
          wx.canvasToTempFilePath({
            canvasId: 'qr-canvas',
            success: res => {
              console.log(res)
              //保存圖片到相冊(cè)
              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)
        }
      }
    })

  },

是在工作當(dāng)中出現(xiàn)的有canvas的一個(gè)bug存在，就是設(shè)定disable-scroll 之后，canvas的長按（bindlongtap）失效，所以如果設(shè)定start事件和end事件之間的差值做長按功能就會(huì)導(dǎo)致只有end結(jié)束之后才會(huì)觸發(fā)事件，有點(diǎn)傻，所以就只能去掉disable-scroll 事件，使用position定位使得canvas處于不同視線內(nèi)。

<!--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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,030評(píng)論 25贊 709
  • 每個(gè)人在人生的階段里，都會(huì)有一個(gè)叛逆期，可能出現(xiàn)在少年，青年，亦或老年，而我的叛逆期就出現(xiàn)在和你相遇的那一刻。 那...
    小姐姐很拽閱讀 223評(píng)論 0贊 0
  • 春節(jié)的那幾天里天氣一直陰沉，太陽能熱水器出不了熱水，洗澡就成了問題，母親說，橋頭的澡堂子又重新開了，就尋思著帶我去...
    禾月heyue閱讀 639評(píng)論 0贊 0
  • “河流，蜿蜒的從源頭到下游，村莊和集市猶如瓜果生在藤上依偎左右”我的家鄉(xiāng)就是一個(gè)這樣的地方，所以歷來大家喜好釣魚，...
    龍囧子閱讀 418評(píng)論 2贊 10
  • 觀察者模式類圖 觀察者模式也稱監(jiān)聽器模式 當(dāng)我們對(duì)某一個(gè)對(duì)象的某一些狀態(tài)感興趣時(shí)，希望在任何時(shí)刻獲取其狀態(tài)的改變 ...
    jackLee閱讀 351評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容