1.分享路径设置:
(分享出去的是一个完整的程序,非普通的分享)
onShareAppMessage
- 只有定义了此事件处理函数,右上角菜单才会显示“分享”按钮
- 用户点击分享按钮的时候会调用
-
此事件需要 return 一个 Object,用于自定义分享内容
自定义字段
2. 属性控制语句 wx:if
在框架中,我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:
True
也可以用 wx:elif 和 wx:else 来添加一个 else 块:
1
2
3
block wx:if
因为 wx:if 是一个控制属性,需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签,我们可以使用一个
view1
view2
3.import 和include
提供了封装的可能,但是怎样在引用的时候传递数据呢??
直接传递数据
4.this 和that
由于js中this代指对象会改变,所以先用that 捕获一个this 如下:
var xiaoming = {
name: '小明',
birth: 1990,
age: function () {
var that = this; // 在方法内部一开始就捕获this
function getAgeFromBirth() {
var y = new Date().getFullYear();
return y - that.birth; // 用that而不是this
}
return getAgeFromBirth();
}
};
xiaoming.age(); // 25
5. bindtap是谁的属性(所有控件都可以接收事件吗?)
什么是事件 ?:
- 事件是视图层到逻辑层的通讯方式
- 事件可以将用户的行为反馈到逻辑层进行处理
- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息,如 id, dataset, touches。
ps:也就是任何组件都没有发送"事件"的能力,如果需要有发送事件的功能则单独配置bind.这里的事件和OC,Swift中的不太一样需要区分理解
事件分类
事件分为冒泡事件和非冒泡事件:
1.冒泡事件:当一个组件上的事件被触发后,该事件会向父节点传递。
2.非冒泡事件:当一个组件上的事件被触发后,该事件不会向父节点传递。
|类型|触发条件|
|--|--|--|
|touchstart |手指触摸动作开始 |
|touchmove|手指触摸后移动|
|touchcancel|手指触摸动作被打断,如来电提醒,弹窗|
|touchend|手指触摸动作结束|
|tap|手指触摸后马上离开|
|longtap|手指触摸后,超过350ms再离开|
ps:组件具有的事件能力都是非冒泡事件,如input的接收输入的时间
怎样给一个组件赋予传递事件的能力?
事件绑定的写法同组件的属性,以 key、value 的形式。
- key 以bind或catch开头,然后跟上事件的类型,如bindtap, catchtouchstart
- value 是一个字符串,需要在对应的 Page 中定义同名的函数。不然当触发事件的时候会报错。
如在下边这个例子中,点击 inner view 会先后触发handleTap3和handleTap2(因为tap事件会冒泡到 middle view,而 middle view 阻止了 tap 事件冒泡,不再向父节点传递),点击 middle view 会触发handleTap2,点击 outter view 会触发handleTap1。
outer view
middle view
inner view
//这是官方示例,这里的id 会被当做参数传递给逻辑层(js文件)的handleTap1函数.严格来说handleTap1接收的是一个event对象,这个对象有id的属性
事件的使用
- 在组件中绑定一个事件处理函数。
如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
Click me!
- 在相应的Page定义中写上相应的事件处理函数,参数是event。
Page({
tapName: function(event) {
console.log(event)
}
})
- 可以看到log出来的信息大致如下
使用currentTarget来获取数据,target会出现Undefined
{
"type":"tap",
"timeStamp":895,
"target": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}
回到最初的问题,bindtap是谁的属性
bindtap是使当前组件具有事件的能力.本质来说bindtap仅仅就是个
标签对的普通属性,wx的框架进行识别而已.如果你在组件里面
写上编译器无法理解的属性时,并不影响程序的运行.
自定义数据
在组件中可以定义数据,这些数据将会通过事件传递给 SERVICE。
书写方式: 以data-开头,多个单词由连字符-链接,不能有大写
(大写会自动转成小写)如data-element-type,最终在
event.target.dataset 中会将连字符转成驼峰elementType。
示例:
DataSet Test
Page({
bindViewTap:function(event){
event.target.dataset.alphaBeta === 1 // - 会转为驼峰写法
event.target.dataset.alphabeta === 2 // 大写会转为小写
}
})
其他参考[官方文档][5]
[5]:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html?t=20161230
6.页面跳转时数据如何传递
6.页面间数据传递
A页面js.
wx.navigateTo({
url: '../detail/detail?id=' + ds.id + '&title=' + ds.title + '&type=ing'
})
数据传递格式类似get的url拼写
B页面,此处为../detail/detail页面
onLoad: function (options) {
var that = this
var id = options.id
var title =options.title
//这里可以在本页面的data里面保存一下方便使用
//that.setData({
// options: options
// })
}
这里需要注意一下page页面的调用顺序
onLoad --->onShow -->onReady
ps:console.log()的用方法和NSLog的用法一样需要有占位符,和Python有区别
官方加载顺序逻辑示意图:
7.网络请求
有两种方法
方法一:[微信提供的接口][7_1]
[7_1]:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html
示例:
wx.request({
url: 'test.php', //仅为示例,并非真实的接口地址
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
参数图总
参数名 | 类型 | 必填 | 说明 |
---|---|---|---|
url | String | 是 | 开发者服务器接口地址 |
data | Object、String | 否 | |
header | Object | 否 | 设置请求的 header , header 中不能设置 Referer |
method | String | 否 | 默认为 GET,有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT |
dataType | String | 否 | 默认为 json。如果设置了 dataType 为 json,则会尝试对响应的数据做一次 JSON.parse |
success | Function | 否 | 收到开发者服务成功返回的回调函数,res = {data: '开发者服务器返回的内容'} |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
方法二:使用JS中网络请求方法
网络数据获得后直接调用setData,做数据保存
目前仅知道[Fetch][7_2]
[7_2]:http://www.th7.cn/web/js/201609/188916.shtml
语法说明:
fetch(url, options).then(function(response) {
// handle HTTP response
}, function(error) {
// handle network error
})
示例:
GET
fetch('/users.json').then(function(response) {
console.log(response.headers.get('Content-Type'))
console.log(response.headers.get('Date'))
console.log(response.status)
console.log(response.statusText)
})
POST
POST请求
fetch('/users', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: 'Hubot',
login: 'hubot',
})
})
8.界面布局
由于没有学过css布局
建议[使用flex][8-1]
[8-1]:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool