搜 索

微信小程序笔记Day1

  • 329阅读
  • 2022年04月14日
  • 0评论
首页 / 值得一看 / 正文

小程序项目结构

WXML

WXML 是小程序框架的标签语言,用来构建小程序页面的结构,其作用类似于网页开发中的 HTML。他们 主要存在下面几点的差别

  1. 标签名不同

    1. HTML(div)
    2. WXML(view, text, image, navigator)
  2. 属性节点不同

    1.  <a href="#" > </a>
    2. <navigator url=""></navigator>
  3. 提供了类似于 vue 中的模板语法

    1. 数据绑定
    2. 列表渲染
    3. 条件渲染

WXSS

WXSS (WeiXin Style Sheets) 是一套样式语言,用于描述 WXML 的组件样式,类似于网页开发中的 CSS 。他们主要存在下面几点的差别

  1. 新增了 rpx 尺寸单位

    1. CSS 中需要手动进行像素单位换算,例如 rem
    2. WXSS 在底层支持新的尺寸单位 rpx ,在不同大小的屏幕上小程序会自动进行换算
  2. 提供了全局的样式和局部样式

    1. 项目根目录中的 app.wxss 会作用于所有小程序页面
    2. 局部页面的 .wxss 样式仅对当前页面生效
  3. WXSS 仅支持部分 CSS 选择器

    1. .class#id
    2. element
    3. 并集选择器、后代选择器
    4. ::after::before 等伪类选择器

JSON

app.json

app.json 是当前小程序的全局配置,包括了小程序的所有页面路径、窗口外观、界面表现、底部 tab 等

project.config.json

project.config.json 是项目配置文件,用来记录我们对小程序开发工具所做的个性化配置

  • setting - 保存了编译相关的配置
  • projectname - 保存的是项目名称
  • appid - 保存的是小程序的账号 ID

sitemap.json

  • 微信现已开放小程序内搜索,效果类似于 PC 网页的 SEO 。 sitemap.json 文件用来配置小程序 页面是否允许微信索引。
  • 当开发者允许微信索引时,微信会通过爬虫的形式,为小程序的页面内容建立索引。当用户的搜索 关键字和页面的索引匹配成功的时候,小程序的页面将可能展示在搜索结果中。

index.json

小程序每个页面中的.json可以对本页面的窗口外观进行配置

js 文件的分类

小程序中的 JS 文件分为三大类,分别是:

  1. app.js

    是整个小程序项目的入口文件,通过调用 App() 函数来启动整个小程序

  2. 页面的 .js 文件

    是页面的入口文件,通过调用 Page() 函数来创建并运行页面

  3. 普通的 .js 文件

    是普通的功能模块文件,用来封装公共的函数或属性供页面使用

组件

view组件

普通视图区域,常用来实现页面的布局效果。可以完全理解为HTML中的div标签

scroll-view 组件

scroll-view 主要来实现元素内部的滚动, 注意, 元素内部的滚动和整个页面的滚动不是同一回事.

scroll-y 允许纵向滚动

结构

<scroll-view class="box" scroll-y>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

样式

.box{
    width: 100px;
    height: 120px;
}

.box view{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: #fff;
}

.box view:nth-child(1){
    background-color: lightgreen;

}
.box view:nth-child(2){
    background-color: lightskyblue;
}

.box view:nth-child(3){
    background-color: lightsalmon;
}

scroll-x 允许横向滚动

注意:横向滚动并不是向纵向滚动那样加了 scroll-y 就能起效果,而是需要额外给 scroll-view 本身加上 white-space:nowrap 并且给每个子view添加 display: inline-block 才能实现横向滚动效果

结构

<scroll-view class="box" scroll-x>
    <view>A</view>
    <view>B</view>
    <view>C</view>
</scroll-view>

样式

.box{
    width: 220px;
    height: 120px;
    white-space:nowrap; //额外添加
}

.box view{
    display: inline-block;  //额外添加
    width: 200px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    color: #fff;
}

.box view:nth-child(1){
    background-color: lightgreen;

}
.box view:nth-child(2){
    background-color: lightskyblue;
}

.box view:nth-child(3){
    background-color: lightsalmon;
}

swiper轮播图组件

swiper 组件主要是用来实现轮播图效果, swiper 组件相当于一个大盒子, swiper-item 指的是轮播图 的每一项

swiper结构

<swiper class="box">
    <swiper-item>A</swiper-item>
    <swiper-item>B</swiper-item>
    <swiper-item>C</swiper-item>
</swiper>
属性类型默认值说明
indicator-dotsBooleanfalse是否显示轮播图小圆点
indicator-colorcolorrgba(0,0,0,.3)小圆点颜色
indicator-active-colorcolor#000当前选中的小圆点颜色
autoplayBooleanfalse是否自动轮播
intervalNumber5000自动轮播时间间隔
circularBooleanfalse是否采用无缝轮播

swiper属性用法

<swiper class="box" 这里写属性>
<swiper class="box" indicator-dots>

text文本组件

text 文本组件 类似于 HTML 中的 span 标签,是一个行内元素,在一行显示。

用途:默认情况下微信小程序是不支持文本长按选中文本复制操作的,但是可以通过 text 组件的 selectable 属性,就可以实现长按选中文本复制内容的效果

<text selectable>Hello World</text>

rich-text富文本组件

rich-text 富文本组件 支持把 HTML 字符串渲染为 WXML 结构

通过 rich-text 组件的 nodes 属性节点,把 HTML 字符串渲染为对应的 UI 结构

<rich-text nodes="<h1 style='color: red;'>Hello World</h1>">
</rich-text>

用途:小程序默认是识别不了 HTML 的, 小程序默认只识别 WXML , 所以如果我们从服务器上获取到了包含 HTML 字符串的数据, 并且想展示出来, 应该使用到 rich-text 组件的 nodes 属性

button按钮组件

button 是按钮组件,它的功能比 HTML 中的 button 按钮丰富,我们可以通过 open-type 属性可以调用 微信提供的各种功能(客服、转发、获取用户授权、获取用户信息等

<!-- 通过type属性指定按钮颜色类型 -->
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button>
<!-- 通过size属性指定按钮尺寸 -->
<button size="mini">普通按钮</button>
<button size="mini" type="primary">主色调按钮</button>
<button size="mini" type="warn">警告按钮</button>
<!-- 通过plain属性指定按钮的镂空效果 -->
<button plain>普通按钮</button>
<button plain type="primary">主色调按钮</button>
<button plain type="warn">警告按钮</button

image图片组件

image 是图片组件(注意,不是 img 哦, 是 image ), 用来展示图片的, 它也是通过 src 属性来指明图片的路径,用法与HTML中的img完全一致

注意:image 组件默认宽度约 300px 、高度约 240px

关于 image 组件, 还有一个属性叫做 mode , 它是用来控制图片的裁剪和缩放形式, 具体的可选值如下

mode值解释
scaleToFill(默认值) 缩放模式,不保持纵横比缩放图片,使图片的宽高完全拉伸至填满image元素
aspectFit缩放模式,保持纵横比缩放图片,使图片的长边能完全显示出来可以完整的将图片显示出来
aspectFill缩放模式,保持纵横比缩放图片,只保证图片的短边能完全显示出来图片通常旨在水平或垂直方向是完整的,另一个方向将发生截取
widthFix缩放模式,宽度不变,高度自动变化,保持原图宽高比不变
heightFix缩放模式,高度不变,宽度自动变化,保持原图宽高比不变

代码演示:http://liuyuyang.net/index.php/archives/1530/

评论区
暂无评论
avatar