![](https://img.haomeiwen.com/i14140248/71e58c59c27edf60.png)
前言
自 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层和逻辑层,使用了两个独立的线程。如下图所示:
今天,高能的地方来了!腾讯内部出品的“Android 微信小程序学习宝典”分享给大家,从原理到实战,一应俱全!这份宝典主要涉及以下四个方面:
1、小程序基本介绍(背景与趋势、小程序技术方案、开发工具、MINA 框架、逻辑层与页面层、单项数据流)
2、UI 开发(页面布局之弹性布局-Flex 介绍、文字 与图片内容的呈现、交互表单、对话框、下拉刷新和上拉加载、动画效果实现.....)
3、API 操作(网络请求、文件结构及操作、地理位置获取、设备信息获取)
4、小程序购物商城项目实战(微信小程序之侧栏分类、仿淘宝分类入口、购物数量加减、商品属性分类、购物车实现)
文章有限,下文只能拿出一些例子来给大家看看,不能全部描述出来,有完整的pdf版可免费分享,有需要的可以直接点击这里能看到全部文档内容哦。
一、小程序基本介绍
1、背景与趋势
- 微信小程序发展趋势
- 微信小程序发展前景
![](https://img.haomeiwen.com/i14140248/5bc0e0c94b116530.png)
2、小程序技术方案
- 微信小程序
- 支付宝小程序
![](https://img.haomeiwen.com/i14140248/83de80d45c02cfb1.png)
3、开发工具
- 微信小程序官方开发工具
- 即速应用
- Sublime Text 3
- WebStorm
![](https://img.haomeiwen.com/i14140248/eb1e6a932fffa417.png)
4、MINA 框架
- MINA 框架
- MINA 框架主要分为两大部分
- 目录结构
![](https://img.haomeiwen.com/i14140248/5a351491cb71dd7b.png)
5、逻辑层与页面层
- 逻辑层与界面层分离
- 逻辑层的 JavaScript
- 界面层--数据绑定
- 列表渲染
- 事件处理
- 事件冒泡
- 事件传参
- 单向数据流
- 登录页面案例
- 抽象共同的事件处理函数
- 条件渲染
- 界面层(WXSS vs CSS)
![](https://img.haomeiwen.com/i14140248/7a67986067583b6b.png)
6、单项数据流
- 单项数据流
- setData 作用
![](https://img.haomeiwen.com/i14140248/77292afa00205be8.png)
二、UI 开发
1、页面布局之弹性布局-Flex 介绍
- Flex 布局是什么?
- 基本概念
- 容器的属性
- 项目的属性
![](https://img.haomeiwen.com/i14140248/df99b1882a548a80.png)
2、文字 与图片内容的呈现
3、交互表单
![](https://img.haomeiwen.com/i14140248/9b83c386e5e65fa9.png)
4、对话框
5、下拉刷新和上拉加载
6、动画效果实现
7、页面跳转与参数传递
8、事件处理
![](https://img.haomeiwen.com/i14140248/45c58b4d79c6a83f.png)
三、API 操作
1、网络请求
![](https://img.haomeiwen.com/i14140248/66ac8ae267f762b5.png)
2、文件结构及操作
- 文件结构
- 全局文件
- 一个页面的内部
![](https://img.haomeiwen.com/i14140248/7bdc3b6a5c9d39e5.png)
3、地理位置获取
4、设备信息获取
![](https://img.haomeiwen.com/i14140248/9620985cc055435e.png)
四、小程序购物商城项目实战
1、微信小程序之侧栏分类
![](https://img.haomeiwen.com/i14140248/873ce96e502d01e9.png)
2、仿淘宝分类入口
![](https://img.haomeiwen.com/i14140248/e6e23d5810be0cfb.png)
3、购物数量加减
![](https://img.haomeiwen.com/i14140248/0e1459aec95b77ad.png)
4、商品属性分类
![](https://img.haomeiwen.com/i14140248/c73225a666375691.png)
5、购物车实现
![](https://img.haomeiwen.com/i14140248/0ee0a28b6f579273.png)
结语
由于篇幅限制,文档的详解资料太全面,细节内容太多,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!以上只是部分截图。
除了上面的我还为大家准备了以下一体系的复习资料:
《Android开发七大模块核心知识笔记》
![](https://img.haomeiwen.com/i16595031/a609a71009eb0736.png)
《960全网最全Android开发笔记》
![](https://img.haomeiwen.com/i22857658/085a8c4dfa5ced7b.png)
《379页Android开发面试宝典》
历时半年,我们整理了这份市面上最全面的安卓面试题解析大全
包含了腾讯、百度、小米、阿里、乐视、美团、58、猎豹、360、新浪、搜狐等一线互联网公司面试被问到的题目。熟悉本文中列出的知识点会大大增加通过前两轮技术面试的几率。
如何使用它?
1.可以通过目录索引直接翻看需要的知识点,查漏补缺。
2.五角星数表示面试问到的频率,代表重要推荐指数
![](https://img.haomeiwen.com/i22857658/9bba41a92f06f991.png)
《507页Android开发相关源码解析》
只要是程序员,不管是Java还是Android,如果不去阅读源码,只看API文档,那就只是停留于皮毛,这对我们知识体系的建立和完备以及实战技术的提升都是不利的。
真正最能锻炼能力的便是直接去阅读源码,不仅限于阅读各大系统源码,还包括各种优秀的开源库。
![](https://img.haomeiwen.com/i16595031/02412bf693843bee.png)
以上内容均放在了开源项目:【github】 中已收录,大家可以自行获取(或者关注主页扫描加微信获取)。
网友评论