【微信小程序创作之路】- 小程序远程数据请求、获取个人信息

【微信小程序创作之路】- 小程序远程数据请求、获取个人信息

第七章 小程序远程数据请求、获取个人信息


文章目录

  • 【微信小程序创作之路】- 小程序远程数据请求、获取个人信息
  • 前言
  • 一、远程数据请求
    • 1.本地环境
    • 2.正式域名
  • 二、获取用户个人信息
    • 1.展示当前用户的身份信息
    • 2.获取用户的个人信息
  • 总结


前言

本章我们介绍小程序远程数据请求,通过本地环境和正式域名两部分进行介绍。还会介绍小程序如何获取个人信息。


一、远程数据请求

小程序可以服务外部服务器数据,也可以向外部服务器发送数据。我们将通过本地环境和使用正式域名方式来测试一下,小程序怎么接受和发送数据。

1.本地环境

微信小程序有规定,必须在后台等级过的服务器域名才可以进行通信。不过,开发者工具可以放松这个限制。
点击微信开发工具右上角的详情—>本地设置—>勾选 不校验合法域名、web-view(业务域名)、TLS 版本以及 HTTPS 证书,这个选项。
在这里插入图片描述
🧀我们通过代码来演示
🏀🏀🏀本地创建springboot服务,和小程序进行通信。

🍉🍉🍉springboot代码 在云盘
链接:https://pan.baidu.com/s/1c5BmSkMWL7fMhhQPR25x2A?pwd=yh8z
提取码:yh8z

WechatController.java

package com.gcl.springdemo01;import com.google.gson.Gson;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.ArrayList;
import java.util.List;@RestController
@RequestMapping("/wechat")
public class WechatController {@GetMapping("/demo")public String demo(){List<String> list = new ArrayList<>();list.add("a");list.add("b");list.add("c");return new Gson().toJson(list);}}

打开浏览器访问查看数据 访问 :http://localhost:8081/wechat/demo

在这里插入图片描述

contact.wxml

<view>请求后台数据<text wx:for="{{list1}}">{{index}}, {{item}}</text>
</view>

