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

前言：

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

前后两天花了大约四五个小时制作完了自己第一个小程序，当然是没法发布的，小程序的发布要求还是挺严格的：企业资质、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，导致我都不知道怎么去获取按钮。希望懂的朋友留言交流一下，谢谢。

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

写在结尾

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

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

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

赞 (0)

相关推荐

  • 微信小程序开发(一) 微信登录流程详解

    微信小程序开发(一) 微信登录流程详解

    最近在研究微信小程序开发,非常有意思的一个东西.花了一点时间写了一个微信的登录流程,包括后端接口和小程序代码. 做过微信登录的都知道,我们需要一个标识来记录用户的身份的唯一性,在微信中unionId就是我们所需要的记录唯一ID,那么如何拿到unionId就成了关键,我将项目分为小程序和 后台PHP代码两部分来讲. 微信小程序开放平台 先从我们的小程序代码开始 简单的说一下我们小程序的js代码登录流程 login ->获取code ->getUserInfo获取iv和encryptedData

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

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

    前言:         微信小程序最近要发布了,抽空学习下如何开发,在网上找到的实例,觉得不错,给大家分享, 前后两天花了大约四五个小时制作完了自己第一个小程序,当然是没法发布的,小程序的发布要求还是挺严格的:企业资质.HTTPS.审核. 先大概介绍下自己,我9年前和很多网友一样开始自学编程,这些年来什么语言都学过.什么平台都接触过,自己也做过十来个产品,所以编程基础不是很稳固但是各方面都相对比较熟悉,因此在接触小程序的时候上手比较快. 至于为什么现在选择开发小程序,原因很简单,尝尝鲜! 学习

  • 微信小程序后端(java)开发流程的详细步骤

    微信小程序后端开发流程根据官网总结为两个步骤 1.前端调用 wx.login 返回了code,然后调用wx.getUserInfo获取到用户的昵称 头像 2.服务端根据code去微信获取openid, 接口地址: https://developers.weixin.qq.com/miniprogram/dev/api-backend/open-api/login/auth.code2Session.html%EF%BC%9B%E5%90%8C%E6%97%B6%EF%BC%8C%E6%9B%B4

  • 微信小程序 wxapp内容组件 icon详细介绍

    微信小程序 wxapp内容组件 icon详细介绍

    微信小程序 内容组件 相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress icon 图标. 属性名 类型 默认值 说明 type String   icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear size Number 23 icon的大小,单位px color Col

  • 微信小程序--组件（swiper）详细介绍

    微信小程序--组件（swiper）详细介绍

    根据微信小程序官网提供的示例进行操作并进行总结: swiper 主要设置的属性 index.WXML 的设置: index.js设置: 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

  • 微信小程序 wxapp内容组件 progress详细介绍

    微信小程序 内容组件 相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress 微信小程序内容组件 进度条:progress 进度条 属性名 类型 默认值 说明 percent Float 无 百分比0~100 showInfo Boolean false 在进度条右侧显示百分比 strokeWidth Number 6 进度条线的宽度,单位px color Color #09BB07 进度条颜色 active

  • 微信小程序 wxapp内容组件 text详细介绍

    微信小程序 内容组件 相关文章: 微信小程序 wxapp内容组件 icon 微信小程序 wxapp内容组件 text 微信小程序 wxapp内容组件progress 微信小程序内容组件:text 文本节点,支持转义符"\". 除了文本节点以外的其他节点都无法长按选中 示例: <view class="section section_gap"> <text>{{text}}</text> <view class="b

  • 微信小程序 （六）模块化详细介绍

    模块化也就是将一些通用的东西抽出来放到一个文件中,通过module.exports去暴露接口.我们在最初新建项目时就有个util.js文件就是被模块化处理时间的 /** * 处理具体业务逻辑 */ function formatTime(date) { //获取年月日 var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate() //获取时分秒 var hour = date.getH

  • 微信小程序 （七）数据绑定详细介绍

    微信小程序 （七）数据绑定详细介绍

    数据绑定有一部分前几个看着还行,后面的几个可能有几个不理解,界面展示的数据有的也因为条件没法显示.看不懂的可以先记着,后面真正用到时就会明白,反正我是这样想的.这里先记录下 data.wxml <!--数据绑定使用对象---内容--> <view>{{message}}</view> <!--数据绑定使用对象---组件属性---需要在双引号之内--> <view id="item-{{id}}">组件属性</view&g

  • 微信小程序实现文章关注功能详细流程

    微信小程序实现文章关注功能详细流程

    目录 1 数据源设计 1.1 文章数据源 1.2 关注数据源 2 录入测试数据 3 创建应用 4 首页功能实现 5 详情页功能实现 6 获取用户的openid 7 设置关注的低码方法 8 发布预览 9 总结 1 数据源设计 低代码工具分为模型驱动和表单驱动两种类型,微搭低代码属于模型驱动的低码工具.所谓模型驱动就是要先设计数据源,设计数据源之间的关系.我们分析一下关系是什么,应该有一个文章的数据源,还有一个关注的数据源.文章和关注之间的关系是一对多的关系,所谓的一对多是指一篇文章可以被多个人进行

  • 微信小程序使用uni-app开发小程序及部分功能实现详解

    微信小程序使用uni-app开发小程序及部分功能实现详解

    目录 一.uni-app 1.简介 2.开发工具 3.新建 uni-app项目 4.把项目运行到微信开发者工具 二.实现tabBar效果 1.创建tabBar页面 2.配置tabBar 三.配置网络请求 1.依照官网提示安装.导入.使用 2.实战 四.uni-app 里面小程序分包 1.创建分包目录 2.在 pages.json 文件中配置 3.创建分包页面 五.公用方法封装 六.搜索功能 1.搜索组件 2.搜索建议实现 3.本地存储 4.过滤器 七.上拉加载.下拉刷新 1.上拉加载 2.下拉刷

随机推荐