认识小程序-目录结构

060

小程序文件类型

小程序主要提供了 4 种文件类型：

类型名称 作用 是否必须存在
.wxml 用于页面的布局结构，相当于网页中 .html 文件 是
.wxss 用于页面的样式，相当于网页中的 .css 文件 否
.js 用于页面的逻辑 是
.json 用于页面的配置 否

文件作用

文件名 作用 是否必须存在
app.js 小程序入口（首先执行的文件） 是
app.json 小程序的全局配置 是
app.wxss 小程序的全局样式 否
project.config.json 小程序开发者工具配置 是（会自动创建）
sitemap.json 小程序搜索优化 否

认识小程序-页面布局

页面的构成

一个完整的小程序页面需要包括 4 个类型的文件：

  • .wxml 定义页面的结构，类似于 .html
  • .wxss 定义页面的样式，类似于 .css
  • .js 定义页面的逻辑，监听事件、发起请求等
  • .json 定义页面的配置，如页面标题等

页面结构： (两个新标签 view, text)

  • view 定义块级区域，相当于网页中的 div 标签
  • text 定义行内区域，相当于网页中的 span标签

页面样式

  • 类选择器，与网页中一致
  • 标签选择器，与网页中一致
  • … 大部分的 css 样式都可以用到小程序中

认识小程序-逻辑处理

每个页面都必须要调用 Page 函数来注册页面，且要传入对象类型的参数。

  • data 初始化页面中的数据
  • this.setData 更新数据
  • {{}} 插值语法可以实现数据的渲染
  • bind:事件类型=事件回调

示例

Page({
  // 约定格式，使用data定义数据
  data: {
    message: 'nihao!'
  },
  changeMessage() {
    // this.setData修改数据  
    this.setData({
      message: 'new!'
    })
  }
})

<view>{{message}}</view>
<button 
    bind:tap="changeMessage"
    type="primary" 
    size="mini">
点我试试
</button>

认识小程序-配置文件

配置文件简介

小程序配置文件是一种json格式的文件。可以起到快速新建页面、设定小程序首页、设置窗口样式及设置导航栏和底部tabBar等作用。

分类：

  • 全局 app.json
  • 页面 page.json

全局配置

app.json 是当前小程序的全局配置，包括了:

  • 小程序首页
  • 界面表现
  • 网络超时时间
  • 底部 tab
  • …等配置

小程序配置-全局配置pages

作用
用于指定小程序由哪些页面组成。

  1. 每一项都对应一个页面的 路径（含文件名） 信息。
  2. 小程序中的每一个页面都必须在pages下登记一下。
  3. 文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
    格式
    是一个数组，每一项表示一个页面
    数组中的第一个元素表示小程序启动时默认打开的页面-主页
    页面跳转

HTML复制代码

<navigator url="/pages/logs/logs">跳转到log页面</navigator>

注意：这里的/pages/logs/logs表示的页面必须是在pages下注册过的

注意：如果url路径没在pages里面配置，则无法跳转到该页面

新建页面-手动

共三步：

  1. 新建空目录
  2. 新建页面(4个文件)
  3. 在pages下手动补充页面地址

image.png

image.png

要点:
1页面都放在pages下，一个页面一个文件夹。
2新建page时，不需要写文件后缀名。

新建页面-自动

在pages下补充一项 pages/page1/page1 ，然后保存，则会自动添加一个页面及需要的文件。

小程序配置-全局配置—window

文档地址：developers.weixin.qq.com/miniprogram…

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性 类型 默认值 说明
navigationBarTitleText string 空白 导航栏标题文字内容
navigationBarTextStyle string black 导航栏标题颜色，仅支持 black / white
navigationBarBackgroundColor 16 进制颜色 #00000 导航栏背景颜色，如 #000000
navigationStyle string default 导航栏样式，仅支持 default / custom
enablePullDownRefresh boolean false 是否开启全局的下拉刷新
backgroundTextStyle string dark, light 下拉loading状态的样式
… 还有更多

参考

navigationStyle：自定义导航栏

13.小程序配置-全局配置—tabBar

image.png

tabBar

tabBar 定义小程序 tab 栏的表现，如下图即所谓的 tab 栏：
图片[1]-认识小程序-目录结构-五八三
常见配置属性

属性 类型 默认值 是否必须 说明
list array 无 是 tab 的列表，详见 list 属性说明，最少 2 个、最多 5 个 tab
color 16 进制颜色 无 否 tab 上的文字默认颜色，仅支持十六进制颜色
selectedColor 16 进制颜色 无 否 tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor 16 进制颜色 无 否 tab 的背景色，仅只持 16 进制颜色
borderStyle string black 否 tabbar 上边框的颜色， 仅支持 black / white
position string bottom 否 tabBar 的位置，仅支持 bottom / top

上述配置中 list 具体又包含以下内容：

属性 类型 默认值 是否必须 说明
pagePath string 是 页面路径，必须在 pages 中先定义
text string 是 tab 上按钮文字
iconPath string 否 图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片，当 position 为 top 时，不显示 icon
selectedIconPath string 否 选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片，当 position 为 top 时，不显示 icon

