开发小程序的一些小经验

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)
			}
		}
	})
}
复制代码