在做小程序的时候,有时候会因为文档看的不仔细,或者其他原因,总会有一些小错误,因此记录下来。
**1.关于FORM表单**
~~~
<form bindsubmit="formSubmit">
<button formType="submit">提交</button>
</form>
~~~
表单一定要设置一个绑定函数,即 bindsubmit的属性值 formSubmit
另外一定要设置一个button,并且属性key=”value”是固定的 formType="submit"
js端
formSubmit: function(e){
console.log(e);
}
下图事件的细节获取name值写错了,
应该是 e.detail.value.mobile
e为建立这个提交函数的时候传入的对象,可以为任意字母,一般为e或者event
可以用
e.detail.value.XXX.length 来获取当前输入框的长度
使用e.detail.value就可以把e.detail.value.XXX 系列所有的值获取到
currentTarget和target类似于当前结点和祖先结点的关系
表单POST和GET提交是有区别的 分别要设置method,并且字符串为大写
另外不同方式执行的header头也不一样
~~~
method: "POST",
header: { "Content-Type": "application/x-www-form-urlencoded"},
method: 'GET',
header: {'Accept': 'application/json'},
~~~
data:{},是需要请求时候发送到服务器端的json数据
wx.request提交的url 要是https,他的success和fail回调函数不是操作成功的回调函数,而是三次握手返回的success或者fail.
服务器端返回的数据要是JSON形式
success: function(res) {} 返回值以形参是形式存在,类似于ajax成功的返回值
一般在调用函数以后,都使用var that = this;因为如果有时候如果调用多个函数this会指向错乱。好像JQUERY源码里有这样的用法。
**2.提示**
~~~
wx.showToast 类似于alert
wx.hideToast 隐藏弹出框 不知道有什么用。。
wx.showModel 类似于confirm 根据操作返回true或者false
wx.showModal({
title: '提示',
content: '这是一个模态弹窗',
success: function(res) {
if (res.confirm) { //点击确定以后执行的操作
console.log('用户点击确定')
}else{ //点击取消执行的操作
}
}
})
~~~
wx.showActionSheet(){}弹出一个类似于select option框一样的列表,最多6个返回索引 0开始
个人觉得这些提示框经常结合setTimeout函数执行,而不是本身的success:function,如果根据官方提供的调用成功以后执行的方法,提示框会在调用的一瞬间就执行成功或者失败函数,根本来不及看清提示
setTimeout(function(){
//action 在提示框结束以后,执行你想执行的动作
},1000)
### **3.跳转**
wx.navigateTo,是保留当前页面,调到应用内某个页面,使用wx.navigateBack可以返回
类似于在当前页面上加一层float层,遮住当前页面
而wx.redirectTo是关闭当前页面,调到应用内某个页面 不可以返回
上面两者可以带参数
应用的页面就是app.json里注册过的页面,否则报错navigateTo:fail url not in app.json
并且上面两个跳转函数都是不可以调到tabBar页面的,tabBar是在app.json里 tabBar的list里的列表页
<navigator url="../untitled/untitled" >返回首页</navigator>
//跳转到除tabBar页面之外的页面一点需要注意一下,不让就会被坑的
wx.switchTab 调到tabBar页面,并且关掉所有其他非tabBar页面,不能携带参数
wx.navigateBack 返回上X层页面,默认是1
### **4.关于传递参数**
静态数据:
在页面初始化的时候,data这个json数据,是页面静态数据,可以在模板中直接引用,
~~~
Page({
data:{
test:'hello world',
arrayInfo:[{
info1:'first',
info2:'second',
}]
}
})
在模板页中,通过{{test}}和{{arrayInfo.info1}}、{{arrayInfo.info2}}可以引入数据
~~~
动态数据:
可以通过事件的触发,动态设置数据
~~~
this.setData(){
"information":"dynamic data",
}
~~~
可以通过wx:for循环输出数据,类似于foreach,它绑定一个数组,默认当前下标变量名为index,数组当前项的默认名为item
可以使用 wx:for-item 和wx:for-index指定变量名
现在如果单独使用wx:for会有一个warning级错误,可以和wx:key消灭错误提示
wx:for="{{userListInfo}}" wx:key="item"
### **5.事件**
在模板页中,事件绑定有balabala一堆,但是我目前只有bindtap,类似于click
比如
`<view class="consignee-action" data-deleteid="{{item.id}}" bindtap="deleteClick">删除</view>`
这里这个view绑定的就是deleteClick这个事件,点击的时候会在JS中找到同名函数进行事件处理。
data-deleteid是一个dataset的属性,JS可以通过这个查找到data-*对应的值。进行与服务器端的交互.以data-开头,多个单词用-链接,不能有大写.
通过传入的event,可以通过event.currentTarget.dataset.XXX来获取在模板页设置的时候这个data-XXX的值
### **6.全局变量**
在app.js中定义的数据或者函数都是全局的,但是函数是没有必要放在全局里
~~~
//app.js
App({
globalData:{
userInfo:null,
servsers:'https://shop.com'
}
})
~~~
在页面中getApp().globalData.servsers就可以获取到设置的全局变量的值
### **7.函数的复用**
~~~
test.js
test: function(){
}
module.exports={
test:test
}
other.js
var common = require('test.js');
page({
common.test()
})
~~~