微信小程序

发表于 | 分类于

微信小程序

小程序是什么

  • 小程序是一种不需要下载安装即可使用的应用，它实现了应用 “触手可及” 的梦想，用户扫一扫或者搜一下即可打开应用。也体现了 用完即走 的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无序安装卸载
  • 微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验

优势

  • 1 无需安装卸载，无需单独注册软件
  • 2 每个小程序都有 10 亿的潜在用户
  • 3 基于微信，可以被便捷地获取和传播

注意点

  • 劣势：功能受限于微信
  • 基于微信，只能在微信内部使用
  • 默认情况下，微信是没有小程序的，搜索打开一个小程序后就有了
  • 重要：小程序不是 web，类似于 web（对前端开发人员友好）

体验小程序

  • 体验小程序
  • 小程序开发的两个组成部分：1 组件 2 API
  • 开放接口：用于获取与微信相关的数据

注册小程序

  • 微信公众平台
  • 进入后台：设置 -> 开发设置 -> 拿到 AppID（创建小程序项目使用）

要求

  • 1 每个邮箱仅能申请一个小程序
  • 2 未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱

注册流程

  • 1 填写帐号信息
  • 2 邮件激活
    • 进入上一步的注册邮箱，点击激活链接，激活小程序
  • 3 信息登记
    • 需要实名认证
  • 注册完成后，在左侧边栏的 设置 -> 开发设置 中拿到：AppID

微信开发者工具

  • 安装
  • 开发者工具使用

  • 说明：第一次使用工具需要使用注册小程序的微信扫码登录

  • 创建小程序项目：

    • 1 项目目录：使用空目录
    • 2 AppID： 使用注册后获取到的 AppID
    • 3 项目名称：非小程序名称，可以是任意名称
    • 4 建立普通快速启动模板：初始化项目基本结构（空的项目目录中才有这个提示）
    • 5 点击编译菜单，运行QuickStart项目（模拟器中展示的欢迎页）

  • 演示：打开已存在的项目，以及认识开发者工具

小程序项目结构

1
2
3
4
5
6
7
8
9
10
11
pages/ ---------------- 页面（组件），所有页面都应该放到这个目录中
  index/  ------------- index文件夹
    index.js ---------- index页面的逻辑代码
    index.wxml -------- index页面的HTML结构
    index.wxss -------- index页面的CSS样式
    index.json -------- 页面配置（可选）
utils/ ---------------- 公共工具（函数）
app.js ---------------- 逻辑
app.json -------------- 全局配置（包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等）
app.wxss -------------- 全局样式（CSS）
project.config.json --- 开发工具配置（例如ES6转ES5、界面颜色、编译配置等）

pages 基本使用

  • 约定：1 所有页面放到pages目录中
  • 约定：2 文件名称与文件夹名称相同
  • 约定：3 所有需要展示的页面都要在app.json中进行配置
  • 说明：在app.json中配置pages，可以快速创建页面
1
2
3
app.json 配置说明：
1 所有的页面都需要配置到 `pages` 配置项中
2 `pages` 数组的第一项表示进入小程序要展示的页面
1
<text></text> ：用来展示文字内容，类似于 span

小程序配置

  • 配置 - app 和 page
  • app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等

  • page.json 页面的.json 只能设置 window 相关的配置项，以决定本页面的窗口表现

  • app.json 是全局配置

  • [page].json 是针对当前页面的配置，如果页面中的配置与全局配置冲突，是以页面配置为准

标签栏 - tabBar

  • 当设置 position 为 top 时，将不会显示 icon
  • tabBar 中的 list 是一个数组，只能配置最少 2 个、最多 5 个 tab，tab 按数组的顺序排序
  • 注意：没有出现在tabBar.list的pagePath页面不展示标签栏

数据绑定

  • WXML 中的动态数据均来自对应 Page 的 data
1
2
3
4
5
<text>{{ msg }}</text>

<input type="text" value="{{ msg }}">

<checkbox checked="{{isAgree}}"></checkbox>

条件渲染

  • wx:if
1
2
3
4
5
6
7
8
9
10
11
12
13
<view wx:if="{{ isLoading }}">
  <text>数据加载中...</text>
</view>
<!-- <view wx:elif=""></view> -->
<view wx:else>
  <text>搞定啦~</text>
</view>

<!-- 隐藏多个元素，不改变 wxml的层级结构 -->
<block wx:if="{{ isLoading }}">
  <text>小明</text>
  <text>小红</text>
</block>
  • hidden
1
2
3
<view hidden="{{ isLoading }}">
  <text>搞定啦~</text>
</view>

