微信小程序 | 小程序系统API调用

这篇具有很好参考价值的文章主要介绍了微信小程序 | 小程序系统API调用。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

🖥️ 微信小程序专栏:小程序系统API调用
🧑‍💼 个人简介:一个不甘平庸的平凡人🍬

✨ 个人主页:CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️


目录

一、网络请求API和封装

网络请求 – API参数

网络请求 – API使用

网络请求 – API封装

网络请求域名配置

二、展示弹窗和页面分享

展示弹窗效果

分享功能

三、设备信息和位置信息

获取设备信息

获取位置信息

四、小程序Storage存储

Storage存储

五、页面跳转和数据传递

界面跳转的方式

页面跳转 - navigateTo

页面返回 - navigateBack

页面跳转 - 数据传递(一)

页面跳转 - 数据传递(二)

界面跳转的方式

六、小程序登录流程演练

小程序登录解析

小程序用户登录的流程


一、网络请求API和封装

网络请求 – API参数

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

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架 

  • 关键属性解析:
  • url:必传
  • data:请求参数
  • methods:请求方式
  • success:成功的回调
  • fail:失败的回调

网络请求 – API使用

  • 直接使用wx.request发送请求:

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

网络请求 – API封装

封装类

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 

封装函数

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 

网络请求域名配置

  • 每个微信小程序需要事先设置通讯域名,小程序只可以跟指定的域名进行网络通信.
  • 小程序登录后台 – 开发管理 – 开发设置 – 服务器域名
  • 服务器域名请在 「小程序后台 - 开发 - 开发设置 - 服务器域名」 中进行配置,配置时需要注意:
  • 域名只支持 https (wx.request、wx.uploadFile、wx.downloadFile) 和 wss (wx.connectSocket) 协议
  • 域名不能使用 IP 地址(小程序的局域网 IP 除外)或 localhost
  • 可以配置端口,如 https://myserver.com:8080.但是配置后只能向 https://myserver.com:8080 发起请求.如果向https://myserver.com、https://myserver.com:9091 等 URL 请求则会失败
  • 如果不配置端口.如 https://myserver.com,那么请求的 URL 中也不能包含端口,甚至是默认的 443 端口也不可以.如果 向 https://myserver.com:443 请求则会失败
  • 域名必须经过 ICP 备案
  • 出于安全考虑,api.weixin.qq.com 不能被配置为服务器域名,相关 API 也不能在小程序内调用..开发者应将 AppSecret 保存到后台服务器中,通过服务器使用 getAccessToken 接口获取 access_token,并调用相关 API.
  • 不支持配置父域名,使用子域名

二、展示弹窗和页面分享

展示弹窗效果

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

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 

showToast

效果展示

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 

效果展示

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 

效果展示

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 

分享功能

  • 分享是小程序扩散的一种重要方式,它有两种分享方式:
  • 一:点击右上角的菜单按钮,点击转发
  • 二:点击某一个按钮,直接转发
  • 当我们转发给好友一个小程序时,通常小程序中会显示一些信息:
  • 如何决定这些信息的展示呢?通过 onShareAppMessage
  • 监听用户点击页面内 转发按钮(button 组件 open-type="share")右上角菜单“转发”按钮的行为,并自定义转发内容
  • 此事件处理函数需要 return 一个 Object,用于自定义转发内容

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

三、设备信息和位置信息

获取设备信息

  • 在开发中,需要经常获取当前设备的信息,用于收集信息或者进行一些适配
  • 小程序提供了一个API: wx:getSystemInfo()

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

获取位置信息

  • 开发中我们需要经常获取用户的位置信息.以方便给用户提供相关的服务
  • 通过API获取:wx.getLocation()

在app.json中配置

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 

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

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

四、小程序Storage存储

Storage存储

  • 在开发中,我们需要将一部分数据存储在本地:比如token 用户信息等
  • 小程序提供了专门的Storage用于进行本地存储
  • 对比之前我们需要存 需要先JSON.stringfiy 之后取出来得 json.parse转回来
  • 同步存取数据的方法:
  • wx.setStorageSync()
  • any wx.getStorageSync()
  • wx.removeStorageSync()
  • wx.clearStorageSync()

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

  • 异步存储数据的方法:
  • wx.setStorage
  • wx.getStorage
  • wx.removeStorage
  • wx.clearStorage

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

五、页面跳转和数据传递

界面跳转的方式

  • 界面的跳转有两种方式:通过navigator组件 和 通过wx的API跳转
  • wx的API跳转 :

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

页面跳转 - navigateTo

  • wx.navigateTo
  • 保留当前页面,跳转到应用内的某个页面;
  • 但是 不能跳到tabbar页面;

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架 

页面返回 - navigateBack

  • wx.navigateBack()
  • 关闭当前页面,返回上一页面或多级页面

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

页面跳转 - 数据传递(一)

  • 在界面跳转过程中 需要相互传递一些数据,应该如何完成?
  • 首页 => 详情页 : 使用URL中的query字段
  • 详情页 => 首页: 在详情页内部拿到首页的页面对象,直接修改数据

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

这里给大家两种写法:

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 

页面跳转 - 数据传递(二)

  • 前面一种数据的传递方式只能通过上面两张图的方式来进行,在现在的小程序已经开始支持events参数,可以用于数据传递

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

 

