从零开始写小程序启动界面

我们创建微信小程序都是有默认的启动界面的,我现在把它默认的文件都删除了,因为是新手么,所以想自己练练,然后我们要创建app.js ,app.json,app.wxss这三个配置文件

然后点击对应的,创建文件就可以了

比如我新建了如下项目结构：

然后我们在welocme.wxml中写一个文件控件显示hello world

<view>

<text>hello world</text>

</view>

然后运行起来.

打开调试器发现报错了,那么因为小程序不知道你启动的是哪一个界面,这就好比我们创建了一个activity,然后你跳转过去,但是你没在mainfest.xml文件中配置,这个时候就要报错,那么这个怎么解决呢？一般二种解决方案,你之前创建的小程序 去app.json中找相关配置 然后修改,还有就是去官网文档查找。

{

"pages":[

"page/welcome/welcome"

]

}

这是指定小程序入口的地方，ok,这就是创建了一个小程序启动界面了.

UI布局在wxml中写就可以了，

<view class='container'>

<image src="/images/header.png" class='user_image'></image>

<text>helloworld</text>

<view>

<text style=''>开启小程序旅程</text>

</view>

</view>

标签image显示图片  text显示文本   view看做是容器 但是想修改控件的样式 就要用到css了,css的定义在wxss文件中定义,使用在控件上是通过class属性。没点前端基础的人，可以去学习下html+css+JavaScript语法,不然很多东西都看不懂.

.container{

display: flex;

flex-direction: column;

align-items: center;

}

.user_image{

width: 200rpx;

height: 200rpx;

margin-top: 160rpx;

}

这就是我们简单的界面,不包括业务逻辑

在微信小程序中 文本的大小是用rpx单位,具体后面会专门讲这个单位的意义