自制,简易仿京东微信小程序demo
时间:2020-01-18
本文章向大家介绍自制,简易仿京东微信小程序demo,主要包括自制,简易仿京东微信小程序demo使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
学习微信小程序一段时间,自己仿照京东小程序做了几个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.cnblogs.com/homehtml/p/12209590.html
- Java后端WebSocket的Tomcat实现
- jwplayer 隐藏属性方法记载
- TensorFlow从0到1丨开篇:Hello TensorFlow !
- JS原型继承和类式继承
- 在Servlet的init方法中创建线程
- TensorFlow从0到1丨第2篇:TensorFlow核心编程
- AngularJS中的按需加载ocLazyLoad
- AngularJS driective 封装 自动滚动插件
- java类过滤器,防止页面SQL注入
- Web项目添加Maven支持
- Jquery 获取第一个子元素
- Dropwizard框架入门
- Java 解析Excel文件为JSON
- SQL语句大小写是否区分的问题,批量修改整个数据库所有表所有字段大小写
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Android简洁的下拉放大刷新效果示例
- 自定义View | invalidate()源码分析
- Pagerslidingtabstrip菜单标题栏制作方法
- Flink SQL 自定义 Sink
- RollViewPager图片轮播效果开源框架使用方法详解
- Nacos配置中心动态获取数组配置
- android 二次打包完成apk多渠道打包的方法
- Spring的异步线程处理
- R语言做正态性检验的一个小例子
- Springboot整合Redis缓存机制
- 5000字!带你零距离接触websocket!
- 最小堆与索引堆
- Android实现状态栏白底黑字效果示例代码
- Spring的任务调度处理
- Android设计模式之Builder模式解析