界面跳转的方式

  • navigator组件主要就是用于界面的跳转的,也可以跳转到其他小程序中:
     

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架

六、小程序登录流程演练

小程序登录解析

  • 为什么需要用户登录?
  • 增加用户的 粘性和产品的停留时间
  • 如何识别同一个小程序用户身份?
  • 认识小程序登录流程
  • openidunionid(在微信中,判断 是不是同一个用户 登录不同的产品)
  • 获取code
  • 换取authToken
  • 用户身份多平台共享
  • 账号绑定
  • 手机号绑定

小程序用户登录的流程

微信小程序调用api,小程序系列,小程序,微信小程序,前端,微信,前端框架文章来源地址https://www.toymoban.com/news/detail-777454.html

到了这里,关于微信小程序 | 小程序系统API调用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序路由跳转,API调用,页面传值

    wx.switchTab 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。 wx.reLaunch 关闭所有页面,打开到应用内的某个页面。 wx.redirectTo 关闭当前页面,跳转到应用内的某个页面。但是不能跳转到 tabbar 页面。 wx.navigateTo 保留当前页面,跳转到应用内的某个页面。但是不能跳到 tabbar 页面

    2024年02月12日
    浏览(45)
  • 【微信小程序调用百度API实现图像识别功能】----项目实战

    本章主要讲述: 如何更快的上手小程序 如何搭建一个页面以及跳转到另一个页面 如何调用百度API接口实现图像识别技术 如何在微信小程序的后台添加合法域名        私信获取源码,有问题可以关注留言或私信,计算机毕业设计(小程序,网页设计,数据库,php开发等) 目录

    2024年02月09日
    浏览(66)
  • 微信小程序 api+前端实现生成分享海报

    1.先看效果图,点击分享海报按钮,然后弹出分享海报  2.前端代码 这里用的组件有vant组件库还有canvas_drawer(一个画布组件) canvas_drawer下载地址 https://github.com/kuckboy1994/mp_canvas_drawer 把 components 中的 canvasdrawer 拷贝到自己项目下,然后再app.json中引用就行了,如下 \\\"usingCompon

    2024年02月09日
    浏览(51)
  • 【微信小程序调用百度API实现图像识别实战】----前后端分离

    前言:基于之前发布的文章【微信小程序调用百度API实现图像识别功能】----项目实战稍微进行了升级改进,主要新增了后端,数据库,实现对于虫害识别,返回防治建议等信息。 本文主要讲述: 如何创建数据库 如何连接数据库 如何创建后端服务 如何调用后端服务 目录  一

    2024年04月25日
    浏览(49)
  • 【微信小程序】调用百度API进行图像识别(以植物识别为例)

    需要素材与源码可联系笔者,项目文件过多不适宜全部展示。 微信小程序调用百度API可分为以下三步: 注册百度智能云账号,并开通植物识别API 在小程序中调用 渲染在小程序页面上 移步百度只能云平台https://cloud.baidu.com/ 注册好账号之后,把鼠标放在 产品 上,侧边会展开

    2024年02月05日
    浏览(56)
  • 微信小程序调用拨打电话API,实现选择拨打固话或手机号。

    HTML 部分: JavaScipt 部分: (vue中 ,👇这段将写在 methods 里边) 效果 ···  有 固话 且 和 手机号 不相同图片演示:  效果 ···  两个 号码 相同 图片演示:   可根据需求自加判断条件,也可以选择此段代码直接服用。(收藏 关注哟 ♥)

    2024年02月13日
    浏览(40)
  • 微信小程序实现调用百度文心一言接口API(可直接运行代码)

    直接贴出运行结果 总共有三个步骤,过程都很简单。 先进入文心千帆大模型平台,然后点击左边一列的“应用接入”,然后点创建应用,这时你就获得了API_key了。 如下,开通是免费的,付费随时可以中止。 不过记得要换成自己的API_key和Secret_key。  (如果报错 “链接不在

    2024年02月13日
    浏览(50)
  • uni-app调用微信小程序流量主激励广告API

    如微信小程序要接入广告,则需要在该小程序注册的微信公众开发平台申请开通流量主广告API,否则无法接入广告API,实现页面广告展示功能。  开通条件 累计独立访客(UV)不低于 1000 存在刷粉行为或有严重违规记录的小程序不予申请 同一个收款账户最多允许关联 50 个账

    2024年01月20日
    浏览(47)
  • 微信小程序使用TS+腾讯位置API,输入地址,解析经纬度(全局封装及调用)

    我们有时候做小程序时需要用到获取地址的经纬度,腾讯位置提供了相关API,我们可以使用其API进行调用实现功能。 1. 登录腾讯位置服务网址 腾讯位置服务 - 立足生态,连接未来 腾讯位置服务为各类应用厂商和开发者提供领先的LBS服务和解决方案;有针对Web应用的JavaScrip

    2024年02月16日
    浏览(48)
  • 关于微信小程序调用H5腾讯地图API获取定位信息提示失败问题--解决办法之一

    在跳转到H5页面加载腾讯地图API获取定位信息时,“真机调试”、“开发模式”都可以使用 web-view 组件访问我需要的路径。只有“体验版”、“线上版本”会出现这个错误提示。正常加载都是正常的,但是因为腾讯地图API在获取定位信息的同时,会在页面上内嵌一个隐藏的

    2024年04月26日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包