微信小程序入门

创建一个入门程序

这是index.vxml代码

<!--index.wxml-->
<navigation-bar title="Weixin" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<view class="container" ><view>{{msg}}</view><view><button bindtap="getUserInfo" type="primary">获取用户信息</button>昵称:{{nickName}}<image style="width: 100px; height: 100px;" src="{{url}}" mode=""/></view><view><button bind:tap="wxLogin" type="warn">微信登录</button>授权码:{{code}}</view><view><button bind:tap="sendRequest" type="default">发送请求</button></view></view>

这是index.js

// index.js
Page({data:{msg:'hello word',nickName:'',url:'',code:''},//获取微信用户的头像和昵称getUserInfo(){wx.getUserProfile({desc: '获取用户信息',success:(res) =>{console.log(res.userInfo)//为数据赋值this.setData({nickName:res.userInfo.nickName,url:res.userInfo.avatarUrl})}})},//微信登录,获取微信登录的授权码wxLogin(){wx.login({success: (res) => {console.log(res.code)this.setData({code:res.code})},})},//发送请求sendRequest(){wx.request({url: 'http://localhost:8080/user/shop/status',method:'GET',success:(res)=>{console.log(res.data)}})}
})

这段代码是一个微信小程序页面的逻辑部分,使用了微信小程序的API来实现用户信息的获取、微信登录授权以及发送网络请求的功能。下面是对每个函数和关键点的详细解释:

1. Page 函数

Page 是微信小程序中定义页面的核心函数,它接收一个对象作为参数,这个对象包含了页面的初始数据、生命周期函数、事件处理函数等。

2. data 对象

在 Page 函数的参数对象中,data 属性用于存储页面的初始数据。在这个例子中,data 包含了四个字段:msg(显示信息,但拼写错误应为 hello world)、nickName(用于存储用户的昵称)、url(用于存储用户的头像URL)、code(用于存储微信登录的授权码)。

3. getUserInfo 函数

这个函数用于获取微信用户的头像和昵称。它调用了微信小程序的 wx.getUserProfile API,该API需要用户授权后才能获取到用户信息。在成功回调中,通过 console.log(res.userInfo) 打印了用户信息,并使用 this.setData 方法更新了页面数据中的 nickName 和 url 字段。

4. wxLogin 函数

这个函数用于实现微信登录,获取微信登录的授权码。它调用了 wx.login API,该API会返回一个登录凭证(code)。这个 code 是后续发起请求时用于换取 session_key 或 openid 等敏感信息的关键。在成功回调中,通过 console.log(res.code) 打印了授权码,并使用 this.setData 方法更新了页面数据中的 code 字段。

5. sendRequest 函数

这个函数用于发送网络请求。它调用了 wx.request API,向指定的URL(在这个例子中是 'http://localhost:8080/user/shop/status')发送GET请求。这个URL应该是你的后端服务地址,用于处理一些业务逻辑。在成功回调中,通过 console.log(res.data) 打印了服务器返回的数据。

注意事项

  • msg 字段的拼写错误(hello word 应为 hello world)可能会影响页面上的显示。
  • wx.getUserProfile API 需要用户主动触发才能调用,通常放在按钮的点击事件处理函数中。
  • 发送网络请求时,确保后端服务已正确部署并可访问,且URL、请求方法(GET/POST等)及请求参数等符合后端要求。
  • 微信小程序的网络安全和隐私政策要求严格,确保在获取用户信息时遵循相关法规和用户授权。
  • 本地测试时(如使用 'http://localhost:8080' 作为请求URL),需要确保微信开发者工具已配置允许访问本地服务器。在生产环境中,应使用HTTPS协议以确保数据传输的安全性。

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

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

相关文章

苹果CMS:资源采集站如何设置定时采集详细教程讲解

我们搭建好站点之后&#xff0c;会自定义一些采集&#xff0c;但是需要每天去手动执行&#xff0c;有时候甚至会忘记&#xff0c;那我们如何处理呢&#xff1f;今天我们就来介绍一下如何设置定时器。 如果按照官方例子来设置定时器会遇到一个问题就是采集的资源未绑定类型&…

