【微信小程序】上传头像 微信小程序内接小程序客服

news2025/1/17 6:12:20

这里写目录标题

  • 微信小程序上传头像
    • 使用button按钮包裹img
  • 微信小程序内接小程序客服
    • 使用button按钮跳转客服

微信小程序上传头像

在这里插入图片描述

使用button按钮包裹img

原本思路是只使用image标签再加上chooseImg,但发现使用button标签上传头像这种方法更实用。微信小程序文档上,button的 open-type 功能有很多
在这里插入图片描述
在这里插入图片描述

  <button
      style="border-radius: 50%;"
      open-type="chooseAvatar"
      bindchooseavatar="getPropertyPortrait"
  >
   <image style="margin: 0rpx;" src="{{headimg?headimg:'https://ys.zye.com/upload/touxiang.png' }}"></image>
  </button>
  // 上传头像
  
  getPropertyPortrait(e){
    var that = this;
    var image =  e.detail.avatarUrl;
    // 调用上传函数
    imageUpload.uploadImage('/api/upload/headimg', image, 'file', {}).then((response) => {
      console.log('上传成功', response);
      that.setData({
        headimg: 'https://ys.zye.com' + response.data.pic_path
      })
      //上传之后在调用修改头像函数
      that.updePropertyPortrait('https://ys.zye.com' + response.data.pic_path);
    })
        .catch((error) => {
          console.error('上传失败', error);
          toast.showError(error.errMsg);
        });

  },
  // 修改头像
  updePropertyPortrait(pic_path){
    var that = this;
    var data = {
      token:app.globalData.token,
      headimg:pic_path
    }
    api.post('/api/member/moheadimg', JSON.stringify(data))
        .then((response) => {
          console.log('修改头像==》',response);
          if(response.code == 0){
            that.getPropertyDetails();
          }else{
            toast.showError(response.message);
          }
        })
        .catch((error) => {
          toast.showError(error.errMsg);
        });

  },

微信小程序内接小程序客服

内接公司内部的小程序客服,先在微信公众平台设置小程序客服,然后使用button的open-type设置成contact,再进行事件对接。

在这里插入图片描述

使用button按钮跳转客服

  <button class="containedwhd"
          open-type="contact"
          send-message-title="客服"
          show-message-card="true"
          bindcontact="contactEvent"
  >
    <image class="left_ls" src="https://ys.ziye.com/upload/iocn/kefu.png"></image>
    <view class="keda">客服</view>
  </button>
Page({
     // 客服
  contactEvent(e){
  
	console.log(e,'客服===>')
	console.log(e.detail.path)
    console.log(e.detail.query)
    
  }, 
})

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

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

相关文章

钉钉聊天审计软件有哪些

钉钉在企业中的广泛应用&#xff0c;聊天审计软件也日益受到关注。这类软件主要针对企业微信、钉钉等即时通讯工具&#xff0c;对其中的聊天记录进行审计&#xff0c;以便企业能够更好地管理员工的在线行为&#xff0c;并保障信息安全。 一、聊天审计软件的作用 1、监管员工行…

Python编程技巧 – 迭代器(Iterator)

Python编程技巧 – 迭代器(Iterator) By JacksonML Iterator(迭代器)是Python语言的核心概念之一。它常常与装饰器和生成器一道被人们提及&#xff0c;也是所有Python书籍需要涉及的部分。 本文简要介绍迭代器的功能以及实际的案例&#xff0c;希望对广大读者和学生有所帮助。…

判断二叉树是否为完全二叉树

具体思路&#xff1a; 将二叉树层序遍历&#xff08;节点&#xff09;插进队列中&#xff0c;遇到空时就break&#xff08;退出循环&#xff09;&#xff0c;再重新遍历一遍&#xff0c;若空的后面又再次出现数据&#xff0c;则返回false&#xff08;不是完全二叉树&#xff0…

MySQL 8创建数据库、数据表、插入数据并且查询数据

我使用的数据库是MySQL 8。 创建数据库 create database Bookbought; -- 创建数据库Bookbought use Bookbought; -- 使用数据库Bookbought创建数据表 创建用户表bookuser。 create table ## 往allbook里边插入数据(id INT PRIMARY KEY AUTO_INCREMENT, -- id 为 主键userna…

KubeShark: Kubernetes的Wireshark

Wireshark可以帮助我们抓取并分析网络数据包&#xff0c;理解网络中发生的事情&#xff0c;那是否有工具可以帮助我们理解在K8S集群中发生的事情&#xff0c;帮助排查集群故障&#xff0c;Kubeshark就是这样的工具。原文: KubeShark: Wireshark for Kubernetes[1] 简介 Wiresha…

LLM大语言模型(一):ChatGLM3-6B试用

前言 LLM大语言模型工程化&#xff0c;在本地搭建一套开源的LLM&#xff0c;方便后续的Agent等特性的研究。 本机环境 CPU&#xff1a;AMD Ryzen 5 3600X 6-Core Processor Mem&#xff1a;32GB GPU&#xff1a;RTX 4060Ti 16G ChatGLM3代码库下载 # 下载代码库 ​git c…

