微信小程序 实战实例开发流程详细介绍


Posted in Javascript onJanuary 05, 2017

前言:

        微信小程序最近要发布了,抽空学习下如何开发,在网上找到的实例,觉得不错,给大家分享,

前后两天花了大约四五个小时制作完了自己第一个小程序,当然是没法发布的,小程序的发布要求还是挺严格的:企业资质、HTTPS、审核。

先大概介绍下自己,我9年前和很多网友一样开始自学编程,这些年来什么语言都学过、什么平台都接触过,自己也做过十来个产品,所以编程基础不是很稳固但是各方面都相对比较熟悉,因此在接触小程序的时候上手比较快。

至于为什么现在选择开发小程序,原因很简单,尝尝鲜!

学习

虽然很早就听说小程序要出来了,但是在我的潜意识中,小程序不过是一个被微信优化、限制、规范过的WebApp。

果然下载完开发工具一看,起码从表面来看确实就是一个“轻量级、功能非常不强大”的前端框架。典型的JS/CSS/HTML结构,微信非得重新取个名字也没办法,逼格还是得有的。

微信小程序 实战实例开发流程详细介绍

然后去看了下官网文档,真的是吃了一惊,文档少的可怜,不是说不全面,而是确实微信就提供了这么多原生功能。很多常用的JS组件全都没有,看样子之后很多地方都需要自己实现。

大概浏览了一遍,开发逻辑基本和常规前端无异,如果遇到大工程,可以用glup或者grant等工具。

设计

用demo写了几句话之后大概明白了语法规则,然后就开始思考做个什么。

一时半会想不到做什么,就把之前做的一个跑车展示软件拿出来再做一遍吧。

这是当时在iOS和安卓上做完的效果:

微信小程序 实战实例开发流程详细介绍

品牌列表

微信小程序 实战实例开发流程详细介绍

车型浏览

所以整体软件结构非常简单,一个品牌列表页,一个左右滑动的详情页。当然由于微信小程序的限制,不能外链,不能加iframe视频,因此图集、视频功能取消。

整个小程序唯一的互动就是点赞。点赞数会记录到服务器统计,同时在本地也保存一下,因此不是真正意义上做到用户点赞。

为什么?因为没有申请小程序appid,无法真正获取用户信息。

开发

首页列表的开发非常简单,思路是:

1.请求服务器数据列表

2.用for标签渲染出每个item

3.为每个item添加点击事件,OK

代码非常简单,一句请求、一句页面跳转。

微信小程序 实战实例开发流程详细介绍

首页开发

在页面布局上,虽说是CSS,但是感觉还是不如CSS好用,还是遇到了很多未解之谜。尤其在我的设计里需要悬浮、百分比设计,结果总是出现莫名的bug,最后不得已固定了像素。

然后就是详情页,好在微信提供了一个类似banner广告的组建Swiper,功能可以说是异常地不强大!

自定义性非常糟糕,万幸地是提供了一个滑动change事件。

再后面就是去写每一个item的布局,费了好大劲,总是发现微信的image组建底部会出现空白,无论改变margin还是padding都没用,不得已全部改成view。

微信小程序 实战实例开发流程详细介绍

详情页

UI全部写完后就要实现应用唯一一个互动功能:点赞。

1.向服务器发起请求,点赞+1

2.本地记录被点赞的汽车id

3.swiper滑动时刷新是否点赞

在这里遇到了一个大坑,可能是小弟愚昧,微信竟然没有提供元素获取的方法,没有jQuery的seletor,也没有HTML原生的getElement,导致我都不知道怎么去获取按钮。希望懂的朋友留言交流一下,谢谢。

最后不得已留了两个按钮,一个点赞,一个已点赞,根据状态隐藏。

写在结尾

第一个功能非常简单的小程序就做完了,要说有什么用,没什么用,自己玩的开心就行了。当然这也是一个学习的过程,后面肯定要开发并发布更多的小程序,也会去接一些小程序开发外包。

作为一名开发者,微信小程序的开发体验让我很失望,远远不如前端。但是作为一名产品,我却很开心,小程序提供了大量机遇,可以用最简单的方式实现非常多的功能。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Json序列化和反序列化方法解析
Dec 19 Javascript
jQuery中:text选择器用法实例
Jan 03 Javascript
使用jQuery获得内容以及内容的属性
Feb 26 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
Webpack实战加载SVG的方法
Dec 26 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
详解微信小程序文件下载--视频和图片
Apr 24 Javascript
原生js实现随机点名功能
Nov 05 Javascript
node读写Excel操作实例分析
Nov 06 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 #Javascript
bootstrap table配置参数例子
Jan 05 #Javascript
bootstrap table 表格中增加下拉菜单末行出现滚动条的快速解决方法
Jan 05 #Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
Jan 05 #Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 #Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 #Javascript
JS实现随机颜色的3种方法与颜色格式的转化
Jan 05 #Javascript
You might like
谈谈从phpinfo中能获取哪些值得注意的信息
2017/03/28 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
javascript制作坦克大战全纪录(2)
2014/11/27 Javascript
Javascript基础教程之while语句
2015/01/18 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
详解Vue 开发模式下跨域问题
2017/06/06 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
js中的 || 与 && 运算符详解
2018/05/24 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
Python查看微信撤回消息代码
2018/06/07 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
Python3进制之间的转换代码实例
2019/08/24 Python
python图像处理模块Pillow的学习详解
2019/10/09 Python
pycharm 更改创建文件默认路径的操作
2020/02/15 Python
python实现密码强度校验
2020/03/18 Python
Python使用jpype模块调用jar包过程解析
2020/07/29 Python
css3 矩阵的使用详解
2018/03/20 HTML / CSS
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
信息管理员岗位职责
2013/12/01 职场文书
关于母亲节的感言
2014/02/04 职场文书
医院总经理岗位职责
2014/02/04 职场文书
企业文化标语口号
2014/06/09 职场文书
公司股东合作协议书
2014/09/14 职场文书
学习作风建设心得体会
2014/10/22 职场文书
2015年班主任个人工作总结
2015/03/31 职场文书
2015年团支书工作总结
2015/04/03 职场文书
工程资料员岗位职责
2015/04/13 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
spring boot中nativeQuery的用法
2021/07/26 Java/Android
python中tkinter复选框使用操作
2021/11/11 Python
关于MySQL临时表为什么可以重名的问题
2022/03/22 MySQL
Windows server 2003卸载和安装IIS的图文教程
2022/07/15 Servers