原生小程序基础详解(1)

最新推荐文章于 2024-05-16 10:23:53 发布

独爱那杯cc

最新推荐文章于 2024-05-16 10:23:53 发布

阅读量337

点赞数 3

分类专栏：原生小程序文章标签：小程序前端 javascript

本文链接：https://blog.csdn.net/ym_010530/article/details/133182944

版权

原生小程序专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、注册小程序账号

点击打开微信公众平台(管理后台) 通过邮箱注册小程序账号。

注意事项 👇

账号信息：已申请过公众号/订阅号的邮箱无法再使用，需更换新邮箱
邮箱激活：登录小程序注册填写的邮箱，按邮件提示激活即可
信息登记：主体信息选个人开发者（PS：企业账号需按年付费认证）

二、搭建开发环境

下载微信开发者工具，双击安装程序根据引导完成安装
启动安装后的程序，使用微信扫码登录（电脑需要联网）
创建小程序，选择目录位置、填写 AppID、选择不使用云服务、选择 JS-基础模板
在小程序开发工具中点预览在真机中查看小程序效果

注意事项 👇

如果选择不使用云服务、选择 JS-基础模板 操作错误，请重新创建一个小程序项目。

三、认识小程序

3.1 页面布局

简单概要的理解一下小程序页面的构成及布局的实现方式（非常类似于网页布局）

页面的构成

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

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

页面结构

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

页面样式

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

3.2 逻辑处理

快速了解一下小程序处理逻辑部分的内容，后续还会深入介绍。

每个页面都必须要调用 Page 函数来注册页面，否则看到页面的任何内容，且要传入对象类型的参数：

data 初始化页面中的数据
setData 更新数据
{} 两对花括号插值语法，可以实现数据的渲染
bind:事件类型=事件回调，可以绑定事件

Page({
  data: {
    message: '大家好，这是我的第一个小程序!',
  },
  changeMessage() {
    this.setData({
      message: 'Hello world!',
    })
  },
})

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

3.3 配置

小程序的配置可以配置页面路径、窗口表现、tabBar 等，分为全局配置和页面配置，全局配置针对所有页面生效，页面配置只针对当前页生效。

全局配置

pages 配置页面路径，未配置路径的页面无法被访问到
```
{
  "pages": ["pages/index/index", "pages/logs/logs"]
}
```
entryPath 配置小程序默认的启动页面（首页）

window 窗口表现

{
  "pages": [],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#f5a11c",
    "navigationBarTitleText": "学习小程序",
    "navigationBarTextStyle": "white",
    "enablePullDownRefresh": false,
    "navigationStyle": "default"
  }
}

tabBar 底部 Tab 栏（tabBar 中的页面必须配置在 pages 中）

{
  "pages": [],
  "window": {},
  "tabBar": {
    "color": "pink",
    "selectedColor": "#e93b3d",
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "static/tabbar/home-default.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "text": "日志",
        "pagePath": "pages/logs/logs",
        "iconPath": "static/tabbar/logs-default.png",
        "selectedIconPath": "static/tabbar/logs-active.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/my/index",
        "iconPath": "static/tabbar/face-default.png",
        "selectedIconPath": "static/tabbar/face-active.png"
      }
    ]
  }
}

页面配置

页面配置大部分与全局配置中的 window 是重叠的，页面配置的优先级大于全局配置的。

disableScroll 只能用在在页面配置中，禁用页面滚动
usingComponents 后续学到自定义组件时再介绍

3.4 长度单位

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

在实际使用中只需要将设计稿调整为 750px 宽，然后 1:1 的比例来写长度（单位使用 rpx）。

如：750px 宽的设计稿中某个区域（盒子）的大小为 180*90px ，写成小程序的尺寸为 180*90rpx，即可自动的适配置不同尺寸的手机屏幕。

温馨提示

小程序项目的设计稿宽度一般为 750px，方便前端布局单位换算。

四、小程序组件

小程序中内置了许多组件，除了前面学习的 view、text 之外还有一些常用的，这小节来介绍一下

4.1 navigator

navigator 组件相当于网页中的 a 标签，用来实现小程序页面之间的跳转。

