腾讯犀牛鸟云开发校园技术布道师养成计划第一天

云开发微信小程序

微信小程序

发布日期: 2020-03-10

更新日期: 2022-08-25

文章字数: 2.4k

阅读时长: 9 分

阅读次数:

文件结构与页面组成

小程序的文件结构

    在开发者工具的编辑器里可以看到小程序源文件的根目录下有app.js、app.json和app.wxss，这是小程序必不可少的三个主体文件

app.json：小程序的公共设置，可以对小程序进行全局配置，决定页面文件的路径、窗口表现、设置多 tab 等
app.wxss：小程序的公共样式表，可以配置整个小程序的文字的字体、颜色、背景，图片的大小等样式
app.js：小程序的逻辑
pages文件夹：这里存放着小程序的所有页面，展开pages文56565件夹就可以看到有index和logs两个页面文件夹；

小程序的页面组成

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

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

js文件，这个是控制小程序页面的逻辑

配置tabBar配置项

icon资源：iconfont阿里巴巴矢量图标库


"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#13227a",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "image/icon-tab1.png",
        "selectedIconPath": "image/icon-tab1-active.png",
        "text": "首页"
      },    ]
  }

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

2020-03-10 18-16-31屏幕截图.png
[^关于此处的报错，应该是由于开发者工具不是最新版]

WXML与WXSS

[^类似于html与css]

view组件

<view>
    <view>
        <view>WXML 模板</view>
        <view>从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。</view>
    </view>
</view>

em是相对于当前字体尺寸而言的单位，如果当前你的字体大小为16px，那1em为16px；如果当前你的字体大小为18px，那1em为18px。

边框属性
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	向方框添加一个或多个阴影。

链接与图片

navigator组件

在小程序里，我们是通过navigator组件来给页面添加链接的。有些页面在我们打开小程序的时候就可以看得到，还有些则需要我们通过点击链接进行页面切换才可以看得到，这些我们可以称之为二级页面。

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

"pages/home/home",
"pages/home/imgshow/imgshow",

image组件

如果我们不对图片的样式比如高度和宽度进行处理，图片显示就会变形。这是因为小程序会给图片增加一个默认的宽度和高度，宽度为300px，高度为225px。

尺寸单位rpx

在小程序里，所有的手机屏幕的宽度都为750rpx，我们可以把图片等比缩小。比如给图片添加样式:

.imglist .imgitem{
  width: 700rpx;
  height: 415rpx;
  margin: 20rpx;
}

图片的裁剪

由于我们的图片可能尺寸大小不一，或者由于iPhone、安卓手机的尺寸大小不一以及我们对图片显示的要求不一，为了让我们的图片显示正常，小程序需要对图片进行一些裁剪。

我们可以给image组件添加一个widthFix模式：宽度不变，高度自动变化，保持原图宽高比不变。

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

.imglist .imgitem{
  width: 100%;
}

也就是说设置图片的宽度为百分比样式，而高度则自动变化，保持原图宽高比不变

图片的边框美化

很多图片它有圆角或者阴影，这些效果是通过css的边框属性来实现的.

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

这里用到了一个颜色就是rgba颜色值。RGB前面我们要求大家查过，RGBA(R,G,B,A)的R是红色值，G是绿色值，B是蓝色值，R,G,B的值取值范围是0~~255，A是Alpha透明度，取值0~~1之间，越靠近0越透明。

除了圆角，我们经常会有把图片做成圆形的需求，我们来看具体的例子。首先在wxml文件里输入以下代码，添加一个logo图片，

<view class="imglist">  <image class="circle" mode="widthFix" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/logo.jpg"></image></view>

然后在与之对应的wxss文件里添加相应的css样式，

.imglist .circle{
    width: 200px; 
    height: 200px; 
    border-radius: 100%;
}

也就是我们只需要定义了图片长宽之后，再来定义一下border-radius为100%即可把图片做成圆形。
2020-03-17 21-52-35 的屏幕截图.png

2020-03-17 21-52-59 的屏幕截图.png

WeUI框架

WeUI是一套小程序的UI框架，所谓UI框架就是一套界面设计方案。有了组件，我们可以用它来拼接出一个内容丰富的小程序，而有了一个UI框架，就能让我们的小程序变得更加美观。

WeUI的使用

WeUI的核心文件是weui.wxss

在模板小程序的根目录（注意是在第一节建好的模板小程序里）下新建一个style的文件夹，然后把weui小程序dist/style目录下的weui.wxss文件粘贴到style的文件夹里。

使用开发者工具打开模板小程序的app.wxss文件的第二行添加以下代码：

@import 'style/weui.wxss';

这样weui的css样式就被引入到我们的小程序中了

Flex布局

布局也是一种样式，也属于css方面的知识哦，所以大家应该知道该在哪里给组件添加布局样式啦~~没错，就是在wxss文件里~~

小程序的布局采用的是Flex布局。Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

** 让组件变成左右关系**

.flex-box{
  display: flex;
}

我们给外层（也可以叫做父级）的view组件添加display:flex之后，这三个项目就成了左右结构的布局

让组件的宽度均分**

.list-item{
  flex:1;
}

flex是弹性布局，flex:1这个样式是一个相对概念，这里的相对是指这每个list-item的宽度之比都为1

让组件内的内容垂直居中

.list-item{
  display: flex;
  align-items:center;/*垂直居中*/
  justify-content: center;/*水平居中*/
  }

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

也就是说我们在app.wxss引入了weui.wxss，我们新建的所有的二级页面，都会自动拥有weui的样式

使用WeUI美化文章排版

WeUI框架的核心与延伸

使用WeUI框架的核心在于使用它写好了样式的选择器，结构与形式不完全受限制

我们只需要给view组件添加weui-article的class，view组件就有了这个写好了的样式啦。weui-article__h3，weui-article__p也是如此。

如果想给weui-article__h3这个小标题换一个颜色，该怎么处理呢？通常我们不推荐直接修改weui.wxss（除非你希望所有的小标题颜色都替换掉）。我们可以给要替换颜色的view组件再增加一个class选择器，再来添加样式即可

一个view组件可以有多个class，这样就非常方便我们定向给某个组件添加一个特定的样式啦。

模板样式的更改

数据分离有个好处就是我们可以不用修改数据本身，而直接修改wxml里的排版即可。修改排版样式的核心在wxss，也就是修改css样式。

我们想让图文结构是上下结构，我们可以删掉weui框架所特有的一些选择器，也就是删掉一些class，比如weui-media-box__hd_in-appmsg，weui-media-box__thumb等等，然后添加一些选择器，也就是加入一些自己命令的id和class。

2020-03-17 22-38-59 的屏幕截图.png

毛雷

https://maolei.space/2020/03/10/teng-xun-xi-niu-niao-yun-kai-fa-xiao-yuan-ji-zhu-bu-dao-shi-yang-cheng-ji-hua-di-yi-tian/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源毛雷 !

云开发微信小程序

腾讯犀牛鸟云开发校园技术布道师养成计划第二天

2020-03-18 微信小程序

云开发微信小程序

PEP8风格指南

2020-03-10 编程

Python

腾讯犀牛鸟云开发校园技术布道师养成计划第一天

文件结构与页面组成

小程序的文件结构

小程序的页面组成

配置tabBar配置项

WXML与WXSS

链接与图片

navigator组件

image组件

尺寸单位rpx

图片的裁剪

图片的边框美化

WeUI框架

WeUI的使用

Flex布局

全局样式与局部样式

使用WeUI美化文章排版

WeUI框架的核心与延伸

模板样式的更改

你的赏识是我前进的动力