轉載：第四彈！全球首個微信小程序（應用號）開發教程！通宵吐血趕稿，每日更新！

感謝你們支持！博卡君週末休息了兩天，今天又回到戰鬥狀態了。上週五晚上微信放出官方工具和教程了，推薦程序猿小夥伴們都去試一試，結合教程和代碼，寫寫本身的 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）出來：

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); }); 

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

這裏表單提交數據轉換有點複雜（你們根據業務需求來作，沒必要花時間研究這裏的方法），獲取的是數組，按照後臺須要的數據格式進行轉換傳遞過去。

今天再回去理下首頁 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 就是 # 底部）。

好了，今天更新到這裏，下一篇咱們聊聊「微信小程序分組功能開發及其它小功能完善」。我最近白天忙工做，晚上纔有時間寫一下子教程，沒時間在論壇給你們一一回復帖子，你們多來 QQ 羣交流吧，很多大神、高手都在羣裏分享了很多幹貨，朋友們也能夠自由提問交流。

QQ 羣號： 371736433（二羣） 383863133（三羣） 375772941（2000 人總羣，已滿）

 

轉載自：https://my.oschina.net/wwnick/blog/751826

 

歡迎關注微信公衆平臺：上帝派來改造世界的人