点击button后改变文字_27. 教你零基础搭建小程序:小程序的常见组件—button

筒子们,这一章接着讲Button 标签。

0f3c54364ce42b9de8fd041fff562885.png

开放能力的属性

button标签的开放能力是指open-type 属性。

其中,这个属性的合法值包括如下:

c0f63e793277b39046b94330bf82fa9e.png

这一部分呢,需要分为两个方式来演示。

一是可在模拟器中直接看效果; 二是要通过真机调试看效果。

button开发能力是指open-type 的合法值。我们将其全部属性写入demo13.wxml文件中。

contactsharegetPhoneNumbergetUserInfolaunchAppopenSettingfeedback

下面一一介绍其属性。

1、contact

可直接打开客服对话功能,需在微信小程序的后台进行配置。

保存代码后,点击左侧contact按钮,弹出"模拟进入客服对话"的窗口。

但是这个功能是无法在模拟器中看效果的,需要进行真机调试才能进行演示。

695a55b89edd09ffed1650eb738a2141.png

详细了解该属性用法和特征,请戳下方官方文档。

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html

2、share

分享、转发此小程序。

保存代码后,页面出现"share"按钮,点击后,可分享给好友小程序。

1a001233a007eb5aef70b3ca18a85234.png

详细了解该属性用法和特征,请戳官方文档。

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%BC%95

3、getPhoneNumber

用来获取用户手机号码信息。仅限于企业用户,否则无此权限。使用此属性,需要绑定一个事件,从bindgetphonenumber回调中,通过参数来获取⽤⼾信息。

操作步骤如下:

先是在demo13.wxml文件中写入如下代码:

