首頁 > 微信小程式 > 小程式開發 > 微信小程式開發(六)「編輯名片」頁面開發

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

零下一度
發布: 2017-05-23 13:46:12
原創
2846 人瀏覽過

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

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


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


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





#首先跳到我們的新增名片頁面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中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板