参考配置代码:

{
  "pages": [
    "pages/index/index", 
    "pages/logs/logs",
    "pages/demo/demo"
  ],
  "window": {
    "navigationBarTitleText": "小程序示例",
    "navigationBarTextStyle": "white",
    "navigationBarBackgroundColor": "#f5a11c",
    "enablePullDownRefresh": true
  },
  "tabBar": {
    "color": "#999",
    "selectedColor": "#e93b3d",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "static/tabbar/home-default.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "static/tabbar/video-default.png",
        "selectedIconPath": "static/tabbar/video-active.png"
      },
      {
        "pagePath": "pages/index/demo",
        "text": "示例",
        "iconPath": "static/tabbar/face-default.png",
        "selectedIconPath": "static/tabbar/face-active.png"
      }
    ]
  }
}

注意：一旦页面被配置为了tabbar，就不能直接使用navigater url 来跳转了。

小程序配置-页面配置

页面配置简介

  • 页面配置只针对某个页面生效
    • 如 index.json 是针对 index 页面生效，demo.json 只针对页面 demo 生效
  • 不用写window字段
  • 优先级比全局配置高

常用配置

属性 类型 默认值 是否必须 说明
navigationBarTitleText string 空白 否 导航栏标题文字内容
navigationBarTextStyle string black 否 导航栏标题颜色，仅支持 black / white
navigationBarBackgroundColor 16 进制颜色 #00000 否 导航栏背景颜色，如 #000000
navigationStyle string default 否 导航栏样式，仅支持 default / custom
enablePullDownRefresh boolean false 否 是否开启全局的下拉刷新

小程序适配-响应式单位rpx

思考

网页开发中我们使用rem进行响应式布局，那小程序用什么进行响应式布局呢？

响应式布局

一个网站或页面能兼容多个终端。
常见实现方式：

  1. 媒体查询

  2. rem

  3. %或vw/vh

  4. flex弹性布局

  5. rpx（小程序独享）

响应式单位rpx

rpx ，responsive pixel：

在小程序中的单位rpx，它的特点是能够自动地适配置不同尺寸的手机屏幕。

原理：不管手机屏幕具体多宽，100%的屏幕宽度就是750rpx

100%屏幕的宽度 = 750rpx

  1. 所有的设备宽度都是750rpx
  2. 在实际使用中只需要将设计稿调整为 750px 宽，然后 1:1 的比例来写长度（单位使用 rpx），如：设计稿中某个区域（盒子）的大小为 18090px ，写成小程序的尺寸为 18090rpx。

注：上述的规则仅适用于设计稿宽度为 750px

rpx (responsive pixel)：规定不管屏幕为多少px，100%的屏幕宽度就是750rpx
100%屏幕的宽度 = 750rpx

内置组件—navigator

组件介绍

navigator 是小程序中的导航标签，类似以前web中的a标签。通过 url 来指定跳转的页面

常用属性

  • url: 页面路径
    • 支持相对和绝对路径
    • 路径为空会报错
    • 还可以跳到其他小程序
    • 蜜雪冰城appid: wx7696c66d2245d107
    • 蜜雪冰城short-link: #小程序://蜜雪冰城/a2FGdG8xwuFeJdB
  • hover-class:点击态的样式
    • none 禁用点击效果
  • open-type:跳转方式
    • navigate。默认值
    • switchTab。跳转到tabbar页
属性名 类型 默认值 说明
url string 当前小程序内的跳转链接
open-type string navigate 跳转方式
target String self 在哪个目标上发生跳转，默认当前小程序

参考代码

<navigator url="../page1/page1">相对地址</navigator>
<navigator open-type="navigate" url="/pages/page1/page1">绝对地址</navigator>

<navigator hover-class="red" url="/pages/page1/page1">绝对地址-red</navigator>
<navigator hover-class="none" url="/pages/page1/page1">绝对地址-red</navigator>

<navigator target="miniProgram" app-id="wx7696c66d2245d107">跳转蜜雪冰城</navigator>

<!-- open-type="switchTab" 只能跳转tabBar页面，非tabBar页面不能跳转 -->
<navigator open-type="switchTab" url="/pages/index/index">以open-type="switchTab"跳轮首面</navigator>

内置组件-image

image.png

image介绍

image组件是一个有默认大小(320*240)的盒子。

作用：显示图片。

格式

<image

src="图片资源地址"

mode="图片裁剪，缩放方式"></image>

要点

  • src: 图片资源地址。相对地址，绝对地址（外网地址）。
  • mode: 默认值为scaleToFill，用来设置图片裁剪、缩放的模式。
    • scaleToFill。不保证缩放比，图片拉伸填满容器
    • aspectFit。保证缩放比，使图片的长边显示出来
    • aspectFill。保证缩放比，使图片的短边显示出啦
  • lazy-load：默认为false，是否开启懒加载模式。（3屏）

<image lazy-load src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"></image>

内置组件—swiper