使用求2个字符串最短编辑距离动态规划算法实现 git diff 算法 java 实现

测试类 MyDiffTest.java&#xff1a; import java.io.BufferedReader; import java.io.FileReader; import java.util.ArrayList; import java.util.List;public class MyDiffTest {private static String path "\\xxx\\";private static List<String> lines…

java操作windows系统功能案例(三)

以下是一些 Java 操作 Windows 系统功能的案例&#xff1a; 打开 Windows 计算器 public class Calculator {public static void main(String[] args) throws Exception {Runtime.getRuntime().exec("calc.exe");} }打开 Windows 默认浏览器 public class Browser…

数学字体 Mathematical fonts

Mathematical fonts 数学字体&#xff1a; ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzRQSZ \\ \mathcal{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzRQSZ} \\ \mathfrak{ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyzRQSZ} \\ \mathbb{ABC…

332. 重新安排行程

题目描述 给你一份航线列表 tickets &#xff0c;其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票都属于一个从 JFK&#xff08;肯尼迪国际机场&#xff09;出发的先生&#xff0c;所以该行程必须从 JFK 开始。如…

谷歌 Gemini 模型发布计划推迟:无法可靠处理部分非英语沟通

本心、输入输出、结果 文章目录 谷歌 Gemini 模型发布计划推迟&#xff1a;无法可靠处理部分非英语沟通前言由谷歌 CEO 桑达尔・皮查伊做出决策从一开始&#xff0c;Gemini 的目标就是多模态、高效集成工具、API花有重开日&#xff0c;人无再少年实践是检验真理的唯一标准 谷歌…

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

4.2 云开发JSON数据库 4.2.11 更新数据 使用数据库API更新数据有两种方法&#xff1a;一.将记录局部更新的update方法&#xff1b;二.以替换的方式更新记录的set方法 update方法可以局部更新一个记录或一个集合的多个记录&#xff0c;更新时只有指定字段更新&#xff0c;其他…

【数电笔记】18-卡诺图化简

目录 说明&#xff1a; 用卡诺图化简逻辑函数 1. 公式法化简与卡诺图化简对比 2. 化简依据 3. 化简规律 3.1 两个小方块相邻 3.2 四个小方块相邻 3.3 八个小方块相邻 4. 卡诺图化简法步骤 4.1 例1 4.2 例2 5. 画卡诺圈规则 5.1 例1 6. 特殊情况 6.1 例1 6.2 例…

算法设计与实现--贪心篇

贪心算法 贪心算法是一种在每一步选择中都采取当前状态下最优决策的算法&#xff0c;以期望能够通过一系列局部最优的选择达到全局最优。贪心算法的关键是定义好局部最优的选择&#xff0c;并且不回退&#xff0c;即一旦做出了选择&#xff0c;就不能撤销。 一般来说&#xf…

【栈和队列(2)】

文章目录 前言队列队列方法队列模拟实现循环队列练习1 队列实现栈 前言 队列和栈是相反的&#xff0c;栈是先进后出&#xff0c;队列是先进先出&#xff0c;相当于排队打饭&#xff0c;排第一的是最先打到饭出去的。 队列 队列&#xff1a;只允许在一端进行插入数据操作&…

C++基础从0到1入门编程(六)- 类继承、类多态

系统学习C&#xff0c;本章将记录类继承、类多态的相关概念 方便自己日后复习&#xff0c;错误的地方希望积极指正 往期文章&#xff1a; C基础从0到1入门编程&#xff08;一&#xff09; C基础从0到1入门编程&#xff08;二&#xff09; C基础从0到1入门编程&#xff08;三&am…

西瓜书-主要符号表

主要符号表 LaTeX符号说明How to read letter?\mathit{x}标量\boldsymbol{x}向量\mathrm{x}变量集\mathbf{A}矩阵\mathbf{I}单位阵\mathcal{X}样本空间或状态空间calligraphic X\mathcal{D}概率分布Ɗ calligraphic D\mathit{H}数据样本&#xff08;数据集)\mathcal{H}假设空…

智能优化算法应用:基于差分进化算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于差分进化算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于差分进化算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.差分进化算法4.实验参数设定5.算法结果6.参考…

IM通信技术快速入门:短轮询、长轮询、SSE、WebSocket

文章目录 前言即时通讯常用技术 短轮询&#xff08;Short Polling&#xff09;实现原理优点缺点 长轮询(Long Polling)实现原理改进点基于iframe的长轮询实现原理总结 Server-Sent Events&#xff08;SSE&#xff09;实现原理浏览器对 SSE 的支持情况SSE vs WebSocket总结 WebS…

基于英特尔平台及OpenVINO2023工具套件优化文生图任务

当今&#xff0c;文生图技术在很多领域都得到了广泛的应用。这种技术可以将文本直接转换为逼真的图像&#xff0c;具有很高的实用性和应用前景。然而&#xff0c;由于文生成图任务通常需要大量的计算资源和时间&#xff0c;如何在英特尔平台上高效地完成这些计算是一个重要的挑…