微信小程序（中）

最新推荐文章于 2024-07-30 14:39:03 发布
最新推荐文章于 2024-07-30 14:39:03 发布
阅读量1k 收藏 7
点赞数 1
分类专栏： 微信小程序 文章标签： 微信小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HTML_Z/article/details/124775388
版权

微信小程序

获取系统信息

  • wx.getSystemInfoAsync异步获取系统信息

    • 在页面index.js中

      Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 异步获取系统信息
    wx.getSystemInfoAsync({
      // 成功
      success: (result) => {
        console.log(result)
      },
      // 失败
      fail: (err) => console.log(err),
      // 成功也调用，失败也调用
      complete: (info) => console.log(info)
    })
  },
})

    • 这个时候会打印出一些系统信息，如果我们根据自己的手机进行真机调试就会出现：

      在这里插入图片描述

  • Object wx.getSystemInfoSync()同步获取系统信息

    • 在页面index.js中

      Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // 同步获取系统信息
    const result = wx.getSystemInfoSync()
    console.log(result);
  },
})

    • 这个时候打印的结果和异步获取系统信息的结果是一样的。

      在这里插入图片描述

  • success回调函数参数请参考wx.getSystemInfoAsync(Object object) | 微信开放文档 (qq.com)

    属性类型默认值必填说明
    successfunction否接口调用成功的回调函数
    failfunction否接口调用失败的回调函数
    completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

  • success回调函数输出打印结果的参数。

    属性类型说明
    brandstring设备品牌
    modelstring设备型号
    screenWidthnumber屏幕宽度，单位 px
    screenHeightnumber屏幕高度，单位 px

路由

  • 什么是路由？

    • 路由是从一个页面跳到另一个页面（类似于超链接）

  • 页面目录结构：

    在这里插入图片描述

  • 在app.json配置

    {
  "pages": [
    "pages/01/index",
    "pages/me/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/01/index",
      "text": "首页"
    }, {
      "pagePath": "pages/me/index",
      "text": "我的"
    }]
  },
  "usingComponents": {
    "tabbar":"/custom-tab-bar/index"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

  • 在custom-tab-bar中

    • index,wxml

      <view class="tab-bar">
  <text class="tab-bar-item {{active == 0?'active':''}}" bindtap="switchTab" data-index="0">首页</text>
  <text class="tab-bar-item {{active == 1?'active':''}}" bindtap="switchTab" data-index="1">我的</text>
</view>

    • index,wxss

      .tab-bar {
  display: flex;
  text-align: center;
  line-height: 100rpx;
  border-top: 1px solid #0a81d2;
}
.tab-bar-item {
  flex: 1;
}
.active {
  color: red;
}

  • wx.switchTab(Object object)跳转到tabBar页面，并关闭其他所有非tabBar页面

    • 在index.js

      // custom-tab-bar/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    active: 0
  },

  /**
   * 组件的方法列表
   */
  methods: {
    /**
     * tabbar 切换
     */
    switchTab(e) {
      // 取出传的参数
      const {
        index
      } = e.currentTarget.dataset
      this.setData({
        active: index
      })
      // 跳转至 TabBar 页面
      const URL = index == 0 ? '/pages/01/index' : '/pages/me/index'
      wx.switchTab({
        url: URL,
      })
    }
  }
})

    • 页面效果展示

      在这里插入图片描述

  • wx.redirectTo(Object object)关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar页面。

    • 新建了一个详情页面detail

      在这里插入图片描述

    • 在app.json中

      {
  "pages": [
    "pages/01/index",
    "pages/me/index",
    "pages/detail/index"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "custom": true,
    "list": [{
      "pagePath": "pages/01/index",
      "text": "首页"
    }, {
      "pagePath": "pages/me/index",
      "text": "我的"
    }]
  },
  "usingComponents": {
    "tabbar":"/custom-tab-bar/index"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

    • 在页面01中的index.wxml中

      <!-- 点击按钮跳转详情页面 -->
<button bindtap="lickDetail">查看详情信息</button>

    • 在页面01中的index.js中

    • 这里的页面跳转是可以携带参数的

    • 接收是在detail页面的index.js中的页面加载函数onLoad

      // pages/01/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  onShow: function () {
    this.getTabBar().setData({
      active: 0
    })
  },
  /**
   * 跳转详情页面
   */
  lickDetail () {
     /**
     * 关闭当前页面（销毁），重新打开一个非 TabBar 页面
     */
    wx.redirectTo({
      // 这里不能跳转到 tabbar 页面
      url: '/pages/detail/index?id=10&name="张三"',
    })
  }
})

    • 在页面detail中的index.js中

      // pages/detail/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const {id,name} = options
    console.log(id,name);
  },
})

    • 页面效果展示

      在这里插入图片描述

      在这里插入图片描述

    • 控制台打印结果

      在这里插入图片描述

  • wx.navigateTo(Object object)保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar页面。使用wx.navigateBack可以返回到原页面。小程序中页面栈最多十层。

    • 在页面01中的index.js中

    • 这里也是可以传值的，和wx.redirectTo传值方式是一样的

    • 跳转到详情页是可以通过wx.navgateBack返回的

      // pages/01/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  onShow: function () {
    this.getTabBar().setData({
      active: 0
    })
  },
  /**
   * 跳转详情页面
   */
  lickDetail () {
    /**
     * 保留当前页面 跳转到另一个页面
     */
    wx.navigateTo({
      url: '/pages/detail/index?id=2&name="李四"',
      success:(res) => console.log(res)
    })
  }
})

    • 在页面detail中的index.wxml中

      // 点击按钮返回
