自制,简易仿京东微信小程序demo

学习微信小程序一段时间,自己仿照京东小程序做了几个demo页面,分享给大家看看

其中几个效果图如下:

《自制,简易仿京东微信小程序demo》

《自制,简易仿京东微信小程序demo》

《自制,简易仿京东微信小程序demo》

介绍一下事先准备的事情

前期部署

****项目命名规范****

  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

欢迎大家指正!

    原文作者:我是一个木头人
    原文地址: https://segmentfault.com/a/1190000011147001
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