近期由于项目需要，需要编写小程序，遇到一些问题，记录下来，也是给自己开发的一个总结。

1.关于模板 template

在看完 官方文档 里的说明之后，我并没有成功使用，按照它那个设置完成后，一直说找不到，最后在知道，原来除了实例那些之外，还要在当前 wxml 中 import 进来。

• 1.先建一个 template 的文件夹，新建 wxml,根据具体的路径引入进来，例如：

<import src="../template/line.wxml" />

还有一个就是如果有相对应的 wxss文件，可在 app.wxss文件中引用，这样整个项目都不需要引用这个样式文件了。

注意：模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。

2. 关于水平居中，垂直居中

一开始感觉这啥玩意，不听话啊，让居中也不居中，就是不动啊，很是郁闷，后来发现了一些规律。

2.1 水平居中

• 首先如果是行内元素，例如 <text> 这样的，如果想水平居中，使用text-align:center 你会发现不好使啊，纹丝不动，原因是因为行内元素长度随内容变化，所以它不能让你在一行的中间，因为它的长度就是文字长度。

解决方案：可以换成view 控件，或者使用：display:block + text-align:center

• 其它元素可以使用

======3个一起使用==========
text-align:center;
align-items:center;
justify-content: center;
==================
margin:auto # 子容器在父容器中居中,单独使用

2.2 垂直居中

//可使用如下
display:flex;
align-items:center;
justify-content:center;

3.关于几个控件平分整个屏幕宽度问题

一开始我还想着获取屏幕的宽和高，然后再动态给控件设置具体的值，后来发现有更简单的做法

例如：像这样一行排四个

image.png

解决方案：设置控件的宽度为 ：25%，这样就自动平分啦。当然还有其它的方式，但是我认为百分比的这种写法感觉很直观。

4. flex 布局

熟练掌握 flexbox 布局，可以更轻松的编写任何常见的布局，可以查看相关专业的文章。

未完待续.....