<button bindtap="back">返回</button>

    • 在页面detail中的index.js中

      // pages/detail/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  back() {
    // delta 代表返的数量 是number值
    wx.navigateBack({delta:0})
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const {id,name} = options
    console.log(id,name);
  },
})

    • 页面效果展示

      在这里插入图片描述

      在这里插入图片描述

获取个人信息

  • wx.getUserProfile(Object object)

  • 获取用户信息。页面产生点击事件（例如button上bindtap的回调中）后才可调用，每次请求都会弹出授权窗口，用户同意后返回userInfo。

    属性类型默认值必填说明
    langstringen否显示用户信息的语言
    descstring否声明获取用户个人信息后的用途，不超过 30 个字符
    successfunction否接口调用成功的回调函数
    failfunction否接口调用失败的回调函数
    completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

  • 在页面01中的index.wxml中

    // 点击按钮 获取用户信息
<button type="primary" bindtap="getUserProfile">获取用户信息</button>

  • 在页面01中的index.js中

    // pages/01/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  onShow: function () {
    this.getTabBar().setData({
      active: 0
    })
  },
  /**
   * 获取用户信息
   */
  getUserProfile() {
    // 获取用户信息
    wx.getUserProfile({
      desc: '用于注册用户', // 描述信息，后期将会显示在用户界面上
      success:({userInfo}) => console.log(userInfo),
      fail:(err) => console.log(err)
    })
  }
})

  • 页面效果展示

    在这里插入图片描述

  • 控制台打印结果

    在这里插入图片描述

缓存

  • 用户信息缓存，只需要获取一次用户信息，不需要一直获取用户信息，给用户造成不好的体验。
