微信小程序
DAY01
HTTP
协议的状态管理
由于
HTTP
协议的请求属于短连接模式请求
,
即请求建立后
,
客户端服务端交互完成后
,
连接将会断开
.
所以
HTTP
协议属于
无状态
的通信协议
:
意味着服务端无法把同一个客户端发送的多次请求当成一个整体来看
待
.
所以在客户端服务端交互过程中需要管理
HTTP
协议的状态
.
即想办法将同一个客户端的多次请求当成
一个整体来看待
,
把客户端多次请求涉及到的重要数据保存下来
.
HTTP
状态管理的解决方案
:
1. cookie
机制
1.
客户端发送第一次登录请求
,
服务端接收请求处理请求
.
2.
服务端完成业务后
,
将
cookie
数据通过响应数据包返回给客户端
.
3.
客户端接收响应
,
解析数据包
,
将
cookie
数据保存在客户端本地
.
4.
当客户端发送后续请求时
,
携带
cookie
数据一起发送
,
这样服务端就知道是哪一个客户端了
,
完
成
http
状态管理
.
2. session
机制
cookie
不安全
.
演化出
session
机制
.
1.
客户端发送第一个请求
,
服务端接收请求处理请求
.
sessionID
user
其它敏感数据
d5fasd7f5asd9fsd8f5a
zs
......
2.
服务端为该客户端颁发一个唯一身份标识
:sessionID,
并且将
sessionID
放入响应数据包
,
返回
给客户端
.
同时把与该用户相关的敏感数据配对
sessionID
一起存入服务端
:
3.
客户端接收到
sessionID
后
,
存在
cookie
域中
,
等下次发请求时携带
sessionID
一起发送
.
4.
服务端接收到客户端请求
,
解析出
sessionID,
检索以前与该
sessionID
配对存储的一些数据
,
获
取客户端的参数
,
完成状态管理
.
3. token
机制
微信小程序
微信公众平台
服务号
:
为企业
/
组织提供的管理会员系统
,
提供企业服务的账号
.
用户关注服务号后可以发送请求
,
获取企
业
/
组织提供的某些数据服务
.
订阅号
:
为企业
/
组织
/
个人提供的发布文章
,
共享资讯的账号
.
用户关注订阅号后
,
可以接受订阅号不定期
分享的咨询信息
.
小程序
:
从功能体验角度来讲最接近原生
app
.
其优点在于
:
小
.
即开即用
.
jwt
链接：
https://pan.baidu.com/s/1B3YUiJnd3A2vOGKmkEu0_Q
提取码：
2prs
进入微信公众平台官方网站
http://mp.weixin.qq.com
注册小程序账号
创建第一个小程序项目
1.
创建项目
:
小程序项目的文件结构
小程序项目中包含的文件类型主要有以下几类
:
1.
.json
文件
.json
文件用于定义项目相关的配置
.
例如页面导航栏的背景
/
是否开启页面的下拉刷新等功能
.
2.
.wxml
文件
.wxml
用于定义页面的结构
.
所有的组件都定义在
wxml
文件中
.
在该文件中
html5
中的标签不适用
,
微信提供了所有常用的标签组件
.
3.
.wxss
文件
wxss
用于定义页面的样式
.
4.
.js
文件
js
用于定义页面的
js
脚本代码
(
事件函数
,
data
属性
)
app.json
小程序项目根目录下的
app.json
用于定义小程序全局的配置
.
pages
配置项
pages
配置项用于配置当前小程序包含哪些页面
.
在
pages
数组中添加字符串
,
意味着新建页面
.
将会自动在
pages
文件夹的相应目录下生成页面四件套
(
.js, .wxss, .wxml, .json
).
如果将页面写在
pages
数组的第一个元素
,
则该页面将会成为小程序项
目的首页
. (
进入小程序看到的第一个页面
).
window
配置项
其它配置请参考文档
:
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#window
tabbar
配置项
微信小程序将底部选项卡封装了
,
只需要在
app.json
中配置
tabbar
即可设置页面的底部选项卡的显示
效果
.
定制化选中项
/
未选中项的样式
.
小程序建议
,
底部选项卡最少
2
个
,
最多
5
个
,
每个选项卡需要对应一个页面
(
在
pages
配置项中声明
).
在
tabbar
中指定每个选项卡对应的页面即可
(
包括路由
/
样式
).
1.
准备
3
个页面
.
pages/index/index
pages/theatre/theatre
pages/me/me
2.
配置
app.json
中的
tabbar
配置项
,
指明底部选项卡的效果即可
.
"pages"
: [
"pages/test/test"
,
"pages/index/index"
],
"window"
: {
"backgroundColor"
:
"#aaa"
,
"enablePullDownRefresh"
:
true
,
是否开启下拉刷新
"backgroundTextStyle"
:
"dark"
,
"navigationBarBackgroundColor"
:
"#339"
,
导航背景
"navigationBarTitleText"
:
"
学子影院
"
,
导航标题文字
"navigationBarTextStyle"
:
"white"
导航文本样式
},
"tabBar"
: {
"color"
:
"#333"
,
"selectedColor"
:
"#f03d37"
,
"list"
: [{
"text"
:
"
电影
"
,
"pagePath"
:
"pages/index/index"
,
"iconPath"
:
"images/index_disable.png"
,
"selectedIconPath"
:
"images/index_enable.png"
},{
"text"
:
"
影院
"
,
"pagePath"
:
"pages/theatre/theatre"
,
"iconPath"
:
"images/theatre_disable.png"
,
"selectedIconPath"
:
"images/theatre_enable.png"
style
配置项
微信客户端
7.0
开始，
UI
界面进行了大改版。小程序也进行了基础组件的样式升级。
app.json
中配置
"style": "v2"
可表明启用新版的组件样式。
本次改动涉及的组件有
button icon radio checkbox switch slider
。可前往小程序示例进行体
验。
sitemapLocation
配置项
指明
sitemap.json
的位置；默认为
'sitemap.json'
即在
app.json
同级目录下名字的
sitemap.json
文
件
app.wxss
项目根目录下的
app.wxss
定义全局共享的
css
样式
.
app.js
项目根目录下的
app.js
属于小程序项目的入口脚本文件
.
当小程序启动时
,
将自动执行
app.js
中的代
码
.
其中的代码仅执行一次
.
},{
"text"
:
"
我的
"
,
"pagePath"
:
"pages/me/me"
,
"iconPath"
:
"images/me_disable.png"
,
"selectedIconPath"
:
"images/me_enable.png"
}]
},
App
({})
微信小程序
DAY02
微信小程序组件库
小程序的页面内容包含什么取决于
wxml
中定义的组件
.
小程序规定
,
在
wxml
中使用微信官方定义的组件
库
,
原生
html5
的标签不可用
.
关于小程序组件的属性
1.
如果在设置小程序组件的属性时遇到了布尔类型属性
,
直接设置
true
或
false,
都将会当做是普通字符
串来处理
,
它们都将会被解析为
true.
除非设置空字符串
"".
但是这么写有点野
.
小程序推荐
:
2.
小程序组件的属性的属性名默认支持两种命名方法
:
短横线命名法
/
驼峰命名法
.
这两种属性名格式
都将被小程序解析
.
view
组件
view
组件属于视图容器组件
,
在
view
组件中可以包含其他组件
.
基本使用方法如下
:
测试
:
编写测试页面
:
pages/view/view
.
在该页面中测试
view
的使用
.
image
组件
image
组件用于显示图片
.
基本使用方法如下
:
案例
:
pages/image/image
.
<view
hover-stop-propagation
></view>
<view
hover-stop-propagation
=
"{{true}}"
></view>
<view
hover-stop-propagation
=
""
></view>
属性生效
<view
hoverStopPropagation
=
""
></view>
属性生效
<view
class
=
""
定义组件的样式类名
hover-class
=
""
定义组件的点击后的样式类名
hover-start-time
=
"50"
hover-stay-time
=
"350"
hover-stop-propagation
=
""
是否阻止点击态的冒泡
>
</view>
<image
src
=
""
路径
mode
=
""
图像的裁切模式
lazy-load
是否采用懒加载
show-menu-by-longpress
是否在长按时弹出操作菜单
></image>
默认情况下
,
小程序为
image
组件设置默认大小
:
320px * 240px
.
需要我们手动控制
image
的大小
.
也
可以通过
mode
属性控制裁剪模式
.
小程序中的图像适配问题
适配原则
:
无论任何大小的屏幕
,
布局不要乱
.
wxml
提供了一个尺寸单位
:
rpx
.
rpx
响应式像素
响应式像素是一个
"
动态尺寸单位
",
在不同的屏幕尺寸下
,
1rpx
会换算成不同的
px
.
屏幕越大
,
换算的
px
结果就越大
.
这种换算关系的设计原则
:
小程序规定
,
无论任何尺寸的屏幕
,
宽度都是
750rpx
.
在工作中
,
通常情况下会使用
iphone6/7/8/x
作为设计初稿
.
它们的宽度都是
375px
.
在小程序平台下都
相当于
750rpx
.
所以
iphone6
平台下
rpx
的换算关系
:
1px = 2rpx
.
Swiper
组件
Swiper
组件用于实现轮播图
.
案例
:
pages/swiper/swiper
， 测试轮播图。
应用题：
原始图片尺寸大小
:
宽
:
1242px
,
高
:
698px
.
显示图片尺寸宽度
:
750rpx
,
问
:
图片高度应该是多少才可以保证等比例缩放
.
小程序官方组件除了一些自定义属性外
,
还有一些自定义事件
,
例如
swiper
的
bindchange
属性
(
自定义
事件
)
就用于监听轮播图
current
的改变
.
如果轮播图切换了某一页
,
就会触发
change
事件
.
若在组件上
绑定的
change
事件处理
:
将会在触发了
change
事件后
,
执行该方法
(
方法在
js
中定义
):
<swiper
indicator-dots
=
"{{true}}"
indicator-color
=
"#0003"
indicator-active-color
=
"#1c1"
autoplay
circular
duration
=
"200"
current
=
"1"
vertical
bindchange
=
"handleChange"
>
<swiper-item>
图片
</swiper-item>
<swiper-item>
图片
</swiper-item>
<swiper-item>
图片
</swiper-item>
......
</swiper>
<swiper
bindchange
=
"doChange"
></swiper>
text
组件
text
组件用于在页面中显示文字
:
navigator
组件
navigator
为导航组件
,
类似于
html
中
a
标签
.
用于点击后跳转到一个新页面
,
具体语法
:
open
-
type:
1.
navigate
默认的跳转方式
.
可以从当前页跳转到
非
tabbar
页面
(
内容不包含底部选项卡的
页面
,
即没有在
app.json
中的
tabbar
配置项范围内的页面
)
.
跳转的过程将会保留当前页
,
创
建目标页
,
然后显示目标页实现跳转
.
2.
navigateBack
返回上一页
.
通过
delta
属性可以返回上
n
页
.
这个过程本质上是销毁当前
页
,
上一页自然而然的就显示出来了
.
3.
redirect
意为
重定向
.
通过
redirect
方式跳转到目标页时
,
将会销毁当前页
,
创建目标页
,
然后执行跳转
.
4.
switchTab
切换选项卡
.
这种方式可以跳转到
tabbar
页面
.
但是
,
一旦使用这种方式跳转
,
将会销毁所有的非
tabbar
页面
.
5.
relaunch
重新启动
.
这种方式可以跳转到任何页面
.
但是这种做法将会销毁所有页面
,
然后
重新启动应用
,
打开目标页
.
案例
:
新建
3
个页面
:
pages/a/a
pages/b/b
pages/c/c
.
scroll
-
view
组件
scroll
-
view
用于表示一个可以滚动的视图容器
.
如果页面中有需要放置一个带滚动条的视图容器时
,
就
可以使用
scroll
-
view
来实现
.
只有内容的大小超出
scroll
-
view
容器的范围时
,
才具备出现滚动条的条
件
.
基本用法
:
Page
({
data
: {},
doChange
(){
...
}
})
<text
space
=
""
定义空格的显示
user-select
=
""
指定是否允许用户选择复制
decode
=
""
是否对文本中
html
实体进行解析
>
内容文本内容文本内容文本内容文本内容文本内容文本
</text>
<navigator
url
=
"/pages/swiper/swiper"
open-type
=
"
打开目标页面的方式
"
>
点我跳转到
XXXX
</navigator>
<scroll-view
style
=
"width: xx; height: xxx;"
scroll-x
=
"{{true}}"
scroll-y
=
"{{true}}"
>
内容 内容 内容
内容 内容 内容
</scroll-view>
微信小程序 DAY03
scroll-view组件
scroll-view用于表示一个可以滚动的视图容器. 如果页面中有需要放置一个带滚动条的视图容器时, 就可以使用scroll-view来实现. 只有内容的大小超出scroll-view容器的范围时, 才具备出现滚动条的条件. 基本用法:
<scroll-view style="width: xx; height: xxx;"
scroll-x="{{true}}"
scroll-y="{{true}}">
内容 内容 内容
内容 内容 内容
</scroll-view>input组件
input组件用于实现输入框. 其基本写法:
<input type=" text | number | digit | idcard "
placeholder="占位内容"
value="输入框的值"
maxlength="最大长度"
password="是否为密码框"
focus="是否自动获取焦点" />案例: pages/input/input.
type属性用于设置输入框的类型,不同的类型弹出的软键盘样式不同. 普通键盘/数字键盘/带小数点的数字键盘/身份证号键盘.
input的双向数据绑定
回顾vue的双向数据绑定:
<input v-model="name">
<script>
...
data(){
return {
name: ''
}
}
</script>小程序的双向数据绑定:(简易版)
<input model:value="{{name}}" />
Page({
data: {
name: ''
}
})小程序的双向数据绑定:(标准版)
您输入的是: xx
<input bindinput="handleInput" />Page({
data: {
name: '' // 双向数据绑定输入框
},
handleInput(event){
let val = event.detail.value // 通过事件对象获取输入框的值
this.setData({ name:val })
}
})在函数中修改data中变量的方式有两种:
Page({
data: {
name: '', // 双向数据绑定输入框
},
handleInput(event){
let val = event.detail.value // 通过事件对象获取输入框的值
this.setData({name: val}) //方式1: 通过setData修改data变量
this.data.name = val //方式2: 通过this.data.xxx方式修改data变量
}
})上述两种方式都可以更新data中的数据. 区别在于:
方式1: setData()方法在更新data的同时将会同步渲染UI.
方式2: 使用this.data.xxx方式直接修改属性, 属性依然会更新, 但是UI不会同步渲染.
WXML语法基础
若在页面js的data中声明了很多变量, 这些变量需要在页面显示时, 需要用{{}}动态数据绑定. 学习一下{{}}的使用方法:
data: {
name: 'zs',
age: 17,
gender: '男',
url: 'http://xxxx.jpg',
school: {name: '', loc:""}
}当再vue中使用这些变量时:
<template>
<div>
{{name}} {{age}} ....
<img :src="url">
</div>
</template>若需要在小程序中动态呈现data中的数据, 依然使用{{}}来解决, 大致需要分为以下几类:
案例: pages/databind/databind.
-
内容绑定
动态更新页面的内容文本:
<!--pages/databind/databind.wxml--> <text>个人简介</text> <view>姓名:{{name}}</view> <view>年龄:{{age}}</view> <view>性别:{{gender}}</view> <view>婚否:{{married?'已婚':'未婚'}}</view> <view>学校名称:{{school.name}} 学校位置:{{school.loc}} </view> -
属性绑定
动态更新组件的属性值:
data: { url: '/images/1.jpg', imgName: '1.jpg', num: 1, showbar: false }<image src="{{url}}"></image> <image src="/images/{{imgName}}"></image> <image src="/images/{{num}}.jpg"></image> <scroll-view show-scrollbar="{{showbar}}"></scroll-view> -
样式绑定
动态显示组件样式:
<view class="{{cname}}">测试文本</view> <view style="color:{{c}};">测试文本</view>data: { c: '#caa', cname: 'c1' } -
列表渲染
使用循环的方式遍历
data中的数组, 把每一个元素都绘制在页面中. 类似vue中v-for.data: { foods: [ {id:1001, name:'臭豆腐', price:10.0}, {id:1002, name:'螺蛳粉', price:12.0}, {id:1003, name:'毛鸡蛋', price:4.0}, ] }vue中列表渲染的语法:<div> <p v-for="item,i in foods" :key="item.id"> {{i}}-id: {{item.id}}, name:{{item.name}}, price:{{item.price}} </p> </div>小程序列表渲染的语法:
<view> <view wx:for="{{foods}}"> {{index}} - id: {{item.id}}, name:{{item.name}}, price:{{item.price}} </view> </view>wx:for="{{foods}}"意味着小程序将会遍历foods数组, 将foods数组中每一个元素渲染成一个view. 在遍历渲染的过程中, 小程序将会把foods中的每一个元素赋值给变量item, 这样就可以在view中使用{{item.id}}的方式来访问对象的属性, 完成列表项的渲染. 除此之外,消除恒旭将会把foods中的每一个元素对应的下标赋值给变量index, 这样就可以在view中直接使用{{index}}来访问当前下标.此时,控制台中将会出现一个警告:
Now you can provide attr `wx:key` for a `wx:for` to improve performance.建议提供一个
wx:key来提高列表的渲染性能.wx:key如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用
wx:key来指定列表中项目的唯一的标识符。wx:key的值以两种形式提供-
字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
-
保留关键字
*this代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供
wx:key，会报一个warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。遍历过程中, 框架将会自动分配
item与index变量, 表示遍历过程中的每一个对象与对应的下标. 使用{{item}} {{index}}使用他们. 某些场景下如果需要修改变量名, 可以如下配置:<view> <view wx:for="{{foods}}" wx:key="id" wx:for-item="food" wx:for-index="i"> {{i}} - id: {{food.id}}, name:{{food.name}} </view> </view> -
-
条件渲染
类似
vue中的v-if. 用于动态渲染元素. 例如:data: { islogin: true // 代表是否已登录 }<view wx:if="{{islogin}}">欢迎:XXX</view> <view wx:else>登录 注册</view>常见的条件渲染的写法:
<view wx:if="{{布尔表达式}}">xxxx</view> ------------------------------------------------- <view wx:if="{{布尔表达式}}">xxxx</view> <view wx:else>xxxx</view> ------------------------------------------------- <view wx:if="{{布尔表达式}}">xxxx</view> <view wx:elif="{{布尔表达式}}">xxxx</view> <view wx:elif="{{布尔表达式}}">xxxx</view> <view wx:elif="{{布尔表达式}}">xxxx</view> <view wx:elif="{{布尔表达式}}">xxxx</view> <view wx:else>xxxx</view>
radio-group组件
radio-group组件为单选框组组件,包裹一组单选框(radio), 基本写法如下:
<radio-group>
<radio color="" checked value="男">男</radio>
<radio color="" value="女">女</radio>
</radio-group>案例: 基础表单的测试使用. pages/form/form.
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
