Skip to main content
 Web开发网 » 站长学院 » 浏览器插件

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典

2021年10月09日6340百度已收录

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第1张

前言自 2017 年 腾讯推出小程序产品 3 年以来,微信小程序仍以 10 亿月活领先于字节跳动、支付宝、百度等巨头公司,在产品生态和技术模式上目前也一直处于被同类竞品追赶的位置。可以说,微信小程序基本上引领了小程序这个细分领域的一套标准化进程和规范。

长期以来,移动互联网界一直在寻找一种既能获得 Native 原生的体验,又可以低门槛快速开发的技术。在这个过程中出现了很多尝试,例如 React Native(RN),RN 本质上是轻量化 Native 开发,在 Native 基础上做减法;H5 的特点是开发成本较低,可以做到比较灵活,但缺点在基础信息获取方面(如地理位置、手机信息、播放器等)和顺滑体验方面无法做到 Native 的效果。

在这个背景下,微信小程序也给出了自己的方案,它的做法是在 H5 的标准上做 Native 能力的加法,赋予了小程序很多 Native 的能力,微信通过自行研发的小程序运行时,为小程序提供了大量的API层面能力支持,如地图、导航、画布、滚动视图等方面都能提供支持。

小程序的优越性体现在既保留了 H5 开发的便利和灵活性,又可以达到媲美 Native 体验,配合微信11亿用户的社交网络,越来越开发者选择微信小程序的技术。

小程序是如何运行的?它的工作原理是什么?小程序的出现不是一蹴而就,而是在移动互联网近10年的业务、场景积累上逐步发展起来的。Web 开发具有高效、灵活、门槛低的特点,但弊端在于所有的页面都依赖浏览器的渲染,浏览器的能力就是 Web 研发的上限和边界。

为了克服这个问题,于是便有了 JS-Bridge 这种方式,将很多常用组件内置到应用中,当内嵌组件足够多的时候,再做一层封装,形成了JS-SDK,其本质没有差别。

小程序在 JS-SDK 的基础上,一方面进一步开放和拓展原生的能力给到 Web 前端调用,另一方面,页面渲染(Webview Render)的UI层和逻辑层,使用了两个独立的线程。如下图所示:

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第2张

今天,高能的地方来了!腾讯内部出品的“Android 微信小程序学习宝典”分享给大家,从原理到实战,一应俱全!这份宝典主要涉及以下四个方面:

1、小程序基本介绍(背景与趋势、小程序技术方案、开发工具、MINA 框架、逻辑层与页面层、单项数据流)2、UI 开发(页面布局之弹性布局-Flex 介绍、文字 与图片内容的呈现、交互表单、对话框、下拉刷新和上拉加载、动画效果实现.....)3、API 操作(网络请求、文件结构及操作、地理位置获取、设备信息获取)4、小程序购物商城项目实战(微信小程序之侧栏分类、仿淘宝分类入口、购物数量加减、商品属性分类、购物车实现)

文章有限,下文只能拿出一些例子来给大家看看,不能全部描述出来,有完整的pdf版可免费分享,有需要的可以直接点击这里能看到全部文档内容哦。

一、小程序基本介绍1、背景与趋势

微信小程序发展趋势微信小程序发展前景从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第3张

2、小程序技术方案

微信小程序支付宝小程序从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第4张

3、开发工具

微信小程序官方开发工具即速应用Sublime Text 3WebStorm从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第5张

4、MINA 框架

MINA 框架MINA 框架主要分为两大部分目录结构从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第6张

5、逻辑层与页面层

逻辑层与界面层分离逻辑层的 JavaScript界面层--数据绑定列表渲染事件处理事件冒泡事件传参单向数据流登录页面案例抽象共同的事件处理函数条件渲染界面层(WXSS vs CSS)从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第7张

6、单项数据流

单项数据流setData 作用从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第8张

二、UI 开发1、页面布局之弹性布局-Flex 介绍

Flex 布局是什么?基本概念容器的属性项目的属性从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第9张

2、文字 与图片内容的呈现3、交互表单

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第10张

4、对话框5、下拉刷新和上拉加载6、动画效果实现7、页面跳转与参数传递8、事件处理

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第11张

三、API 操作1、网络请求

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第12张

2、文件结构及操作

文件结构全局文件一个页面的内部从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第13张

3、地理位置获取4、设备信息获取

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第14张

四、小程序购物商城项目实战1、微信小程序之侧栏分类

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第15张

2、仿淘宝分类入口

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第16张

3、购物数量加减

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第17张

4、商品属性分类

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第18张

5、购物车实现

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第19张

结语由于篇幅限制,文档的详解资料太全面,细节内容太多,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!以上只是部分截图。

除了上面的我还为大家准备了以下一体系的复习资料:

《Android开发七大模块核心知识笔记》

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第20张

《960全网最全Android开发笔记》

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第21张

《379页Android开发面试宝典》

历时半年,我们整理了这份市面上最全面的安卓面试题解析大全包含了腾讯、百度、小米、阿里、乐视、美团、58、猎豹、360、新浪、搜狐等一线互联网公司面试被问到的题目。熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率。

如何使用它?

1.可以通过目录索引直接翻看需要的知识点,查漏补缺。2.五角星数表示面试问到的频率,代表重要推荐指数

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第22张

《507页Android开发相关源码解析》

只要是程序员,不管是Java还是Android,如果不去阅读源码,只看API文档,那就只是停留于皮毛,这对我们知识体系的建立和完备以及实战技术的提升都是不利的。

真正最能锻炼能力的便是直接去阅读源码,不仅限于阅读各大系统源码,还包括各种优秀的开源库。

从原理到实战,四大模块,腾讯内部200页微信小程序开发宝典  微信小程序开发文档 第23张

以上文章中的资料,均可以免费分享给大家来学习。

资料太多,全部展示会影响篇幅,暂时就先列举这些部分截图;

需要的朋友,直接转发+点赞+私信回复【资料】一键领取!!!

评论列表暂无评论
发表评论
微信