《微信小程序开发从入门到实战》学习三十

3.4 开发参与投票页面

3.3.7 获取用户信息

如果投票是实名投票,那么用户点击完成确认投票时,需要将用户投票信息和用户昵称一起提交,可以在JS文件中使用API接口wx.getuserInfo获取用户的信息。

使用wx.getUserInfo接口前需要对获取 用户信息这一操作向用户发起授权请求,也就是在button组件增加open-type="getUserInfo"属性就可以。

实际开发中,照着代码敲完后,测试时发现,没弹出向用户发起授权请求的窗口,查询发现

参考微信官方的声明:

https://developers.weixin.qq.com/community/develop/doc/000cacfa20ce88df04cb468bc52801?token=838205899&lang=zh_CN

2021年4月13日后发布的小程序新版本,无法通过wx.getUserInfo与 button open-type="getUserInfo" 获取用户个人信息(头像、昵称、性别与地区)

根据博文wx.getUserProfile 解决微信小程序 button open-type="getUserInfo" 无法获取用户昵称、头像

换成API接口wx.getUserProfile获取用户的信息。

wxml中button组件代码如下:

  <button class="btn" type="primary" disabled="{{isExpired || pickedOption.length === 0}}" bind:tap="onTapVote"> 确认投票</button>

修改JS代码,添加wx.getUserProfile接口,增加匿名和实名时的处理代码,文件如下:

  onTapVote(){

    if(this.data.isAnonymous) {//匿名投票的情况

      const postData = {//需要提交的数据

        voteID: this.data.voteID,

        pickedOption: this.data.pickedOption

      }

      // TODO 将postData数据上传到服务器端

    } else {//实名投票的情况

        const _this = this //在API接口的函数中,this会被改变,因此需要提前获取this的值到_this中

        wx.getUserProfile({

          desc: 'desc',

          success:(res) => {  //授权成功后,调用wx.getUserProfile接口时会回调这个函数

            const postData = {

              voteID: _this.data.voteID,

              userInfo: res.userInfo, //获取用户信息

              pickedOption: _this.data.pickedOption

            }

            // TODO 将postData数据上传到服务器端 

          }

        })

    }

  }

通过微信开发工具,工具栏的预览,二维码预览,手机扫描,手机点击“确认投票时”时,界面显示授权确认窗口,预览效果如下:

3.4.8 实现分享投票功能 

默认情况下小程序的所有页面都是不具备分享功能的。单击投票信息页面右上角的菜单按钮(三个点),可以看到底部弹出的菜单提示“当前页面未设置分享”

如果希望某个页面可以分享出去,可在JS文件中加入onShareAppMessage事件处理函数。代码如下:

  onShareAppMessage(){

    return {

      title:'邀请你参与投票',

      path: '/pages/vote/vote?voteID=' + this.data.voteID

    }

  }

分享时可以设置分享卡片的标题,页面路径和参数,页面路径不一定是当前页面。

再次点击右上角的菜单按钮,底部菜单栏可以看到“转发”选项。

可惜我还没为微信小程序进行认证,需要300元,企业的一些资质。因此,转发是灰色的无法点击,只有发送给朋友勉强可以看下,只不过是分享给虚拟好友。

预览效果如下:

分享还可以通过button组件点击分享。button组件的open-type设置为share,按钮就会成为分享按钮,在wxml文件的“确认投票”按钮下方添加“分享投票”的按钮的代码如下:

<button open-type="share" plain class="share">分享投票</button>

加入一些样式在wxss文件中,代码如下:

.share{

  margin-top: 2 0rpx;

}

预览效果如下:

点击分享投票预览效果如下:

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

C语言—二维数组

一、二维数组的创建 int arr[3][4];char arr[3][5];double arr[2][4]; 数组创建&#xff1a;“[ ]”中要给一个常量&#xff0c;不能使用变量 二、二维数组的初始化 int arr[3][4]{1,2,3,4};int arr[3][4]{{1,2},{4,5}};int arr[][4]{{2,3},{4,5}}; 前面的为行&#xff0c…

