1.分享路径设置:
(分享出去的是一个完整的程序,非普通的分享)
onShareAppMessage
- 只有定义了此事件处理函数，右上角菜单才会显示“分享”按钮
- 用户点击分享按钮的时候会调用
-
此事件需要 return 一个 Object，用于自定义分享内容
自定义字段
分享自定义字段.png
2. 属性控制语句 wx:if
在框架中，我们用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif 和 wx:else 来添加一个 else 块：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
block wx:if
因为 wx:if 是一个控制属性，需要将它添加到一个标签上。但是如果我们想一次性判断多个组件标签，我们可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
3.import 和include
提供了封装的可能,但是怎样在引用的时候传递数据呢??
直接传递数据
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
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。
<view id="outter" bindtap="handleTap1">
outer view
<view id="middle" catchtap="handleTap2">
middle view
<view id="inner" bindtap="handleTap3">
inner view
</view>
</view>
</view>
//这是官方示例,这里的id 会被当做参数传递给逻辑层(js文件)的handleTap1函数.严格来说handleTap1接收的是一个event对象,这个对象有id的属性
事件的使用
- 在组件中绑定一个事件处理函数。
如bindtap，当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
- 在相应的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。
示例:
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>
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有区别
官方加载顺序逻辑示意图:
mina-lifecycle.png
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
网友评论