摘要:学习微信小程序一段时间,自己仿照京东小程序做了几个页面,分享给大家看看源码地址,希望能帮助到有兴趣的同学喜欢可以加星哦其中几个效果图如下介绍一下事先准备的事情前期部署项目命名规范用驼峰法命名中命名用分隔,用接口中数据用分隔文件文件夹命名
学习微信小程序一段时间,自己仿照京东小程序做了几个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
欢迎大家指正!
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/112609.html
摘要:学习微信小程序一段时间,自己仿照京东小程序做了几个页面,分享给大家看看源码地址,希望能帮助到有兴趣的同学喜欢可以加星哦其中几个效果图如下介绍一下事先准备的事情前期部署项目命名规范用驼峰法命名中命名用分隔,用接口中数据用分隔文件文件夹命名 学习微信小程序一段时间,自己仿照京东小程序做了几个demo页面,分享给大家看看 源码地址,希望能帮助到有兴趣的同学https://github.com...
摘要:学习微信小程序一段时间,自己仿照京东小程序做了几个页面,分享给大家看看源码地址,希望能帮助到有兴趣的同学喜欢可以加星哦其中几个效果图如下介绍一下事先准备的事情前期部署项目命名规范用驼峰法命名中命名用分隔,用接口中数据用分隔文件文件夹命名 学习微信小程序一段时间,自己仿照京东小程序做了几个demo页面,分享给大家看看 源码地址,希望能帮助到有兴趣的同学https://github.com...
阅读 3022·2021-09-22 14:59
阅读 1860·2021-09-22 10:02
阅读 2106·2021-09-04 16:48
阅读 2256·2019-08-30 15:53
阅读 2963·2019-08-30 11:27
阅读 3400·2019-08-29 18:35
阅读 957·2019-08-29 17:07
阅读 2667·2019-08-29 13:27