圖片在微信小程序中可以說(shuō)是一個(gè)神奇的存在。在web開(kāi)發(fā)中,我們會(huì)利用圖片的自適應(yīng)比如百分比而省去不少麻煩,因?yàn)楦叨葧?huì)自適應(yīng)。但是小程序中的圖片都有一個(gè)初始大小,而且是固定的,無(wú)論你的圖片多大多小,都是統(tǒng)一的 320px*240px 。雖然作為組件的圖片支持平鋪,剪切等呈現(xiàn)效果,但是容器大小都是固定的,所以每次使用 image 我們要想辦法控制圖片的大小。
用CSS控制一部分固定比例的圖片,我們可以使用微信自帶的單位 rpx 來(lái)固定。
image{ width: 128rpx; height: 128rpx; } 復(fù)制代碼
如果遇到了內(nèi)容頁(yè)這種,不知道圖片固定尺寸的情況,就只能根據(jù)在后端給的圖片尺寸,然后在JS中換算,通過(guò)setData設(shè)置圖片大小。
this.setData({ imageWidth: 200, imageHeight: 200 }) 復(fù)制代碼
<image style="width:{{imageWidth}}rpx;height:{{imageHeight}}rpx" src="..."></image> 復(fù)制代碼
如果你的頁(yè)面需要根據(jù)當(dāng)前頁(yè)面,計(jì)算的高度和寬度,那么頁(yè)面一定會(huì)閃以下,因?yàn)?nbsp;wx.getSystemInfo 是異步的。
wx.getSystemInfo({ success (res) { console.log(res.pixelRatio) console.log(res.windowWidth) console.log(res.windowHeight) } }) 復(fù)制代碼
如果像解決這個(gè)問(wèn)題,我們可以這樣,設(shè)置一個(gè)isLoaded的參數(shù),等頁(yè)面加載好了再顯示。
<block wx:if="{{isLoaded}}"> </block> <block wx:else> </block> 復(fù)制代碼
當(dāng)然還有一個(gè)方法叫做同部 wx.getSystemInfoSync ,這樣就不會(huì)像異步那樣閃了。
try { const res = wx.getSystemInfoSync() console.log(res.pixelRatio) console.log(res.windowWidth) console.log(res.windowHeight) } catch (e) { // Do something when catch error } 復(fù)制代碼
如何高度百分百,這里如果page相當(dāng)于html如果不是100%,那么即使內(nèi)部元素設(shè)置高度100%也是無(wú)效的,因?yàn)榘俜直仁窍鄬?duì)父元素而定的。如果這張頁(yè)面只用于一屏的,那么我們可以page設(shè)置高度100%,但是如果這張頁(yè)面我們只是loading的時(shí)候需要100%,那么這個(gè)時(shí)候我們可以使用vh這個(gè)單位,vh相當(dāng)于把屏幕的高度分為了100份,因此我們100vh就是滿(mǎn)屏的意思。
.onePageWrapper{ height: 100vh; } 復(fù)制代碼
有時(shí)候,我們不想寫(xiě)重復(fù)的CSS,但是又不想寫(xiě)在全局app.wxss中。我們只是有幾張頁(yè)面需要共享,這個(gè)時(shí)候可以創(chuàng)建一個(gè)wxss,然后導(dǎo)入當(dāng)前頁(yè)面的wxss。就像下方這樣導(dǎo)入就可以了。
@import'../public.wxss'; 復(fù)制代碼
重復(fù)兩遍以上的都用模板。同樣為了解決重復(fù)問(wèn)題,我們可以定義模板,然后引入模板調(diào)用模板,這樣可以極大地減少重復(fù)代碼。
定義模板時(shí),使用 <template name="usertop"></template> 。
<template name="usertop"> <image src='{{userInfo.avatarUrl}}'></image> <text>{{userInfo.nickName}}</text> <view>{{userInfo.userRank.name}}</view> <view class='rankLevelText'>LV<text>{{userInfo.level}}</text></view> <view class='userExper' style='width:{{userInfo.bar}}'></view> </template> 復(fù)制代碼
使用模板時(shí),使用 <template is="usertop"/> 。如果是模板的定義和使用在同一張頁(yè)面上則不需要導(dǎo)入,如果是不同頁(yè)面則需要使用導(dǎo)入 <import src="../tpl/usertop.wxml" /> 。當(dāng)然模板是需要傳輸數(shù)據(jù)的,我們?cè)撊绾蝹鬟f參數(shù)呢?很簡(jiǎn)單,直接 data="{{userInfo}}" ,加上這個(gè)參數(shù),我們可以在模板中調(diào)用名為 userInfo 的對(duì)象了。如果是多個(gè)對(duì)象?而且想要將函數(shù)也傳遞過(guò)去保定呢?可以這樣寫(xiě) data="{{userInfo,bindGetUserInfo}}" ,直接將你想要傳遞的參數(shù)通過(guò) , 分割,掉用的時(shí)候 bindgetuserinfo="bindGetUserInfo" 即可。
<import src="../tpl/usertop.wxml" /> <template is="usertop" data="{{userInfo}}"/> 復(fù)制代碼
官方文檔
如果CSS復(fù)用和WXML已經(jīng)不能滿(mǎn)足復(fù)用的問(wèn)題,自定義組件滿(mǎn)足你。比如有個(gè)按鈕,每張頁(yè)面都有,而且都需要點(diǎn)擊回應(yīng)相應(yīng)的操作,如果每個(gè)頁(yè)面配置,js就需要復(fù)制復(fù)制復(fù)制。如果是自定義組件,直接調(diào)用即可。而且自定義組件不僅Page可以調(diào)用,組件之間也可以互相調(diào)用,只需再json中配置既可以輕松調(diào)用。
首先是創(chuàng)建組件:
然后在json中配置,告訴其他頁(yè)面我是不是組件,以及配置頁(yè)面需要用到的組件。
{ "component": true,//如果是組件 "usingComponents": { "my-component-btn": "/component/my-component-btn"//調(diào)用的組件 } } 復(fù)制代碼
配置成功之后,直接在wxml中當(dāng)作原生組件一般使用:
<my-component-btn></my-component-btn> 復(fù)制代碼
有時(shí)候會(huì)通過(guò)canvas來(lái)創(chuàng)建分享圖片,讓用戶(hù)下載分享。
步驟:
drawCanvas: function (url) { wx.downloadFile({ url: url, //僅為示例,并非真實(shí)的資源 success: function (res) { if (res.statusCode === 200) { const ctx = wx.createCanvasContext('myCanvas') //隨意畫(huà)畫(huà) ctx.drawImage(res.tempFilePath, 0, 0, 750, 1098) ctx.setFontSize(56) ctx.setFillStyle("#fff") ctx.setTextAlign("center"); ctx.fillText("自定義文字", 375, 100) ctx.draw(); setTimeout(function () { wx.canvasToTempFilePath({ canvasId: 'myCanvas', success: function (res) { console.log("save"); wx.previewImage({ current: '', // 當(dāng)前顯示圖片的http鏈接 urls: [res.tempFilePath] }) }, fail: (res) => { //失敗的操作 } }) },1000) } } }) } 復(fù)制代碼
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)