;

小程序技术人员经常用的API有那些?

2022-08-19 阅读:877
;
您当前位置:首页 | 新闻列表 | 新闻详情
小程序常用API

网络请求

微信提供了专属的API接口,用于网络请求: wx.request(Object object)

image.png

Page({ // 一般在onLoad中发送一些网络数据 onLoad() { // 发送网络请求 可以使用微信内置api -> wx.request // 参数为一个配置对象,配置对象中的url是必传的 // url必须是在微信后台白名单中的地址,或者在测试的时候关闭地址校验 wx.request({ url: 'http://api.example.com/api/home/houselist', // data用于设置参数  // 无论是post请求的参数还是get请求的参数都设置在data配置项中 data: { page: 1 }, // 成功时候的回调 // 写成箭头函数是因为方面内部在调用this.setData的时候可以使用正确的this success: res => { console.log(res.data.data)
      }, fail: err => console.log(err)
    })
  }
}) 复制代码

简单封装

import { BASE_URL } from './env' class API {
  #BASE_URL = '' constructor(BASE_URL) { this.#BASE_URL = BASE_URL } // 传入options是为了方便进行更多的配置,例如 header request(url, data = {},  options = { method: 'get' }) { return new Promise((resolve, reject) => {
      wx.request({ url: `${this.#BASE_URL}${url}`,
        data,
        ...options, success: res => { resolve(res.data.data)
        }, fail: reject
      })
    })
  } get(url, query, options = {}) { return this.request(url, query, {
      ...options, method: 'get' })
  } post(url, data, options = {}) { return this.request(url, data, {
      ...options, method: 'post' })
  }
} export default new API(BASE_URL) 复制代码

使用

// 小程序在引入外部模块的时候,不支持以/开头的绝对路径 // 也不支持自动查找index文件,只支持省略后缀名 import api from '../../utils/api' Page({ data: { homeList: [], page: 1 }, onLoad() { this.fetchList()
  }, onReachBottom() { this.data.page += 1 this.fetchList()
  }, async fetchList() { try { const res = await api.get('/home/houselist', { page: this.data.page ?? 1 }) this.setData({ homeList: [...this.data.homeList, ...res]
      })
    } catch(e) { console.error(e.message)
    }
  }
}) 复制代码

域名配置

每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信

服务器域名请在 「小程序后台 - 开发 - 开发设置 - 服务器域名」 中进行配置,配置时需要注意

  1. 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议
  2. 域名不能使用 IP 地址(小程序的局域网 IP 除外)或 localhost, 且域名必须经过 ICP 备案
  3. 可以配置端口, 但请求的时候必须携带端口号,如果没有配置端口,则在请求的时候,不可以配置端口号,即使是默认的也不可以

弹窗

小程序中展示弹窗有四种方式: showToast、showModal、showLoading、showActionSheet

showToast

wx.showToast({ title: 'toast', icon: "success", duration: 3000 }) 复制代码

showLoading的功能和showToasd是类似的,其相当于设置了icon的值为loading的toast

只不过showModal的关闭是通过duration属性,而showLoading需主动调用 wx.hideLoading 才能关闭提示框

showModal

wx.showModal({ title: '我是title', content: '我是内容', success: res => { if (res.cancel) { console.log('用户退出了弹框')
    } if (res.confirm) { console.log('用户点击了确定')
    }
  }, fail: err => console.log(err)
}) 复制代码

showActionSheet

wx.showActionSheet({ itemList: ['从相册中选取', '拍照'], // 具体点击了那一项  可以通过res.tapindex来获取 success: res => console.log(res), fail: err => console.log(err)
}) 复制代码

分享

分享是小程序扩散的一种重要方式,小程序中有两种分享方式:

  1. 点击右上角的菜单按钮,之后点击转发
  2. 点击某一个按钮,直接转发

监听用户点击页面内转发按钮(button 组件 open-type="share")或右上角菜单“转发”按钮的时

可以通过 onShareAppMessage方法自定义转发内容,此事件处理函数需要 return 一个 Object,用于自定义转发内容

image.png

Page({ onShareAppMessage() { return { title: '设置分享的标题,默认是小程序名', path: '/pages/profile/profile', imgUrl: 'https://i1.hdslb.com/bfs/face/7c409a397356632362171fd6a25a8ed44f064e40.jpg' }
  }
}) 复制代码