url 属性支持相对和绝对路径，路径为空时会报错
hover-class 属性定义点击态的样式，none 值表示禁用点击效果
open-type 属性定义跳转方式，tabBar 类型的页面时值为 switchTab，默认值为 navigate

4.2 image

image 组件用来在页面中显示图片相当于网页中的 img （注意单词不同）

占位容器，image 默认具有宽高尺寸（320*240px）
当占位容器与图片实际尺寸宽高比不一致时，图片无法正常显示
mode 属性控制图片的显示方式
- scaleToFill 图片提伸铺满占位容器
- aspectFit 图片同比例缩放显示，长边完整显示出来（占位容器可能会留白）
- aspectFill 图片同比例缩放显示，短边完整显示出来（图片可能被裁切）
一般根据设计稿设置 image 的宽高，如果图片宽高比与占位容器不一致时，建议指定 mode="aspectFill" 占满容器。

4.3 swiper

swiper 组件在页面中创建可以滑动的区块，常常用来实现轮播图的交互效果。

组件的结构
- swiper 滑块容器，内部只能嵌套 swiper-item，默认高度为 150px
- swiper-item 滑块单元，内部嵌套任意内容，如 image 组件
组件属性
- indicator-dots 是否显示面板指示点
- autoplay 是否自动切换
- circular 是否衔接滑动

4.4 表单相关 - 后续补充

input 输入框组件与网页中 input 标签的作用一致
- type 属性指定表单类型，如 text、number 等
- placeholder 属性指定输入框为空时的占位文字
radio-group 和 radio 单选框组件，相当于网页中的 <input type="radio" />
- value 属性定义该表单的数据内容
- checked 属性定义选中的状态
checkbox-group 和 checkbox 复选框组件，相当于网页中的 <input type="checkbox" />
- value 属性定义该表单的数据内容
- checked 属性定义选中的状态
picker 选择框组件，相当于网页中的 select 标签
- mode 属性定义选择框的类型，值为 region 时显示省市县三级联动效果、值为 date 时显示时间选择器

在本节为了保证代码演示的美观性，提前准备好了布局结构以及样式，练习时直接粘贴到代码中：

/* 提前准备的样式代码 */
page {
  padding: 40rpx 0;
  box-sizing: border-box;
  background-color: #f7f8fa;
}
.legend {
  padding-left: 40rpx;
  font-size: 36rpx;
  color: #333;
  font-weight: 500;
}
.form-field {
  display: flex;
  margin-top: 20rpx;
  padding: 0 40rpx;
  height: 88rpx;
  background-color: #fff;
  line-height: 88rpx;
  color: #333;
}
.form-field label {
  width: 120rpx;
}
.form-field .field {
  flex: 1;
}
.form-field input {
  height: 100%;
}

<!-- 提前准备好的布局结构代码 -->
<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>

4.5 scroll-view - 后续补充

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

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

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

在本节为了保证代码演示的美观性，提前准备好了布局结构以及样式，练习时直接粘贴到代码中：

/* 提前准备的样式代码 */
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;
}

<!-- 提前准备好的布局结构代码 -->
<!-- 搜索框 -->
<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>

五、小程序样式

5.1 全局样式

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

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

5.2 静态资源

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

以搜索放大镜图标为例：

