摘要:學(xué)習(xí)微信小程序一段時(shí)間,自己仿照京東小程序做了幾個(gè)頁面,分享給大家看看源碼地址,希望能幫助到有興趣的同學(xué)喜歡可以加星哦其中幾個(gè)效果圖如下介紹一下事先準(zhǔn)備的事情前期部署項(xiàng)目命名規(guī)范用駝峰法命名中命名用分隔,用接口中數(shù)據(jù)用分隔文件文件夾命名
學(xué)習(xí)微信小程序一段時(shí)間,自己仿照京東小程序做了幾個(gè)demo頁面,分享給大家看看
源碼地址,希望能幫助到有興趣的同學(xué)
https://github.com/skySoft-cl...(喜歡可以加星哦)
其中幾個(gè)效果圖如下:
介紹一下事先準(zhǔn)備的事情
前期部署
</>復(fù)制代碼
****項(xiàng)目命名規(guī)范****
1.JS用駝峰法命名
2.css中class命名用"-"分隔,ID用"_"
3.接口中數(shù)據(jù)用"_"分隔
4.文件/文件夾命名用"_"
****JS使用規(guī)范****
1.使用ECMAScript 2016
****Pages里的文件結(jié)構(gòu)****
1.根據(jù)tabbar放入對(duì)應(yīng)的文件夾中,三個(gè)入口頁面文件放入外層
****靜態(tài)文件****
1.圖片小圖使用雪碧圖
2.對(duì)應(yīng)文件的圖片都需要新建對(duì)應(yīng)的文件夾存放圖片
****代碼管理****
1.使用Git,上傳代碼時(shí)請(qǐng)不要上傳app.js和app.json,避免本地請(qǐng)求變?yōu)榉?wù)器請(qǐng)求
開發(fā)過程中中遇到的坑:
JS方面
</>復(fù)制代碼
不支持DOM操作,需要在開發(fā)時(shí)能夠設(shè)置好所有需要的data屬性值,然后渲染
跳轉(zhuǎn)到tabbar頁面的時(shí)候只能使用wx.switchTab(OBJECT)
wx.showToast()配置樣式單一,且寬度不能自適應(yīng)
wxml方面
</>復(fù)制代碼
標(biāo)簽不夠語義化
wxss方面
</>復(fù)制代碼
不支持"a > b > c"雙箭頭寫法,控制臺(tái)會(huì)報(bào)錯(cuò)
背景圖屬性background-image必須寫在標(biāo)簽中,或者使用服務(wù)器上的圖片
使用display:flex布局方式,容器大小會(huì)隨內(nèi)容大小變化,所以,最好給容器設(shè)置寬度
標(biāo)注圖標(biāo)注的大小再設(shè)置時(shí)是原大小的2倍,比如圖上標(biāo)注10*10,css這邊寫20rpx*20rpx
其它方面
</>復(fù)制代碼
json文件是配置window窗口的,但是此時(shí)可以省略window屬性,如果加window則沒有效果,也不會(huì)報(bào)錯(cuò)
項(xiàng)目中使用過的API:
1.ES6相關(guān)
</>復(fù)制代碼
對(duì)象解構(gòu) {} = {}
箭頭函數(shù) =>
塊級(jí)變量let、const
模板字符串${...}
數(shù)組擴(kuò)展let c = [...a,...b]
2.微信相關(guān)
</>復(fù)制代碼
WXML
組件:view、text、image、icon、swiper、progress、navigator、button、input
template模板
列表渲染:wx:for="" wx:key=""
條件渲染:wx:if="" elif="" else
WXSS使用
flex布局
使用rpx自適應(yīng)寬度
JS相關(guān)方法的封裝
setData()
wx.request(OBJECT)
wx.navigateTo()
wx.navigateBack()
wx.showToast(OBJECT)
wx.showModal(OBJECT)
綁定事件:bindtap、onReachBottom
歡迎大家指正!
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/51252.html
摘要:學(xué)習(xí)微信小程序一段時(shí)間,自己仿照京東小程序做了幾個(gè)頁面,分享給大家看看源碼地址,希望能幫助到有興趣的同學(xué)喜歡可以加星哦其中幾個(gè)效果圖如下介紹一下事先準(zhǔn)備的事情前期部署項(xiàng)目命名規(guī)范用駝峰法命名中命名用分隔,用接口中數(shù)據(jù)用分隔文件文件夾命名 學(xué)習(xí)微信小程序一段時(shí)間,自己仿照京東小程序做了幾個(gè)demo頁面,分享給大家看看 源碼地址,希望能幫助到有興趣的同學(xué)https://github.com...
摘要:學(xué)習(xí)微信小程序一段時(shí)間,自己仿照京東小程序做了幾個(gè)頁面,分享給大家看看源碼地址,希望能幫助到有興趣的同學(xué)喜歡可以加星哦其中幾個(gè)效果圖如下介紹一下事先準(zhǔn)備的事情前期部署項(xiàng)目命名規(guī)范用駝峰法命名中命名用分隔,用接口中數(shù)據(jù)用分隔文件文件夾命名 學(xué)習(xí)微信小程序一段時(shí)間,自己仿照京東小程序做了幾個(gè)demo頁面,分享給大家看看 源碼地址,希望能幫助到有興趣的同學(xué)https://github.com...
awesome-github-wechat-weapp 是由OpenDigg整理并維護(hù)的微信小程序開源項(xiàng)目庫集合。我們會(huì)定期同步上的項(xiàng)目到這里,也歡迎各位 UI組件開發(fā)框架實(shí)用庫開發(fā)工具服務(wù)端項(xiàng)目實(shí)例Demo UI組件 weui-wxss ★1873 - 同微信原生視覺體驗(yàn)一致的基礎(chǔ)樣式庫zanui-weapp ★794 - 好用易擴(kuò)展的小程序 UI 庫wx-charts ★449 - 微信小程...
閱讀 2065·2021-10-08 10:04
閱讀 3093·2021-09-22 10:02
閱讀 2247·2019-08-30 15:56
閱讀 835·2019-08-30 15:54
閱讀 933·2019-08-30 15:54
閱讀 1288·2019-08-30 15:53
閱讀 2517·2019-08-30 11:21
閱讀 3565·2019-08-30 10:56