小程序--一些工作中的比较实用的知识点

小程序-- 工作中一些比较实用的知识点

小程序中设置背景图片

小程序中不能通过css的background 设置小程序的背景图片

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

这样小程序是识别不出来。
目前是通过image的标签进行设置背景图,但是src也只支持本地图片,不支持网络图片,如果要实用网络图片,只能通过一个wx.downloadFile这个api把图片下载到本地才可以

  
    
  
  
.head {
  width: 100%;
  height: 492rpx;
}

.head-img {
  width: 100%;
  height: 100%;
}
如果要定位的就父层使用position:relative图片层使用position:absolute

在本页面改变上一页面的值

此需求类似于点击输入框 ( 使用text写,而不是input,会弹出小键盘的 ) 进入一个搜索的页面,搜索完成后点击选择项或者点击小键盘的右下角都会返回上一页面,点击选择项的值或者搜索的值要显示在输入框中;我做的就是在搜索框完成后把搜索完成的值传到上一页面。


image.png
image.png
image.png
wxml

    {{school ?school : '请输入毕业学校'}}

 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

  
    
      
    
  
  
    
      
        {{item}}
      
    
  


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

    
 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处于不同视线内。




    

    

    


你可能感兴趣的:(小程序--一些工作中的比较实用的知识点)