微信小程序---原生API

已于 2024-07-10 14:46:46 修改
阅读量918 收藏 8
点赞数 24
文章标签： 微信小程序 小程序
于 2024-07-10 14:41:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56769104/article/details/140321372
版权

一、API 基础

小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等，几乎所有小程序的 API 都挂载在 wx 对象底下，例如：wx.chooseMedia()、wx.request(), wx 对象实际上就是小程序的宿主环境微信所提供的全局对象

通常，在小程序 API 有以下几种类型：

  1. 事件监听 API：约定以 on 开头 API 用来监听某个事件是否触发，例如：wx.onThemeChange()
  2. 同步 API：约定以 Sync 结尾的 API 都是同步 API，例如：wx.setStorageSync()
  3. 异步 API：大多数 API 都是异步 API，例如：wx.setStorage()

异步 API 支持 callback & Promise 两种调用方式：

  1. 当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 Promise

  2. 部分接口如 request, uploadFile 本身就有返回值，因此不支持 Promise 风格的调用方式，它们的 promisify 需要开发者自行封装。

小程序 API 介绍

微信小程序 API 文档

二、 网络请求

知识点：

在微信小程序中，如果需要发起 HTTPS 网络请求需要使用：wx.request()，语法如下：

wx.request({
  // 接口地址，仅为示例，并非真实的接口地址
  url: 'example.php',
  // 请求的参数
  data: { x: '' },
  // 请求方式
  method: 'GET|POST|PUT|DELETE',
  success (res) {
    console.log(res.data)
  },
  fail(err) {
    console.log(err)
  }
})

注意：wx.request() 请求的域名需要在小程序管理平台进行配置，如果小程序正式版使用wx.request请求未配置的域名，在控制台会有相应的报错。

 这时候就需要在小程序管理后台进行设置请求的域名，打开微信公众后台：点击左侧 开发 → 开发管理 → 开发设置 → 服务器域名。域名只支持 https 而且要求已备案 

但一般我们在开发阶段时，处于开发阶段的服务器接口可能还没部署到对应的域名下，经常会通过另一个域名来进行开发调试，考虑到这一点，为了方便开发者进行开发调试，开发者工具、小程序的开发版和小程序的体验版在某些情况下允许 wx.request 请求任意域名 (只适用于开发环境，只能在小程序开发者工具中生效)，在开发工具中设置步骤如下：

将 不校验合法域名、web-view (业务域名)、TLS版本以及HTTPS证书 勾选上：

📌 注意事项：

​ 这两种方式只适用于开发者工具、小程序的开发版和小程序的体验版

​ 项目上线前必须在小程序管理平台进行合法域名的配置