swiper可以理解为小程序内置的轮播图标签，可以让方便快速地实现轮播功能。
格式:

<swiper>
    <swiper-item> 第1屏的内容 </swiper-item>
    <swiper-item> 第2屏的内容 </swiper-item>
    <swiper-item> 第3屏的内容 </swiper-item>
    <swiper-item> 第4屏的内容 </swiper-item>
</swiper>

要点

  1. swiper：滑块容器。内只能写swiper-item。它的默认高度是150px；
  2. swiper-item：滑块单元。它的大小是： 宽度 和 高度 为 100% * 100%；

常用属性

属性名 类型 默认值 说明
indicator-dots Boolean false 是否显示面板指示点
autoplay Boolean false 是否自动切换
circular Boolean false 是否衔接轮播

示例

<swiper indicator-dots autoplay circular>
  <swiper-item>
    <image src="https://api-hmugo-web.itheima.net/pyg/banner1.png"></image>
  </swiper-item>
  <swiper-item>
    <image src="https://api-hmugo-web.itheima.net/pyg/banner2.png"></image>
  </swiper-item>
  <swiper-item>
    <image src="https://api-hmugo-web.itheima.net/pyg/banner3.png"></image>
  </swiper-item>
</swiper>

样式

swiper {
  height: 340rpx;
}
swiper image {
  width: 100%;
  height: 100%;
}

小结

  1. swiper是轮播组件，可以对内容进行轮播。
  2. 让图片在水平方向全屏展示的方式是：swiper的高度与图片的高度一致（使用对应的rpx单位）； image设置100%的高和宽

表单相关

  1. 输入框：input
  • password密码类型,placeholder占位文字
  1. 单选框：radio-group和radio
  • value指定表单数据，checked选中状态
  1. 复选框：checked-group和checkbox
  • value指定表单数据，checked选中状态
  1. 选择框：picker
  • mode：指定不同类型的选择框

scroll-view

作用

scroll-view 在页面中指定一个可以滚动的区域，并且这个可滚动的区域能够实现一些高级的交互，比如：下拉刷新等。

要点

scroll-view 中嵌套任意需要滚动的内容，要求内容必须有溢出（scroll-view有固定的尺寸），垂直滚动时 scroll-view 必须要指定高度。

属性

  • scroll-x 属性是否允许水平方面滚动
  • scroll-y 属性是否允许垂直方向滚动
  • refresher-enable 属性是否开启下拉刷新的交互

小程序样式-全局样式

全局样式

app.wxss 定义全局样式，该文件中的样式会在所有的页面生效。

注：page 在每个页面中都有，它是由小程序自动添加上的，相当于网页中的 body 标签。

小程序样式-静态资源

输入搜索关键字

image.png

小程序中 .wxss 文件中不支持使用本地路径的资源，比如背景图片是不允许使用本地图片路径的，必须使用网络路径（https:// 或 http:// 开头）或者转换成 base64 编码。

小程序样式-字体图标

小程序中字体图片的使用与网页中基本上是一致的，唯一的区别是小程序的 .wxss 文件中不支持使用本地字体文件，我们使用 iconfont 平台提供的服务生成字体文件后，直接使用其线上的字体文件地址。

资源参考：iconfont-阿里巴巴矢量图标库

© 版权声明
文章版权归作者所有，未经允许请勿转载，侵权请联系 admin@trc20.tw 删除。
THE END
前端
# 前端
喜欢就支持一下吧
点赞0

Warning: mysqli_query(): (HY000/3): Error writing file '/tmp/MYonzGUi' (Errcode: 28 - No space left on device) in /www/wwwroot/583.cn/wp-includes/class-wpdb.php on line 2345
admin的头像-五八三
相关推荐
Dhtmlx甘特图简单实现-五八三
Dhtmlx甘特图简单实现
Dhtmlx甘特图简单实现
2年前 3622
AI太强了！使用langchain自动生成代码-五八三
AI太强了！使用langchain自动生成代码
AI太强了！使用langchain自动生成代码
2年前 466
Playwright使用教程-五八三
Playwright使用教程
Playwright使用教程
2年前 464
? 配置及使用 Strapi CMS 的一些总结-五八三
? 配置及使用 Strapi CMS 的一些总结
? 配置及使用 Strapi CMS 的一些总结
2年前 419
揭秘足球串子投注：多串多，一场赢了全赢？如何计算浮动奖金？-五八三
揭秘足球串子投注：多串多，一场赢了全赢？如何计算浮动奖金？
揭秘足球串子投注：多串多，一场赢了全赢？如何计算浮动奖金？
2年前 402
OpenTelemetry与Jaeger集成指南-五八三
OpenTelemetry与Jaeger集成指南
OpenTelemetry与Jaeger集成指南
2年前 380
评论 抢沙发
头像
欢迎您留下宝贵的见解！
提交
头像

昵称

图形验证码
取消
昵称

请填写用户信息：

  • 昵称(必填)
  • 邮箱(必填)
代码

请输入代码：

确认
图片
热门推荐