微信小程序
01- 小程序是什么
- 小程序是一种不需要下载安装即可使用的应用,它实现了应用 “触手可及” 的梦想,用户扫一扫或者搜一下即可打开应用。也体现了 用完即走 的理念,用户不用关心是否安装太多应用的问题。应用将无处不在,随时可用,但又无序安装卸载
- 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验
02- 优势
- 1 无需安装卸载,无需单独注册软件
- 2 每个小程序都有 10 亿的潜在用户
- 3 基于微信,可以被便捷地获取和传播
03- 注意点
- 劣势:功能受限于微信
- 基于微信,只能在微信内部使用
- 默认情况下,微信是没有小程序的,搜索打开一个小程序后就有了
- 重要:小程序不是 web,类似于 web(对前端开发人员友好)
04- 体验小程序
- 体验小程序
- 小程序开发的两个组成部分:1 组件 2 API
- 开放接口:用于获取与微信相关的数据
05- 注册小程序
- 微信公众平台
- 进入后台:设置 -> 开发设置 -> 拿到 AppID(创建小程序项目使用)
06- 要求
- 1 每个邮箱仅能申请一个小程序
- 2 未被微信公众平台注册,未被微信开放平台注册,未被个人微信号绑定的邮箱
07- 注册流程
- 1 填写帐号信息
- 2 邮件激活
- 进入上一步的注册邮箱,点击激活链接,激活小程序
- 3 信息登记
- 需要实名认证
- 注册完成后,在左侧边栏的 设置 -> 开发设置 中拿到:
AppID
08- 微信开发者工具
-
说明:第一次使用工具需要使用
注册小程序的微信
扫码登录 -
创建小程序项目:
- 1 项目目录:使用空目录
- 2 AppID: 使用注册后获取到的 AppID
- 3 项目名称:非小程序名称,可以是任意名称
- 4 建立普通快速启动模板:初始化项目基本结构(空的项目目录中才有这个提示)
- 5 点击
编译
菜单,运行QuickStart
项目(模拟器中展示的欢迎页)
-
演示:打开已存在的项目,以及认识开发者工具
09- 小程序项目结构
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、界面颜色、编译配置等)
复制代码
10- pages 基本使用
- 约定:1 所有页面放到
pages
目录中 - 约定:2 文件名称与文件夹名称相同
- 约定:3 所有需要展示的页面都要在
app.json
中进行配置 - 说明:在
app.json
中配置pages
,可以快速创建页面
app.json 配置说明:
1 所有的页面都需要配置到 `pages` 配置项中
2 `pages` 数组的第一项表示进入小程序要展示的页面
复制代码
<text></text> :用来展示文字内容,类似于 span
复制代码
11- 小程序配置
-
app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
-
page.json 页面的.json 只能设置 window 相关的配置项,以决定本页面的窗口表现
-
app.json
是全局配置 -
[page].json
是针对当前页面的配置,如果页面中的配置与全局配置冲突,是以页面配置为准
12- 标签栏 - tabBar
- 当设置 position 为 top 时,将不会显示 icon
- tabBar 中的 list 是一个数组,只能配置最少 2 个、最多 5 个 tab,tab 按数组的顺序排序
- 注意:没有出现在
tabBar.list
的pagePath
页面不展示标签栏
13- 数据绑定
- WXML 中的动态数据均来自对应 Page 的
data
<text>{{ msg }}</text>
<input type="text" value="{{ msg }}">
<checkbox checked="{{isAgree}}"></checkbox>
复制代码
14- 条件渲染
- wx:if
<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
<view hidden="{{ isLoading }}">
<text>搞定啦~</text>
</view>
复制代码
15- 列表渲染
wx:for
:遍历数组,在元素中通过index
获取索引号,通过item
获取当前项wx:for-index="idx"
:替换默认的 indexwx:for-item="it"
:替换默认的 item- 注意:遍历数组元素的时候,需要添加
wx:key
属性,来提高渲染性能
<view wx:for="{{ list }}" wx:for-index="idx" wx:for-item="itemName" wx:key="itemName.id">
{{idx}}: {{itemName.message}}
</view>
复制代码
16- 事件处理
- 绑定事件:1
bindtap
2catchtap
- 说明:bind 事件绑定不会阻止冒泡事件向上冒泡,catch 事件绑定可以阻止冒泡事件向上冒泡
- 说明:通过标签的自定义属性
data-*
,实现给事件“传递”参数
<button bindtap="sayHi" data-msg="test">
点我吧
</button>;
Page({
sayHi(event) {
console.log("单击事件触发了~", event.currentTarget.dataset.msg);
}
});
复制代码
17- 数据操作
- setData
setData()
:更新数据- 说明:将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)
- 1 修改 data 中的数据
- 2 更新视图,也就是说:视图中使用该数据的地方会重新渲染
this.setData({
name: "jack"
});
复制代码
- 文本框操作:
<input value="{{ input }}" bindinput="inputChangeHandle" />;
Page({
inputChangeHandle: function(e) {
this.setData({ input: e.detail.value });
}
});
复制代码
18- 小程序样式
- 尺寸单位 rpx
- wsxx 演示
rpx
的基本使用- 小程序默认宽度:750rpx
- 演示
@import
的基本使用 - 布局:flex
19- UI 库
20- 应用生命周期
21- todomvc 案例
- 每个框架或库都应该写一个 todomvc,来了解这个框架的使用模式是怎样的
小程序中的 todo 案例的功能
- 1 欢迎界面(没有任务就展示欢迎界面,有任务就展示任务列表)
- 注意:欢迎界面 和 任务列表 只能二选一
- 2 展示任务列表
- 3 添加任务
- 剩余任务数量会改变
- 4 任务状态切换(完成和未完成)
- 剩余任务数量会改变
- 当所有的任务都完成,隐藏剩余任务数量展示
- 5 删除任务
- 剩余任务数量会改变(删除未完成任务)
- 6 切换所有任务的选中状态
- 只要有一项是选中的,那么,就应该让其他项也选中
- 7 展示清除已完成任务按钮
- 1 当有已完成的任务,就展示
- 2 单击清除已完成任务按钮,会清除所有已完成的任务
任务中需要频繁处理的操作:
1 清除已完成任务按钮 的展示和隐藏
2 剩余任务(未完成任务)的展示和隐藏
复制代码
<!-- 小程序中的图片标签:类似于 web 中的img标签 -->
<image src="图片路径"></image>
<!-- 小程序中的图标,用于展示一个小图标 -->
<!-- type 表示当前 icon 的类型 -->
<icon class="checkbox" type="success"/>
复制代码
导航
- 注意:不同的
open-type
能跳转到的页面也不同 - 注意:
navigator
组件必须指定url
,否则会报错 - 注意:默认情况下,navigator 无法跳转到 tabBar 中配置的页面,如果想要跳转到 tabBar 中的页面,需要修改
open-type
类型 - 路由 - 页面跳转
<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 文字颜色 以及选中项文字颜色,只能统一设置不能单独设置
小程序发送请求的说明
-
1 在实际的项目中需要在
开发设置
中配置服务器域名
,然后,小程序才能发送请求获取数据 -
2 但是,在开发期间,可以忽略这一步
- 在开发工具右上角的
详情
菜单中,勾选最后一项:不校验安全域名、TLS版本以及HTTPS证书
- 在开发工具右上角的
-
3 在小程序不用考虑跨域的问题,因为小程序是基于微信这个客户端
-
4 无法在小程序中使用 XHR 对象,发送请求