同步缓存

  • wx.setStorageSync(string key, any data)同步设置缓存

    • string key
    • 本地缓存中指定的 key
    • any data
    • 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。

  • 同步缓存后，获取信息时使用同步获取缓存和异步获取缓存都是可以的

  • wx.getStorageSync(string key)同步获取缓存

  • wx.getStorage(Object object)异步获取缓存

    属性类型默认值必填说明
    keystring是本地缓存中指定的 key
    successfunction否接口调用成功的回调函数
    failfunction否接口调用失败的回调函数
    completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

  • 在页面01中的index.wxml中

    <button type="primary" bindtap="getUserProfile">获取用户信息</button>

  • 在页面01中的index.js中

    // pages/01/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  onShow: function () {

  },
  /**
   * 获取用户信息
   */
  getUserProfile() {
    // 获取用户信息
    wx.getUserProfile({
      desc: '用于注册用户', // 描述信息，后期将会显示在用户界面上
      success: ({
        userInfo
      }) => {
        // console.log(userInfo)
        // 缓存用户的信息
        this.saveUserInfo(userInfo)
      },
      fail: (err) => console.log(err)
    })
  },
  /**
   * 报错用户信息
   */
  saveUserInfo(userInfo) {
    // console.log(userInfo);
    同步缓存用户信息
    wx.setStorageSync('userInfo', userInfo)
    // 获取缓存中的用户信息（同步）
    // const userInfoStorage = wx.getStorageSync('userInfo')
    // console.log(userInfoStorage);
    // 获取缓存中的用户信息（异步）
    wx.getStorage({
      key: 'userInfo',
      success: ({data}) => console.log(data)
    })
  }
})

  • 页面效果展示

    在这里插入图片描述

  • 控制台打印结果

    在这里插入图片描述

异步缓存

  • wx.setStorage(Object object)异步设置缓存

    属性类型默认值必填说明
    keystring是本地缓存中指定的 key
    dataany是需要存储的内容，只支持原生类型、Date、及能够通过JSON.stringify序列化的对象
    successfunction否接口调用成功的回调函数
    failfunction否接口调用失败的回调函数
    completefunction否接口调用结束的回调函数（调用成功、失败都会执行）

  • 在页面01中的index.wxml中

    <button type="primary" bindtap="getUserProfile">获取用户信息</button>

  • 在页面01中的index.js中

    // pages/01/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  onShow: function () {

  },
  /**
   * 获取用户信息
   */
  getUserProfile() {
    // 获取用户信息
    wx.getUserProfile({
      desc: '用于注册用户', // 描述信息，后期将会显示在用户界面上
      success: ({
        userInfo
      }) => {
        // console.log(userInfo)
        // 缓存用户的信息
        this.saveUserInfo(userInfo)
      },
      fail: (err) => console.log(err)
    })
  },
  /**
   * 报错用户信息
   */
  saveUserInfo(userInfo) {
    // console.log(userInfo);
    // 异步缓存用户信息
    wx.setStorage({
      key: 'userInfo',
      // 数据
      data: userInfo
    })
    // 获取缓存中的用户信息（同步）
    // const userInfoStorage = wx.getStorageSync('userInfo')
    // console.log(userInfoStorage);
    // 获取缓存中的用户信息（异步）
    wx.getStorage({
      key: 'userInfo',
      success: ({data}) => console.log(data)
    })
  }
})

  • 页面展示效果和控制台打印结果和同步缓存是一样的

wx.showToast(Object object)

  • 显示消息提示框

    属性类型默认值必填说明
    titlestring是提示的内容
    iconstringsuccess否图标
    durationnumber1500否显示的延迟时间
    maskbooleanfalse否是否显示透明蒙层，防止触摸穿透

  • 在页面01中的index.wxml中

    <button bindtap="showToast">显示toast</button>

  • 在页面01中的index.js中

    // pages/01/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  /**
   * 显示 Toast
   */
  showToast() {
    wx.showToast({
      title: '提示信息',
      // success 显示成功图标
      // error 显示失败图标
      // loading 显示加载图标
      // none 不显示图标
      icon:'success',  
      duration:5000, // 延迟时间
      mask:true, // 当你点击按钮时 出现提示 但是这个时候还可以点击这个页面的其他按钮 
      // 设置 mask:true 就不可以点击了
    })
  }
})

  • 页面效果展示

    在这里插入图片描述