/* 使用背景图定义放大镜 */
.search-bar .button {
  position: absolute;
  top: 50%;
  right: 60rpx;
  width: 50rpx;
  height: 50rpx;
  transform: translateY(-50%);
  /* background-color: pink; */

  /* 背景图片 */
  /* background-image: url(/static/images/search.png); */
  background-image: url(https://lotjol.github.io/static-store/enjoy-plus/images/search.png);
  background-size: contain;
}

5.3 字体图标

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

@font-face {
  font-family: 'iconfont'; /* Project id 3632516 */
  src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAATYAAsAAAAACVwAAASMAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHFQGYACDIgqFfIUjATYCJAMUCwwABCAFhGcHRxs0CFGU7k2N7Mdg204e4YSRdMLR9eNemN8PCiyrdGcE0VpZPQtPxIpIv8IQqHchGxsFLsrGxhhAx0bc/7WZn5C0kYUVY0mFNZOTCiVD4qRkau43dTv25XLOxDa2INyuQk54Qj83jTax/7Y8D8SS8H/u9+pPS9C6v8Itu+yBfdEPtOgA2YB35nOfim6k2DXM5CkCtZYVUBxV1DUCfc1jB7CUtOUgbI9rs5EHteyQl7SHaqGse2QO8QZUpFeKq8Br9+fjv5RQg6TIQDvP6eNyA5x8P+b9Q3K8m4PsG3tJwNYJBTLMz8wV98sDN5F+YR6pNk9SaRko5frUa8ztxsXcVzBTOWd/LsM/L0rQDPXA7+nz3VKafIJf9xV5xgewyWB8iKKE82mlFnUXxXkCGmHcHZJMLg35UwFUjBflFd1vxEL6xJ9OSP90CjR+KLzpuzGbFThHUktQW+ZlIdsrWv7QI/S8whctg46TLcOWVYTXrKYrK1xsOrytY0NuNKqWpbXYGi9ajMIGr0se0MwjabII6NAkMH6x5AUWJYTNdDSzTAk4/vv/2azv84s17vqzNoNPi6QR56SANi9l7TMve37qijdO4vQth3ab81kSDQaB8UvYqAktbBAFb6/n6YnltktVYnQe8t51ouQN5okt2t28tNJCpcl06pIWPh9i8XZo9iNTz2bOXC/FsWPr4keXGVJbkhoak5tTLjWnOuzJjSktl1KarY1J0TMbSj/siz52bPqA4Wbtm5eNlTHlUVHl0ZXbDSlJA29l9HaSp1AxuJjvFgPu5wzQM/qh9n5U1PSp7DSousf+up18OnRA8gDCL7Fpwo64weSRwr4xu5mm2otUCDWO9tF70+OoYHB8JIjpXxExR31Y/bT6iFpn6p6Gd51DTPsKfOAc4baukuywEr2PvjgsOrRa8/l/6RdCKw6/BcQLZ3A/ImRBUHnQgnJhnbjz6p1qSb1Lvc7USeH7wMZbCx2iD6EphvXewFQwG7xZJoL7J3EMHcKG0EyAW40AumKtmPC2nhmaYP2MOUuc9/ChN0aXxUTWxJ32CGaDqdM72UY+LxeGA1TOk4fJUJH6glxPcvT35AqSDa0ig76uv7H57l9qj2feP3WdEuDnrSsk4pXzSmjvUn2hA8G3ZOysiZgzGRnzvFnTJzCn80iNhFo9TQW0SKvn/ZjaaucI1TGlBEmVPshUG0Xn+Fko1FmFUrVtqDWn/Pg6bZxIkWuASZM4CM12QNLoPWSaXUDn+AdQ6PQBSs3+Q62zoM5WZzKEUhnxGBm4QSM4syA5RMOM3VXrkXGIjZezss1IdpmR5pITkpLlSuRAchf7uIYaUzAWOVGW7FyFeD1ks0mcU5YsSMAJJoydOYmJYt6nJAiSHUrJEB6GGHAGGYFjJpA4iDYyjv++eojREDY8uSa62Sdz8XJanZMsQVINdKXBUWvuTNZ3GcooBYaJ/HYimcSOU8F8iE0vSDjO/M0sEAGWwNQi55QjkZDEuoaE8U32C6z8kRdqZy9CQZCEklARfaB8gnhZMCmRwYxV7kZIsKpcJl5GAA==')
      format('woff2'), url('//at.alicdn.com/t/c/font_3632516_qjs869axt0h.woff?t=1672223363723')
      format('woff'),
    url('//at.alicdn.com/t/c/font_3632516_qjs869axt0h.ttf?t=1672223363723') format('truetype');
}
.iconfont {
  font-family: 'iconfont' !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-search:before {
  content: '\e67d';
}
.icon-edit:before {
  content: '\e6d8';
}
.icon-check:before {
  content: '\e6d7';
}
.icon-share:before {
  content: '\e6d6';
}