WAF+API安全代表厂商|瑞数信息入选IDC报告《生成式AI推动下的中国网络安全硬件市场现状及技术发展趋势》

近日&#xff0c;全球领先的权威资讯机构IDC正式发布《IDC Market Presentation&#xff1a;生成式AI推动下的中国网络安全硬件市场现状及技术发展趋势&#xff0c;2024》报告。报告中IDC 评估了众多厂商的安全硬件产品能力&#xff0c;并给出了产品对应的推荐厂商供最终用户参…

04 | 深入浅出索引(上)

此系列文章为极客时间课程《MySQL 实战 45 讲》的学习笔记&#xff01; 索引的常见模型 可以提供查询效率的数据结构有很多&#xff0c;常见的有三种&#xff1a;哈希表、有序数组、搜索数。 哈希表是一种以 key-value 形式存储的数据结构。输入一个 key&#xff0c;通过固定…

强烈推荐java人,2024年大厂面试背这份(八股文+场景题结合)!很管用!

2024 年的行情&#xff0c;和 3~4 年前不同&#xff0c;通过海量简历投递和海量面试找工作的时代已经过去了。 在如今面试机会较少&#xff0c;并且面试难度较大的情况下。 充分做好面试的准备才是快速通过面试最有效的方法&#xff01; 切忌把真实面试当靶场&#xff0c;最…

信息学奥赛初赛天天练-48-CSP-J2020完善程序2-变量交换、冒泡排序、贪心算法、最小区间覆盖