wx.showModal(Object object)

  • 显示模态对话框

    属性类型默认值必填说明
    titlestring否提示的标题
    contentstring否提示的内容
    showCancelbooleantrue否是否显示取消按钮
    cancelTextstring取消否取消按钮的文字，最多 4 个字符
    cancelColorstring#000否取消按钮的文字颜色，必须是 16 进制的颜色字符串
    confirmTextstring确定否确定按钮的文字，最多 4 个字符
    editablebooleanfalse否是否显示输入框
    successfunction否接口调用成功的回调函数
    failfunction否接口调用失败的回调函数

  • 在页面01中的index.wxml中

    <button bindtap="showModal">显示modal</button>

  • 在页面01中的index.js中

    Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  showModal(){
    wx.showModal({
      title:'标题',
      content:'提示的内容',
      showCancel:true, // 是否显示取消按钮
      cancelText:'取消', // 自定义取消按钮文字
      cancelColor:'#05d7fe', // 取消按钮的文字颜色
      confirmText:'确认', // 确认按钮的文字
      // editable:true // 是否显示输入框
      success:(res) => console.log(res) // 点击确认的回调函数
    })
  }
})

  • 页面效果展示

    在这里插入图片描述

wx.showLoading(Object object)

  • 显示loading提示框。需主动调用wx.hideLoading才能关闭提示框

    属性类型默认值必填说明
    titlestring否提示的内容
    maskbooleanfalse否是否显示透明蒙层，防止触摸穿透
    successfunction否接口调用成功的回调函数

  • 在页面01中的index.wxml中

    <button bindtap="showLoading">loading</button>

  • 在页面01中的index.js中

    Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  /**
   * 显示加载
   */
  showLoading() {
    // 显示Loading
    wx.showLoading({
      title:'加载中',

    })
    // 隐藏Loading
    setTimeout(()=>{
      wx.hideLoading()
    },2000)
  }
})

  • 页面效果展示

    在这里插入图片描述

wx.request(Object object)

  • 发起HTTPS网络请求

  • 在页面01中的index.wxml中

    <button bindtap="getGoods">获取商品数据</button>

  • 在页面01中的index.js中

    Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },
  /**
   * 获取商品数据
   */
  getGoods() {
    wx.request({
      url: 'http://localhost:3000/home/queryGoods', // 请求地址
      method:'GET', // 请求方式
      header:{
        'content-type':'application/json'
      },
      timeout:5000, // 超时时间
      success:(res) => console.log(res.data)
    })
  }
})

  • 这样在真实的实战项目是不可行的，不利于维护。

    • 当你一个项目有很多上百个数据请求时，你肯定不能这么写上百个
    • 当你的数据请求地址发生改变时，你不可能一一去修改
    • 所有这个时候我们需要封装一个便于维护使用的数据网络请求
    • 博客：https://blog.csdn.net/HTML_Z/article/details/124722286

  • 控制台数据打印结果

    在这里插入图片描述

