摘要:學習微信小程序一段時間,自己仿照京東小程序做了幾個頁面,分享給大家看看源碼地址,希望能幫助到有興趣的同學喜歡可以加星哦其中幾個效果圖如下介紹一下事先準備的事情前期部署項目命名規范用駝峰法命名中命名用分隔,用接口中數據用分隔文件文件夾命名
學習微信小程序一段時間,自己仿照京東小程序做了幾個demo頁面,分享給大家看看
源碼地址,希望能幫助到有興趣的同學
https://github.com/skySoft-cl...(喜歡可以加星哦)
其中幾個效果圖如下:
介紹一下事先準備的事情
前期部署
****項目命名規范**** 1.JS用駝峰法命名 2.css中class命名用"-"分隔,ID用"_" 3.接口中數據用"_"分隔 4.文件/文件夾命名用"_" ****JS使用規范**** 1.使用ECMAScript 2016 ****Pages里的文件結構**** 1.根據tabbar放入對應的文件夾中,三個入口頁面文件放入外層 ****靜態文件**** 1.圖片小圖使用雪碧圖 2.對應文件的圖片都需要新建對應的文件夾存放圖片 ****代碼管理**** 1.使用Git,上傳代碼時請不要上傳app.js和app.json,避免本地請求變為服務器請求
開發過程中中遇到的坑:
JS方面
不支持DOM操作,需要在開發時能夠設置好所有需要的data屬性值,然后渲染 跳轉到tabbar頁面的時候只能使用wx.switchTab(OBJECT) wx.showToast()配置樣式單一,且寬度不能自適應
wxml方面
標簽不夠語義化
wxss方面
不支持"a > b > c"雙箭頭寫法,控制臺會報錯 背景圖屬性background-image必須寫在標簽中,或者使用服務器上的圖片 使用display:flex布局方式,容器大小會隨內容大小變化,所以,最好給容器設置寬度 標注圖標注的大小再設置時是原大小的2倍,比如圖上標注10*10,css這邊寫20rpx*20rpx
其它方面
json文件是配置window窗口的,但是此時可以省略window屬性,如果加window則沒有效果,也不會報錯
項目中使用過的API:
1.ES6相關
對象解構 {} = {} 箭頭函數 => 塊級變量let、const 模板字符串${...} 數組擴展let c = [...a,...b]
2.微信相關
WXML 組件:view、text、image、icon、swiper、progress、navigator、button、input template模板 列表渲染:wx:for="" wx:key="" 條件渲染:wx:if="" elif="" else WXSS使用 flex布局 使用rpx自適應寬度 JS相關方法的封裝 setData() wx.request(OBJECT) wx.navigateTo() wx.navigateBack() wx.showToast(OBJECT) wx.showModal(OBJECT) 綁定事件:bindtap、onReachBottom
歡迎大家指正!
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/112609.html
摘要:學習微信小程序一段時間,自己仿照京東小程序做了幾個頁面,分享給大家看看源碼地址,希望能幫助到有興趣的同學喜歡可以加星哦其中幾個效果圖如下介紹一下事先準備的事情前期部署項目命名規范用駝峰法命名中命名用分隔,用接口中數據用分隔文件文件夾命名 學習微信小程序一段時間,自己仿照京東小程序做了幾個demo頁面,分享給大家看看 源碼地址,希望能幫助到有興趣的同學https://github.com...
摘要:學習微信小程序一段時間,自己仿照京東小程序做了幾個頁面,分享給大家看看源碼地址,希望能幫助到有興趣的同學喜歡可以加星哦其中幾個效果圖如下介紹一下事先準備的事情前期部署項目命名規范用駝峰法命名中命名用分隔,用接口中數據用分隔文件文件夾命名 學習微信小程序一段時間,自己仿照京東小程序做了幾個demo頁面,分享給大家看看 源碼地址,希望能幫助到有興趣的同學https://github.com...
閱讀 3023·2021-09-22 14:59
閱讀 1863·2021-09-22 10:02
閱讀 2108·2021-09-04 16:48
閱讀 2260·2019-08-30 15:53
閱讀 2965·2019-08-30 11:27
閱讀 3402·2019-08-29 18:35
閱讀 959·2019-08-29 17:07
閱讀 2669·2019-08-29 13:27