雷鋒網(wǎng)注：本文作者博卡君，一名程序猿。雷鋒網(wǎng)已獲作者授權(quán)發(fā)布。未經(jīng)授權(quán)拒絕轉(zhuǎn)載！

本文為小程序開發(fā)教程第四彈，前續(xù)文章如下：

重磅 | 微信應(yīng)用號(hào)，小程序最新開發(fā)教程

微信應(yīng)用號(hào)，小程序最新開發(fā)教程第二彈

微信應(yīng)用號(hào)，小程序開發(fā)教程第三彈

感謝大家支持！博卡君周末休息了兩天，今天又回到戰(zhàn)斗狀態(tài)了。上周五晚上微信放出官方工具和教程了，推薦程序猿小伙伴們都去試一試，結(jié)合教程和代碼，寫寫自己的 demo 也不錯(cuò)。

閑話不多說(shuō)，開始更新！

第七章：微信（小程序）編輯名片頁(yè)面開發(fā)

編輯名片有兩條路徑，分為新增名片流程與修改名片流程。

用戶手填新增名片流程：

首先跳轉(zhuǎn)到我們的新增名片頁(yè)面1需要傳遞用戶的當(dāng)前 userId，wx.navigateTo 帶值跳轉(zhuǎn)。

Manual 為 true 設(shè)置用戶走的是新增路線。

新增名片頁(yè)面 1 基本布局如下：

 

取到 userId。

 

使用微信自帶的 input 組件驗(yàn)證也非常好用，如 maxLength 屬性，可以限制用戶輸入長(zhǎng)度，如我這的姓名長(zhǎng)度是最大 5 位，直接數(shù)字 5 即可。

 

也可以自定義一些驗(yàn)證效果，具體可以根據(jù)需求進(jìn)行一些驗(yàn)證配置，取到用戶輸入的值，進(jìn)行操作。

 

這里綁定了自帶的模態(tài)框提示組件。

 

其中 modalHidden2 是模態(tài)框開關(guān)。

另外 proptText 是需要提示的內(nèi)容。

即使很多輸入框也支持?jǐn)?shù)據(jù)動(dòng)態(tài)改變，非常方便。

 

實(shí)際效果，非?？旖荩纫郧笆∪ズ芏嗍虑?，編寫小程序，發(fā)現(xiàn)最大的好處可能就是我們不必去考慮一系列兼容性問題。

 

最后還有個(gè)頭像上傳圖片，測(cè)試了下目前上傳到后臺(tái)服務(wù)器還有點(diǎn)問題，應(yīng)該是內(nèi)測(cè)版本不太完善導(dǎo)致吧。 

設(shè)置的直接是背景圖片。

 

提交表單與跳轉(zhuǎn)。

提交表單使用的是自帶的 bindsubmit 事件組件，在 button 組件上添加 formType=”submit”即可，還有點(diǎn)需注意的是使用表單提交功能時(shí) input 需加上 name 屬性，這個(gè)傳遞方式是以鍵值對(duì)的形式傳遞的。 

這時(shí)候跳轉(zhuǎn)到編輯頁(yè) 2 頁(yè)面，這個(gè)頁(yè)面是根據(jù)用戶填寫的手機(jī)號(hào)碼識(shí)別到匹配的公司，頁(yè)面非常簡(jiǎn)單，一個(gè)數(shù)據(jù)循環(huán)而已，單選框日后可能還需要美化一下。 

同樣也是一些數(shù)據(jù)綁定以及驗(yàn)證效果。 

實(shí)際渲染效果可以看到。

 

這個(gè)和第一個(gè)編輯頁(yè)面邏輯基本不相上下，一些基本驗(yàn)證與提交，這里就講到前面兩步驟即可，編輯頁(yè)面 3 也是同理，這里不再過(guò)多啰嗦。

修改名片流程效果圖與需求，修改名片是一次性把以前填寫的個(gè)人信息全部渲染出來(lái)，供用戶來(lái)改動(dòng)：

 

