|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 編輯名片有兩條路徑,分為新增名片流程與修改名片流程。用戶手填新增名片流程如下:
新增名片頁面 1 基本布局如下:
取到 userId。
使用微信自帶的 input 組件驗證也非常好用,如 maxLength 屬性,可以限制用戶輸入長度,如我這的姓名長度是最大 5 位,直接數字 5 即可。
也可以自定義一些驗證效果,具體可以根據需求進行一些驗證配置,取到用戶輸入的值,進行操作。
這里綁定了自帶的模態框提示組件。
其中 modalHidden2 是模態框開關。
實際效果,非常快捷,比以前省去很多事情,編寫小程序,發現最大的好處可能就是我們不必去考慮一系列兼容性問題。
最后還有個頭像上傳圖片,測試了下目前上傳到后臺服務器還有點問題,應該是內測版本不太完善導致吧。
提交表單與跳轉。
這時候跳轉到編輯頁 2 頁面,這個頁面是根據用戶填寫的手機號碼識別到匹配的公司,頁面非常簡單,一個數據循環而已,單選框日后可能還需要美化一下。
同樣也是一些數據綁定以及驗證效果。
實際渲染效果可以看到。
這個和第一個編輯頁面邏輯基本不相上下,一些基本驗證與提交,這里就講到前面兩步驟即可,編輯頁面3也是同理,這里不再過多啰嗦。
這名片圖片模塊,上傳圖片暫時還有點問題,這里就是模仿了個跳轉組件,比較建議需要跳轉的頁面還是使用 wx.navigateTo 控制好一點,wx.navigateTo 提供了給我們不同的 3 個跳轉路由,封裝的都很好,而且跳轉頁面很多牽連到傳值之類的,可以達到統一管理也可以避免一些看不到的 bug 吧,總之還是根據業務需求來定:
姓名手機必填模塊:
個人信息模塊,直接循環(block)出來:
Onload 時我們請求必填與選填數據:
//請求名片對應的公司的中文信息的屬性組數據,分為必填和選填//選題項變量以 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 定點跳轉功能實現方法。
數據 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中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!