前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。[[点击跳转到网站。]]
小程序Api
App
全局入口,整个小程序项目中,只允许有一个App入口函数。
全局数据
-
globalData:写在全局的js里
-
使用this.globalData.data
私有的生命周期【全局的生命周期】
-
onLaunch:初始化函数
-
onShow:启动或切换前台
-
onHide:小程序后台运行
Page
私有的生命周期【页面的生命周期】
-
onLoad:页面加载
-
onShow:页面显示
-
onHide:页面隐藏
-
onReady:页面初始化渲染完成
-
onUnload:页面卸载–销毁
Component
-
构建自定义组件的,需要在json组件中声明:"component":true
之后才可以在page文件中使用。
-
使用组件:在page页面的json里引入
"usingComponents":{
"wk-header":"/components/header/header"
}
生命周期
小程序语法
渲染数据
-
在文档内使用插值的写法{
{}}
-
在标签上属性内使用也需要{
{}}
-
修改数据使用this.setData({data:newValue})
条件渲染
wx:if
,‘wx:else if’,‘wx:else’
//频繁切换使用hidden反之是if
//如果isShow是false那就隐藏反之显示,跟vue的v-if和v-show区别一样
<view hidden="{
{isShow}}"></view>
循环渲染
wx:for="{
{data}}"
默认在for语法内注入了item变量和index变量;
如果需要修改名字,在元素上使用wx:for-item="别名"
.
事件绑定
bind:eventType='callback'
移动端没用click事件,对应的是tap事件
事件又分成俩种
冒泡事件
- 父级标签:
bindtap='parentChange'
- 子集标签:
bindtap='childrenChange'
点击子集父级也会执行
非冒泡事件
- 父级标签:
catchtap='parentChange'
- 子集标签:
catchtap='childrenChange'
点击子集父级并不会触发
监听input框实现数据双向绑定
<view>
<input type="text" value="{
{msg}}" bindinput="changeInput"/>
</view>
Page({
data: {
msg:"请输入密码"
},
changeInput(e:any){
this.setData({
msg:e.detail.value
})
console.log(e.detail.value)
}
})
事件对象的属性列表
当事件回调触发之后,会收到一个·事件对象event,它的详细属性如下:
1.type:字符串类型 事件类型
2.timeStamp:页面打开到触发事件所经过的毫秒数
3.target:对象类型 触发事件组件的一些属性值集合
4.currentTarget:对象类型 当前组件的ixie属性值集合
5.detail:对象类型 额外的信息
6.touchs:数组类型 触摸事件,当前停留在屏幕中的触摸点信息的数组
7.changedTouches:数组类型 触摸事件,当前变化的触摸点信息的数组
target是触发该事件的源头组件,currentTarget是指当前事件所绑定的组件
事件传参
可以为组件上提供data-自定义属性传参,其中代表的是参数名字,引号内的内容是参数值
<button type="button" data-info="{
{2}}" bindtap="btnHandel"></button>
<text>{
{
num}}</text>
可以通过event.target.dataset.参数名字来拿到具体参数的值
Page({
data: {
num:0
},
btnHandel(event:any){
this.setData({
num:event.target.dataset.info
})
}
})
`
路由
声明式导航跳转
注意事项:url地址必须以/开头
//跳转到tabbar页面
<navigator url="/pages/message/message" open-type="switchTab">跳转tabbar页面</navigator>
//跳转到非tabbar页面
<navigator url="/pages/message/message" open-type="navigate">跳转非tabbar页面</navigator>
//后退到上一级或者多级 delta表示后退的层级
<navigator url="/pages/message/message" open-type="navigateBack" delta="1">后退</navigator>
编程式导航跳转
例子:
parent(){
wx.navigateTo({
url: '../logs/logs'
})
},
wx.switchTab(Object object)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.reLaunch(Object object)
关闭所有页面,打开到应用内的某个页面
wx.redirectTo(Object object)
关闭当前页面,跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
属性
url string 是 需要跳转的 tabBar 页面的路径 (代码包路径)(需在 app.json 的 tabBar 字段定义的页面),路径后不能带参数 **
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数(调用成功、失败都会执行
wx.navigateTo(Object object)
保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。
比前三个多出一个属性
events Object 否 页面间通信接口,用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。
wx.navigateBack(Object object)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈
属性将url替换成了
delta number 1 否 返回的页面数,如果 delta 大于现有页面数,则返回到首页
导航传参
声明式导航传参
1. 参数与路径之间用?隔开
2. 参数名与参数值用等号链接
3. 不同参数用&分割
<navigator url="/pages/message/message?name=zs&age=20" open-type="navigate">声明式传参</navigator>
编程式导航传参
fn(){
wx.navigateTo({
url:"/pages/message/messgae?name=ls&age=33"
})
}
内置的网络请求
wx:request({})
写法和jq.ajax几乎一样,但是小程序中不存在跨域问题
出于安全考虑微信小程序官方对数据接口做了限制,只能请求https类型的接口,而且必须将接口域名添加到详情中的合法域名信任列表中;如果要配置多个则用;号隔开
如何配置request合法域名
配置步骤如下:
- 登录微信小程序管理后台
- 开发
- 开发设置
- 服务器域名
- 修改request合法域名
注意事项:域名只支持https协议;域名不能使用ip地址或者localhost;域名必须经过icp备案;服务器域名一个月只能修改5次
如果在开发或者调试过程中后端暂时没有提供https域名接口只有http接口,那么我们可以在微信开发者工具中勾选开发环境不校验请求域名...即可
发起get请求
wx.request({
url:'',//请求的接口地址
method:'GET'//请求的方式
data:{
name:"zyb",
age:23
},
success:(res)=>{
//请求成功以后的回调函数
console.log(res)//返回的数据
}
})
发起post请求
wx.request({
url:'',//请求的接口地址
method:'POST'//请求的方式
data:{
name:"zyb",
age:23
},
success:(res)=>{
//请求成功以后的回调函数
console.log(res)//返回的数据
}
})
小程序事件对象传参方式
1、id传参
只能传递一个值
标签上使用id属性进行传递
事件中使用event.currentTarget.id进行接收
2、data传参
可以传递多个值
标签上使用bind-key 进行传递
事件中使用event.currentTarget.key进行接收
3、mark传参
mark 会包含从触发事件的节点到根节点上所有的 mark
标签上使用mark: key="value"进行传递
事件中使用event.mark.key进行接收
小程序中像素单位rpx原理
因为不同设备的屏幕大小不同,为了能够实现屏幕的自动适配,rpx把所有的屏幕在宽度上都等分为750份
从而实现在较小的设备上1rpx显示的宽度较小,在较大设备上显示的1rpx宽度较大
px和rpx的单位换算
例子:在iphone6手机上屏幕宽度为375px,共有750个物理像素等分为750rpx,则:750rpx=375px/1rpx=0.5px
下拉刷新
注意事项:开启下拉刷新之后模拟器下拉刷新会自动停止下拉刷新,真机不会自动停止,需要手动处理
启动下拉刷新的俩种方式:
全局开启:在app.json的window节点中设置enablePullDownRefresh设置为true
局部开启:在页面的json文件中设置enablePullDownRefresh设置为true
监听页面的下拉刷新事件onPullDownRefresh
小例子:点击按钮实现自增加一,刷新之后将count重置为0
data: {
count:0//初始值
},
//监听下拉刷新
onPullDownRefresh(){
this.setData({
count:0
})
},
//点击自增加一的事件
add(){
this.setData({
count:this.data.count+1
})
}
停止下拉刷新
onPullDownRefresh(){
this.setData({
count:0
})
//调用微信提供的api事件
wx.stopPullDownRefresh()
},
上拉触底