Introduction to Mini Program Development[1]
2024-04-21 00:48:08 #Notes

腾讯校园技术布道师

小程序开发入门

0x01 文件结构与页面组成

0x001 小程序的页面组成

在每一个页面文件夹里都有四个文件，这四个文件的名称都是一样的，它们分别为：

  • json文件，和上面的app.json作用基本相同，只是app.json控制的是整个小程序的设置，而页面的json文件只控制单个页面的配置（因为有时候全局配置就够用了，所以页面配置有时候是空的）；
  • wxml文件，小程序的页面结构，文字、图片、音乐、视频、地图、轮播等组件都会放在这里；
  • wxss文件，小程序的页面样式，和app.wxss一样是控制样式，而页面的wxss文件是控制单个页面的样式；
  • js文件，这个是控制小程序页面的逻辑（这个可以先放着，不用管）

0x002 pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对于位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。

如开发目录为：

1
2
3
4
5
6
7
8
9
10
11
12
13
├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils

则需要在 app.json 中写

1
2
3
{
  "pages": ["pages/index/index","pages/logs/logs"]
}

0x003 字体属性

字体属性
font-family 规定文本的字体系列。
font-size 规定文本的字体尺寸。
font-weight 规定字体的粗细。
文本属性
color 设置文本的颜色。
line-height 设置行高。
text-align 规定文本的水平对齐方式。

0x004 边框属性

内边距属性
padding 在一个声明中设置所有内边距属性。
padding-top 设置元素的上内边距。
padding-right 设置元素的右内边距。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
外边距属性
margin 在一个声明中设置所有外边距属性。
margin-top 设置元素的上外边距。
margin-right 设置元素的右外边距
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
边框属性
border 在一个声明中设置所有的边框属性。比如border:1px solid #ccc;
border-top 在一个声明中设置所有的上边框属性。
border-right 在一个声明中设置所有的右边框属性。
border-bottom 在一个声明中设置所有的下边框属性。
border-left 在一个声明中设置所有的左边框属性。
border-width 设置四条边框的宽度。
border-style 设置四条边框的样式。
border-color 设置四条边框的颜色。
border-radius 简写属性，设置所有四个 border-*-radius 属性。
box-shadow 向方框添加一个或多个阴影。

padding设置内边距属性

代码执行顺序上、右、下、左padding-top,padding-right,padding-bottom.padding-left

嵌入小程序底标，先新建图标文件价，放入图标，在app.json中引入

0x005 icon资源

iconfont阿里巴巴矢量图标库

0x006 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
"tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#13227a",
        "backgroundColor": "#ffffff",
        "list": [{
                "pagePath": "pages/home/home",
                "iconPath": "image/icon-tab1.png",
                "selectedIconPath": "image/icon-tab1.png",
                "text": "首页"
            },
            {
                "pagePath": "pages/gradient/gradient",
                "iconPath": "image/icon-tab2.png",
                "selectedIconPath": "image/icon-tab2.png",
                "text": "座位"
            },
            {
                "pagePath": "pages/list/list",
                "iconPath": "image/icon-tab1-active.png",//点击前的图标
                "selectedIconPath": "image/icon-tab1-active.png",
                "text": "个人"
            },
            {
                "pagePath": "pages/more/more",
                "iconPath": "image/icon-tab4.png",
                "selectedIconPath": "image/icon-tab4-active.png",//点击后的图标
                "text": "更多"
            }
        ]
    }

这里有一个比较重要的属性就是list，它是一个数组，决定了tabBar上面的文字、icon、以及点击之后的跳转链接。

  • pagePath必须为我们在pages配置项里建好的页面
  • text是tab按钮上的文字
  • iconPath、selectedIconPath分别为没有选中时的图片路径和选中时的图片路径。

0x02 WXML与WXSS

0x001 字体与文本属性

字体属性
font-family 规定文本的字体系列。
font-size 规定文本的字体尺寸。
font-weight 规定字体的粗细。
文本属性
color 设置文本的颜色。
line-height 设置行高。
text-align 规定文本的水平对齐方式。

0x002 盒模型属性

内边距属性
padding 在一个声明中设置所有内边距属性。
padding-top 设置元素的上内边距。
padding-right 设置元素的右内边距。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
外边距属性
margin 在一个声明中设置所有外边距属性。
margin-top 设置元素的上外边距。
margin-right 设置元素的右外边距
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
边框属性
border 在一个声明中设置所有的边框属性。比如border:1px solid #ccc;
border-top 在一个声明中设置所有的上边框属性。
border-right 在一个声明中设置所有的右边框属性。
border-bottom 在一个声明中设置所有的下边框属性。
border-left 在一个声明中设置所有的左边框属性。
border-width 设置四条边框的宽度。
border-style 设置四条边框的样式。
border-color 设置四条边框的颜色。
border-radius 简写属性，设置所有四个 border-*-radius 属性。
box-shadow 向方框添加一个或多个阴影。

0x03 链接与图片

0x001 navigator组件

为了让二级页面与tabBar的页面有更加清晰的结构关系，我们可以在tabBar对应的页面文件夹下面新建要跳转的页面。比如我们的第一个tabBar是home，凡是home会跳转的二级页面，我们都建在home文件夹里。

新建一个页面imgshow

1
2
3
<view class="index-link">
  <navigator url="./../home/imgshow/imgshow" class="item-link">让小程序显示图片</navigator>
</view>
1
2
3
4
5
6
7
.item-link{
  margin: 20px;
  padding:10px 15px;
  background-color: #4ea6ec;
  color: #fff;
  border-radius: 4px;
}

链接内容可以是绝对路径也可以是相对路径

0x002 相对路径与绝对路径

相对路径