contact.js

 /*** 生命周期函数--监听页面加载*/onLoad(options) {//请求本地环境const that = this;wx.request({url: 'http://localhost:8081/wechat/demo',success(res){that.setData({list1: res.data});}});},

我们把请求后台的方法直接写在了onLoad()方法中,会在页面加载后自动执行,这事就会执行wx.request()方法请求后台。如果请求成功,会执行函数success(),更新全局变量list1
想详细了解请看官方文档:点击

结果:
在这里插入图片描述

2.正式域名

🍉🍉🍉注:
小程序官方出于安全性方面考虑,对请求后台接口做了两个限制:

  • 只能请求HTTPS类型的接口
  • 必须将接口的域名添加到自己微信小程序的信任列表中

配置合法域名

①我们查看一下现有的合法域名:现在未设置
在这里插入图片描述
②打开微信公众平台->登录微信小程序管理后台 -> 开发->开发管理 -> 开发设置 -> 开始配置服务器域名 -> 修改 request 合法域名
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
🍉🍉🍉注:
注意我们登录微信小程序管理后台时,需要看看我们登录的账号是否对应小程序登录的账号
在这里插入图片描述

查看小程序登录账号:详情->基本信息->AppId
在这里插入图片描述

查看小程序测试账号的AppID
在这里插入图片描述

只有AppID相同时,我们设置的request合法域名才管用。

查看request合法域名:点击刷新

在这里插入图片描述

🧀我们通过代码来演示
🏀🏀🏀发起请求查看是否成功访问

contact.js

   /*** 生命周期函数--监听页面加载*/onLoad(options) {wx.request({url: 'https://www.baidu.com',method:'GET',success: (res)=> {console.log(res.data)}});},

可通过method参数设置请求的方式。
结果:

在这里插入图片描述

二、获取用户个人信息

1.展示当前用户的身份信息

我们可以通过<open-data>组件获取当前用户信息。

获取方法方法含义
userNickName用户昵称
userAvatarUrl用户头像
userGender用户性别
userCity用户所在城市
userProvince用户所在省份
userCountry用户所在国家
userLanguage用户的语言

🧀我们通过代码来演示
🏀🏀🏀访问当前用户昵称、头像

contact.wxml

<view><open-data type="userAvatarUrl"></open-data><open-data type="userNickName"></open-data>
</view>

在这里插入图片描述
🍉🍉🍉注:
<open-data>不需要用户授权,不需要登录。也正是因为这个原因,小程序不允许使用脚本读取<open-data>返回的信息。

2.获取用户的个人信息

想拿到用户的个人信息,需要得到官方授权。官方建议,通过按钮方式获取授权。

🧀我们通过代码来演示
🏀🏀🏀访问当前用户昵称、头像

contact.wxml

<view><text class="title">hello {{name}}</text><button open-type="getUserInfo" bindtap="getUserProfile" class="userLogin">授权获取用户个人信息</button>
</view>

contact.js

getUserProfile(e) {wx.getUserProfile({desc: '获取您的微信个人信息',success: (res) => {console.log("查看用户信息" , res.userInfo);this.setData({name: res.userInfo.nickName})},fail: (reason) => {console.log(reason.errMsg)}})},

目前发现授权的信息可以展示,但是授权的提示框没有展示,后续解决了更新上!大家也可以看看有啥好的办法,告诉我哦,谢谢!


总结

提示:这里对文章进行总结:

例如:以上就是今天要讲的内容,本文仅仅简单介绍了小程序远程数据请求和小程序获取个人信息的使用,下章我们再见。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/29136.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Ubuntu安装docker

安装 要是之前安装过&#xff0c;可以进行卸载然后再安装&#xff0c;旧版本的 Docker 的名称为docker、docker.io或 docker-engine。安装新版本之前卸载任何此类旧版本 sudo apt-get remove docker docker-engine docker.io containerd runc使用存储库安装 在新主机上首次安…

kafka-保证数据不重复-生产者开启幂等性和事务的作用?

1. 生产者开启幂等性为什么能去重&#xff1f; 1.1 场景 适用于消息在写入到服务器日志后&#xff0c;由于网络故障&#xff0c;生产者没有及时收到服务端的ACK消息&#xff0c;生产者误以为消息没有持久化到服务端&#xff0c;导致生产者重复发送该消息&#xff0c;造成了消…

runit-docker中管理多个服务

runit-docker中管理多个服务 介绍Runit, systemctl和supervisor是三种不同的服务管理工具区别runit优点程序构成快速开始runit实现服务退出执行指定操作runit监管服务打印日志到syslogrunit监管服务后台运行runit监管服务一些错误总结 介绍 runit 是一个轻量级的、稳定的、跨平…

【error 踩坑】AttributeError: ‘DataFrame‘ object has no attribute ‘iteritems‘

新建了虚拟环境py38,安装pandas pip install pandas接着使用spark向hive表中写数据 发现出现了error: AttributeError: DataFrame object has no attribute iteritemsgoogle后找到答案&#xff1a; Looks like iteritems was removed in pandas 2.0 - try using pandas versi…

Golang交叉编译

Golang交叉编译主要依赖几个参数&#xff1a;GOOS、GOARCH和CGO_ENABLED。 参数作用GOOS交叉编译的OSGOARCH交叉编译的CPU架构CGO_ENABLED设置为0时&#xff0c;编译出的二进制是静态的&#xff0c;也就是说没有外部的依赖。 编译在arm64的linux环境运行的程序&#xff1a; …

econml双机器学习实现连续干预和预测

连续干预 在这个示例中&#xff0c;我们使用LinearDML模型&#xff0c;使用随机森林回归模型来估计因果效应。我们首先模拟数据&#xff0c;然后模型&#xff0c;并使用方法来effect创建不同干预值下的效应&#xff08;Conditional Average Treatment Effect&#xff0c;CATE&…

【深度学习MOT videos detect】Detect to Track and Track to Detect

论文&#xff1a;https://arxiv.org/abs/1710.03958 代码&#xff1a;https://github.com/feichtenhofer/Detect-Track 文章目录 Abstract1. Introduction2. Related work后面翻译略 Abstract 近期用于在视频中高精度检测和跟踪目标类别的方法越来越复杂&#xff0c;每年都变得…

【Express.js】使用zod检验

使用zod检验 上一节我们介绍了 express-validator&#xff0c;本节我们介绍一个更通用的检验工具 Zod What’s Zod.js? 写前端的同学可能知道Zod&#xff0c;我们在提交表单前需要对数据初步检查&#xff0c;Zod是一个很棒的工具。前端可以偷懒&#xff0c;但后端不能偷懒&…

Camunda 7.x 系列【10】使用 Java API 运行流程实例

有道无术,术尚可求,有术无道,止于术。 本系列Spring Boot 版本 2.7.9 本系列Camunda 版本 7.19.0 源码地址:https://gitee.com/pearl-organization/camunda-study-demo 文章目录 1. 前言2. 运行流程实例2.1 查询流程定义2.2 启动流程2.3 任务查询2.4 审批3. 数据表1. 前言…

vue3—SCSS的安装、配置与使用

SCSS 安装 使用npm安装scss&#xff1a; npm install sass sass-loader --save-dev 配置 配置到全局 &#x1f31f;附赠代码&#x1f31f; css: {preprocessorOptions: {scss: {additionalData:import "./src/Function/Easy_I_Function/Echarts/ToSeeEcharts/utill.…

Spring Boot Admin 环境搭建与基本使用

Spring Boot Admin 环境搭建与基本使用 一、Spring Boot Admin是什么二、提供了那些功能三、 使用Spring Boot Admin3.1搭建Spring Boot Admin服务pom文件yml配置文件启动类启动admin服务效果 3.2 common-apipom文件feignhystrix 3.3服务消费者pom文件yml配置文件启动类control…

前端面试的性能优化部分(6)每天10个小知识点

目录 系列文章目录前端面试的性能优化部分&#xff08;1&#xff09;每天10个小知识点前端面试的性能优化部分&#xff08;2&#xff09;每天10个小知识点前端面试的性能优化部分&#xff08;3&#xff09;每天10个小知识点前端面试的性能优化部分&#xff08;4&#xff09;每天…

Simulation 线性静力分析流程

有限元仿真分析软件有很多&#xff0c;但是分析的流程却是大同小异&#xff0c;今天给大家分享的是Simulation的线性静力分析流程。 1.构思分析方案。 确定研究对象&#xff0c;研究的方法、验证方案等等。听起来比较空洞&#xff0c;实践过程中我建议首先需要把目标和有限元分…

HDFS中的Trash垃圾桶回收机制

Trash垃圾桶回收机制 文件系统垃圾桶背景功能概述Trash Checkpoint Trash功能开启关闭HDFS集群修改core-site.xml删除文件到trash删除文件跳过从trash中恢复文件清空trash 文件系统垃圾桶背景 回收站&#xff08;垃圾桶&#xff09;是windows操作系统里的一个系统文件夹&#…

C++学习笔记总结练习:并发编程与多线程

并发编程与多线程 1. 基础知识 C多线程 线程&#xff1a;线程是操作系统能够进行CPU调度的最小单位&#xff0c;它被包含在进程之中&#xff0c;一个进程可包含单个或者多个线程。可以用多个线程去完成一个任务&#xff0c;也可以用多个进程去完成一个任务&#xff0c;它们的…

一起学SF框架系列7.1-spring-AOP-基础知识

AOP(Aspect-oriented Programming-面向切面编程&#xff09;是一种编程模式&#xff0c;是对OOP(Object-oriented Programming-面向对象编程&#xff09;一种有益补充。在OOP中&#xff0c;万事万物都是独立的对象&#xff0c;对象相互耦合关系是基于业务进行的&#xff1b;但在…

python获取类名__qualname__,解决django接口ObjectDoesNotExist异常寻找model的问题

在django项目中&#xff0c;经常使用类似Model.objects.get(id1)的方法取对象&#xff0c;默认抛出的异常是ObjectDoesNotExist类型&#xff0c;通过try catch可以把异常捕获&#xff0c;获取的异常是Model.DoesNotExist类型&#xff0c; 要获知其类名&#xff0c;可以使用__na…

目标识别模型两种部署形态图

目标检测预训练模型基于新数据进行微调&#xff08;训练&#xff09;之后&#xff0c;得到一个权重文件。 在日常工业、车载等需求环境下&#xff0c;需要在嵌入式移动端的软件系统中调用该模型文件进行推断测试&#xff0c;软件系统追求性能经常使用C/C进行编码实现&#xff…

第十一次CCF计算机软件能力认证

第一题&#xff1a;打酱油 小明带着 N 元钱去买酱油。 酱油 10 块钱一瓶&#xff0c;商家进行促销&#xff0c;每买 3 瓶送 1 瓶&#xff0c;或者每买 5 瓶送 2 瓶。 请问小明最多可以得到多少瓶酱油。 输入格式 输入的第一行包含一个整数 N&#xff0c;表示小明可用于买酱油的…

聚合在Elasticsearch中的使用及示例验证

聚合在Elasticsearch中的使用 系统中使用的ES环境不一定每篇文章都有&#xff0c;但是可以在合集中找到&#xff0c;关注《醉鱼Java》一起进步 环境 elasticsearch 8.1 搭建 version: 3.8 services:cerebro:image: lmenezes/cerebro:0.8.3container_name: cerebroports:- "…