学习微信小程序一段时间，自己仿照京东小程序做了几个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、inputtemplate模板列表渲染：wx:for="" wx:key=""条件渲染：wx:if="" elif="" elseWXSS使用flex布局使用rpx自适应宽度JS相关方法的封装setData()wx.request(OBJECT)wx.navigateTo()wx.navigateBack()wx.showToast(OBJECT)wx.showModal(OBJECT)绑定事件：bindtap、onReachBottom

欢迎大家指正！