原生小程序基础篇

星辰的粥
446 阅读7分钟

1.小程序的概念

小程序是一种不需要下载、安装即可使用的应用，它实现了应用触手可及的梦想，用户扫一扫或者搜一下就能打开应用，也实现了用完即走的理念，用户不用安装太多应用，应用随处可用，但又无须安装卸载。

  • 特点：无需下载（小程序体积非常小（不超过2M），用户感知不到下载的过程)
  • 理念：用完即走（用户随时退出小程序，不需要关注小程序本身）
  • 入口：扫一扫、搜一下、群聊……

2.认识小程序-目录结构

小程序文件类型

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

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

文件作用

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

3.认识小程序-页面布局

页面的构成

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

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

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

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

页面样式

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

4.小程序的基本配置 -- 全局配置

1. 配置文件-全局：

a.所有页面都要登记

b.可以cv登记路径，将路径名更改为自己要创建的文件名，实现快速创建页面

c.需要使用哪一个页面为首页，就将那个页面路径放在第一个

2. window配置

a.

b.如何自定义navBar？

 "navigationStyle": "custom"

在json文件中配置window中配置这条命令可以取消固定的navBar，自定义navBar

3. tabBar 底部导航栏

a.在app.json文件中配置tabBar，最多用list设置5个 配置navBar跳转就无法使用navigator跳转页面了。

b.如果通过navigator跳转tabBar页面，要额外设置open-type！

5.小程序的基本配置 --文件配置

1.页面配置简介

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

2.常用配置

属性类型默认值是否必须说明
navigationBarTitleTextstring空白否导航栏标题文字内容
navigationBarTextStylestringblack否导航栏标题颜色，仅支持 black / white
navigationBarBackgroundColor16 进制颜色#00000否导航栏背景颜色，如 #000000
navigationStylestringdefault否导航栏样式，仅支持 default / custom
enablePullDownRefreshbooleanfalse否是否开启全局的下拉刷新

6.小程序适配 --rpx

1.响应式布局

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

  1. 媒体查询
  2. rem
  3. %或vw/vh
  4. flex弹性布局
  5. rpx（小程序独享）

2.响应式单位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

7.小程序内置组件（常用）

1.内置组件—navigator

组件介绍

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

常用属性

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

参考代码

<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>

2.内置组件—image

格式

<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>

3.内置组件—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-dotsBooleanfalse是否显示面板指示点
autoplayBooleanfalse是否自动切换
circularBooleanfalse是否衔接轮播

参考代码

<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>

4.内置组件—form

表单常用

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

参考代码

<view class="register">
  <view class="legend">信息登记:</view>
  <view class="form-field">
    <label for="">姓名:</label>
    <view class="field">...</view>
  </view>
  <view class="form-field">
    <label for="">性别:</label>
    <view class="field">...</view>
  </view>
  <view class="form-field">
    <label for="">爱好:</label>
    <view class="field">...</view>
  </view>
  <view class="form-field">
    <label for="">籍贯:</label>
    <view class="field">...</view>
  </view>
  <view class="form-field">
    <label for="">生日:</label>
    <view class="field">...</view>
  </view>
</view>

5.内置组件—scroll-view

作用

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

要点

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

属性

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

参考代码

图片结构代码
<!-- 搜索框 -->
<view class="search-bar">
  <input type="text" placeholder="输入搜索关键字" />
</view>
<!-- 页面主体 -->
<view class="page-body">
  <view class="aside">
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
  </view>
  <view class="content">
    <view class="item"></view>
    <view class="item"></view>
    <view class="item"></view>
  </view>
</view>

page {
  background-color: #f2f2f2;
}
.search-bar {
  padding: 20rpx 30rpx;
  background-color:#fff;
}
.search-bar input {
  padding: 14rpx 20rpx 10rpx 40rpx;
  border: 1rpx solid #eee;
  border-radius: 70rpx;
  font-size: 28rpx;
  color: #333;
}
.page-body {
  height: 700rpx;
  display: flex;
  margin-top: 20rpx;
}
.page-body .aside {
  width: 200rpx;
  padding: 20rpx;
  background-color: #fff;
}
.page-body .aside .item {
  height: 60rpx;
  margin-bottom: 20rpx;
  border-radius: 10rpx;
  background-color: #eee
}
.page-body .aside .active {
  background-color: pink;
}
.page-body .content {
  flex: 1;
  padding: 20rpx;
  margin-left: 20rpx;
  background-color: #fff;
}
.page-body .content .item {
  float: left;
  width: 215rpx;
  height: 215rpx;
  margin: 0 20rpx 20rpx 0;
  border-radius: 10rpx;
  background-color: #eee;
}
.page-body .content .item:nth-child(even) {
  margin-right: 0;
}
参考代码
<scroll-view scroll-y class="aside">
    // 省略其他
</scroll-view>
<scroll-view refresher-enabled scroll-y class="content">
      // 省略其他
</scroll-view>

结尾补充

以上均为本人整理的官方文档内容，大佬们如果有其他内容可以在评论区补充，非常欢迎各位jym评论。

avatar
文章
阅读
粉丝