整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
华社客户端贵州频道电 近日，《中小学德育学堂》节目在贵州省紫云自治县多所中小学校园开播，紫云县充分运用互联网+教育，创新中小学德育载体。内容新颖、形式活泼的德育课，获得了良好的教学效果。
贵州紫云学生正在观看《中小学德育学堂》
6月19日，在紫云县的多所中小学校园里，同学们正在观看《中小学德育学堂》第六季19期节目，节目当中，大凉山的女孩、小小的口罩大大的中国、2分钟告诉你为何要禁食野生动物等内容，成为同学们观看后的热点讨论话题。
学生们结合视频内容进行交流讨论
《中小学德育学堂》是新华社设计制作的集德育、时事、爱国主义和社会主义核心价值观教育等内容为一体的视频节目，分为小学、初中、高中三个版本。节目内容紧紧围绕主流价值观，融合文图、视频、动漫等鲜活形式，用独特的解读视角，向中小学生传递权威时政资讯、解读深度新闻专题，通过青少年的参与、体验和互动，产生教育和传播的实际效果，是创新德育工作的积极探索与实践。
贵州紫云学生正在观看《中小学德育学堂》
《中小学德育学堂》将作为不同学段“思政课程”和“课程思政”的有效补充，每周一期在紫云自治县各大校园播出。每期节目包含《天下速报》《热点聚焦》《新闻故事》《文化百科》《缤纷世界》等栏目，内容涵盖理想信念教育、社会主义核心价值观教育、中华优秀传统文化教育。教师也将结合这些内容进行学科教学和主题教育活动。通过别样而生动的思政教育，加强学生爱党、爱国、爱人民、爱学习“四爱”教育，厚植爱国主义精神和家国情怀。
声明：转载此文是出于传递更多信息之目的。若有来源标注错误或侵犯了您的合法权益，请作者持权属证明与本网联系，我们将及时更正、删除，谢谢。
几何时，编程对极客来说是最讨厌的事，但在今天，事情已经不再是这样了。大多数的企业家、自由职业者和市场推销人员都会告诉你：编程改变命运。在过去几年里，我一直在学习如何编程，编程也帮助我成为了一个更好的企业家——当我的团队需要我修理一些网站的bug时，我都可以鞠躬尽瘁了。
你完全不必倾家荡产去学习如何编程，这12个提供免费编程课的地方推荐给你。
1. CodeAcademy
最受欢迎的学习编程的网站之一就是CodeAcademy啦。事实上，已经有超过2400万人通过这个教育公司的迷人经验学习过如何编程，在CodeAcademy,通过上课你可以深入了解到从HTML&CSS、JavaScript、jQuery、PHP、Python到Ruby的所有东西。
2. Coursera
创办于2012年，Coursera已经成长为一个以营利为目的的教育技术公司，它提供119个机构的超过1000个课程。虽然你可以支付某些程序来获得一个证书，但还是有免费的各种专门化编程的介绍课程，这些课程由各个大学提供，例如华盛顿大学、斯坦福大学、多伦多大学和范德比尔特大学。
3. edX
EdX是另一个开源非营利在线学习平台的代表。它是由哈佛大学和麻省理工学院在2012年创办的，在这里你会学到一些尖端技术和理论。如今，edX的加入者已经包括60所学校，你可能不会在这个免费的哈佛大学电脑课程介绍上走错。
4. Udemy
Udemy成立于2010年，是一个可以学习和提高职业技巧的在线学习平台。虽然有需要付费的课程，但也有大量通过视频课教授的免费编程课，比如为企业家量身打造的编程——HTML&CSS和Python编程介绍。
5. aGupieWare
AGupieWare是一个独立的应用程序开发商，它从美国的一些领导机构中调查计算机科学程序，后来它创办了一个由斯坦福大学、麻省理工学院、卡内基梅隆大学、伯克利大学和哥伦比亚大学提供的免费教程，这个项目之后被分成了15个课程：3个入门课程、7个核心课程和5个选修课。
尽管实际上你不会收到贷款,这仍然是一个为未来的计算机程序员准备的完美的介绍程序。
6. GitHub
有时你会被一个问题困住，需要翻看参考书，那就来找GitHub吧。你可以在基于web的Git存储库主机服务中，找到囊括80多种编程语言的超过500个免费的编程书。
7. MIT Open Courseware
如果你已经学过了基础知识，想学学更深层的知识，例如探索编程背后的理论。那就是MIT免费课件网站的优势了，它包括了例如电脑科学及编程、Java编程简介和C语言编程实例这些课程。
8. Hack.pledge
这是一个开发者社区，包括一些像BitTorrent的创造者Bram Cohen这样的高知名度开发者。因此，你可以向世界上一些首席开发者学习，使你的编程能力变得完美无缺。
9. Code Avengers
总部在新西兰的Code Avengers提供有趣且互动的编程课，教你如何用JavaScript、HTML和CSS编游戏、应用程序和网站。每个课程仅在12小时内完成且有英语、俄语、荷兰语、西班牙语、意大利语、土耳其语和葡萄牙语版本。
10. Khan Academy
Khan Academy由教育家Salman Khan创办于2006年，是最原始的免费在线学习机构之一。通过一步步的视频教程，你可以学会如何用JavaScript和ProcessingJS编程图画、动画和游戏，还可以学会如何用HTML和CSS创建网站。
11. Free Food Camp
这里你可以通过加入社区的专业人士和学生学到HTML5、CSS3、JavaScript、Databases、DevTools、Node.js、Angular.js和Agile。你们甚至可以用编程技能在一起工作，这样就可以构建免费的应用程序。要记得这点：你正在学习的这些技能有助于解决实际问题，代码应该是非营利的。
12. HTML5 Rocks
这个Google project发布于2010年，是为了和苹果的HTML5对着干，这个网站满是教程、资源和最新版的HTLM5。它是开源的，所以开发者可以随意使用HTML5代码，而且因为它比大多数入门课程更先进，你可能想要在进入网站之前先学习一些基础知识和经验。
学习代码原本需要昂贵的书籍和课程，但以后再也不需要了。我强烈建议每个企业家都应该学习编程。还在纠结你要不要编程？这本编程指南会详细向你展示我从一个企业家到编程者的每个步骤。
原文链接： http://www.entrepreneur.com/article/250323（译者/何抒灿 责编/钱曙光）
人学习手机 App 开发，一开始总要选择一条学习路径。
如果你熟悉 Java 语言，可以学习安卓开发；如果熟悉脚本语言（比如 Python 或 Ruby），可以学习 Swift 语言，进行 iOS 开发；如果像我一样，比较熟悉 Web 网页技术，那么 H5 开发是最容易上手的。
这个系列教程的第一篇，已经介绍过了手机 App 的种类[1]。所谓的 H5 页面，其实就是混合 App 的前端，外面是一个原生的壳，里面是 Web 网页。本文紧接上一篇，介绍手机 App 开发的技术栈，尤其是跟 H5 开发相关的技术。
本文由国内最大的在线教育平台之一“腾讯课堂”[2]赞助。他们现在启动了“腾讯课堂101计划”[3]，推广优质课程资源。希望学习和提高手机 App 开发技术的朋友，可以留意一下本文结尾的安卓课程信息。
手机 App 的技术栈可以分成三类。
（1）原生 App 技术栈（native technology stack）
原生技术栈指的是，只能用于特定手机平台的开发技术。比如，安卓平台的 Java 技术栈，iOS 平台的 Object-C 技术栈或 Swift 技术栈。
这种技术栈只能用在一个平台，不能跨平台。
（2）混合 App 技术栈（hybrid technology stack）
混合技术栈指的是开发混合 App 的技术，也就是把 Web 网页放到特定的容器中，然后再打包成各个平台的原生 App。所以，混合技术栈其实是 Web 技术栈 + 容器技术栈，典型代表是 PhoneGap、Cordova、Ionic 等框架。
如果已经掌握了 Web 技术，这个技术栈就主要学习容器提供的 API Bridge，网页通过它们去调用底层硬件的 API。
（3）跨平台 App 技术栈（cross-platform technology stack）
跨平台技术栈指的是使用一种技术，同时支持多个手机平台。它与混合技术栈的区别是，不使用 Web 技术，即它的页面不是 HTML5 页面，而是使用自己的语法写的 UI 层，然后编译成各平台的原生 App。
这个技术栈就是纯粹的容器技术栈，React Native、Xamarin、Flutter 都属于这一类。学习时，除了学习容器的 API Bridge，还要学习容器提供的 UI 层，即怎么写页面。
（4）小结
H5 开发主要用在混合技术栈。但是，跨平台技术栈的某些容器也会用到（比如 React Native），因为它们的 UI 层借鉴了 Web 模型。
另外，混合技术栈和跨平台技术栈的基础，都是原生技术栈，因为最终都要编译成原生App。所以，不管使用哪一种技术栈，多多少少要了解一些各平台的原生技术。
下面就依次介绍上面三类技术栈，每个技术栈都会给出一个最简单的例子：加载网页。通过各种技术栈加载网页的不同做法，帮助大家理解它们的特点，对 App 的技术实现有一个总体的认识。
讲解具体的技术栈之前，大家需要知道，不管什么技术，最终在 App 里面显示网页，一定需要一个网页引擎，这样才能解析网页。
通常情况下，App 内部会使用 WebView 控件作为网页引擎。这是系统自带的控件，专门用来显示网页。应用程序的界面，只要放上 WebView，就好像内嵌了浏览器窗口，可以显示网页。
不同的 App 技术栈要显示网页，区别仅仅在于怎么处理 WebView 这个原生控件。
?原生技术栈：需要开发者自己把 WebView 控件放到页面上。?混合技术栈：页面本身就是网页，默认在 WebView 中显示。?跨平台技术栈：提供一个 WebView 的语法，编译的时候将其换成原生的 WebView。
注意，不同系统的 WebView 控件名称不一样，安卓系统就叫 WebView，iOS 系统有较老的 UIWebView，也有较新的 WKWebView，作用都是一样的，差异在于功能的强弱。
原生技术栈分成 iOS 和安卓两个平台。
简单说，iOS 的原生技术栈就是使用 Object-C 语言或 Swift 语言，在 Xcode 开发环境中编程。安卓的原生技术栈，则是使用 Java 语言或 Kotlin 语言，开发环境是 Android Studio。
下面就来看看，它们怎么加载网页。
iOS 开发需要安装 Xcode。它是一种集成开发环境（IDE），也是苹果公司指定的 iOS 官方开发工具，所有苹果手机的 App 都由它打包生成。
它可以在 Mac 电脑上通过应用商店免费安装。注意，Xcode 只支持 Mac 系统，不支持其他系统。
安装完成后，打开新建一个项目，类型是单视图 App，然后系统会询问一些项目参数和储存位置，这里就不详细说明了。
然后，就进入了开发环境。
左侧的目录树里面，找到ViewController.swifter文件，它负责视图逻辑。按照官方文档[4]，填入下面的代码。
上面代码的意思是，启动 App 加载视图的时候（loadView()），新建一个 WebView 控件的实例。视图加载成功后（viewDidLoad()），WebView 再去加载外部网页（红框部分）。
然后，就可以查看代码运行结果。点击工具栏的运行按钮，Xcode 就会弹出一个 iPhone 模拟器，里面就是当前代码的运行结果。
如果一切正常，就可以让 Xcode 对源码打包，生成 App 的二进制安装文件。
安卓的官方开发工具是 Android Studio，可以去官网[5]下载。
安装完成后，打开新建一个项目，类型是“Empty Activity”。
Android Studio 会询问项目参数，包括项目名称、开发语言（Java）等，然后就进入了开发环境。因为它是基于 Java IDE 修改的，懂 Java 的朋友应该对这个界面比较熟悉。
按照网上的这篇教程[6]，接下来需要修改三个文件，其中最主要的是把MainActivity.java文件改成下面这样。
上面红框处的代码，就是在页面上添加并设置 WebView 实例，指定生成视图的时候（onCreate()），WebView 实例去加载外部网页。
运行代码之前，Android Studio 要求必须连接真机，或安装安卓模拟器。完成以后后，在工具栏上点击运行按钮，就可以运行代码查看效果了。
如果一切正常，就可以让 Android Studio 打包，生成 App 的二进制安装文件。
上面的原生技术栈需要自己新建 WebView 实例，相比之下，混合技术栈就简单多了。因为页面就是网页，所以容器已经设置好了 WebView，开发者直接写页面即可。
混合技术栈的各种容器框架之中，历史最悠久是 PhoneGap[7]，诞生于2009年。后来在2011年被 Adobe 公司收购，改名为 Adobe PhoneGap。
Adobe 公司将 PhoneGap 的核心代码，后来都捐给了 Apache 基金会，作为一个全新的开源项目，名为 Apache Cordova[8]。
PhoneGap 和 Cordova 现在是两个独立发展的开源项目，但是彼此有密切的关系，可以简单理解成 Cordova 是 PhoneGap 的内核，PhoneGap 是 Cordova 的发行版。
后来，其他人也开始基于 Cordova 封装自己的框架，所以市场上有许多基于 Cordova 的开源框架，比较著名的有 Ionic[9]、Monaca[10]、Framework7[11]等。
所有这些框架的共同点，都是使用 Web 技术（HTML5 + CSS + JavaScript）开发页面，再由框架分别打包成 iOS 和安卓的 App 安装包。它们的优点是开发简单、周期短、成本低，缺点是功能和性能都很有限。
基于 Cordova 的框架，用法都大同小异，下面就以 Ionic 为例，演示如何加载外部网页。
首先，根据官方文档[12]，生成项目的脚手架。
$ npm install -g ionic@latest$ ionic start myApp blank --type=react$ cd myApp
接着打开src/pages/Home.tsx文件，插入<iframe>标签即可。
上面代码中，由于页面本身就是网页，所以可以直接用<iframe>标签插入外部网页。
然后，在本机起一个 Web 服务，看看 Demo 的效果。
$ ionic serve上面命令会自动打开浏览器窗口，访问本机的8100端口，在浏览器中显示网页效果。
如果一切正常，在命令行窗口按 Ctrl+c，退出服务。编译成 App 安装包的方法可以参考官方文档[13]。
上面的混合技术栈使用 HTML 语言编写页面，再用 WebView 控件加载页面，所以只写一次页面，就能支持多个平台。跨平台技术栈也能做到多平台支持，但是原理完全不同。
跨平台技术栈的框架，都是使用自己的语法编写页面，不使用 Web 技术，编译的时候再将其转为原生控件，或者使用自己的底层控件，生成原生 App。这样就完全解决了 Web 页面性能不佳的问题。下面介绍三个这样的框架。
?React Native: 使用 JavaScipt 语言编写页面?Xamarin：使用 C# 语言编写页面?Flutter：使用 Dart 语言编写页面
（1）原理
2013年， Facebook 公司发布了 React 框架。这个框架是为网页开发设计的，核心思想是在网页之上，建立一个 UI 的抽象层，所有数据操作都在这个抽象层完成（即在内存里面完成），然后再渲染成网页的 DOM 结构，这样就提升了性能。
很快，工程师们就意识到了，UI 抽象层本质上是一种数据结构，与底层设备无关，不仅可以渲染成网页，也可以渲染成手机的原生页面。这样的话，只要写一次 React 页面，就能分别编译成 iOS 和安卓的原生 App。这就是 React Native 项目的由来。
注意，React Native 虽然也使用 JavaScript 语言，并且写法看上去像 Web 页面，但其实所有控件都是自己定义的，编译时再一一翻译为对应的原生控件。举例来说，React Native 的文本渲染控件是<Text>，翻译成 iOS 控件为UIView，翻译成安卓控件为TextView。这种做即保证了性能，又做到了跨平台支持，所以一诞生就引起开发者的关注，成了热门技术。
还有一个 NativeScript[14]框架，跟 React Native 很像，也是使用 JavaScript 语言，然后编译成原生控件。不过，它的开发模型是基于 Angular.js，而不是 React。
（2）实例
下面就是 React Native 加载外部网页的实例。为了方便使用，官方团队提供了一个封装好的工具集，叫做 Expo[15]。第一步，在手机安装 Expo 的 App 客户端（App Store[16]，Google Play[17]）。
然后，在命令行安装脚手架工具expo-cli，新建一个示意项目。
$ npm install -g expo-cli$ expo init rnDemo
新建项目时，会要求你选择项目模板，可以选minimum模板。然后，还会要求你填写项目描述displayName，这个可以随便写。
然后，安装 React Native 自己的 WebView 控件。
$ cd rnDemo$ npm install --save react-native-webview
接着，打开主页面的脚本文件App.js，将其改成下面的代码。
上面代码中，React Native 自身的WebView控件，编译时会分别转为 iOS 和安卓的原生 WebView 控件。
接下来，预览页面效果。可以先把它编译成 Web 版，在浏览器预览，这样比较快，立刻就能看到效果。
$ npm run web运行上面的命令，命令行会出现一个二维码。
这时可以打开手机端的 Expo 客户端，扫描这个二维码，就会显示 App 的页面。注意，计算机和手机必须在同一个局域网。
（3）React Native 的问题
React Native 的想法虽然很美好，但是实际开发中出现了各种各样的问题。
最主要的一个问题是， UI 抽象层翻译出来的 iOS 和安卓原生页面，做不到完全一致，尤其是复杂页面，样式或功能存在差异。编译出来两个平台的原生 App 往往是一个正常，另一个会出现各种奇怪的小毛病。React Native 的底层还是没有做到无缝适配，它至今没有发布 1.0 版（2019年底是 0.61 版），这多多少少也说明了一些问题。
如果你想用 React Native 做到 iOS 和安卓体验一致，并且充分发挥原生控件的功能，就需要同时熟悉 React Native、iOS、安卓三个平台，这对开发者的要求实在太高了。Airbnb 公司在使用 React Native 两年后，宣布放弃，改用原生技术栈。他们写了一篇很长的文章[18]，解释为什么这么做，React Native 到底有什么问题，大家可以参考那篇文章。
Xamarin 是微软公司的跨平台 App 开发框架，原理跟 React Native 很相似，只不过它的语言是 C#。
它的使用需要 Visual Studio，这里就不举例了。根据官方文档[19]，WebView 的用法如下。
上面代码中，首先新建了一个 WebView 控件的实例，然后把这个实例放到布局上，跟原生 App 的语法很像。
Flutter[20]是谷歌公司最新的跨平台开发框架。它为了解决 React Native 的平台差异问题，采用了一个完全不同的方案。
它自己实现了一套控件。打包的时候，会把这套控件打包进每一个 App，因此不存在调用原生控件的问题。不管什么平台，都调用内嵌的自己那套控件，就能做到 iOS 和安卓体验完全一致。
Flutter 历史还不长，应用还不广泛，API 也没稳定下来。但是很值得关注。
加载外部网页的实例，可以参考 Flutter 官方团队的这篇文章[21]。核心代码如下：
上面代码使用的是 Dart 语言。它是 Flutter 的官方语言，接近 JavaScript 语法，但是多了静态类型支持。
通过上面的介绍，希望大家已经了解了各种技术栈的特点。
（1）原生技术栈的技能和体验最好，对于复杂的大型 App，如果条件允许，应该采用这种方式开发。
（2）混合技术栈的成本低，灵活性好，对性能要求不高的简单 App，尤其是纯展示性的页面，可以采用这种方式开发。
（3）跨平台技术栈适用于，存在外部或内部条件的限制，只有一个团队开发跨平台 App 的情况。
（正文完）
手机 App 的 UI（用户界面），往往是 App 成功的关键因素：产品的外观是否漂亮，点击和滑动是否流畅，意图是否清晰，都会影响到用户的留存率。一个好的 UI 不仅体现了产品经理和开发者的素质，还可以有效降低拉新成本。
一般的开发者接到产品的 UI 设计方案之后，可能就会去网上找类似的效果，看看有没有开源代码。但是，优秀的开发者会努力思考，如何通过完全自定义来实现这个效果，做到功能和性能的最佳状态。
这就要求开发者具有实现高级 UI 的开发能力，理解安卓 UI 的底层实现原理，比如自定义 View 的渲染流程（onMeasure->onLayout->onDraw），以及交互设计（touch事件）。
怎样才能高效地学习安卓高级 UI 开发，早日进阶成为高级安卓工程师呢？这里介绍享学课堂的一门课程 《高级安卓 UI ——自定义 ViewGroup 与 UI 性能优化》，它带大家一行一行代码去实现一个京东自定义ViewGroup，研究系统的FrameLayout与ViewPager的源码，最后通过阅读源码，分析ViewPager设计过程中的显示问题和性能问题。下图是课程介绍（点击看大图）。
这个课程是直播课程，在线实时答疑，特别邀请了 Alvin 老师（前三星/小米高级研发经理）主讲，只需要0.1元就能参与。听课之后觉得满意，还可以学习其他 Android 高级进阶的实战课程。
（完）
[1]手机 App 的种类:http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html
[2]“腾讯课堂”:https://ke.qq.com/
[3]“腾讯课堂101计划”:https://edu.qq.com/a/20190119/005414.htm
[4]官方文档:https://developer.apple.com/documentation/webkit/wkwebview
[5]官网:https://developer.android.com/studio
[6]这篇教程:https://codingislove.com/android-web-view/
[7]PhoneGap:https://phonegap.com/
[8]Apache Cordova:https://cordova.apache.org/
[9]Ionic:https://ionicframework.com/
[10]Monaca:https://monaca.io/
[11]Framework7:https://framework7.io/
[12]官方文档:https://ionicframework.com/docs/react/your-first-app
[13]官方文档:https://ionicframework.com/docs/react/your-first-app#build-a-native-app
[14]NativeScript:https://www.nativescript.org/
[15]Expo:https://expo.io/
[16]App Store:https://itunes.apple.com/app/apple-store/id982107779
[17]Google Play:https://play.google.com/store/apps/details?id=host.exp.exponent
[18]很长的文章:https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a
[19]官方文档:https://docs.microsoft.com/en-us/dotnet/api/xamarin.forms.webview?view=xamarin-forms
[20]Flutter:https://flutter.dev/
[21]这篇文章:https://medium.com/flutter/the-power-of-webviews-in-flutter-a56234b57df2
*请认真填写需求信息，我们会在24小时内与您取得联系。
