微信小程序

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>
相关推荐
他们叫我秃子35 分钟前
从 0 到 1,我用小程序 + 云开发打造了一个“记忆瓶子”,记录那些重要的日子!
前端·微信小程序·小程序·云开发
2501_915106321 小时前
iOS 反编译防护工具与实战组合 从静态侦察到 IPA 成品加固的工程化路径
android·ios·小程序·https·uni-app·iphone·webview
星光一影1 小时前
快递比价寄件系统技术解析:基于PHP+Vue+小程序的高效聚合配送解决方案
vue.js·mysql·小程序·php
苹果电脑的鑫鑫2 小时前
微信小程序原生如何使用画布生成名片
微信小程序·小程序
Dragon Wu3 小时前
Taro 自定义tab栏和自定义导航栏
前端·javascript·小程序·typescript·前端框架·taro
游戏开发爱好者84 小时前
iOS 26 iPhone 使用记录分析 多工具组合构建全方位设备行为洞察体系
android·ios·小程序·uni-app·cocoa·iphone·webview
星光一影17 小时前
Java医院管理系统HIS源码带小程序和安装教程
java·开发语言·小程序
毕设源码-郭学长17 小时前
【开题答辩全过程】以 基于微信小程序的个性化饮品定制点餐系统设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
马尚道19 小时前
uniapp陪诊小程序
微信小程序
Terio_my20 小时前
微信小程序-智慧社区项目开发完整技术文档(上)
微信小程序·小程序