自制，簡易仿京東微信小程序demo

QiuyueZhong 發(fā)布于2019-08-29 13:27 / 2675人閱讀

摘要：學(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)備的事情

前期部署

****項(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放入對應(yīng)的文件夾中，三個(gè)入口頁面文件放入外層
  

****靜態(tài)文件****
  1.圖片小圖使用雪碧圖
  2.對應(yīng)文件的圖片都需要新建對應(yīng)的文件夾存放圖片
  
  
****代碼管理****
  1.使用Git,上傳代碼時(shí)請不要上傳app.js和app.json，避免本地請求變?yōu)榉?wù)器請求

開發(fā)過程中中遇到的坑：

JS方面

  不支持DOM操作，需要在開發(fā)時(shí)能夠設(shè)置好所有需要的data屬性值，然后渲染
   跳轉(zhuǎn)到tabbar頁面的時(shí)候只能使用wx.switchTab(OBJECT)
   wx.showToast()配置樣式單一，且寬度不能自適應(yīng)

wxml方面

標(biāo)簽不夠語義化

wxss方面

不支持"a > b > c"雙箭頭寫法，控制臺會報(bào)錯(cuò)
背景圖屬性background-image必須寫在標(biāo)簽中,或者使用服務(wù)器上的圖片
使用display:flex布局方式，容器大小會隨內(nèi)容大小變化，所以，最好給容器設(shè)置寬度
標(biāo)注圖標(biāo)注的大小再設(shè)置時(shí)是原大小的2倍，比如圖上標(biāo)注10*10，css這邊寫20rpx*20rpx

其它方面

json文件是配置window窗口的，但是此時(shí)可以省略window屬性，如果加window則沒有效果，也不會報(bào)錯(cuò)

項(xiàng)目中使用過的API：
1.ES6相關(guān)

對象解構(gòu) {} = {}
箭頭函數(shù) =>
塊級變量let、const
模板字符串${...}
數(shù)組擴(kuò)展let c = [...a,...b]

2.微信相關(guān)

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

歡迎大家指正！