BloggerM
关注
专栏目录
获取微信小程序系统信息
马优晨
12-16 753
获取微信小程序系统信息（版本、端、系统、导航高度等）
微信小程序 - 获取系统信息
weixin_34144848的博客
05-26 181
为什么80%的码农都做不了架构师？>>> ...
微信小程序常用API（总结分享）
最新发布
忧郁的蛋的专栏
07-30 1097
本篇文章给大家带来了关于的相关知识，其中主要总结了一些常用的api，下面一起来看一下，希望对大家有帮助。
微信小程序获取客户端系统信息
weixin_30500663的博客
01-29 337
微信小程序中有个API： wx.getSystemInfo() 可以获取系统的信息 wx.getSystemInfoSync()===》同步获取系统信息 wx.getSyatemInfo({ 　　success: function ( res ){ 　　console.log( res ); 　　// 得到一个系统信息对象，以 iPhone 7 Plus 为例 　...
微信小程序开发之——获取系统信息，2021阿里、网易、京东等大厂最新Android面试题
m0_65320833的博客
01-31 792
用户字体大小 {{result.fontSizeSetting}} 客户端基础库版本 {{result.SDKVersion}} 设备性能等级 {{result.benchmarkLevel}} 设备方向 {{result.deviceOrientation}} 允许微信使用相册 {{result.albumAuthorized}} 允许微信使用摄像头 {{result.cameraAuthorized}} 允许微信 使用定位 {{result.locationAuth.
微信小程序开发之——获取系统信息
2401_84132232的博客
04-06 799
分享一份NDK基础开发资料分享内容包括不限于高级UI、性能优化、架构师课程、NDK、混合式开发（ReactNative+Weex）微信小程序、Flutter等全方面的Android进阶实践技术；希望能帮助到大家，也节省大家在网上搜索资料的时间来学习，也可以分享动态给身边好友一起学习！《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！）**分享一份NDK基础开发资料[外链图片转存中…(img-z7ujtw8p-1712411424721)]
微信小程序中身份证信息识别源代码
05-21
微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小程序中身份证信息识别源代码微信小...
【微信小程序-毕设期末大作业】记账本微信小程序源码.zip
05-05
【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大作业】微信小程序源码 【微信小程序-毕设期末大...
【微信小程序-毕设期末大作业】源码电商类微信小程序
04-25
【微信小程序-毕设期末大作业】源码电商类微信小程序 【微信小程序-毕设期末大作业】源码电商类微信小程序【微信小程序-毕设期末大作业】源码电商类微信小程序【微信小程序-毕设期末大作业】源码电商类微信小程序...
微信小程序 首字母排序选择 (源码)
05-31
微信小程序 首字母排序选择 (源码)微信小程序 首字母排序选择 (源码)微信小程序 首字母排序选择 (源码)微信小程序 首字母排序选择 (源码)微信小程序 首字母排序选择 (源码)微信小程序 首字母排序选择 (源码)微信小...
微信小程序之----获取设备信息
weixin_30621919的博客
01-24 2284
1. 获取系统信息 wx.getSystemInfo(OBJECT) wx.getSystemInfoSync() 同步获取系统信息 回调常用参数 model(手机型号) pixelRatio， screenWidth ， screenHeight， windowWidth ,widnowHeight ...
小程序如何获取手机系统相关信息
小程序开发
09-11 1388
小程序如何获取手机系统信息的方法是：调用 wx.getSystemInfo 此接口；通过此接口，可以获取到手机的品牌、型号、像素比、操作系统等信息。
小程序↵符号替换不生效
天蚕土豆丝的博客
10-09 605
最近写小程序的时候后端返回了类似a={name:‘哈哈哈↵aaa’}这种数据，但是页面里{{a.name}}显示出来的结果是哈哈哈 aaa。并没有换行。所以就想到用正则替换↵符号。 开始这么写的 a.name=a.name.replace(/↵/g, ‘\n’)发现根本没效果 后面发现看到的↵符号在小程序里会转化成\r\n，看到的↵在代码里其实是\r\n，但换行只识别\n 所以就这样写了 a.name=a.name.replace(/[(\r\n)|(\n)|(↵)]+/g, ‘\n’)，还有很重要的一步，
小程序开发API之获取系统信息wx.getSystemInfo()、wx.getSystemInfoSync()
热门推荐
M.Siebel
01-18 1万+
wx.getSystemInfo(） 获取系统信息 函数参数： 返回值： 例如： 写法一 index.js /* brand 设备品牌 model 设备型号 pixelRatio 设备像素比 screenWidth 屏幕宽度，单位px screenHeight 屏幕高度，单位px windowWidth 可使用窗口宽度，单位p...
一些微信api
gh4188的博客
11-14 531
微信api
微信小程序 getSystemInfoSync
GetcharZp的博客
12-23 5852
getSystemInfoSync 获取用户设备的相关信息 示例代码： 使用位置：在 JS文件的任意函数中使用 const res = wx.getSystemInfoSync(); console.log(res); console.log(res.model); // 设备机型 console.log(res.system); // 设备系统 ...
小程序中获取设备信息
weixin_45932157的博客
05-13 4175
在小程序开发中，获取网络状态是一个常见的需求，以便根据网络状态来决定采取不同的处理方式。此时，输出所得的res.isConnected和res.networkType分别为网络是否连接和网络类型。此时，输出所得的res.latitude和res.longitude分别为当前位置的纬度和经度。此时，输出所得的res.brand + res.model即为设备名称信息。在小程序开发中，获取位置信息也是一个很常见的需求，以下是获取位置信息的方法。此时，输出所得的res.model即为设备型号信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值