获取信息

获取设备信息

我们可以通过getSystemInfo方法获取用户当前设备信息,用于收集设备信息或者进行一些适配工作

wx.getSystemInfo({ // res.screenHeight --- 手机的屏幕高度 // res.windowHeight -- 小程序可视窗口的高度 // 小程序的可视窗口 = 屏幕高度 - 导航栏高度 - 状态栏高度 success: res => console.log(res),
}) 复制代码

获取地址位置信息

可以通过getLocation方法,获取用户的位置信息,以方便给用户提供相关的服务

对于用户的关键信息,需要获取用户授权后才能获得

App.json

{ "permission": { "scope.userLocation": { // 向用户申请授权时候的描述信息 // 授权是授权给appid的,一个小程序对应着一个appid // 也就意味着,用户只要授权一次即可,下次再进小程序就都不需要再次授权 "desc": "获取用户地址位置" } } } 复制代码

page.js

wx.getLocation({ // 只有用户授权后,小程序才可以获取用户地理位置 success: res => console.log(res),
}) 复制代码

存储

在开发中,某些常见我们需要将一部分数据存储在本地:比如token、用户信息等, 小程序提供了专门的Storage用于进行本地存储

同步存取数据的方法:

  1. wx.setStorageSync(string key, any data)

  2. wx.getStorageSync(string key)

  3. wx.removeStorageSync(string key)

  4. wx.clearStorageSync()

// 小程序中的storage 的key值必须是字符串 // 但是小程序中的value值是any类型,也就是任意类型都可以被存储 // 添加  wx.setStorageSync('name', 'Klaus') // 获取 console.log(wx.getStorageSync('name')) // 移除具体某一项 wx.removeStorageSync('name') // 清空storage wx.clearStorageSync() 复制代码

异步存储数据的方法:

  1. wx.setStorage(Object object)
  2. wx.getStorage(Object object)
  3. wx.removeStorage(Object object)
  4. wx.clearStorage(Object object)

所有的异步操作获取值都需要通过success属性监听获取,错误信息也需要通过fail属性来进行监听

自小程序V2.21.3开始,在异步存储数据API中可以对存储的数据进行加密操作,同步存储数据方法不可以

// 存储 wx.setStorage({ key: 'name', // key data: 'Klaus', // value encrypt: true, // 对存储的数据进行加密 success: () => { // 获取 wx.getStorage({ key: 'name', // key // 如果存储的数据是加密的,那么获取数据的时候 也必须开启encrypt 已进行正确的加密和解密操作 // 如果存储的数据没有加密,获取数据的时候,是不可以开启encrypt的, 因为此时对明文数据进行解密操作会失败 encrypt: true, success: res => console.log(res), fail: err => console.log(err)
    })
  }
})
上一篇:微信小程序5年来怎么样? 下一篇:IM通信小程序聊天的逻辑是什么样的?

推荐信息

更多+

    联系我们

  • 电话 :134-8274-2882
  • QQ:1059681242
  • 邮箱:haoljq@163.com
  • 地址:上海市松江区米易路166号交科医疗健康产业园(2楼)

在线预约

  • 您的姓名
  • 联系电话

友情链接:

小程序开发 小程序定制开发 小程序商店 微信小程序开发文档 分销商城小程序 电商小程序开发 百家号 商城小程序 微信小程序开发API 小程序定制 生鲜小程序 全平台开发 网站建设 外包开发 自主研发产品

热门地区:

松江开发公司 青浦开发公司 崇明开发公司 杨浦开发公司 宝山开发公司 奉贤开发公司 虹口开发公司 闵行开发公司 长宁开发公司 静安开发公司 黄浦开发公司 嘉定开发公司 徐汇开发公司 金山开发公司 上海开发公司 南昌开发公司 杭州开发公司 上饶开发公司

COPYRIGHT 2009-2016 www.guanzhiweb.com ALL RIGHTS RESERVED

版权所有 上海观智网络科技有限公司

在线
客服

在线客服服务时间:9:00-21:00

选择下列咨讯方式马上在线沟通:

客服
热线

134-8274-2882
小程序定制开发已服务600+

特价
商城

商城小程序助力每个商家获客盈收

来电咨讯获取商城方案,报价功能清单

小程
序码

扫码加微信咨询
顶部