雷鋒網注：本文作者博卡君，一名程序猿。雷鋒網(搜索“雷鋒網”公眾號關注)已獲作者授權發布。未經授權拒絕轉載！

本文為小程序開發教程第四彈，前續文章如下：

重磅 | 微信應用號，小程序最新開發教程

微信應用號，小程序最新開發教程第二彈

微信應用號，小程序開發教程第三彈

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

閑話不多說，開始更新！

　　 第七章：微信（小程序）編輯名片頁面開發

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

用戶手填新增名片流程：

　　

　　

　　

首先跳轉到我們的新增名片頁面1需要傳遞用戶的當前 userId，wx.navigateTo 帶值跳轉。

Manual 為 true 設置用戶走的是新增路線。

　　

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

　　

取到 userId。

　　

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

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

　　

這里綁定了自帶的模態框提示組件。

　　

其中 modalHidden2 是模態框開關。

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

即使很多輸入框也支持數據動態改變，非常方便。

　　

實際效果，非常快捷，比以前省去很多事情，編寫小程序，發現最大的好處可能就是我們不必去考慮一系列兼容性問題。

　　

最后還有個頭像上傳圖片，測試了下目前上傳到后臺服務器還有點問題，應該是內測版本不太完善導致吧。

　　

設置的直接是背景圖片。

　　

提交表單與跳轉。

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

　　

這時候跳轉到編輯頁 2 頁面，這個頁面是根據用戶填寫的手機號碼識別到匹配的公司，頁面非常簡單，一個數據循環而已，單選框日后可能還需要美化一下。

　　

同樣也是一些數據綁定以及驗證效果。

　　

實際渲染效果可以看到。

　　

這個和第一個編輯頁面邏輯基本不相上下，一些基本驗證與提交，這里就講到前面兩步驟即可，編輯頁面 3 也是同理，這里不再過多?嗦。

修改名片流程效果圖與需求，修改名片是一次性把以前填寫的個人信息全部渲染出來，供用戶來改動：

　　

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

　　

姓名手機必填模塊：

　　

個人信息模塊，直接循環（block）出來：

　　

時我們請求必填與選填數據：

requiredGroup 必填中文信息、

notRequiredGroup 選題中文信息、

requiredGroupEn 必填英文信息、

notRequiredGroupEn 選題英文信息。

//1. 請求名片對應的公司的中文信息的屬性組數據，分為必填和選填

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

});

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

　　

這里表單提交數據轉換有點復雜（大家根據業務需求來做，不必花時間研究這里的方法），獲取的是數組，按照后臺需要的數據格式進行轉換傳遞過去。

　　

今天再回去理下首頁 A、B、C 定點跳轉功能實現方法。

　　

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

　　

數據 sort，和 group.name 數據一樣：

　　

這里是因為#不支持設為 id（就是 id=“#”），故而進行了一個轉化。

點擊事件：獲取到當前 ID，以及綁定數據 toView 為當前 ID。

　　

首先名片列表，名片上的字母索引都在 scroll-view 里面，這個 scroll-view 必須設置好固定的高度，設置成 100% 與 100vh 是無效的，y 軸的滾動開關打開，scroll-into-view 需要跳轉到它子元素的 id 上。

　　

可以看下：

　　

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

　　

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

　　

跳轉功能基本實現（other 就是 # 底部）。

　　

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