大家注意我们之前使用的路径基本都是相对路径，相对路径使用“/”字符作为目录的分隔字符，

  • “./“ 代表当前目录
1
<img src="./img/icon.jpg" />等同于<img src="img/icon.jpg" />

  • “../” 代表上一级目录

  • “/“ 当前根目录，是相对目录；

1
<img src="/img/icon.jpg" />

绝对路径

网络链接就是绝对路径，还有C:*Windows*\System32，这种从盘符开始的路径也是绝对路径。通常相对路径用的会比较多一些。

0x003 云存储

免费的图床：腾讯云对象存储COS

1
2
3
<view class="imglist">
    <image class="imgitem" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg"></image>
</view>

0x004 尺寸单位rpx

所有的手机屏幕的宽度都为750rpx

1
2
3
4
5
.imglist .imgitem{
  width: 700rpx;
  height: 415rpx;
  margin: 20rpx;
}

0x005 图片的裁剪

引入widthFix：宽度不变，高度自动变化，保持原图宽高比不变

1
2
3
<view class="imglist">
    <image class="imgitem" mode="widthFix" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg"></image>
</view>
1
2
3
.imglist .imgitem{
  width: 100%;
}

希望图片全屏显示，但是设计师却只给图片预留了一个很小的高度，这样我们就必须对图片进行一定的裁剪了，我们可以在imgshow.wxml这样写。

1
2
3
<view class="imglist">
   <image class="imgfull" mode="center" src="https://tcb-1251009918.cos.ap-guangzhou.myqcloud.com/background.png"></image>
</view>
1
2
3
4
.imglist .imgfull{
  width: 100%;
  height: 100px;
}

0x006 背景属性

背景属性
background 在一个声明中设置所有的背景属性。
background-color 设置元素的背景颜色。
background-image 设置元素的背景图像。
background-size 规定背景图片的尺寸。
background-repeat 设置是否及如何重复背景图像。

给id为wxmlinfo的view组件加一个背景颜色以及id为studyweapp的view组件添加一个背景图片：

1
2
3
4
5
6
7
8
#wxmlinfo{
  background-color: #dae7d9;
}
#studyweapp{
  background-image: url(https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/bg.png);
  background-size: cover;
  background-repeat: no-repeat;
}

写在wxss里的图片只能来自服务器或者图床，不能放在小程序的文件结构里，这是小程序的一个规定。

0x007 图片的边框美化

圆角和阴影样式

1
2
3
4
.imglist .img{
  border-radius: 8px;
  box-shadow: 5px 8px 30px rgba(53,178,225,0.26);
}

border-radius为图片圆角设置

box-shadow为图片增加阴影

把图片做成圆形

1
2
3
<view class="imglist">
    <image class="circle" mode="widthFix" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/logo.jpg"></image>
</view>
1
2
3
4
5
.imglist .circle{
  width: 200px;
  height: 200px;
  border-radius: 100%;
}

0x04 渐变与动画

0x001 渐变Gradient

新建gradient界面，在wxml文件中输入

1
2
<view class="gradient-display">
</view>

并在wxss文件中输入：

1
2
3
4
5
.gradient-display{
  background-image:linear-gradient(red, blue);
  width: 100vw;
  height: 100vh;
  }

此处背景图片使用了linear-gradient属性，默认渐变方向是从上到下，由红到蓝

0x002 改变渐变的方向

1
2
3
4
5
background-image: linear-gradient(45deg, blue, red);
/*将背景变为 *渐变轴为45度，从蓝色渐变到红色*/

background-image:linear-gradient(to left top, blue, red);
/*从右下到左上、从蓝色渐变到红色*/

0x003 增加更多颜色变换

1
background-image:linear-gradient(0deg, blue, green 40%, red);/*从下到上（渐变轴为0度），从蓝色开始渐变、到高度40%位置是绿色渐变开始、最后以红色结束*/

0x004 增加颜色的百分比

1
background-image: linear-gradient(19deg, rgb(33, 212, 253) 0%, rgb(183, 33, 255) 100%);

0x005 Filter滤镜

filter属性可以对图片进行高斯模糊、调整对比度、转换为灰度图像、色相旋转、图片透明等操作

新建的filter页面

在wxml文件中嵌入

1
2
3
4
5
6
7
8
9
10
<view class="filter-display">
    <view>blur高斯模糊</view>
    <image class="blur" mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
    <view>grayscale图片变灰</view>
    <image class="grayscale" mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
    <view>opacity图片透明</view>
    <image class="opacity" mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
    <view>多个滤镜叠加，注意css的写法即可</view>
    <image class="multiple" mode="widthFix" src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
</view>

在wxss文件中嵌入

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.filter-display img{
    width: 150px;height: auto;
}
.blur{
    filter: blur(8px);
}
.grayscale{
    filter: grayscale(90%);
}
.opacity{
    filter: opacity(25%);
}
.multiple{
    filter: blur(8px) grayscale(90%) opacity(25%);
}

可以发现图片的依次变化

关键词：blur grayscale opacity filter

0x006 图片由灰色变为彩色

1
2
3
4
5
6
7
wxml
<view class="filter-display">
    <text>将鼠标悬停（模拟器）或手指（手机微信）按住或放开图片查看效果</text>
    <view class="grayscale" hover-class="grayscale-hover" >
      <image mode="widthFix"  src="https://hackwork-1251009918.cos.ap-shanghai.myqcloud.com/handbook/html5/weapp.jpg"></image>
    </view>
</view>
1
2
3
4
5
6
7
8
9
10
wxss
.filter-display image{
  width: 150px;height: auto;
}
.grayscale{
  filter: grayscale(90%);
}
.grayscale-hover{
  filter:grayscale(0);
}
Prev
2024-04-21 00:48:08 #Notes
Next