• 小程序杂乱知识点


    小程序小知识点

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

    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 咋子搞?待定

     

     

     

  • 相关阅读:
    每日日报2021.2.5
    每日日报2021.2.4
    每日日报2021 3/8
    每日日报2021 3/7
    每日日报2021 3/6
    每日日报2021 3/5
    每日日报 2021 3.4
    每日日报2021 3/3
    开课博客
    217. Contains Duplicate
  • 原文地址:https://www.cnblogs.com/zhouqi666/p/6278708.html
Copyright © 2020-2023  润新知