圖片在微信小程序中可以說是一個神奇的存在。在web開發中，我們會利用圖片的自適應比如百分比而省去不少麻煩，因為高度會自適應。但是小程序中的圖片都有一個初始大小，而且是固定的，無論你的圖片多大多小，都是統一的 320px*240px 。雖然作為組件的圖片支持平鋪，剪切等呈現效果，但是容器大小都是固定的，所以每次使用 image 我們要想辦法控制圖片的大小。

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

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

image{
  width: 128rpx;
  height: 128rpx;
}
復制代碼

動態計算（用于多種不同尺寸的圖片）

如果遇到了內容頁這種，不知道圖片固定尺寸的情況，就只能根據在后端給的圖片尺寸，然后在JS中換算，通過setData設置圖片大小。

this.setData({
  imageWidth: 200,
  imageHeight: 200
})
復制代碼

<image style="width:{{imageWidth}}rpx;height:{{imageHeight}}rpx" src="..."></image>
復制代碼

動態布局

如果你的頁面需要根據當前頁面，計算的高度和寬度，那么頁面一定會閃以下，因為 wx.getSystemInfo 是異步的。

wx.getSystemInfo({
  success (res) {
    console.log(res.pixelRatio)
    console.log(res.windowWidth)
    console.log(res.windowHeight)
  }
})
復制代碼

如果像解決這個問題，我們可以這樣，設置一個isLoaded的參數，等頁面加載好了再顯示。

<block wx:if="{{isLoaded}}">
</block>
<block wx:else>
</block>
復制代碼

當然還有一個方法叫做同部 wx.getSystemInfoSync ，這樣就不會像異步那樣閃了。

try {
  const res = wx.getSystemInfoSync()
  console.log(res.pixelRatio)
  console.log(res.windowWidth)
  console.log(res.windowHeight)
} catch (e) {
  // Do something when catch error
}
復制代碼

高度100%問題

如何高度百分百，這里如果page相當于html如果不是100%，那么即使內部元素設置高度100%也是無效的，因為百分比是相對父元素而定的。如果這張頁面只用于一屏的，那么我們可以page設置高度100%，但是如果這張頁面我們只是loading的時候需要100%，那么這個時候我們可以使用vh這個單位，vh相當于把屏幕的高度分為了100份，因此我們100vh就是滿屏的意思。

.onePageWrapper{
  height: 100vh;
}
復制代碼

part 2: 復用問題

CSS復用問題，wxss復用

有時候，我們不想寫重復的CSS，但是又不想寫在全局app.wxss中。我們只是有幾張頁面需要共享，這個時候可以創建一個wxss，然后導入當前頁面的wxss。就像下方這樣導入就可以了。

@import'../public.wxss';
復制代碼

模板復用問題，wxml復用

重復兩遍以上的都用模板。同樣為了解決重復問題，我們可以定義模板，然后引入模板調用模板，這樣可以極大地減少重復代碼。

定義模板時，使用 <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>
復制代碼

使用模板時，使用 <template is="usertop"/> 。如果是模板的定義和使用在同一張頁面上則不需要導入，如果是不同頁面則需要使用導入 <import src="../tpl/usertop.wxml" /> 。當然模板是需要傳輸數據的，我們該如何傳遞參數呢？很簡單，直接 data="{{userInfo}}" ，加上這個參數，我們可以在模板中調用名為 userInfo 的對象了。如果是多個對象？而且想要將函數也傳遞過去保定呢？可以這樣寫 data="{{userInfo,bindGetUserInfo}}" ，直接將你想要傳遞的參數通過 , 分割，掉用的時候 bindgetuserinfo="bindGetUserInfo" 即可。

<import src="../tpl/usertop.wxml" />
<template is="usertop" data="{{userInfo}}"/>
復制代碼

應用組件復用，wxml+wxss+js復用

官方文檔

如果CSS復用和WXML已經不能滿足復用的問題，自定義組件滿足你。比如有個按鈕，每張頁面都有，而且都需要點擊回應相應的操作，如果每個頁面配置，js就需要復制復制復制。如果是自定義組件，直接調用即可。而且自定義組件不僅Page可以調用，組件之間也可以互相調用，只需再json中配置既可以輕松調用。

首先是創建組件：

然后在json中配置，告訴其他頁面我是不是組件，以及配置頁面需要用到的組件。

{
  "component": true,//如果是組件
  "usingComponents": {
    "my-component-btn": "/component/my-component-btn"//調用的組件
  }
}
復制代碼

配置成功之后，直接在wxml中當作原生組件一般使用：

<my-component-btn></my-component-btn>
復制代碼

part 3:優雅地生成分享

有時候會通過canvas來創建分享圖片，讓用戶下載分享。

步驟：

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

drawCanvas: function (url) {
	wx.downloadFile({
		url: url, //僅為示例，并非真實的資源
		success: function (res) {
			if (res.statusCode === 200) {
				const ctx = wx.createCanvasContext('myCanvas')
				//隨意畫畫
				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: '', // 當前顯示圖片的http鏈接
								urls: [res.tempFilePath]
							})
						},
						fail: (res) => {
						    //失敗的操作
						}
					})
				},1000)
			}
		}
	})
}
復制代碼