一、简单介绍
- 小程序不是运行在浏览器中，所以没有 DOM 和 BOM 对象
- 小程序的 JS 有一些额外的成员
- App 方法，用于定义 应用程序实例对象
- Page 方法，用于定义 页面对象
- getApp 方法，用来获取全局应用程序对象
- getCurrentPages 方法，用来获取当前页面的调用栈（数组，最后一个就是当前页面）
- wx 对象，用来提供核心 API 的
- 小程序的 JS 是支持 commonJS 规范的
二、界面层的数据绑定
WXML 中的动态数据均来自对应 Page 页 .js 文件中的 data
- 简单绑定
{{ }}
- data 是界面和逻辑之间的桥梁
在 .wxml 文件中
<text> {{ msg }} </text>
<view class="{{ viewname }}"> </view>
在 .js 文件中
Page({
data: {
msg:'这是一条信息',
viewname:'item'
}
})
- 当语法解析误解了
true/false，可使用{{ }}解决
<checkbox checked = "{{ false }}"> </check>
- 列表渲染
<view wx:for=" {{ todos }} " wx:for-item="aaa">
<checkbox checked=" {{item.completed}} "> </checkbox>
<text> {{ item.name }} </text>
<text> {{ index }} </text>
</view>
-
wx:for属性，属性值等于要遍历的数组。在这个标签(循环体)内部使用item代表当前遍历的元素。index为当前遍历数据的下标 - 解决全局属性中有 item 这种关键词，使用
wx:for-item去给当前遍历数据起别名 - 给遍历的对象定义名称：
wx:for-item = "xxx" - 给遍历的下标（索引）定义名称：
wx:for-index = xxx,e.gwx:for-index = "i"
- 界面层的事件冒泡
- 事件的基本使用
bind[xxx]、catch[xxx]
-bind+事件名会触发冒泡
-catch+事件名会阻止冒泡 - 界面层的事件传参
若需要给事件处理函数指定参数，只能通过dataset方式
.js 中
Page({
tapHandle(e){
// 1. e.target拿到的就是点击的元素
// 2. dataset 指的是元素上所有以 data- 开头的属性集合
console.log(e.target.dataset)
}
})
.wxml 中
<button bindtap=" tapHandle " data-name = " Jack">点我 </button>
- 单向数据流
- 逻辑(JS) ----> 界面(WXML) ：数据绑定
this.setData() - 界面(WXML) ---> 逻辑(JS)：事件
e.detail.value
.wxml 中
<input bindinput="inputHandle"/>
<text> {{ msg}} </text>
.js中
Page({
data: {
msg:'initial'
},
inputHandle: function(e){
this.setData({
msg: e.detail.value
})
}
})
-
this.setData是用来改变data中的数据，他与直接赋值区别在于setData可以通知界面做出变化，直接赋值没办法实现这一点(直接赋值：this.data.msg = e.detail.value)
三、小程序 页面间的跳转和传值
第一种：组件方式
- 页面间跳转(导航)
<navigator url="../demo/demo"> Go to Demo </navigator>
- 页面间传值，接收页面传递的参数，要结合 JS 脚本
<navigator url="../demo/demo?name=Pinger> Pinger </navigator>
// .js 文件中
onLoad:function( options ){
console.log(options)
}
总结：
1). 传递：在跳转链接上加 ?要传递的参数，类似于?username=Jack，传多个参数的话就用 &符号来连接 ?name=jack&password=1234
2). 接收：onload的第一个参数options,是一个对象，里面包含了页面传递过来的所有参数
第二种： API方式
<button primary bindtap="tapHandle"> 跳转过去</button>
// .js 文件
Page({
tapHandle(){
wx.navigateTo({
url:'../demo/demo?id=123'
})
}
})
wx.navigateTo-
wx.navigateBack()默认返回到上一页 -
wx.navigateBack({ delta: 2})指定delta，就是返回到指定页面，当delta过大（超出历史记录），默认返回最开始的页面 wx.redirectTo
四、小程序中发送 HTTP 请求
onLoad:function(options){
wx.request({
url:'https://api.douban.com/v2/movie',
header: {
Content-Type: 'json'
},
success:function(res){
console.log(res)
}
})
}
- 发送异步请求不再是 web 中的 Ajax
- 没有跨域这种说法
- 请求的地址必须在管理后台添加白名单
- 域名必须备案，服务器端必须采用 HTTPS
网友评论