ethernet II 的故事

以太帧有很多种类型。不同类型的帧具有不同的格式和MTU值。但在同种物理媒体上都可同时存在。 以太网第二版或者称之为Ethernet II 帧&#xff0c;DIX帧&#xff0c;是最常见的帧类型。并通常直接被IP协议使用。 格式 当数据帧到达网卡时&#xff0c;网卡要先去掉前导码&#…

leetcode刷题详解四

25. K 个一组翻转链表 这道题本质上还是用的反转前n个链表的思想。 具体细节如下&#xff1a; 先调用一次函数&#xff0c;使用一个newHead接受返回值&#xff0c;这个是为了方便最后函数的返回。 调用reverseN这个函数的时候&#xff0c;要标记反转这段链表的前置节点和后置节…

用户与组管理:如何在服务器系统中管理用户和权限

你是否想过&#xff0c;当你登录到一个服务器系统时&#xff0c;你是如何被识别和授权的&#xff1f;你是否知道&#xff0c;你可以通过创建和管理用户和组来简化和优化你的系统管理工作&#xff1f;你是否想了解一些常用的用户和组管理命令和技巧&#xff1f;如果你的答案是肯…

接口测试场景:怎么实现登录之后,需要进行昵称修改?

在接口测试中有一个这样的场景&#xff1a;登录之后&#xff0c;需要进行昵称修改&#xff0c;怎么实现&#xff1f; 首先我们分别看下登录、昵称修改的接口说明&#xff1a; 以上业务中补充一点&#xff0c;昵称修改&#xff0c;还需要添加请求头Authorization传登录获取的to…

03_MySQL基本SQL语句讲解

#课程目标 能够创建、删除数据表能够对表里的数据记录进行增加、删除、修改、查询操作能够创建、删除用户能够给用户授权并回收权限了解delete和truncate语句的区别 #一、数据库基本操作 ##1、查看数据库相关信息 mysql> show databases; 查看所有数据库 mysql>…

js逆向-某敏感网站登录参数分析

声明 本文仅供学习参考&#xff0c;如有侵权可私信本人删除&#xff0c;请勿用于其他途径&#xff0c;违者后果自负&#xff01; 如果觉得文章对你有所帮助&#xff0c;可以给博主点击关注和收藏哦&#xff01; 前言 目标网站&#xff1a;aHR0cHM6Ly9tZGZnaGcuNXhwb2lqaHRm…

字符串转换成十进制整数

编程要求 输入一个以#结束的字符串&#xff0c;本题要求滤去所有的非十六进制字符&#xff08;不分大小写&#xff09;&#xff0c;组成一个新的表示十六进制数字的字符串&#xff0c;然后将其转换为十进制数后输出。如果在第一个十六进制字符之前存在字符“-”&#xff0c;则…

【阿里云】图像识别 智能分类识别 增加网络控制功能点(三)

一、增加网络控制功能 实现需求TCP 心跳机制解决Soket异常断开问题 二、Linux内核提供了通过sysctl命令查看和配置TCP KeepAlive参数的方法。 查看当前系统的TCP KeepAlive参数修改TCP KeepAlive参数 三、C语言实现TCP KeepAlive功能 四、setsockopt用于设置套接字选项的系…

王者荣耀——Java

代码如下&#xff1a; sxt Background package sxt;import java.awt.*; //背景类 public class Background extends GameObject{public Background(GameFrame gameFrame) {super(gameFrame);}Image bg Toolkit.getDefaultToolkit().getImage("C:\\Users\\24465\\Desk…

linux账户管理实例二

要求&#xff1a;我的 用户pro1&#xff0c;pro2&#xff0c;pro3是同一个项目开发人员&#xff0c;想让这三个人用户在同一个目录下工作&#xff0c;但这三个人拥有自己的主文件夹和基本的私有用户组&#xff0c;工作目录为/srv/projecta&#xff0c;如何实现&#xff1f; 分…