列表渲染

  • wx:for：遍历数组，在元素中通过index获取索引号，通过item获取当前项
  • wx:for-index="idx"：替换默认的 index
  • wx:for-item="it"：替换默认的 item
  • 注意：遍历数组元素的时候，需要添加wx:key属性，来提高渲染性能
1
2
3
<view wx:for="{{ list }}" wx:for-index="idx" wx:for-item="itemName" wx:key="itemName.id">
  {{idx}}: {{itemName.message}}
</view>

事件处理

  • 绑定事件：1 bindtap 2 catchtap
  • 说明：bind 事件绑定不会阻止冒泡事件向上冒泡，catch 事件绑定可以阻止冒泡事件向上冒泡
  • 说明：通过标签的自定义属性data-*，实现给事件“传递”参数
1
2
3
4
5
6
7
8
9
<button bindtap="sayHi" data-msg="test">
  点我吧
</button>;

Page({
  sayHi(event) {
    console.log("单击事件触发了~", event.currentTarget.dataset.msg);
  }
});

数据操作

  • setData
  • setData()：更新数据
    • 说明：将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）
    • 1 修改 data 中的数据
    • 2 更新视图，也就是说：视图中使用该数据的地方会重新渲染
1
2
3
this.setData({
  name: "jack"
});
  • 文本框操作：
1
2
3
4
5
6
7
<input value="{{ input }}" bindinput="inputChangeHandle" />;

Page({
  inputChangeHandle: function(e) {
    this.setData({ input: e.detail.value });
  }
});

小程序样式

  • 尺寸单位 rpx
  • wsxx 演示 rpx 的基本使用
    • 小程序默认宽度：750rpx
  • 演示 @import 的基本使用
  • 布局：flex

UI 库

应用生命周期

todomvc 案例

  • 每个框架或库都应该写一个 todomvc，来了解这个框架的使用模式是怎样的

小程序中的 todo 案例的功能

  • 1 欢迎界面（没有任务就展示欢迎界面，有任务就展示任务列表）
    • 注意：欢迎界面 和 任务列表 只能二选一
  • 2 展示任务列表
  • 3 添加任务
    • 剩余任务数量会改变
  • 4 任务状态切换（完成和未完成）
    • 剩余任务数量会改变
    • 当所有的任务都完成，隐藏剩余任务数量展示
  • 5 删除任务
    • 剩余任务数量会改变（删除未完成任务）
  • 6 切换所有任务的选中状态
    • 只要有一项是选中的，那么，就应该让其他项也选中
  • 7 展示清除已完成任务按钮
    • 1 当有已完成的任务，就展示
    • 2 单击清除已完成任务按钮，会清除所有已完成的任务
1
2
3
任务中需要频繁处理的操作：
1 清除已完成任务按钮 的展示和隐藏
2 剩余任务（未完成任务）的展示和隐藏
1
2
3
4
5
6
<!-- 小程序中的图片标签：类似于 web 中的img标签 -->
<image src="图片路径"></image>

<!-- 小程序中的图标，用于展示一个小图标 -->
<!-- type 表示当前 icon 的类型 -->
<icon class="checkbox" type="success"/>

导航

  • 注意：不同的open-type能跳转到的页面也不同
  • 注意：navigator组件必须指定url，否则会报错
  • 注意：默认情况下，navigator 无法跳转到 tabBar 中配置的页面，如果想要跳转到 tabBar 中的页面，需要修改open-type类型
  • 路由 - 页面跳转
1
2
3
4
<navigator url="/pages/page1/page1">跳转页面page1</navigator>

<!-- 跳转页面，并且传递参数 -->
<navigator url="/pages/page1/page1?page=1&limit=10">跳转页面page1</navigator>

样式的处理

  • 1 图片必须要设置宽度和高度，如果只设置宽度或高度其中一种，图片是不会自动适应
  • 2 使用rpx代替原始的px像素
  • 3 使用flex布局，也可以配合百分比布局来使用
  • 4 图片有mode用来设置图片的展示模式

底部菜单配置

  • 1 list 中每一个菜单项的pagePath属性不能使用/开头
  • 2 文字颜色 以及选中项文字颜色，只能统一设置不能单独设置

小程序发送请求的说明

  • 关于小程序中网络相关 API 的说明

  • 1 在实际的项目中需要在开发设置中配置服务器域名，然后，小程序才能发送请求获取数据

  • 2 但是，在开发期间，可以忽略这一步
    • 在开发工具右上角的详情菜单中，勾选最后一项：不校验安全域名、TLS版本以及HTTPS证书
  • 3 在小程序不用考虑跨域的问题，因为小程序是基于微信这个客户端
  • 4 无法在小程序中使用 XHR 对象，发送请求
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多