PDF文档公众号回复关键字:20240728 2020 CSP-J 完善程序2 1 完善程序 (单选题 &#xff0c;每小题3分&#xff0c;共30分) 最小区间覆盖 给出 n 个区间&#xff0c;第 i 个区间的左右端点是 [ai,bi]。现在要在这些区间中选出若干个&#xff0c;使得区间 [0, m] 被所选区间的…

前端框架 element-plus 发布 2.7.8

更新日志 功能 组件 [级联选择器 (cascader)] 添加持久化属性以提升性能 (#17526 by 0song)[日期选择器 (date-picker)] 类型添加月份参数 (#17342 by Panzer-Jack)[级联选择器 (cascader)] 添加标签效果属性 (#17443 by ntnyq)[加载 (loading)] 补充加载属性 (#17174 by zhixi…

第九讲 后端1

后端&#xff08;Backend&#xff09; 用带噪声的数据估计内在状态&#xff08;Estimated the inner state from noisy data&#xff09;——状态估计问题渐进式&#xff08;Incremental&#xff09;&#xff1a;保持当前状态的估计&#xff0c;在假如新信息时&#xff0c;更新…

【算法专题】双指针算法之18. 四数之和(力扣)

欢迎来到 CILMY23的博客 &#x1f3c6;本篇主题为&#xff1a;双指针算法之18. 四数之和&#xff08;力扣&#xff09; &#x1f3c6;个人主页&#xff1a;CILMY23-CSDN博客 &#x1f3c6;系列专栏&#xff1a;Python | C | C语言 | 数据结构与算法 | 贪心算法 | Linux | 算…

ProxmoxPVE虚拟化平台--U盘挂载、硬盘直通

界面说明 ### 网络设置 ISO镜像文件 虚拟机中使用到的磁盘 挂载USB设备 这个操作比较简单&#xff0c;不涉及命令 选中需要到的虚拟机&#xff0c;然后选择&#xff1a; 添加->USB设置选择使用USB端口&#xff1a;选择对应的U盘即可 硬盘直通 通常情况下我们需要将原有…

【Linux 16】进程间通信的方式 - 共享内存

文章目录 &#x1f308; 一、共享内存概述⭐ 1. 什么是共享内存⭐ 2. 如何实现共享内存⭐ 3. 操作系统允许存在多个共享内存⭐ 4. 操作系统如何管理共享内存⭐ 5. 获取共享内存的唯一标识符 key⭐ 6. 为什么要由用户提供 key &#x1f308; 二、查看共享内存⭐ 1. 使用 ipcs -m…

TCP 协议的 time_wait 超时时间

优质博文&#xff1a;IT-BLOG-CN 灵感来源 Time_Wait 产生的时机 TCP四次挥手的流程 如上所知&#xff1a;客户端在收到服务端第三次FIN挥手后&#xff0c;就会进入TIME_WAIT状态&#xff0c;开启时长为2MSL的定时器。 【1】MSL是Maximum Segment Lifetime报文最大生存时间…

root 用户和权限

目录 1. 超级管理员 root 2. 切换用户 Switch User 2.1 普通用户切换到 root 用户 2.2 root 用户切换到普通用户 3. sudo 命令 3.1 配置认证 无论是 Windows&#xff0c;MacOS&#xff0c;Linux 均采用多用户的管理模式管理权限&#xff1b; 1. 超级管理员 root 在 Li…

2年社招冲击字节,一天三面斩获offer

在工作满两年的时间选择了求变&#xff0c;带着运气和实力以社招身份重新看今天的互联网环境&#xff0c;从结果看还是复合预期的。 整个面试的流程还挺快的。周中让招聘专员给投递了简历。问什么时候面试&#xff0c;申请了一个周日&#xff0c;直接安排三面。下周周中就开启…

C#中的wpf基础

在WPF中&#xff0c;Grid 是一种非常强大的布局控件&#xff0c;用于创建网格布局。它允许你将界面划分为行和列&#xff0c;并将控件放置在这些行和列中。 以下是一些关键点和示例&#xff0c;帮助你理解 WPF 中的 Grid&#xff1a; 基本属性 RowDefinitions&#xff1a;定义…

[MIT6.5840]MapReduce

MapReduce Lab 地址 https://pdos.csail.mit.edu/6.824/labs/lab-mr.html 论文地址 https://static.googleusercontent.com/media/research.google.com/zh-CN//archive/mapreduce-osdi04.pdf 工作原理 简单来讲&#xff0c;MapReduce是一种分布式框架&#xff0c;可以用来处理…

windows 安装docker桌面版

下载 下载两个&#xff1a; git桌面版 docker desktop 启动docker 执行安装文件&#xff0c;启动 更新wsl2 假如报错&#xff0c;会提示失败原因。 win10会提示跳转到&#xff1a; https://learn.microsoft.com/zh-cn/windows/wsl/install-manual#step-4—download-the-l…

从0到1,AI我来了- (4)AI图片识别的理论知识-II

上篇文章&#xff0c;我们理解了我们程序的神经网络设计&#xff0c;这篇我们继续&#xff0c;把训练迭代过程分析一下&#xff0c;完成这两篇文章&#xff0c;下面问题&#xff0c;应该能回答了。 一张图片&#xff0c;如何被计算机读懂&#xff1f;pytorch 封装的网络&#…

DP 整数拆分不同的二叉搜索树 DAY21

整数拆分&#xff1f; 给定一个正整数 n &#xff0c;将其拆分为 k 个 正整数 的和&#xff08; k > 2 &#xff09;&#xff0c;并使这些整数的乘积最大化。 返回 你可以获得的最大乘积。 示例 1: 输入: n 2 输出: 1 解释: 2 1 1, 1 1 1。示例 2: 输入: n 10 输…

全国区块链职业技能大赛样题第9套前端源码

后端源码地址:https://blog.csdn.net/Qhx20040819/article/details/140746050 前端源码地址:https://blog.csdn.net/Qhx20040819/article/details/140746216 智能合约+数据库表设计:https://blog.csdn.net/Qhx20040819/article/details/140746646 登录 ​ 用户管理

又一成就,Pencils Protocol单链 TVL 突破 3 亿美元

Pencils Protocol 是 Scroll 生态的原生项目&#xff0c;该项目以一站式收益聚合器和拍卖平台作为主要定位&#xff0c;在功能上&#xff0c;其集 Launchpad、资产统一聚合和分发、杠杆收益等功能于一体&#xff0c;旨在最大化用户的资产利用率。近日&#xff0c;Pencils Proto…