吴恩达《机器学习》10-1-10-3:决定下一步做什么、评估一个假设、模型选择和交叉验证集

一、决定下一步做什么 在机器学习的学习过程中&#xff0c;我们已经接触了许多不同的学习算法&#xff0c;逐渐深入了解了先进的机器学习技术。然而&#xff0c;即使在了解了这些算法的情况下&#xff0c;仍然存在一些差距&#xff0c;有些人能够高效而有力地运用这些算法&…

浅析智能电能表远程费控的推广及应用

安科瑞 华楠 摘 要: 电力资源是我国社会发展中一种必不可少的资源,随着我国经济的不断发展和人们生活水平的不断提升,对电力行业的要求也不断提升。因此,电力企业应该不断提升自身的服务水平和服务质量,强智能电能表远程费控的推广与应用,提升电力计量和收费工作的效率,提高电…

Java基础(第九期):Java中的集合 ArrayList 集合的增删改查 Java实现学生信息管理系统

⚠️Java基础专栏 文章目录 ⚠ Java基础最后一期&#xff08;第九期&#xff09;到此结束 Java中的集合一、什么是集合二、ArrayList2.1 ArrayList介绍2.2ArrayList使用2.3 ArrayList添加add&#xff08;&#xff09;方法add&#xff08;index&#xff0c;E element&#xff0…

4.28每日一题(二重积分比较大小:被积函数的大小、正负性、积分区间奇偶性)

一般比较大小的题目我们不需要把结果全部计算出来 &#xff0c;而是通过奇偶性或者被积函数的大小或大于0、等于0、小于0等方法判断比较

PostgreSQL 分区表插入数据及报错:子表明明存在却报不存在以及column “xxx“ does not exist 解决方法

PostgreSQL 分区表插入数据及报错&#xff1a;子表明明存在却报不存在以及column “xxx“ does not exist 解决方法 问题1. 分区表需要先创建子表在插入&#xff0c;创建子表立马插入后可能会报错子表不存在&#xff1b;解决&#xff1a; 创建子表及索引后&#xff0c;sleep10毫…

Linux的基本指令 ( 一 )

目录 前言 Linux基本指令 快速认识五个指令 ls指令 补充内容 pwd指令 补充内容 cd指令 补充内容 重新认识指令 指令的本质 which指令 alias指令 最后 一个文件的三种时间 tree指令及安装 tree指令 前言 关于Linux操作系统的桌面&#xff0c;在学校教学中我们…

【蓝桥杯】刷题

刷题网站 记录总结刷题过程中遇到的一些问题 1、最大公约数与最小公倍数 a,bmap(int,input().split())sa*bwhile a%b:a,bb,a%bprint(b,s//b)2.迭代法求平方根(题号1021) #include<stdio.h> #include<math.h> int main() {double x11.0,x2;int a;scanf("%d&…

FFmpeg零基础学习(一)——初步介绍与环境搭建

目录 前言正文一、开发环境二、搭建环境三、测试代码四、调用库的介绍End、遇到的问题2、Qt 在线安装容易报错&#xff0c;断开问题1、在线安装QMaintainTool很慢2、Qt5.15 无法调试FFmpeg 参考 前言 FFmpeg是一个开源的跨平台多媒体处理框架&#xff0c;它包含了一组用于处理…

MIPI 打怪升级之DSI篇

MIPI 打怪升级之DSI篇 目录 1 Overview2 DSI Mode 2.1 Video 模式2.2 Command 模式3 DSI Physical Layer 3.1 数据流控3.2 双向性3.3 Video Mode Interfaces3.4 Command Mode Interfaces3.5 Clock4 多通道管理 4.1 通道数匹配4.2 线上数据分布5 DSI 协议 5.1 包格式 5.1.1 短包…