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

sourcenode 发布于2019-08-22 11:05 / 2897人阅读

摘要：学习微信小程序一段时间，自己仿照京东小程序做了几个页面，分享给大家看看源码地址，希望能帮助到有兴趣的同学喜欢可以加星哦其中几个效果图如下介绍一下事先准备的事情前期部署项目命名规范用驼峰法命名中命名用分隔，用接口中数据用分隔文件文件夹命名

学习微信小程序一段时间，自己仿照京东小程序做了几个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

欢迎大家指正！

混合云超融合服务器微信小程序Demo 微信小程序微信小程序支付微信小程序部署

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91749.html

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

摘要：学习微信小程序一段时间，自己仿照京东小程序做了几个页面，分享给大家看看源码地址，希望能帮助到有兴趣的同学喜欢可以加星哦其中几个效果图如下介绍一下事先准备的事情前期部署项目命名规范用驼峰法命名中命名用分隔，用接口中数据用分隔文件文件夹命名学习微信小程序一段时间，自己仿照京东小程序做了几个demo页面，分享给大家看看源码地址，希望能帮助到有兴趣的同学https://github.com...

shiweifu 2019-08-01 17:36 评论0 收藏0
自制，简易仿京东微信小程序demo

摘要：学习微信小程序一段时间，自己仿照京东小程序做了几个页面，分享给大家看看源码地址，希望能帮助到有兴趣的同学喜欢可以加星哦其中几个效果图如下介绍一下事先准备的事情前期部署项目命名规范用驼峰法命名中命名用分隔，用接口中数据用分隔文件文件夹命名学习微信小程序一段时间，自己仿照京东小程序做了几个demo页面，分享给大家看看源码地址，希望能帮助到有兴趣的同学https://github.com...

QiuyueZhong 2019-08-29 13:27 评论0 收藏0
微信小程序资源汇总

awesome-github-wechat-weapp 是由OpenDigg整理并维护的微信小程序开源项目库集合。我们会定期同步上的项目到这里，也欢迎各位 UI组件开发框架实用库开发工具服务端项目实例Demo UI组件 weui-wxss ★1873 - 同微信原生视觉体验一致的基础样式库zanui-weapp ★794 - 好用易扩展的小程序 UI 库wx-charts ★449 - 微信小程...

Olivia 2019-08-21 17:48 评论0 收藏0
UI仿写 - 收藏集 - 掘金

摘要：启动页旅行云阅一个仿网易云音乐，使用及豆瓣开发的开源项目掘金一款基于网易云音乐，使用及豆瓣开发的符合阅读类的开源项目。 Android 仿今日头条的开源项目 - Android - 掘金起因看到众多大神纷纷有了自己的开源项目，于是自己琢磨着也想做一个开源项目来学习下，因为每次无聊必刷的app就是今日头条，评论简直比内容都精彩，所以我打算仿今日头条来练练手，期间也曾放弃过，也遇到很多坑...

AlienZHOU 2019-06-25 11:17 评论0 收藏0
日常所需 - 收藏集 - 掘金

摘要：调用优先级安卓原生三星魅族靠谱的唯一设备号生成方案掘金应用开发中有时候也许会获取设备的唯一标识。必须要会的基本使用及常用命令操作工具资源掘金之前一直用的，后来换了之后才发现的强大功能，是不能比的。通过 Weex 300 行代码开发一款简易的跑步 App - 前端 - 掘金一套构建高性能、可扩展的原生应用的跨平台开发方案 Weex 给大家带来的无疑是客户端开发效率的提升，我们可以通过一...

BicycleWarrior 2019-06-25 11:27 评论0 收藏0