Page({// 获取用户的手机号码信息getPhoneNumber(e){console.log(e);},})

复制getPhoneNumber,回到demo13.js文件中,删除原先的代码,只保留page部分。

写入如下代码:

Page({// 获取用户的手机号码信息getPhoneNumber(e){console.log(e);},})

保存后,点击调试器-console,可以看到detail部分是显示如下信息

(注意这里登录要用企业账户,个人账户会获取失败。)

549e278de74c4e9b86ba967035cbd749.png

如上,detail信息是难以理解的,看不懂。因为信息已经被加密过了。

如果需要解析手机号,就需要用户搭建小程序的后台服务器,在后台服务器中进行解析手机号。

4、getUserInfo

同getPhoneNumber,都是用来获取⽤⼾信息,可以从bindgetuserinfo回调中获取到⽤⼾信息

步骤同getPhoneNumber

先在demo13.wxml文件中写入如下代码:

getUserInfo

复制getUserInfo,回到demo13.js文件中,写入如下代码:

Page({// 获取用户个人信息getUserInfo(e){console.log(e);}})

保存后,点击调试器-console,可以看到detail部分是显示如下信息

userinfo部分显示个人的基本信息,可直接获取,不加密。

f39f92374fcd7e1d21c64332a8090890.png

5、launchApp

用来打开APP,可以通过app-parameter属性设定向APP传的参数

敲黑板:

566ea14905140919f57e702647b3ac8a.png

要在app中的某个链接中,才能打开小程序;

在小程序中,通过launchApp重新打开app;

此效果难以重现,可以直接参考京东app、小程序进行学习。

详细了解该属性用法和特征,请戳下方官方文档。

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html

6、openSetting

用来打开小程序内置的授权界面。

在授权界面中,只会出现用户点击过的权限。

点击开发者工具菜单栏的"编译"进行刷新,再点击小程序页面中的"openSetting"按钮,

出现如下界面,只显示通讯地址和用户信息两栏。

这两个是在前面使用getPhoneNumber 和 getUserInfo 两个属性中被允许的,所以会出现。

5f2a10298f694b42b9d6f893fd5d1fc1.png

我们点击菜单栏的清除缓存—— 全部清除。

031d7d47bc16479050b7840a85fa7138.png

点击开发者工具菜单栏的"编译"进行刷新,再点击小程序页面中的"openSetting"按钮,

出现如下界面,没有被允许的用户选项。

97a3d5461148a6da1a585064787ae5f9.png

7、feedback

用来打开小程序的意见反馈页面。

此属性和contact 属性一样,都无法在模拟器中演示,均需要使用真机调试了演示。

先来看一下contact 属性的实现流程

(1)将小程序的appid 修改为自己的id,之前用的是测试号,现在也要改为自己的。

步骤:打开微信公众号平台——点击登录——点击开发按钮——开发设置选项——复制ID

8918e688d831f59e4df0ac64b3670f08.png

回到小程序中,点击详情——修改按钮——粘贴新的ID

ffbcd67e447a05fb5f90bed47b2e75ad.png

(2)准备两个客服账号,A是普通用户的账号;B是客服的微信账号。

(3)手动为小程序添加客服微信,也就是微信B

步骤:登录微信官网——客服——添加——输入自己的微信号

be556a52d758f9b45ec941b3aaff9aa1.png

(4)回到微信开发者工具中,点击"预览"按钮——用账号A扫码——点击contact按钮

手机截屏显示如下:

3c1c35742b9b3ac8d4118777cdef3b0f.png

在对话框中输入信息,客服微信B就会收到消息。

接着,我们再来看一下feedback 属性,真机调试如下:

手机扫码后,在微信中打开该小程序,点击"feedback"按钮,页面如下:

28e5b8f65d561b4271c587e302a29d75.png

ok,button标签的内容通过两章已经完全讲解完毕了,大家认真操练起来吧~

不懂得地方欢迎评论区留言告诉我哦~~~

搜索并关注微信公众号:飞寝旺食

获取更多小程序运营干货、免费的开发教程、源代码等!

做小程序我们是认真的!

e44c30c6b75b2e8988968363d8f575c0.png

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

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

相关文章

语言把数据写入csv文件_把JSON/CSV文件打造成MySQL数据库

生活中,你我一定都看到过这种「xx元爆改出租屋」,「爆改小汽车」之类的文章,做为IT人,折腾的劲头一点也不差。软件开发过程中,你是否有时候,会拿着业务提供的一个个CSV或者JSON的数据文件,写个解…

SLF4JLoggerContext cannot be cast to LoggerContext

org.apache.logging.slf4j.SLF4JLoggerContext cannot be cast to org.apache.logging.LoggerContexthive启动时,一直报错,原因是 hadoop与hive的jar包冲突,下载对应版本的hadoop和hive 安装包,检查log相关的jar包是否对应,并进行 log4j 或 sjf4j 包的 排除和添加。

pacs定位线_C#开发PACS医学影像处理系统(十五):Dicom影像交叉定位线算法

1.定位线概念:某个方位的影像在另一个方向的影像上的投影相交线,例如横断面(从头到脚的方向)在矢状面(从左手到右手)上的影像投影面交线。举个例子:右边的是MR(核磁共振)的某一帧切片,这是从头开始扫描,扫描到眼睛这个…

图片饱和度_摄影后期完全调色指南(三):饱和度与自然饱和度有什么区别?...

泼辣年度大课 | 摄影后期完全调色指南(一)摄影后期完全调色指南(二):详解色温与色调在上一篇教程里面我们讲到了全局色彩调整中的色温和色调工具,今天来讲解剩下的两个工具:饱和度与自然饱和度工具,这两个工具使用的频率也非常的高…

2023年大模型回顾

大家好,这里是最佳拍档,我是大飞 一年前的今天,ChatGPT发布 仅仅花了5天时间 ChatGPT的注册用户数量达到100万 创了互联网历史记录 两个月后,2023年1月 ChatGPT的月活用户数量达到1亿 火箭般蹿升的用户数量 预示了今年生成…

windows 下的文件对比工具

deffinity,一款专用于文件对比的工具,安装简单,使用方便 下载链接如下: https://www.appinn.com/diffinity-for-win/

18c分布式事务 oracle_浅谈ORACLE的分布式事务

平台环境: suk: linux as4 oracle 9201 primary: windows xp oracle 10.2.0.3 首先在primary数据库上建立测试数据。 SQL create table test as select * from dba_objects; Table created. SQL insert into test select * from test; 9873 rows created. SQ平台环境…

shell 中去掉末尾换行符

# 多行为一行 echo "aaa\ bbb\ ccc" # 结果 #aaabbbccc#多行还是多行 echo "aaa bbb ccc" #结果 #aaa #bbb #ccc

python五子棋游戏15*15_在STM32上运行五子棋小游戏(15x15)

本程序算法资料来自下面网站.----https://www.cnblogs.com/buptzym/archive/2012/06/20/2556052.html----先定义一个数组 用于存储整个棋盘的数据.u16 ChessBoard[15][15];//棋盘数据.一.己方下棋 基础函数.1.在屏幕上显示出来一个15*15的棋盘.void DrawTable(void)//画出15x15…

点名册_骑士新书《万界点名册》十万收藏火爆气势不减当年修真聊天群

最近好多人都在讨论圣骑士的传说新书《万界点名册》,新书还没有发布,起点就给了闪屏推荐,引得的很多读者心痒痒的想要看看到底是怎样的神作。所以才发布两万多字的新书投资人就快一万人了,收藏也突破了十万。这速度好像是坐了火箭…

hadoop重启后 9000端口不在

原因可能是hadoop的namenode还未启动成功,可以去查看namenode的日志,是否有错误日志,如果没有错误日志,耐心等待namenode的恢复

500张思维导图记38000单词_思维导图记单词,环环相扣难遗忘——2020奇速英语夏令营第三天...

2020年8月6日,是奇速英语19期夏令营第二批单词阅读营正式上课的第3天,为了激发各班学员学习兴趣,保证学习效果,奇速英语专门制定了小组PK的积分奖励制在今天的学习当中发挥了极大的效果。在这一机制的刺激和奇速英语老师们的高效教…

语音识别热词_出门问问 TWS 耳机语音交互解决方案

随着芯片、算法商在技术及应用方面的演进,尤其是连接、降噪方向的重大突破,越来越多的手机及耳机厂商推出了自家功能丰富、交互舒适的 TWS 耳机。近日,出门问问新品发布会上推出的 TicPods 2 系列产品,在人机交互和语音助理方面&a…

egret 变量_egret性能优化总结

## 来自官方的优化建议(1) 少使用Alpha混合。(2) 显式停止计时器,让它们准备好进行垃圾回收。(3)使用事件侦听器并在不需要时删除这些侦听器。(4) 在不需要触摸交互性时显式禁用触摸交互性。(5) 合理使用dispatchEvents 函数。(6) 尽可能重用对象,建立对…

go tcp连接_TCP漫谈之keepalive和time_wait

TCP是一个有状态通讯协议,所谓的有状态是指通信过程中通信的双方各自维护连接的状态。一、TCP keepalive先简单回顾一下TCP连接建立和断开的整个过程。(这里主要考虑主流程,关于丢包、拥塞、窗口、失败重试等情况后面详细讨论。)首先是客户端发送syn(Syn…

纠错码较副本优势与minio纠错码配置

1. 优势 纠错码是什么,怎么保障数据不丢失 纠错码采用数据块校验块方式进行存储,副本采用真实副本存储纠错码更利于存储,副本更利于计算 2. 业界配置 EMC对象存储系统ECS 12 4 和 102 冗余度分别为 1.33 、 1.2 阿里云盘古集群chunk存储 83 冗余度1.375 Google RS(6,3) i…

mysql update 联合更新_Mysql update多表联合更新的方法小结

下面我建两个表,并执行一系列sql语句,仔细观察sql执行后表中数据的变化,很容易就能理解多表联合更新的用法student表 class表1. 执行 UPDATE student s , class c SET s.class_nametest00,c.stu_nametest00 WHERE s.class_id c.idstudent表 …