刚开始，先进行一个demo的学习。
原文链接：https://blog.csdn.net/lu_embedded/article/details/86181251
项目目录结构
微信小程序的基本文件构造和项目目录结构说明如下：
.
├── app.js # 小程序的逻辑文件
├── app.json # 小程序的配置文件
├── app.wxss # 全局公共样式文件
├── pages # 存放小程序的各个页面
│ ├── index # index页面
│ │ ├── index.js # 页面逻辑
│ │ ├── index.wxml # 页面结构
│ │ └── index.wxss # 页面样式表
│ └── logs # logs页面
│ ├── logs.js # 页面逻辑
│ ├── logs.json # 页面配置
│ ├── logs.wxml # 页面结构
│ └── logs.wxss # 页面样式表
├── project.config.json
└── utils
└── util.js
页头页尾
pages 属性用来设置页面路径，它是一个数组，每一项都是字符串来指定小程序由哪些页面组成。数组的第一项代表小程序的初始页面。小程序中新增或减少页面，都需要对 pages 数组进行修改。
window 属性用于设置小程序的状态栏、导航条、标题、窗口背景色。
我们把页头的标题和颜色修改一下，页尾部分我们做一个 tab 栏来切换页面，这个属性叫做 tabBar，代码如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| {
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#2f2f8f",
"navigationBarTitleText": "GoZeroWaste", # 标题
"navigationBarTextStyle":"white"
},
"tabBar":{
"color": "#bfc1ab",
"selectedColor": "#13b11c",
"backgroundColor": "#1f1f4f",
"list": [ # 导航栏的两个按钮
{
"pagePath": "pages/index/index",
"iconPath": "image/icon_component.png", # 第一个按钮的图标
"selectedIconPath": "image/icon_component_HL.png", # 选择第二个按钮后第一个的按钮的图标
"text": "个人中心" # 按钮的名字
},
{
"pagePath": "pages/details/details",
"iconPath": "image/icon_API.png", # 第二个按钮的图标
"selectedIconPath": "image/icon_API_HL.png", # 选择第一个按钮后第二个的按钮的图标
"text": "生活指南" # 按钮的名字
}
]
}
}
|
（所用到的图片放在项目的 image 目录，你也可以使用自己的图片）
这里用到几个 tabBar 的属性是 color、selectedColor、backgroundColor 和 list，list 是一个数组，主要用于设定导航的路径。
因为导航栏中一个按钮关联的是另一个页面，但是这个页面还没有存在，所以我们需要在app.json文件的list中直接添加，修改app.json文件：
1
2
3
4
5
6
7
| {
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/details/details"
],
|
CTRL + S 保存之后，模拟器就会自动刷新，马上可以看到效果。
保存刷新之后就会发现，目录结构里自动创建了这一页。
简单起见，我们就在 pages/index 目录下实现 “个人中心” 页面好了。双击打开 index.wxml，初始内容如下：
这里已经有一些代码了，虽然现在可能还看不懂，但我们知道，这就是现在页面的源代码。我们把 “Hello World” 部分注释掉，增加我们希望显示的内容：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="ID_Badge">
<view>
<text class="ID_info">{{company}}</text>
</view>
<view>
<text class='ID_info'>{{position}}</text>
</view>
<view>
<text class='ID_info'>{{lesson}}</text>
</view>
</view>
</view>
|
1
2
3
4
5
6
| 发现HTML的几种特性，自己总结的：
1.一个标签出现之后会有一个相同的带反斜线的作为结尾，所以每一个标签都是成对出现的比如：<view></view> <text></text>
2.在一个标签可以修饰一个变量，然后这个变化的量有一个类，用class来说明，比如<view class = "ID_Badge"> <text class = "ID_info">
3.一个变量可以与.js文件中的date中的值相互关联，所以html只作为一个最前面的一个框架的作用，后面的.js文件支撑整个页面逻辑。
4.只有html文件和js文件并不行，每一个类都需要在本页面的css文件内进行声明，并且设置这个类的样式属性。
5.每一个text或者image的标签必须被一对view标签包围。
|