Page({
  // 页面的初始数据
  data: {},

  // 获取数据
  getPostInfo() {
    wx.request({
      url: 'https://jsonplaceholder.typicode.com/posts/1',
      method: 'GET',
      success(res) {
        console.log(res)
      },
      fail(err) {
        console.log(err)
      }
    })
  },
    
  // coding...
}

三、界面交互

小程序还提供了一些用于界面交互的 API，如消息提示框、模态对话框、 loading 提示框等等

1、 loading 提示框

知识点：

小程序提供了一些用于界面交互的 API，例如： loading 提示框、消息提示框、模态对话框等 API。

loading 提示框常配合网络请求来使用，用于增加用户体验，对应的 API 有两个：

  1. wx.showLoading 显示加载提示框
  2. wx.hideLoading 隐藏加载提示框
wx.showLoading({
  title: '提示内容', // 提示的内容
  mask: true, // 是否显示透明蒙层，防止触摸穿透
  success() {}, // 接口调用成功的回调函数
  fail() {} // 接口调用失败的回调函数
})

官方文档：

wx.showLoading 官方文档

wx.hideLoading 官方文档

 

Page({
  onLoad: function (options) {
     console.log('页面加载完毕')
     this.getData();
  },

  data: {
    list: []
  },

  // 获取数据
  getData () {

+     // 显示 loading 提示框
+     wx.showLoading({
+       // 用来显示提示的内容
+       // 提示的内容不会自动换行，如果提示的内容比较多，因为在同一行展示
+       // 多出来的内容就会被隐藏
+       title: '数据加载中...',
+       // 是否展示透明蒙层，防止触摸穿透
+       mask: true
+     })

    // 如果需要发起网络请求，需要使用 wx.request API
    wx.request({
      // 接口地址
      url: 'https://gmall-prod.atguigu.cn/mall-api/index/findBanner',
      // 请求方式
      method: 'GET',
      // 请求参数
      data: {},
      // 请求头
      header: {},
      // API 调用成功以后，执行的回调
      success: (res) => {
        // console.log(res)
        if (res.data.code === 200) {
          this.setData({
            list: res.data.data
          })
        }
      },
      // API 调用失败以后，执行的回调
      fail: (err) => {
        console.log(err)
      },
      // API 不管调用成功还是失败以后，执行的回调
      complete: (res) => {
        // console.log(res)

+         // 关掉 loading 提示框
+         // hideLoading 和 showLoading 必须结合、配对使用才可以
+         wx.hideLoading()
      }
    })

  }

})

2、模态对话框以及消息提示框

知识点：

wx.showToast()：消息提示框用来根据用户的某些操作来告知操作的结果，如退出成功给用户提示，提示删除成功等，语法如下：

wx.showToast({
  title: '标题', // 提示的内容
  duration: 2000, // 提示的延迟时间
  mask: true, // 是否显示透明蒙层，防止触摸穿透
  icon: 'success', // 	图标
  success() {}, // 接口调用成功的回调函数
  fail() {} // 接口调用失败的回调函数
})

wx.showModal() 模态对话框也是在项目中频繁使用的一个小程序 API，通常用于向用户询问是否执行一些操作，例如：点击退出登录，显示模态对话框，询问用户是否真的需要退出等等

wx.showModal({
  title: '提示', // 提示的标题
  content: '您确定执行该操作吗？', // 提示的内容
  confirmColor: '#f3514f',
  // 接口调用结束的回调函数（调用成功、失败都会执行）
  success({ confirm }) {
    confirm && consle.log('点击了确定')
  }
})

官方文档：

wx.showToast 官方文档

wx.showModal 官方文档

Page({
  // coding...
  
  // 删除商品
  async delHandler () {

    // showModal 显示模态对话框
    const { confirm } = await wx.showModal({
      title: '提示',
      content: '是否删除该商品 ?'
    })

    if (confirm) {
      // showToast 消息提示框
      wx.showToast({
        title: '删除成功',
        icon: 'none',
        duration: 2000
      })
    } else {
      wx.showToast({
        title: '取消删除',
        icon: 'error',
        duration: 2000
      })
    }

  }
   
  // coding...

})

四、本地存储

小程序中也能够像网页一样支持本地数据缓存，本地数据缓存是小程序存储在当前设备上硬盘上的数据，本地数据缓存有非常多的用途，我们可以利用本地数据缓存来存储用户在小程序上产生的操作，在用户关闭小程序重新打开时可以恢复之前的状态。我们还可以利用本地缓存一些服务端非实时的数据提高小程序获取数据的速度，在特定的场景下可以提高页面的渲染速度，减少用户的等待时间。其包含以下 8个主要的 API

同步 API

异步 API

作用

wx.setStorageSync

wx.setStorage

将数据存储在本地缓存中指定的 key 中

wx.getStorageSync

wx.getStorage

从本地缓存中同步获取指定 key 的内容

wx.removeStorageSync

wx.removeStorage

从本地缓存中移除指定 key

wx.clearStorageSync

wx.clearStorageSync

清理本地数据缓存

异步方式的 API，在调用的时候都需要传入对象类型的参数

同步方式执行的 API 在使用时简洁比较好，缺点是同步会阻塞程序执行，执行效率上相较异步版本要差一些。

📌 注意事项：

  1. 对象类型的数据，可以直接进行存储，无需使用 JSON.stringify 转换
  2. 对象类型的数据存的时候没有使用转换，因此获取的时候也不需要使用 JSON.parse 转换
Page({
  // 将数据存储到本地
  setStorage () {
    // 第一个参数：本地存储中指定的 key
    // 第二个参数：需要存储的数据
    // wx.setStorageSync('num', 1)

    // 在小程序中
    // 如果存储的是对象类型数据，不需要使用 JSON.stringify 和 JSON.parse 进行转换
    // 直接进行存储和获取即可
    // wx.setStorageSync('obj', { name: 'tom', age: 10 })

    // ------------------- 异步 API -------------------
 
    wx.setStorage({
      key: 'num',
      data: 1
    })

    wx.setStorage({
      key: 'obj',
      data: { name: 'jerry', age: 18 }
    })

  },

  // 获取本地存储的数据
  async getStorage () {

    // 从本地存储的数据中获取指定 key 的数据、内容
    // const num = wx.getStorageSync('num')
    // const obj = wx.getStorageSync('obj')

    // console.log(num)
    // console.log(obj)

    // ------------------- 异步 API -------------------

    const { data } = await wx.getStorage({
      key: 'obj'
    })

    console.log(data)

  },

  // 删除本地存储的数据
  removeStorage () {

    // 从本地移除指定 key 的数据、内容
    // wx.removeStorageSync('num')

    // ------------------- 异步 API -------------------

    wx.removeStorage({
      key: 'num'
    })

  },

  // 清空本地存储的全部数据
  clearStorage () {
    // wx.clearStorageSync()
      
    // ------------------- 异步 API -------------------

    wx.clearStorage()
  },

})

五、路由与通信

知识点：

在小程序中实现页面的跳转，有两种方式：

  1. 声明式导航：navigator 组件
  2. 编程式导航：使用小程序提供的 API
    • wx.navigateTo()：保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面
    • wx.redirectTo()：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
    • wx.switchTab()：跳转到 tabBar 页面，路径后不能带参数
    • wx.navigateBack()：关闭当前页面，返回上一页面或多级页面
  3. 路径后可以带参数，参数需要在跳转到的页面的 onLoad 钩子函数中通过形参进行接收
    • 参数与路径之间使用 ? 分隔
    • 参数键与参数值用 = 相连
    • 不同参数用 & 分隔
    • 例如 path?key=value&key2=value2

Page({
  navigateTo() {
    // 保留当前页面，跳转到应用中其他页面，不能跳转到 tabBar 页面
    wx.navigateTo({
      url: '/pages/list/list?id=1&name=tom'
      // url: '/pages/cate/cate'
    })

  },

  redirectTo() {
    // 关闭(销毁)当前页面，跳转到应用中其他页面，不能跳转到 tabBar 页面
    wx.redirectTo({
      url: '/pages/list/list?id=1&name=tom'
      // url: '/pages/cate/cate'
    })

  },

  switchTab() {
    // 跳转到 tabBar 页面，不能跳转到 非 tabBar 页面，路径后面不能传递参数
    wx.switchTab({
      // url: '/pages/list/list'
      url: '/pages/cate/cate?id=1&name=tom'
    })

  },

  reLaunch() {
    // 关闭所有的页面，然后跳转到应用中某一个页面
    wx.reLaunch({
      url: '/pages/list/list?id=1&name=tom'
      // url: '/pages/cate/cate?id=1&name=tom'
    })

  }

})
// list.js
Page({

  navigateBack() {

    // 关闭当前页面，返回上一页或者返回多级页面
    // 默认返回上一页
    wx.navigateBack({
      delta: 1
    })

  },

  onLoad(options) {
    console.log(options)
  }

})

六、事件监听-上拉加载更多

上拉加载是小程序中常见的一种加载方式，当用户滑动页面到底部时，会自动加载更多的内容，以便用户继续浏览

小程序中实现上拉加载的方式：

1.在 app.json 或者 page.json 中配置距离页面底部距离： onReachBottomDistance；默认 50px

2.在 页面.js 中定义 onReachBottom 事件监听用户上拉加载

<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
view {
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

view:nth-child(odd) { //奇数
  background-color: lightskyblue;
}

view:nth-child(even) { //偶数
  background-color: lightsalmon;
}
Page({

  data: {
    numList: [1, 2, 3]
  },

  // 监听用户上拉加载
  onReachBottom() {
    // console.log('监听用户上拉加载')
    // 产品需求：
    // 当用户上拉，需要数字进行累加

    // 当用户上拉加载时，需要对数字进行累加，每次累加 3 个数字
    // 目前是 [1, 2, 3]，[1, 2, 3, 4, 5, 6]
    // 怎么进行追加 ？
    // 获取目前数组中最后一项 n，n + 1, n + 2, n + 3

    wx.showLoading({
      title: '数据加载中...'
    })

    setTimeout(() => {
      // 获取数组的最后一项
      const lastNum = this.data.numList[this.data.numList.length - 1]
      // 定义需要追加的元素
      const newArr = [lastNum + 1, lastNum + 2, lastNum + 3]

      this.setData({
        numList: [...this.data.numList, ...newArr]
      })

      wx.hideLoading()
    }, 1500)

  }

})

七、事件监听-下拉刷新

下拉刷新是小程序中常见的一种刷新方式，当用户下拉页面时，页面会自动刷新，以便用户获取最新的内容。

小程序中实现上拉加载更多的方式：

1.在 app.json 或者 page.json 中开启允许下拉，同时可以配置 窗口、loading 样式等

2.在 页面.js 中定义 onPullDownRefresh 事件监听用户下拉刷新

<view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>
view {
  height: 400rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

view:nth-child(odd) {
  background-color: lightskyblue;
}

view:nth-child(even) {
  background-color: lightsalmon;
}
Page({

  data: {
    numList: [1, 2, 3]
  },

  // 监听用户上拉加载
  onReachBottom() {
    
     // coding...

  },

  // 监听用户下拉刷新
  onPullDownRefresh () {
    // console.log('监听用户下拉刷新')

    // 产品需求：
    // 当用户上拉加载更多以后，如果用户进行了下拉刷新
    // 需要将数据进行重置
    this.setData({
      numList: [1, 2, 3]
    })

    // 在下拉刷新以后，loading 效果有可能不会回弹回去
    if (this.data.numList.length === 3) {
      wx.stopPullDownRefresh()
    }
  }

})

八、增强 scroll-view

1、scroll-view 上拉加载

知识点：

bindscrolltolower：滚动到底部/右边时触发

lower-threshold：距底部/右边多远时，触发 scrolltolower 事件

enable-back-to-top：让滚动条返回顶部，iOS 点击顶部状态栏、安卓双击标题栏时，只支持竖向

<scroll-view
  class="scroll-y"
  scroll-y
  lower-threshold="100"
  bindscrolltolower="getMore"
  enable-back-to-top
>

  <view wx:for="{{ arr }}" wx:key="*this">{{ item }}</view>

</scroll-view>

Page({

  data: {
    arr: [1, 2, 3]
  },

  // 上拉加载更多
  getMore() {

    wx.showLoading({
      title: '数据正在加载中...'
    })

    setTimeout(() => {

      // 记录当前数组的最后一个元素
      let lastNum = this.data.arr[this.data.arr.length - 1]
      // 最后一个元素加 1
      lastNum++
      // 每次向数组中新增三项
      const newArr = [lastNum, lastNum + 1, lastNum + 2]

      this.setData({
        arr: [...this.data.arr, ...newArr]
      })

     // 数据返回，隐藏 Loading
     wx.hideLoading()

     wx.showToast({
       title: '数字请求完毕，上滑继续浏览',
       icon: 'none'
     })

    }, 1000)

  }
})

2、scroll-view 下拉刷新

知识点：

refresher-enabled：开启自定义下拉刷新

refresher-default-style自定义下拉刷新默认样式支持设置 black | white | none， none 表示不使用默认样式

refresher-background：自定义下拉刷新区域背景颜色

bindrefresherrefresh：自定义下拉刷新状态回调

refresher-triggered：设置当前下拉刷新状态，(true 下拉刷新被触发，false 表示下拉刷新未被触发，用来关闭下拉效果)

<scroll-view
  class="scroll-y"
  scroll-y
  lower-threshold="100"
  bindscrolltolower="getMore"
  enable-back-to-top
             
  refresher-enabled
  refresher-default-style="black"
  refresher-background="#f7f7f8"
  refresher-triggered
  bindrefresherrefresh="onrefresh"
  refresher-triggered="{{ triggered }}"
>

  <view wx:for="{{ arr }}" wx:key="*this">{{ item }}</view>

</scroll-view>
Page({

  data: {
    triggered: false, // 控制 scroll-view 下拉刷新效果
    arr: [1, 2, 3]
  },

  // scroll-view 下拉刷新回调函数
  onrefresh() {

    wx.showLoading({
      title: '数据正在加载中...'
    })

    // 定时器模拟网络请求，1 秒后数据返回
    setTimeout(() => {

      // 重置数据
      this.setData({
        arr: [1, 2, 3]
      })

      // 数据返回，隐藏 Loading
      wx.hideLoading()

      wx.showToast({
        title: '下拉刷新完成，数据已重置...',
        icon: 'none'
      })

      // 数据返回，关闭 scroll-view 下拉刷新效果
      this.setData({
        triggered: false
      })

    }, 1000)
  }
})

 3、增强 scroll-view 完整代码 

<scroll-view
  scroll-y
  class="scroll-y"

  lower-threshold="100"
  bindscrolltolower="getMore"
  enable-back-to-top

  refresher-enabled
  refresher-default-style="black"
  refresher-background="#f7f7f8"
  bindrefresherrefresh="refreshHandler"
  refresher-triggered="{{isTriggered}}"
>
  
  <view wx:for="{{ numList }}" wx:key="*this">{{ item }}</view>

</scroll-view>
/* pages/index/index.wxss */

.scroll-y {
  height: 100vh;
  background-color: #efefef;
}

view {
  height: 500rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

view:nth-child(odd) {
  background-color: skyblue;
} 

view:nth-child(even) {
  background-color: lightsalmon;
}
Page({

  data: {
    numList: [1, 2, 3],
    isTriggered: false
  },

  // 下拉刷新
  refreshHandler () {

    wx.showToast({
      title: '下拉刷新...'
    })
    
    setTimeout(() => {
      this.setData({
        numList: [1, 2, 3],
        isTriggered: false
      })
    }, 2000)

  },


  // scroll-view 上拉加载更多事件的事件处理函数
  getMore () {

    
    wx.showLoading({
      title: '数据加载中...'
    })

    setTimeout(() => {
      // 获取数组的最后一项
      const lastNum = this.data.numList[this.data.numList.length - 1]
      // 定义需要追加的元素
      const newArr = [lastNum + 1, lastNum + 2, lastNum + 3]

      this.setData({
        numList: [...this.data.numList, ...newArr]
      })

      wx.hideLoading()
    }, 1500)


  }

})

杨小杨@1128
关注
  • 24
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
微信小程序 --- 微信原生 API
每天都要努力学习哦~~
02-23 1368
小程序中也能够像网页一样支持本地数据缓存，本地数据缓存是小程序存储在当前设备上硬盘上的数据，本地数据缓存有非常多的用途，我们可以利用本地数据缓存来存储用户在小程序上产生的操作，在用户关闭小程序重新打开时可以恢复之前的状态。其包含以下 8个主要的 API。但一般我们在开发阶段时，处于开发阶段的服务器接口可能还没部署到对应的域名下，经常会通过另一个域名来进行开发调试，考虑到这一点，为了方便开发者进行开发调试，开发者工具、小程序的开发版和小程序的体验版在某些情况下允许。
微信小程序 - 入门篇
世界和我们都不该止步于此
10-22 2682
在我们进行自定义Tabbar之前，必须要注意一个点（不注意也行，到时候微信小程序会报错的）：我们就算自定义了Tabbar也不能将配置文件中的list节点删除首先我们给tabbar配置这样一条指令然后我们进入官网：下载给我们配置的tabbar：然后将文件复制到我们的项目根目录之下，修改wxs文件中的配置路径、图标等等onShow() {
微信小程序--小程序框架
ChatYU的博客
10-16 3345
​ 整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。 ​
微信小程序 - 云开发
Qianmoer的博客
01-12 1万+
微信小程序 - 云开发
微信小程序--音乐播放器
热门推荐
河里的草_increase
07-24 1万+
微信小程序练习--音乐播放器 说明： 这个项目旨在练习组件以及页面的设计。页面和交互的实现可能有多种方式，这里只为了对组件和项目的结构进行熟悉了解。后续会有更加完善的项目。 由于涉及到mp3外链导入音乐，预览二维码在外链失效时会出错，这里不放预览二维码了；另预览二维码存在有效时长，有兴趣的可以自己试着运行程序，在运行程序之前更换mp3外链的地址，以防出错。mp3外链（音乐外链在线获取_音乐外链生成网站_音乐在线听-mp3外链网 (xf1433.com)）。 喜欢的可以点个赞，如果有问题或者想要完整的
微信小程序-原生-使用微信开发者工具
09-05
总结来说，使用微信开发者工具进行微信小程序的原生开发，需要掌握JS、WXML和WXSS的语法，理解小程序的生命周期，利用组件化和API实现各种功能，同时在开发过程中充分利用调试工具，确保程序的稳定性和用户体验。
微信小程序-微信小程序-仿豆瓣电影-demo小程序项目源码-原生开发框架-含效果截图示例.zip
05-22
“微信小程序-项目源码-原生开发框架-含效果截图示例”这份资源，不仅包含了完整的微信小程序项目源码，而且基于原生开发框架，确保了代码的健壮性和可扩展性。源码中涵盖了微信小程序的基础架构、页面布局、功能...
微信小程序-微信小程序-米商城小程序项目源码-原生开发框架-含效果截图示例.zip
05-31
原生体验：微信小程序采用原生开发框架，确保流畅的用户交互体验，媲美原生APP。 即用即走：无需下载安装，用户通过微信即可轻松访问，极大地降低了使用门槛。 丰富API：微信提供了丰富的API接口，让开发者能够轻松...
原生微信小程序源码 - -豆瓣电影
05-01
"原生微信小程序源码 - -豆瓣电影"这个标题表明这是一个关于微信小程序的项目，其主要功能是实现与豆瓣电影相关的服务。原生指的是源码是使用微信小程序官方支持的语言和框架开发的，没有依赖任何第三方库或框架，...
微信小程序-微信小程序-新闻客户端
08-06
综上所述，“微信小程序-微信小程序-新闻客户端”这个项目涵盖了微信小程序的多个核心知识点，包括开发环境、框架结构、数据绑定、页面路由、API调用、用户交互、原生组件、UI设计、性能优化以及发布流程。...
基于STM32设计的智能喂养系统(ESP8266+微信小程序)175
07-05 1037
本设计采用了STM32控制芯片作为核心，结合了多种传感器和模块，以实现自动化的喂养功能。其中包括1.44寸LCD彩色显示屏和按键模块用于显示和操作参数，28BYJ-48步进电机用于实现定量投食，ESP8266-WIFI模块用于远程控制和监测，蜂鸣器模块用于报警提示，H711称重传感器用于检测食物余量，DHT11环境温湿度传感器用于监测环境条件，水位传感器用于检测水位。
【微信小程序知识点】转发功能的实现
最新发布
weixin_51781852的博客
07-12 77
2.通过给button组件设置属性open-type="share",可以在用户点击按钮后触发Page.onShareAppMessage事件监听函数。1.页面js文件必须声明onShareAppMessage事件监听函数，并自定义转发内容。只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮。转发功能，主要帮助用户更流畅地与好友分享内容与服务。
STM32HAL库+ESP8266+cJSON+微信小程序_连接华为云物联网平台
心之所向
07-12 507
基于华为云IoT平台的物联网系统的主要功能是通过STM32硬件设备，实现了温湿度、光照等环境参数的实时采集，并通过WiFi模块上传到华为云IoT平台。用户通过微信小程序可以实时查看这些数据，并设置相应的阈值。当参数超过阈值时，小程序会发出报警，并自动发送控制命令到硬件设备，实现自动化的环境调控。此外，小程序还提供了数据可视化的功能，支持折线图等图形展示，帮助用户更好地分析和理解数据。
微信小程序 - 本地存储 增加有效期
觉醒法师的专栏
07-09 652
小程序的本地存储并没有明确的有效期设置，存储的数据在不超过限制的情况下，会一直保留。小程序提供的本地存储API没有明确设置有效期的功能。为了解决这个问题，我们需要在存储数据时附加一个expiration字段，用于记录数据的过期时间，在获取数据时，检查当前时间是否超过了expiration指定的时间，如果超过则认为数据已失效。由于此方法不是由小程序API直接支持的功能，而是通过检查数据的有效性来模拟有效期行为，小程序本地存储不会自动检查删除过期数据，需要在使用数据时检查数据的有效性。
uniapp：微信小程序上传头像
sunluyi的博客
07-12 107
uniapp：微信小程序上传头像。
PHP智慧门店微信小程序系统源码
2401_84593645的博客
07-05 585
在这个快速变化的时代，智慧门店v3微信小程序以其前瞻性的设计理念、强大的功能支持以及卓越的用户体验，成为了未来零售的必然选择。它不仅能够提升商家的经营效率和服务质量，还能为顾客带来更加便捷、个性化的购物体验。线上浏览，线下体验，让购物变得更加便捷与个性化。它能够实时收集并分析顾客行为数据，包括浏览记录、购买偏好等，为商家提供精准的顾客画像。同时，小程序还支持顾客评价、留言反馈等互动方式，让商家及时了解顾客需求，提升服务质量。同时，小程序还能自动生成经营报表，让商家随时掌握门店运营状况，及时调整经营策略。
微信小程序---分包加载
m0_56769104的博客
07-12 663
❓小程序的代码通常是由许多页面、组件以及资源等组成，随着小程序功能的增加，代码量也会逐渐增加，体积过大就会导致用户打开速度变慢，影响用户的使用体验。分包加载是一种小程序优化技术。将小程序不同功能的代码，分别打包成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载，在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包。每个分包可以包含多个页面、组件、样式和逻辑等。当小程序需要使用某个分包时，才会加载该分包中的代码。
PHP企业工商年报大师微信小程序系统源码
2401_84414018的博客
07-12 141
企业工商年报大师”微信小程序贴心地为你设置了提醒功能，无论是年报开始前的准备提醒，还是即将到期的紧急提醒，都能让你第一时间掌握，绝不错过任何一个重要时间节点。只需几步操作，即可轻松完成年报申报，让繁琐的年报工作成为过去式。“企业工商年报大师”微信小程序不仅提供便捷的年报服务，还会及时发布最新的政策解读和填报指南，帮助你轻松应对政策变化，确保年报顺利通过。除了以上功能外，“企业工商年报大师”微信小程序还提供专业的客服支持，无论是填报过程中遇到的问题，还是关于年报的疑问，都能得到及时的解答和帮助。
uniapp中微信小程序——蓝牙连接并通信
MonkeyBananas的博客
07-08 1031
已下是我在实现蓝牙功能中使用到的所有Api，当然微信小程序中还有很多我没有用到的Api，如果下面没有满足你需求的Api可以去官方文档查看。初始化蓝牙模块 openBluetoothAdapter开始搜寻附近的蓝牙外围设备。 startBluetoothDevicesDiscovery监听蓝牙适配器状态变化事件 onBluetoothAdapterStateChange监听搜索到新设备的事件 onBluetoothDeviceFound移除蓝牙适配器状态变化事件的全部监听函数 offBluetoothAdap
uniapp怎么使用微信小程序原生api
07-28
UniApp 是一种基于 Vue.js 开发的跨平台解决方案，它可以同时构建出微信小程序、H5、App 等多端应用。UniApp 的目标是提供一套写代码、能在多个平台运行的框架。 在 UniApp 中，要使用微信小程序原生 API，需要通过封装的方式来实现。下面是一些使用微信小程序原生 API 的步骤： 1. 在 UniApp 的项目根目录下找到 `manifest.json` 文件，然后在 `uni-app` 节点下添加 `"mp-weixin": { "usingComponents": true }` 的配置，启用微信小程序原生组件和 API。 2. 在需要使用原生 API 的页面或组件中，可以通过 `this.$mp.page` 或 `this.$mp.component` 来访问原生 API。例如，使用 `this.$mp.page.setData()` 来更新页面的数据，或者使用 `this.$mp.page.route` 来获取当前页面的路径。 3. 如果需要使用微信小程序原生组件，可以在 `template` 中直接使用，不需要进行额外的封装或修改。 需要注意的是，虽然使用了微信小程序原生 API，但由于 UniApp 是跨平台的解决方案，不同平台之间的 API 可能会存在差异，因此在使用原生 API 时需要注意适配不同平台的问题。 通过以上步骤，可以在 UniApp 中使用微信小程序原生 API，实现更灵活和丰富的功能。使用 UniApp 可以节省开发成本，快速构建出适配多个平台的应用程序。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值