圖片在微信小程序中可以說(shuō)是一個(gè)神奇的存在。在web開(kāi)發(fā)中，我們會(huì)利用圖片的自適應(yīng)比如百分比而省去不少麻煩，因?yàn)楦叨葧?huì)自適應(yīng)。但是小程序中的圖片都有一個(gè)初始大小，而且是固定的，無(wú)論你的圖片多大多小，都是統(tǒng)一的 320px*240px 。雖然作為組件的圖片支持平鋪，剪切等呈現(xiàn)效果，但是容器大小都是固定的，所以每次使用 image 我們要想辦法控制圖片的大小。

css控制（大小固定的圖片）

用CSS控制一部分固定比例的圖片，我們可以使用微信自帶的單位 rpx 來(lái)固定。

image{
  width: 128rpx;
  height: 128rpx;
}
復(fù)制代碼

動(dòng)態(tài)計(jì)算（用于多種不同尺寸的圖片）

如果遇到了內(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ù)制代碼

動(dòng)態(tài)布局

如果你的頁(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ù)制代碼

高度100%問(wèn)題

如何高度百分百，這里如果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ù)制代碼

part 2: 復(fù)用問(wèn)題

CSS復(fù)用問(wèn)題，wxss復(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ù)用問(wèn)題，wxml復(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ù)制代碼

應(yīng)用組件復(fù)用，wxml+wxss+js復(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ù)制代碼

part 3:優(yōu)雅地生成分享

有時(shí)候會(huì)通過(guò)canvas來(lái)創(chuàng)建分享圖片，讓用戶(hù)下載分享。

步驟：

• wx.downloadFile ，所需的遠(yuǎn)程圖片（如果需要）
• 敲黑板！ wx.createCanvasContext 創(chuàng)建一個(gè)canvas對(duì)象，獲取 <canvas canvas-id="myCanvas" style="width:750px; height:1098px;"/> ，這里需要主要注意你所創(chuàng)建的圖片要和canvas一樣大小，不然出來(lái)的圖片不完整，如果不在wxml中創(chuàng)建canvas，那么是獲取不到生成的圖片的。
• 隨意畫(huà)畫(huà)，和H5的canvas語(yǔ)法差不多
• wx.canvasToTempFilePath 最后是生成到臨時(shí)文件，不過(guò)這邊有一個(gè)坑，需要setTimetout一下，應(yīng)該是eventloop的原因差不多1秒的延遲就可以了。如果直接獲取是獲取不到圖片的。
• 最后使用 wx.previewImage 直接打開(kāi)圖片。

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ù)制代碼