小程序名片生成流程，小程序怎么新增名片与修改名片？

时间：2023-07-01 14:05 阅读数：68 人阅读分类：知识百科

　　一个姓名就代表一个人，那么如何用小程序制作名片呢？相信每个人都想拥有一张属于自己的名片吧小编就特地为大家整理出来下面的方法来制作属于自己的小名片，利用我们的小程序来生成自己的名片何乐而不为呢?希望能帮到你哦!

　　那么小程序名片是怎么生成的呢?小程序名片生成有哪些方法?今天小编给大家介绍两种小程序名片的编辑路径，怎么生成名片及修改名片?　　

　　一、小程序怎么生成名片？

　　1.小程序新增名片流程：

　　2.首先跳转到我们的新增名片页面 1 需要传递用户的当前 userId，wx.navigateTo 带值跳转。Manual 为 true 设置用户走的是新增路线。

　　新增名片页面 1基本布局如下：

　　取到 userId。

　　使用微信小程序自带的 input 组件验证也非常好用，如 maxLength 属*，可以限制用户输入长度，如我这的姓名长度是最大 5 位，直接数字 5 即可。　

　　也可以自定义一些微信验证效果，具体可以根据需求进行一些验证配置，取到用户输入的值，进行操作。　　

　　这里绑定了自带的模态框提示组件。　

　　其中 modalHidden2 是模态框开关。

　　另外 proptText 是需要提示的内容。

　　即使很多输入框也支持数据动态改变，非常方便。　

　　实际效果，非常快捷，比以前省去很多事情，编写微信小程序，发现最大的好处可能就是我们不必去考虑一系列兼容*问题。

　　4.最后还有个微信头像上传图片，测试了下目前上传到后台服务器还有点问题，应该是内测版本不太完善导致吧。　

　　设置的直接是背景图片。　　

　　提交表单与跳转。

　　提交表单使用的是自带的 bindsubmit 事件组件，在 button 组件上添加 formType=”submit” 即可，还有点需注意的是使用表单提交功能时 input 需加上 name 属*，这个传递方式是以键值对的形式传递的。　　

　　5.这时候跳转到编辑页 2 页面，这个页面是根据用户填写的手机号码识别到匹配的公司，页面非常简单，一个数据循环而已，单选框日后可能还需要美化一下。　　

　　同样也是一些数据绑定以及验证效果。　　

　6.　实际渲染效果可以看到。　

　　7.这个和第一个编辑页面逻辑基本不相上下，一些基本验证与提交，这里就讲到前面两步骤即可，编辑页面3也是同理，这里不再过多啰嗦。

　　姓名手机必填模块：　

　　个人信息模块，直接循环(block)出来：　　

　　Onload 时我们请求必填与选填数据：

　　requiredGroup 必填中文信息

　　notRequiredGroup 选题中文信息

　　requiredGroupEn 必填英文信息

　　notRequiredGroupEn 选题英文信息

　　//请求名片对应的公司的中文信息的属*组数据，分为必填和选填

　　//选题项变量以no开头

　　requester.getOfflineCardInfoGroupFields(userId, cardId,

　　function (res) {

　　//debugger

　　var userName = res.card.userName;

　　var mobile = res.card.mobile;

　　var requiredGroup = res.requiredGroupCh;

　　var notRequiredGroup = res.notRequiredGroupCh;

　　var requiredGroupEn = res.requiredGroupEn;

　　var notRequiredGroupEn = res.notRequiredGroupEn;

　　var reqLen = requiredGroup.fields.length;

　　var nreqLen = notRequiredGroup.fields.length;

　　var reqLenEn = requiredGroupEn.fields.length;

　　var nreqLenEn = notRequiredGroupEn.fields.length;

　　self.setData({

　　userName: userName,

　　mobile: mobile,

　　requireFields: requiredGroup.fields,

　　notRequireFields: notRequiredGroup.fields,

　　requireFieldsEn: requiredGroupEn.fields,

　　notRequireFieldsEn: notRequiredGroupEn.fields,

　　l1: reqLen,

　　l2: nreqLen + reqLen,

　　l3: reqLenEn + nreqLen + reqLen

　　});

　　self.forceUpdate();

　　}, function (code, msg) {

　　console.info("code=" + code + "&msg=" + msg);

　　});

　　以上便是小程序生成名片并实现名片编辑的操作方法，你学会了吗？通过上述小程序名片生成步骤，可以打造您的专属名片哦！希望小编的方法能让你更加了解关于小程序名片生成与编辑的技巧了，想要了解关于更多小程序开发知识，可持续关注微小乔微信小程序网站哦！