小程序杂乱知识点

小程序小知识点

在做小程序的时候,有时候会因为文档看的不仔细,或者其他原因,总会有一些小错误,因此记录下来。

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  系列所有的值获取到

currentTargettarget类似于当前结点和祖先结点的关系

表单POSTGET提交是有区别的  分别要设置method,并且字符串为大写

另外不同方式执行的header头也不一样

method: "POST",

header: { "Content-Type": "application/x-www-form-urlencoded"},

method: 'GET',

header: {'Accept': 'application/json'},

data:{},是需要请求时候发送到服务器端的json数据

wx.request提交的url 要是https,他的successfail回调函数不是操作成功的回调函数,而是三次握手返回的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里的列表页

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()
})

这里是网上找的代码,如果是我们的项目  都是index.js 咋子搞?待定

 

 

 

原文地址:https://www.cnblogs.com/zhouqi666/p/6278708.html