微信小程序|微信小程序学习之旅--第一个页面的制作微信|javascript|uni-app|es6|小程序

文章目录

微信小程序入门(一)
- 项目结构解读
- - 每个文件的功能
  - - xxx.js(index.js)文件
    - xxx.json(index.json)
    - xxx.wxml(index.wxml)
    - xxx.wxss(index.wxss)
    - 总结
    - 文件约定
- 文档结构解读
- 小程序入门
- - 删除项目结构
  - 小程序页面的搭建技巧和规则
  - - 新建app.json
  - 小程序必备语法
  - - 1. 如何显示一张图片
    - 2. 文本
    - 3. 按钮
    - 单位rpx
  - 完成第一个页面布局
  - - 配置小程序导航头部样式
    - 页面样式
    - 页面样式代码
- 下一篇

微信小程序入门(一) 项目结构解读

文章图片

我们发现，页面页面一般有4个文件组成
每个文件的功能
xxx.js(index.js)文件该文件完成业务逻辑的书写。
xxx.json(index.json) 该文件用来进行一些页面的配置。有些时候我们不需要书写样式等代码，而是在json文件里面进行一定的配置，就可以达到我们想要的效果。比如：我们修改一下顶部导航栏的颜色，就可以在JSON文件里面配置。这种配置机制在我们前端的开发中不常见。

文章图片

xxx.wxml(index.wxml) 该文件用来书写页面的骨架。类似于html。
xxx.wxss(index.wxss) 该文件用来书写页面的样式。类似于css。
总结其实，这四个文件并不都是必须都要存在的，比如我们的页面每页样式，那么wxss文件就不是必须的。所以说，除了页面的骨架wxml，其他文件都不是必须的。
文件约定如果我们这个页面的四个文件的名称相同（后缀不同），都是index.后缀的文件，那么我们文件之间的相互调用是不需要进行导入的。而是可以直接使用其他文件的内容。
综上所述：我们建立一个新的页面最好也采用这种约定速成的方式。

文章图片

文档结构解读

文章图片

文件app.js,app.json,app.wxss这三个文件的名称是不能修改的。作用和上面相同文件类型的作用一样。但是这三个文件可以控制整个微信小程序（也就是应用程序级别的）的样式和业务逻辑等。而上面介绍的文件只能控制所属的页面。
虽然这三个文件配置的样式等是全局的，但是如果配置的全局样式和局部样式有冲突，以页面的局部样式为主。

文章图片

文件project.config.json是用来记录当前项目的配置，设置的。
sitemap.json是来做微信小程序搜索的。暂时不做了解。
小程序入门删除项目结构
首先我们删除项目中的其他文件，只保留 project.config.json，sitemap.json这两个文件

文章图片

小程序页面的搭建技巧和规则
当我们删除项目结构，只保留这两个文件以后，发现在调试区域会报错。提醒我们没有app.json文件。

文章图片

上面我们说过，app.json文件是在微信小程序开发项目中，必须存在的文件。
新建app.json

新建json文件以后，会提醒我们json文件不能为空

文章图片

写一个空的花括号以后，会报错提醒我们，必须有pages属性，且pages属性必须为数组。（页面肯定不止一个，注意：json文件里面不可写注释。小程序的页面只有在app.json里面注册以后才能被访问。）

文章图片

有该属性后，一样报错。很明显，找不到页面。

文章图片
新建页面，新建pages文件夹，在下面再建index文件夹。我们知道了每个页面都有四个文件，但是我们需要一个个新建吗？不需要的。只需要邮件单击index文件夹，然后点新建page，填写文件名称即可，不需要写后缀，自动帮我们建好四个文件。且在app.json文件的pages属性里面完成了页面的注册。

文章图片

文章图片

**注意：页面文件只需要写index，小程序会默认帮我们找到名称为index的四个文件。**且小程序的默认首页就是第一个注册的页面。
例如，我们在新建一个welcome页面，并将其第一个注册，放在index页面前面，发现默认页面就是welcome了

文章图片

小程序必备语法
1. 如何显示一张图片 **我们指知道，在html中，可以使用img标签来显示图片，在小程序中，我们使用的是**标签。使用src属性引用图片。
2. 文本使用标签包裹我们想要显示的文字。
3. 按钮和html一样，都是使用标签

文章图片

文章图片

我们发现：这个头像是椭圆形的，而实际上我们的头像图片是圆形的。为什么默认情况变成的椭圆形？思考一下

文章图片

单位rpx 我们在微信小程序里面，设置样式的时候，推荐使用rpx单位，而不是px单位。
因为：单位：rpx 会自适应屏幕的尺寸等，给我们一种很舒服的视觉体验，换了机型会自适应大小。而使用px为单位，就会固定死大小，即使切换了机型，分辨率发生了改变，大小也不会改变。

你好：听雨少年！

当然，你也可以选择使用px为单位，但是我们需要在设置大小的时候，将数值设置为图片实际大小的1/2。这是建立在以iPhone6机型为原型图的基础上。

文章图片

回到开始的问题：头像在默认情况下为什么变成椭圆形或者不是我们图片默认的形状？
因为：image标签（组件）有默认样式

文章图片

图片建议使用png格式！！！
完成第一个页面布局
配置小程序导航头部样式

文章图片

我们觉得这种默认的样式很难看，可以在app.json文件里面配置这个头部的样式

"window": { "navigationBarBackgroundColor": "#b3d4db" },

文章图片

页面样式

文章图片

页面样式代码

听雨少年开启小程序之旅

/* pages/welcome/welcome.wxss *//* 单位：rpx 会自适应屏幕的尺寸等，给我们一种很舒服的视觉体验，换了机型会自适应大小 */ /* 顶层容器page，设置背景色 */ page { background-color: #b3d4db; }/* 外层容器 */ .container { /* 开启弹性布局 */ display: flex; /* 排列方向，垂直排列 */ flex-direction: column; /* 在排列方向的侧轴上居中 */ align-items: center; }/* 设置头像样式 */ .user-avatar { width: 220rpx; height: 220rpx; border-radius: 50% 50%; margin-top: 160rpx; }/* 昵称 */ .motto { /* color:#666; */ margin-top: 100px; font-size: 36rpx; font-weight: bold; }/* 设置模拟的按钮外边框 */ .btn-journey-container { margin-top: 150rpx; border: 1rpx solid #405f80; width: 200rpx; height: 80rpx; border-radius: 10px; /* 文字居中 */ text-align: center; }/* 按钮文字 */ .journey { font-size: 24rpx; color: #405f80; line-height: 80rpx; font-weight: bold; }