微信小程序常见问题(三)

知晓程序员,专注微信小程序开发的程序员!

一、获取formId

相信使用过小程序的同学,多少都收到过小程序的通过消息,如下:

这类通知消息,是和好友消息一样展示在微信的聊天列表中,所以,点击率还是比较高的。想实现这种小程序的模板消息,就必须要获取用户的formid才可以(如何发消息,请仔细查阅小程序官方文档https://mp.weixin.qq.com/debug/wxadoc/dev/api/notice.html)

我们来说一下如何获取formId:

a、必须通过form组件提交才能获取到formId;

b、给form组件设置report-submit="true"属性;

c、给form组件添加bindsubmit事件绑定,携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''};

d、必须用户手动触发提交表单,不能JS模拟提交,所以,页面上必须要有提交按钮;

看一下示例代码:

<form report-submit='true' bindsubmit='userSubmit'>
  <button class='button' bindtap='copy'
          form-type='submit'>复制</button>
</form>

以上示例就可以在userSubmit里获取到formId了:

userSubmit: function (e) {
  console.log(e.detail.formId);
},

需要注意一点,开发工具里面是没办法查看到真实的formId的,会是这样一句提示"the formId is a mock one",提交给服务端就可以拿到了~

二、客服button样式

其实button样式没什么好说的,最近有几个同学在群内讨论,说是客服按钮太小,想改一下样式,没办法实现。

这里我提供个思路:先按设计稿实现界面,联系客服如果样式和官方给的不一样,那就用position: absolute,定位一个button到你想要的位置,透明度设置为0即可,同时给button设置属性open-type="contact"就ok了~

注:

1、这里要注意button的open-type属性是在基础库1.1.0开始支持的,自己要做一下兼容处理~

2、button也可以改成其他样式,有些同学为了获取formId,就把页面所有可点击区域都用button按钮来实现了~

三、区分转发的是群聊还是好友

这个其实就是场景值的判断,先看一张图:

上图可以看出,从好友聊天窗口和群聊窗口点击小程序卡片后,场景值是不一样的,分别是1007和1008,所以,我们可以在app的onLuanch或者onShow方法中去获取到scene值,这样就能知道用户是通过哪种方式进入小程序的~

四、小程序组件化开发

小程序官方提供的组件化文案,这里不细说,大家直接去github查看吧: https://github.com/Tencent/wepy

原文发布于微信公众号 - 知晓程序员(bainaweb)

原文发表时间:2018-01-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏阮一峰的网络日志

网页开发的6种在线调试环境

如今的网页代码,一般由三个部分组成:   * HTML,语义层,提供网页的内容。   * CSS,表现层,规定网页的外观。   * Javascript,...

2823
来自专栏前端杂谈

广告等第三方应用嵌入到web页面方案 之 使用iframe嵌入

3357
来自专栏微信小程序开发

小程序中滚动条的使用,wx.pageScrollTo和&lt;scroll-view&gt;的对比

知晓程序员,专注微信小程序开发的程序员! 前言:近期小程序项目中用到了滚动条功能,官方文档中提供两种方式。即wx.pageScrollTo滚动到page页面的指...

4697
来自专栏ytkah

微信竟然还能当笔记用!【微信高级教程8】

  微信除了用来聊天沟通、刷朋友圈、看公众号外,很多朋友还不知道微信还能当笔记用吧?记笔记?没错,新版微信的收藏功能就隐藏这样的神秘技能。厦门就随ytkah一起...

25811
来自专栏知晓程序

开发 | 小程序音频接口全攻略!一篇文章教你玩转它们

知晓程序(微信号 zxcx0101)分享的这篇文章,就来告诉你如何正确地让小程序播放音频。

993
来自专栏无原型不设计

用Mockplus教你使用属性面板的设置交互状态

使用Mockplus软件有段时间了,期间有很多使用者问我组件的设置交互状态怎么用(当然有很多人看了都会用),我就有想把怎样使用设置交互状态的方法记录下来,供初学...

2535
来自专栏V站

PHP记录蜘蛛脚本

这篇文章主要介绍了PHP记录搜索引擎蜘蛛访问网站足迹的方法,实例分析了针对php记录搜索引擎蜘蛛访问足迹的技巧,涉及数据库的创建及php记录各类常见搜索引擎访问...

1464
来自专栏PHP实战技术

思梦PHP-阿里大鱼手机验证码

小伙伴是否做PC网站的时候,是否遇到过注册用户需要使用短信验证的功能呢?或者找回密码,以及验证用户的信息等等功能!今天思梦PHP就为大家带来Th...

2966
来自专栏www.96php.cn

[ecshop模板]如何清除测试数据

Ecshop的后台是很强大的,我们只需要把ecshop的所有测试商品删除就可以了。请看详细教程: 1、删除ecshop测试商品数据 在登入后台,找到商品列表,勾...

3467
来自专栏DeveWork

提升用户体验,微信小程序“授权失败”场景的优雅处理

微信小程序中提供了相关API 让开发者能获取到微信用户的相关信息,在首次去获取的时候会展示一个用户是否同意授权的对话框。Jeff 发现有不少线上的小程序都没有处...

2159

扫描关注云+社区