開發小程序的一些小經驗

part 1： 樣式問題

圖片問題

圖片在微信小程序中能夠說是一個神奇的存在。在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)
			}
		}
	})
}
複製代碼