微信小程式開發（六）「編輯名片」頁面開發

編輯名片有兩條路徑，分為新增名片流程與修改名片流程。使用者手填新增名片流程如下：

#首先跳到我們的新增名片頁面1 需要傳遞使用者的當前userId，wx.navigateTo 帶值跳轉。 Manual 為 true 設定用戶走的是新增路線。

Vertical 加上是縱向滑動，去掉即是左右滑動。整體架構如下所示：

新增名片頁面1 基本版面配置如下：

取到userId。

使用微信自帶的input 元件驗證也非常好用，如maxLength

屬性

，可以限制使用者輸入長度，如我這的姓名長度是最大5 位，直接數字5 即可。

也可以自訂一些驗證效果，具體可以依照需求進行一些驗證配置，取到使用者輸入的值，進行操作。

這裡綁定了自帶的模態框提示元件。

其中 modalHidden2 是模態框開關。

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

即使許多輸入框也支援資料動態改變，非常方便。

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

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

設定的直接是背景圖片。

提交表單與跳轉。

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

這時候跳到編輯頁2 頁面，這個頁面是根據使用者填寫的手機號碼識別到符合的公司，頁面非常簡單，一個資料

循環

而已，單選框日後可能還需要美化一下。

同樣也是一些

資料綁定

以及驗證效果。

實際渲染效果可以看到。

這個和第一個編輯頁面邏輯基本上不相上下，一些基本驗證與提交，這裡就講到前面兩步驟即可，編輯頁面3也是同理，這裡不再過多囉嗦。 ###修改名片流程效果圖與需求，修改名片是一次把以前填寫的個人資料全部渲染出來，供用戶來改動：######

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

#姓名手機必填模組：

個人資訊模組，直接循環（block）出來：

Onload 時我們請求必填與選填資料：

• requiredGroup 必填中文資訊

• notRequiredGroup 選題中文資訊

• requiredGroupEn 必填英文資訊

• notRequiredGroupEn 選題英文資訊

//请求名片对应的公司的中文信息的属性组数据，分为必填和选填//选题项变量以 no 开头requester.getOfflineCardInfoGroupFields(userId, cardId,function (res) {//debuggervar 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 同理。

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

跳轉功能基本實作（ohter 是 # 底部）。

【相關推薦】

1. 微信小程式完整原始碼下載

2. 點選tabbar變換圖示

#3. 微信小程式demo ：樂助

以上是微信小程式開發（六）「編輯名片」頁面開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！