zoukankan      html  css  js  c++  java
  • 小程序(二)

    {
      "pages":[
        "pages/news/news",//在pages下添加news文件夹以及news文件夹下的一套页面
        "pages/news/child/child",//在news下添加child文件夹以及child文件夹下的一套页面
         "pages/news/child",//在news下添加child的一套页面
        "pages/index/index",
        "pages/logs/logs"
      ],
      "window":{
        "backgroundTextStyle":"light",
        "navigationBarBackgroundColor": "#ccc",//导航栏的颜色
        "navigationBarTitleText": "小程序aaa",//导航栏的文字
        "navigationBarTextStyle":"black",//导航栏的文字颜色
         "enablePullDownRefresh":true//全局添加下拉刷新
      },
       "tabBar": {//底部导航栏:最少两个最多五个
         "position":"bottom",//底部导航栏位置,top在上面显示
         "list": [
           {
           "iconPath": "iconPath",//图标、路径
           "selectedIconPath": "iconPath",//选中后的图标、路径
           "pagePath": "pages/news/news",//文件路径
           "text": "新页面"//文字
           },
           {
           "iconPath": "iconPath",//图标、路径
           "selectedIconPath": "iconPath",//选中后的图标、路径
           "pagePath": "pages/index/index",
           "text": "首页"
           },
           {
           "iconPath": "iconPath",//图标、路径
           "selectedIconPath": "iconPath",//选中后的图标、路径
           "pagePath": "pages/logs/logs",
           "text": "日志"
           }
         ]
       },
    }

    详细信息可以看文档:微信小程序app.json页面的官方配置文档

    2、绑定事件:bindtap、catchtap。

    bind开头的事件不会阻止事件冒泡,而catch开头的事件可以阻止事件冒泡。

    <button bindtap='aaa'>按钮</button>
    <button catchtap='aaa'>按钮</button>

    3、跳转页面方法:wx.navigateTo({文件路径(例如:../news/news)});

    aaa:(e)=>{
      console.log(e);
      wx.navigateTo({//跳转页面方法,不会跳转tabbar页面
        //路径在这里
      });
      wx.switchTo({//跳转tabbar页面并关闭其他页面
        //路径在这里
      });
      wx.navigateBack({//返n个回页面
        //路径在这里
      });
    },

    4、获取事件对象、传值

    <button data-aid='001' bindtap='bbb'>按钮</button>
    bbb:(e)=>{
        console.log(e.target.dataset.aid);//触发事件的源组件(事件注册/绑定所在组件)
        console.log(e.currentTarget.dataset.aid);//事件触发的当前事件(当前事件,可能是触发事件的源组件,
          可能是触发的事件组件(即触发事件源组件的子元素),此时点击子元还是父元素,都是当前事件,应用e.currentTarget).
    }
    //view层无法用正常方式在小括号内传值,只能设置data-自定义属性,然后从事件对象内获取数据

    //如果在modal层可以按正常方式传值!!!

    5、请求api接口

    wx.request({ 
      url: 'test.php', // 仅为示例,并非真实的接口地址
      data: {
        x: '', y: ''
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success(res) {
        console.log(res.data)
      }
    })
  • 相关阅读:
    Online
    C语言的原码,反码,补码
    PHP常用函数
    [javascript] npx 命令简单使用
    [javascript] vue的实例生命周期钩子函数
    curl扩展post请求http接口报错:failed creating formpost data
    [javascript] 基于elementui的后台界面开发
    [javascript] var let const声明变量的区别
    [PHP] 实现oauth下的单点登陆
    [日常] KRA与KPI 绩效考核
  • 原文地址:https://www.cnblogs.com/xinchenhui/p/10409880.html
Copyright © 2011-2022 走看看