名片圖片模塊，上傳圖片暫時(shí)還有點(diǎn)問題，這里就是模仿了個(gè)跳轉(zhuǎn)組件，比較建議需要跳轉(zhuǎn)的頁(yè)面還是使用 wx.navigateTo 控制好一點(diǎn)，wx.navigateTo 提供了給我們不同的 3 個(gè)跳轉(zhuǎn)路由，封裝的都很好，而且跳轉(zhuǎn)頁(yè)面很多牽連到傳值之類的，可以達(dá)到統(tǒng)一管理也可以避免一些看不到的 bug 吧，總之還是根據(jù)業(yè)務(wù)需求來(lái)定： 

姓名手機(jī)必填模塊： 

個(gè)人信息模塊，直接循環(huán)（block）出來(lái)： 

Onload 時(shí)我們請(qǐng)求必填與選填數(shù)據(jù)：

requiredGroup 必填中文信息、

notRequiredGroup 選題中文信息、

requiredGroupEn 必填英文信息、

notRequiredGroupEn 選題英文信息。

//1. 請(qǐng)求名片對(duì)應(yīng)的公司的中文信息的屬性組數(shù)據(jù)，分為必填和選填

//選題項(xiàng)變量以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);

            });

中英文信息必填與選填渲染： 

這里表單提交數(shù)據(jù)轉(zhuǎn)換有點(diǎn)復(fù)雜（大家根據(jù)業(yè)務(wù)需求來(lái)做，不必花時(shí)間研究這里的方法），獲取的是數(shù)組，按照后臺(tái)需要的數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換傳遞過(guò)去。

 

今天再回去理下首頁(yè) A、B、C 定點(diǎn)跳轉(zhuǎn)功能實(shí)現(xiàn)方法。

 

首先是右邊小索引布局以及數(shù)據(jù)綁定，數(shù)據(jù)綁定和名片夾列表上的字母一樣，該字母下面有名片則渲染出來(lái)，沒有則不需要渲染，id同樣是當(dāng)前字母與右邊顯示的內(nèi)容一樣：

 

數(shù)據(jù) sort，和 group.name 數(shù)據(jù)一樣：

 

這里是因?yàn)?不支持設(shè)為 id（就是 id=“#”），故而進(jìn)行了一個(gè)轉(zhuǎn)化。

 

點(diǎn)擊事件：獲取到當(dāng)前 ID，以及綁定數(shù)據(jù) toView 為當(dāng)前 ID。

 

首先名片列表，名片上的字母索引都在 scroll-view 里面，這個(gè) scroll-view 必須設(shè)置好固定的高度，設(shè)置成 100% 與 100vh 是無(wú)效的，y 軸的滾動(dòng)開關(guān)打開，scroll-into-view 需要跳轉(zhuǎn)到它子元素的 id 上。

 

可以看下：

 

這個(gè) group.name==sortmsg，等于就是 A==A,B==B 同理。

 

 

在這里如頂部有些菜單欄的話，你就要注意好布局了，不然會(huì)出現(xiàn)向下偏移這個(gè)菜單欄的高度，其實(shí)你只要和字母索引同級(jí)下即可避免此問題（這里的頂部菜單以模板分離出去了，分離模板的時(shí)候需注意下，需要在這里綁定模板的一些數(shù)據(jù)會(huì)出現(xiàn)失效，具體沒有繼續(xù)深入研究下去）。

 

跳轉(zhuǎn)功能基本實(shí)現(xiàn)（other 就是 # 底部）。

 

好了，今天更新到這里，下一篇我們聊聊「微信小程序分組功能開發(fā)及其它小功能完善」。我最近白天忙工作，晚上才有時(shí)間寫一會(huì)兒教程，沒時(shí)間在論壇給大家一一回復(fù)帖子，大家多來(lái) QQ 群交流吧，不少大神、高手都在群里分享了不少干貨，朋友們也可以自由提問交流。

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。