api 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

欢迎大家指正！

api demo 京东商品详情_自制，简易仿京东微信小程序demo相关推荐

java小程序贪吃蛇代码_微信小程序Demo之贪食蛇
原标题:微信小程序Demo之贪食蛇差不多大半年前,笔者发布了一篇关于OC版贪食蛇开发的文章,时隔多月,微信小程序横空出世,于是闲来无事的我又写了一个小程序版. 01页面布局关于小程序笔者就不做介绍 ...
最全微信小程序demo
wx-gesture-lock 微信小程序的手势密码 WXCustomSwitch 微信小程序自定义 Switch 组件模板 WeixinAppBdNovel 微信小程序demo:百度小说搜索 sh ...
object picker 微信小程序_微信小程序 demo分享
选择器示例demo: 1.普通选择器 2.多列选择器 3.时间选择器 4.日期选择器 5.省市区选择器 wxml 普通选择器:(普通数组) 当前选择:{{array[index]}} 普通选择器2:( ...
小程序 | 注释级微信小程序demo，助你快速切入开发
写在前面小程序开发渐进红利期,更多开发者慕名而来,网上的学习资料也层出不穷,有点眼花缭乱的意思了.在经过一个多月的摸索式学习后,我也终于写了不算精美的一个小程序. 那为什么写这篇文章: 总结经验 - ...
微信小程序Demo之电影评分功能
实现步骤一.准备工序二.新建项目一.准备工序具体代码开源到github,欢迎star 参考微信官方文档. 微信社区交流(有问题时可以在此网站搜索一哈) 官网注册账号 2.1 注册[微信小程 ...
另一个小程序返回的支付结果如何得到_手把手教你测微信小程序
WeTest 导读在小程序持续大量爆发的形势下,现在已经成为了各平台竞争的战略布局重点.至今年2月,月活超500万的微信小程序已经达到237个,其中个人开发占比高达2成.因小程序的开发门槛低.传播快 ...
小程序和vue语法对比_React语法开发微信小程序 Demo
前言从16年微信小程序内测的时候至今,微信小程序用实践证明了自己的创新和价值,微信小程序的规则也在社区的影响下变得更加完善. 但是不得不说,用惯了VSCode,官方的开发工具确实不怎么好用.之前没有 ...
小程序iconfont报错_【经验】开发微信小程序经验总结
一.技术要求(语言方面) 有H5或H4和CSS3的书写经验,没有建议观看B站中的渡一教育-Web前端开发(html css不算语言). 强烈推荐他们的视频,主讲人没有口音且视频质量很高,是哈尔滨理工 ...
mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全责编 | 阿秃转自 | 美团技术团队企业博客前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...

api demo 京东商品详情_自制，简易仿京东微信小程序demo

api demo 京东商品详情_自制，简易仿京东微信小程序demo相关推荐

最新文章

热门文章