微信小程序

1,内置api

显示提示

  • showToast

本地存储

  • wx.setStorageSync(key,value)

本地取

  • wx.getStorageSync(key)
  • wx.request 网络请求

2,生命周期

onLoad 页面加载完毕

onPullDownRefresh 下拉刷新

onReachBottom 触底更新

3,页面切换

这是最常见的一种跳转方式,相当于html里的a标签.但需要注意的是 该方法不能跳转tabbar页面.

2,wx.navigateTo.

通过构造js函数,在函数中调用该接口可实现页面跳转的效果.但该接口同样不能跳转tabbar页面.跳转后左上角有返回小箭头,点击可返回原本页面.

格式为:

//<!**wxml文件**>
<view class="select_calculator" bindtap="next_calculator">
//js文件
next_calculator:function () {
    wx.navigateTo({
      url: '/pages/calculator/calculator',
    })

3,wx.redirectTo.

关闭当前页面,跳转到应用内的某个页面(不能跳转tabbar页面)。类似于html中的 window.open('...');

跳转后左上角出现返回小箭头,点击后可返回原本页面.

格式为:

<view>
  <navigator open-type="redirect" url="/pages/event/event">跳转并替换</navigator>
</view>

4,wx.switchTab.

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面;该方法只能跳转tabbar页面.

5,wx.reLaunch.

关闭所有页面,打开到应用内的某个页面。 跟 wx.redirectTo 一样左上角不会出现返回箭头,但两者却不完全相同;

格式为:

<view>
  <navigator open-type="reLaunch">重启</navigator>
</view>

4 ,tabBar 全局配置

tabBar 是移动端应用常见的页面效果, 用于实现多页面 的快速切换 。

小程序中通常将其分为:

1,底部 tabBar

2,顶部 tabBar

1, 注意:

  1. tabBar中只能配置最少 2 个、最多 5 个 tab 页签
  2. 当渲染顶部 tabBar 时,不显示 icon,只显示文本

2,tabBar 的 6 个组成部分

① backgroundColor:				tabBar 的背景色

② selectedIconPath:			选中时的图片路径

③ borderStyle:					tabBar 上边框的颜色

④ iconPath:					未选中时的图片路径

⑤ selectedColor:				tab 上的文字选中时的颜色

⑥ color:						tab 上文字的默认(未选中)颜色

3. tabBar 节点的配置项

4. 每个 tab 项的配置选项

5,全局配置 - 案例:配置 tabBar

配置 tabBar 选项

① 打开 app.json 配置文件,和 pages、window 平级,新增 tabBar 节点

② tabBar 节点中,新增 list 数组 ,这个数组中存放的,是每个 tab 项的配置对象

③ 在 list 数组中, 新增每一个 tab 项的配置对象 。对象中包含的属性如下: pagePath 指定当前 tab 对应的页面路径 【 必填 】

text 指定当前 tab 上按钮的文字【 必填】

iconPath 指定当前 tab 未选中时候的图片路径【可选】

selectedIconPath 指定当前 tab 被选中后高亮的图片路径【可选】

代码如下:
{
    "pages": [
        "pages/hone/hone",
        "pages/Profile/Profile",
        "pages/experience/experience",
        "pages/skill/skill",
        "pages/index/index",
        "pages/logs/logs"
    ],
    "tabBar":{
        "color": "#777",
        "selectedColor": "#1cb9ce",
        "list":[
            {"pagePath": "pages/hone/hone","text":"简历信息","iconPath": "/pages/img/icon08.png","selectedIconPath": "/pages/img/icon08.png"},
            {"pagePath": "pages/skill/skill","text":"个人技能","iconPath": "/pages/img/icon04.png","selectedIconPath": "/pages/img/icon04.png"},
            {"pagePath": "pages/experience/experience","text":"项目经历","iconPath": "/pages/img/icon02.png","selectedIconPath": "/pages/img/icon02.png"},
            {"pagePath": "pages/Profile/Profile","text":"自我评价","iconPath": "/pages/img/icon06.png","selectedIconPath": "/pages/img/icon06.png"}
        ]
    },
    "window": {
        "backgroundTextStyle": "light",
        "navigationBarBackgroundColor": "#fff",
        "navigationBarTitleText": "Weixin",
        "navigationBarTextStyle": "black"
    },
    "style": "v2",
    "sitemapLocation": "sitemap.json"
}

6,页面传参

wxml 代码如下:
<view>
  <navigator open-type="navigate" url="/pages/event/event?name=mumu&age=18">事件event</navigator>
</view>
<view>
  <navigator open-type="redirect" url="/pages/event/event?name=曾庆林&age=33">跳转并替换</navigator>
</view>
js 代码如下:
/**
   * 页面的初始数据
   */
  data: {
    num:null,
  },
  goEvent(e){
    // 获取到传递的参数type
    var type = e.target.dataset.type;
    // 如果type值是redirect 替换跳转
    if(type=="redirect"){
      wx.redirectTo({
        url: "/pages/event/event",
      })
    }else{
      // 否则就普通跳转
      wx.navigateTo({
        url: '/pages/event/event',
      })
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 更新导航栏的标题
    wx.setNavigationBarTitle({
      title: '导航与跳转',
    })
   
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    this.setData({num:app.globalData.num})
  },
页面传递的参数
<view>页面传递的参数</view>
<view>
姓名:{{name}},年龄{{age}}
</view>
相关推荐
郭wes代码11 小时前
Cmd命令大全(万字详细版)
python·算法·小程序
.生产的驴16 小时前
SpringBoot 对接第三方登录 手机号登录 手机号验证 微信小程序登录 结合Redis SaToken
java·spring boot·redis·后端·缓存·微信小程序·maven
汤姆yu21 小时前
基于微信小程序的乡村旅游系统
微信小程序·旅游·乡村旅游
计算机徐师兄1 天前
基于TP5框架的家具购物小程序的设计与实现【附源码、文档】
小程序·php·家具购物小程序·家具购物微信小程序·家具购物
曲辒净1 天前
微信小程序实现二维码海报保存分享功能
微信小程序·小程序
朽木成才1 天前
小程序快速实现大模型聊天机器人
小程序·机器人
peachSoda71 天前
随手记:小程序使用uni.createVideoContext视频无法触发播放
小程序
何极光1 天前
uniapp小程序样式穿透
前端·小程序·uni-app
小墨&晓末1 天前
【PythonGui实战】自动摇号小程序
python·算法·小程序·系统安全
oil欧哟2 天前
🤔认真投入一个月做的小程序,能做成什么样子?有人用吗?
前端·vue.js·微信小程序