小程序的爬坑之路

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

1.关于模板 template

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

  • 1.先建一个 template 的文件夹,新建 wxml,根据具体的路径引入进来,例如:
    1
    <import src="../template/line.wxml" />

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

注意:模板拥有自己的作用域,只能使用 data 传入的数据以及模版定义文件中定义的 模块。

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

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

2.1 水平居中

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

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

  • 其它元素可以使用
    1
    2
    3
    4
    5
    6
    ======3个一起使用==========
    text-align:center;
    align-items:center;
    justify-content: center;
    ==================
    margin:auto # 子容器在父容器中居中,单独使用

2.2 垂直居中

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

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

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

例如:像这样一行排四个
image.png

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

4. flex 布局

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

未完待续…..

-------------本文结束感谢您的阅读-------------