巧妙避开无线充电“设计陷阱”
PCB顶尖高手独创武林绝学
揭秘MOS管驱动电路设计
让你的企业从0到起飞
USB Type-C快充设计之秘
&07-21&20:00
&07-24&20:00
&07-26&15:00
&07-28&20:00
移入鼠标可放大二维码
从七款微信小程序看这个“App杀手”到底能不能代替App
来源：IT之家 作者：日 13:57
[导读] “小程序是一种不需要下载安装即可使用的应用，它实现了应用‘触手可及’的梦想，用户扫一扫或搜一下即可打开应用；也体现了‘用完即走’的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。”
　　&小程序是一种不需要下载安装即可使用的应用，它实现了应用&触手可及&的梦想，用户扫一扫或搜一下即可打开应用；也体现了&用完即走&的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。&
　　&微信之父&张小龙的这段话确定了小程序的开发基调。鉴于小程序作为web端的轻应用，本身的特质就决定了它不适合实现太过复杂的功能。今天正式上线的第一批小程序，它们和app有什么不同，到底能不能取代app呢？这里，凤凰科技就最知名的十款小程序为你提供了一份试用报告。
　　注：由于小程序的微信搜索入口中不支持模糊搜索，必须精确匹配才能搜到并进入，因此，本文中所提到的小程序名称皆为全名。
　　1、轻芒杂志
　　前豌豆荚创始人王俊煜创立的轻芒杂志成为了首批问世的小程序之一。&轻芒&app去年9月刚刚更新到1.0.1版本，小程序的开发也几乎在同时。可以说，这是一款源生小程序，各种操作都最适合于微信。
　　比如，它能够让阅读者一篇文章中留下的标注和笔记，有用户标注的文字或图片将会直接模仿黄色荧光笔的标注出现高亮下划线，使用感极为流畅。
　　轻芒杂志
　　2、美团外卖+
　　用户将微信更新至最新版后，通过微信主页面最上方的搜索窗口搜索&美团外卖+&，进入小程序后选择商户，即可享受与APP端一样的订餐服务。
　　虽然美团外卖小程序能够分享给好友，但是外卖订单目前还不能合并，应用仍有瑕疵。
　　美团外卖
　　3、滴滴出行DiDi
　　与服务号相比，滴滴出行的小程序打开的速度称得上是飞快。
　　不过滴滴小程序去掉了不同出行方式的选择，打开默认叫&快车&，地图、出行方式选择、个人账号界面全都消失不见。
　　左为滴滴小程序，右为滴滴app
　　4、携程酒店机票火车票
　　从页面整体看，携程小程序比web端简洁太多。酒店、机票、火车票、汽车票四大产品入依次排列，交易完成后可以在下方查询订单。
　　左为携程小程序，右为携程app
　　5、腾讯视频
　　作为微信的&同宗兄弟&，微信视频还是很给力的。在PC页面上长达75秒钟的视频贴片广告，在微信上缩短到了15秒钟，而且还能点击跳过。
　　但是腾讯视频小程序默认微信账号登陆，这会让一些用QQ号充值但和微信号不统一的会员很郁闷。
　　腾讯视频
　　6、京东购物
　　京东购物小程序首页简单粗暴的给出了搜索框，把所有的推荐都隐藏了起来，搜索框之下全是各种优惠活动，视觉感极佳。
　　目前的问题在于，京东全球购发货并提供售后的商品无法购买，部分第三方商家发货的海外直邮商品也如此。主要原因在于跨境电商涉及购换汇等问题，流程过于复杂。想要小程序上全球购，还需要一段时间。
　　京东购物
　　7、猫眼电影
　　和猫眼电影app相比，猫眼电影的小程序算得上是功能齐全，基本的订票买票功能一览无余。但是待映和找片栏目隐藏，如果想要对已经下架的影片进行评论和评分的话还要手动搜索。
　　左为猫眼小程序，右为猫眼app
　　从以上七个小程序看来，高频和复杂应用，暂时还无法被小程序取代，但是一些低频应用的主要功能，只要能在小程序上实现，app就可以完全卸载了。
　　账号问题也是横在小程序碾压app道路上的一大障碍。虽然小程序会自动用微信账号登陆，但实际上，许多用户的app用了电话账号或者其他账号注册登陆。以&京东购物&为例，修改小程序账号还是一个很麻烦的事情。
　　其实我们很想把这个列表扩充成10个。但有一些我们很想尝试的产品，比如手机淘宝、支付宝、网易云音乐等，因为&众所周知&的原因，可能短期内不会推出小程序，或者是做了也无法通过微信的审核
德州仪器（TI）
版权所有 & 深圳华强聚丰电子科技有限公司
电信与信息服务业务经营许可证：粤B2-\ 微信小程序音乐播放器,leancloud,Promise较为优雅解决回调
微信小程序音乐播放器,leancloud,Promise较为优雅解决回调
分享即可 +1积分
这位童鞋很懒，什么也没有留下～～！
[ ] 添加音乐到收藏（最近）列表
[ ] 歌词滚动
从一个hello world开始
微信开发者工具生成 目录如下：
|-- app.js
|-- app.json
|-- app.wxss
|-- index.js
|-- index.json
|-- index.wxml
`-- index.wxss
`-- log # 日志页面
|-- log.js
|-- log.json
|-- log.wxml
`-- log.wxss
`-- util.js
每一个page即是一个页面文件 ，每个页面有一个js/wxml/wxss/json文件 规定：描述页面的这四个文件必须具有相同的路径与文件名。&br&
全局下同路，为公共的逻辑，样式，配置&br&
与html不同:用view text navigator 代替 div span a
开发者文档走马观花
app.json: 注册pages window tabBar networkTimeout&br&
*.js:* 作为逻辑层 与wxml交互 有着丰富的
数据缓存，
界面...的api&br&
.wxml:** 数据驱动的视图层 +
微信提供了大量的组件 表单 导航 媒体 ...
官方组件不够,weui来凑
weui为小程序提供了 weui.wxcss 但大多是造官方组件的轮子&br&
这里精选,也算是补充两个常用组件&br&
对于小程序没有DOM操作 不熟悉mvvm思想的同学 是个很好的入门
navbar&br&
&!-- wxml --&
&view class="weui-tab"&
&view class="weui-navbar"&
&block wx:for="{{tabs}}" wx:key="*this"&
&view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick"&
&view class="weui-navbar__title"&{{item}}&/view&
&view class="weui-navbar__slider" style="left: {{sliderLeft}} transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"&&/view&
&view class="weui-tab__panel"&
&view class="weui-tab__content" hidden="{{activeIndex != 0}}"&选项一的内容&/view&
&view class="weui-tab__content" hidden="{{activeIndex != 1}}"&选项二的内容&/view&
&view class="weui-tab__content" hidden="{{activeIndex != 2}}"&选项三的内容&/view&
block渲染data里面的四个tabs,slider为激活tab选项时候的表现，panel为内容面板
var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
tabs: ["选项一", "选项二", "选项三"],
activeIndex: 1,
sliderOffset: 0,
sliderLeft: 0
onLoad: function () {
var that =
wx.getSystemInfo({
success: function(res) {
that.setData({
sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
tabClick: function (e) {
this.setData({
sliderOffset: e.currentTarget.offsetLeft,
activeIndex: e.currentTarget.id
了解mvvm思想的同学不难看出 通过tabs数组渲染出来选项后每次点击获取id 然后通过设置hidden显示或隐藏
searchbar&br&
&view class="weui-search-bar"&
&view class="weui-search-bar__form"&
&view class="weui-search-bar__box"&
&icon class="weui-icon-search_in-box" type="search" size="14"&&/icon&
&input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" /&
&view class="weui-icon-clear" wx:if="{{inputVal.length & 0}}" bindtap="clearInput"&
&icon type="clear" size="14"&&/icon&
&label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput"&
&icon class="weui-icon-search" type="search" size="14"&&/icon&
&view class="weui-search-bar__text"&搜索&/view&
&view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput"&取消&/view&
&view class="weui-cells searchbar-result" wx:if="{{inputVal.length & 0}}"&
&navigator url="" class="weui-cell" hover-class="weui-cell_active"&
&view class="weui-cell__bd"&
&view&实时搜索文本&/view&
&/navigator&
一个input输入框+一个搜索label+一个清楚内容的icon + 取消按钮
inputShowed: false,
inputVal: ""
showInput: function () {
this.setData({
inputShowed: true
hideInput: function () {
this.setData({
inputVal: "",
inputShowed: false
clearInput: function () {
this.setData({
inputVal: ""
inputTyping: function (e) {
this.setData({
inputVal: e.detail.value
input上面有一层label 通过Page里面状态的改变而操作其wxml状态的改变&br&
不难体会到：小程序和Vue的思想还是挺接近的
站在巨人的肩膀上--云音乐api
---获取云音乐api
在此我将他部署到leancloud上&br&
即可在线访问，免去烦人的本地localhost启动,在线url&br&
调用例子:&br&
具体参考api&br&
一切具备 只欠东风
本文讲解核心内容音乐的播放，读者可自己实现其余页面。
|-- app.js
|-- app.json
|-- app.wxss
|-- common.js #公用js
|-- images #存放项目图片
|-- weui.wxss
# 引入weui样式
万一你自己不想写css样式呢
# 发现音乐
|-- index.js
|-- index.json
|-- index.wxml
`-- index.wxss
# 我的音乐
|-- index.js
|-- index.json
|-- index.wxml
`-- index.wxss
# 正在播放
|-- index.js
|-- index.json
|-- index.wxml
`-- index.wxss
|--account
|-- index.js
|-- index.json
|-- index.wxml
`-- index.wxss
|-- index.js
|-- index.json
|-- index.wxml
`-- index.wxss
`-- log # 日志页面
`-- util.js
请先在在app.json中注册页面，设置navigation，配置tabbar&br&
"pages/find/index",
"pages/my/index",
"pages/now/index",
"pages/account/index",
"pages/index/index"
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#D43C33",
"navigationBarTitleText": "网易云音乐",
"navigationBarTextStyle":"white",
"backgroundColor": "#FBFCFD"
"tabBar": {
"backgroundColor":"#2A2C2E",
"color": "#a7a7a7",
"selectedColor": "#ffffff",
"list": [{
"iconPath":"./images/find.png",
"selectedIconPath":"./images/find1.png",
"pagePath":"pages/find/index",
"text": "发现音乐"
"iconPath":"./images/my.png",
"selectedIconPath":"./images/my1.png",
"pagePath": "pages/my/index",
"text": "我的音乐"
"iconPath":"./images/now.png",
"selectedIconPath":"./images/now1.png",
"pagePath": "pages/now/index",
"text": "正在播放"
"iconPath":"./images/account.png",
"selectedIconPath":"./images/account1.png",
"pagePath": "pages/account/index",
"text": "账号"
发现音乐&br&
布局分为搜索框,navbar,swiper滑动，三列，以及两行三列构成&br&
tips:小程序中flex布局基本无兼容性问题 ，可大胆使用&br&
前三个可用上文提到的组件和小程序swiper组件快速完成，&br&
对于搜索功能&br&
我们在搜索input上绑定一个inputTyping事件，这样每次键入完毕都可以得到结果，然后我们直接请求api&br&
//index.js
//获取应用实例
// 个人网易云音乐 ID
var app = getApp()
searchReault: []
//绑定事件
inputTyping: function (e) {
let that = this
console.log(e.detail)
this.setData({
inputVal: e.detail.value
wx.request({
url: '/search',
keywords: e.detail.value
method: 'GET',
success: function (res) {
let temp = []
if(!res.data.result.songs){
//遍历数据
res.data.result.songs.forEach((song, index) =& {
temp.push({
id: song.id,
name: song.name,
mp3Url: song.mp3Url,
picUrl: song.album.picUrl,
singer: song.artists[0].name
//设置数据
that.setData({
searchReault: temp
// 存入搜索的结果进缓存
wx.setStorage({
key:"searchReault",
data里面的searchReault数组存入搜索结果，发起一个wx.request,用GET方式传入参数，组织好json后设置data，然后将搜索结果存入本地缓存&br&
wxml渲染searchReault:&br&
并且自定义data属性，navigator的打开方式为tab切换open-type="switchTab" ，绑定一个tonow事件bindtap=&tonow&
&block wx:for="{{searchReault}}" wx:key="item" style="overflow-y:"&
&navigator url="../now/index" class="weui-cell" hover-class="weui-cell_active"
data-id="{{item.id}}" data-name="{{item.name}}" data-songUrl="{{item.mp3Url}}" data-picUrl="{{item.picUrl}}"
data-singer="{{item.singer}}"
open-type="switchTab" bindtap="tonow"&
&view class="weui-cell__bd"&
&view class="song-name"&{{item.name}}
&text class="song-singer"&{{item.singer}}&/text&
&/navigator&
在tonow事件中,获取当前的歌曲
tonow: function (event) {
let songData = {
id: event.currentTarget.dataset.id,
name: event.currentTarget.dataset.name,
mp3Url: event.currentTarget.dataset.songurl,
picUrl: event.currentTarget.dataset.picurl,
singer: event.currentTarget.dataset.singer
// 将当前点击的歌曲保存在缓存中
wx.setStorageSync('clickdata', songData)
wx.switchTab({
url: '../now/index'
正在播放&br&
布局：歌曲封面，滑动条上下为操作按钮，
封面在采用圆角,rotate,transition既可以
滑动快进:在滑动条上绑定事件 slider3change
//滑动 歌曲快进
function sliderToseek(e, cb) {
wx.getBackgroundAudioPlayerState({
success: function (res) {
var dataUrl = res.dataUrl
var duration = res.duration
let val = e.detail.value
let cal = val * duration / 100
cb && cb(dataUrl, cal);
//分隔 在page中调用
slider3change: function (e) {
sliderToseek(e, function (dataUrl, cal) {
wx.playBackgroundAudio({
dataUrl: dataUrl
wx.seekBackgroundAudio({
position: cal
一个自定义的sliderToseek函数:&br&
参数e 可以获取滑动的值，获取正在播放的音乐信息成功后执行回调函数1-&播放 回调函数2-&跳到指定位置;
拆分歌词：
在api中得到的歌词：&[00:00.00] 作曲 : 黄家驹 [00:01.00] 作词 : 黄家驹 [00:18.580]今天我 寒夜里看雪飘过 [00:25.050]怀着冷却了的心窝漂远方 [00:30.990]风雨里追赶 &
在page外定义函数：&br&
以]划分数组 第二部分就是歌词内容:item.split(']')[1] 第一部分即为对应的时间:item.split(']')[0]
// 获取歌词
function getlyric(id,cb) {
console.log('id:',id)
let url = `/lyric`
wx.request({
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function (res) {
// success
if (!res.data.lrc.lyric)
let lyric = res.data.lrc.lyric
let timearr = lyric.split('[')
let obj = {}
let lyricArr=[]
// seek 为键
歌词为value
timearr.forEach((item) =& {
let key = parseInt(item.split(']')[0].split(':')[0]) * 60 + parseInt(item.split(']')[0].split(':')[1])
let val = item.split(']')[1]
obj[key] = val
for(let key in obj){
// obj[key] = obj[key].split('\n')[0]
lyricArr.push(obj[key])
cb&&cb(obj,lyricArr)
fail: function (res) {
complete: function (res) {
// complete
在page中调用:传入歌曲ID(上文我们已经存入缓存，在缓存中取出即可),和将其设置在data的回调
getlyric(id,function(data, lyricArr){
that.setData({
lyricobj:data,
lyricArr:lyricArr
wxml进行渲染：
&!--歌词--&
&view class="lyric-content" hidden="{{islyric}}" style="height:401 overflow-y:"
bindtap="showCircle"&
&view class="lyric"
style="overflow-y:"&
&block wx:for="{{lyricArr}}" &
&view& {{item}} &/view&
**添加歌曲：**&br&
我的可以在本地缓存中添加两个key入对应的信息&br&
like:我的喜欢&br&
recent:最近&br&
radioChange: function(e) {
console.log('radio发生change事件，携带value值为：', e.detail.value)
this.setData({
percent:'100%'
//radio发生change事件，携带value值为： like
//radio发生change事件，携带value值为： recent
点击添加按钮，向上呼出选项，将当前播放的歌曲设置到对应的数组即可&br&
进行当前歌曲的播放:
页面onshow的时候，获取本地缓存的信息，在success的回调中，设置到data,以供页面解析，而后在获取歌词的函数中也进行一次回调，设置歌词，
播放本地音乐，播放成功之后，在success的回调中，获取正在播放的音乐信息，包括该歌曲的总时长，再进行设置。
onShow: function () {
var that =
console.log('正在播放 is on show')
// 获取缓存
wx.getStorage({
key: 'clickdata',
success: function (res) {
var value = res.data
if (value) {
// 设置到data
that.setData({
name: value.name,
src: value.mp3Url,
poster: value.picUrl,
author: value.singer
getlyric(id,function(data, lyricArr){
that.setData({
lyricobj:data,
lyricArr:lyricArr
let url = that.data.src || value.mp3U
wx.playBackgroundAudio({
dataUrl: value.mp3Url,
title: value.name,
coverImgUrl: value.picUrl,
success: function () {
wx.hideLoading()
console.log('url',url)
setTimeout(function(){
wx.getBackgroundAudioPlayerState({
success: function (res) {
var tempduration = res.duration
console.log('get bg success', tempduration, res)
// 设置时长
that.setData({
sumduration: tempduration
complete: function (res) {
console.log(' get bg complete:', res)
complete:function(){
// 获取正在播放的信息
console.log('play',url)
这样我们不知不觉进入多个回调嵌套的问题
代码优化，使用Promise,较为优雅地解决回调
小程序暂时不支持async await&br&
在 common.js 中为小程序提供的api上裹上一层Promise，并且通过module.exports = operation暴露出去&br&
const operation = {
getMusicData: function () {
return new Promise((resolve, reject) =& {
wx.getBackgroundAudioPlayerState({
success: function (res) {
resolve(res);
fail: function (err) {
reject(err);
// 播放音乐 参数:url title 图片url
playMusic: function (url, title, pic) {
return new Promise((resolve, reject) =& {
wx.playBackgroundAudio({
dataUrl: url,
title: title,
coverImgUrl: pic,
success: function () {
resolve(true)
fail: function () {
reject(new Error('播放错误'));
asyncGetStorage: function (key) {
return new Promise((resolve, reject) =& {
wx.getStorage({
success: function (res) {
resolve(res.data)
fail: function (err) {
reject(err)
getlyric: function (id) {
return new Promise((resolve, reject) =& {
console.log('id:', id)
let url = `/lyric`
wx.request({
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function (res) {
// success
if (!res.data.lrc.lyric)
let lyric = res.data.lrc.lyric
let timearr = lyric.split('[')
let obj = {}
let lyricArr = []
// seek 为键
歌词为value
timearr.forEach((item) =& {
let key = parseInt(item.split(']')[0].split(':')[0]) * 60 + parseInt(item.split(']')[0].split(':')[1])
let val = item.split(']')[1]
obj[key] = val
for (let key in obj) {
// obj[key] = obj[key].split('\n')[0]
lyricArr.push(obj[key])
// cb && cb(obj, lyricArr)
resolve(lyricArr)
fail: function (err) {
reject(err)
complete: function (res) {
// complete
module.exports = operation
重写一下当前歌曲播放事件
onShow: function () {
let that =
Common.asyncGetStorage('clickdata')//本地缓存
.then(data =& {
// console.log(data)
if (!data)
that.setData({
id: data.id,
name: data.name,
src: data.mp3Url,
poster: data.picUrl,
author: data.singer
return Common.playMusic(data.mp3Url,
data.name, data.picUrl);
.then(status =& {
if(!status)
wx.hideLoading();
console.log('id,',that.data.id)
return Common.getlyric(that.data.id)
.then((lyricArr) =& {
console.log('lyricArr',lyricArr)
that.setData({
lyricArr: lyricArr
return Common.getMusicData()
.then(data =& {
let tempduration = data.duration
console.log('get bg success', tempduration, data)
// 设置时长
that.setData({
sumduration: tempduration
这样即可缩减部分代码。
有帮助可以Star&
18届小前端求职中['html/html5', 'css/css3', 'js/es5/es6', 'node']
&a href=&mailto:&&&/a&
相关标签：
分享即可 +1积分
请登录后，发表评论
评论（Enter+Ctrl）
评论加载中...
评论加载中...
Copyright (C)
All Rights Reserved | 京ICP备 号-2&p&作者：caitoultt
链接：&a href=&/p/& class=&internal&&&span class=&invisible&&https://&/span&&span class=&visible&&/p/24&/span&&span class=&invisible&&708877&/span&&span class=&ellipsis&&&/span&&/a&
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
&/p&&p&12月28日在微信公开课上，腾讯公司高级执行副总裁、微信事业群总裁张小龙再次现身公开课会场，宣布微信小程序将会在1月9日全面开放。并且详细的阐述了微信小程序的特性和未来的发展路径。这也引起了互联网界的一片热论，认为小程序是下一个创业的风口。但问题是老板永远看到的都是机遇，作为打工的我们来说，看的可能是具体的工作。因为微信小程序不同于APP甚至不同于微信公众号的特性，故作为产品运营的我们需要从特性本身出发想出我们自己的运营策略。
&b&第一、小程序没有入口，没有订阅，无法推送消息，弱化搜索我们该怎么办?&/b&　　小程序和APP不一样，没有任何一个入口或者类似于应用商店媒介去访问小程序，有的只有一张小程序的二维码。同样小程序也不同于微信公众号，没有粉丝订阅功能也无法推送消息，让访问的“鱼”始终无法圈在池塘里。这该怎么办呢?　　我们都知道，一次性的访问是没有任何意义的，就如网站一样，如果产品运营人员无法提供一个长效的入口给用户，用户访问一次后将再也找不到了。同样对于用户来说，也没有必要非要记住，因为同质化的服务那么多。但所幸小程序给运营人员提供了一个二维码，用户是可以通过二维码重复访问小程序。也就是说二维码可能就成为小程序重要的访问入口了。基于此，运营人员在小程序的实际运营中应该强化二维码的作用，需要做到的是，让用户随时能够找到这个二维码，并且方便访问。那么如何方便呢?这个需要和线下的服务相结合;如何随时访问呢?运营需要以激励的形式促使用户重复的访问。&b&第二、没有订阅，无法分享朋友圈，没有分发渠道，如何建立和用户的强关联?&/b&　　我们都知道不管是APP运营还是微信公众号运营都有一个强指标，那就是DAU、MAU。用户活跃度高的前提是，平台和用户发生了强关联。APP中可以实行下载注册，微信公众号中可以有订阅，但在小程序中既没有下载也没有订阅该怎么办呢?　　所幸的是小程序可以分享到聊天中。那么我们首先想了，聊天都是朋友或者相识之人之间进行的行为，这里面本身就存在着强关联。我们需要做的是让我们的小程序本身也具有在朋友与朋友之间相互传播的特性，具有强关联的特性。这里面包含的可能更多是产品设计方面，比如在小程序中加入协作功能，一件事需要微信朋友的团队协作等。同时小程序可以分享到群聊当中，这似乎又是社群经济的第二春。我们可以利用微信群本身的特性，设计出完善的用户会员体系，让社群真正的成为小程序用户的聚集之地，方便小程序用户寻找入口，方便平台与用户发生关联。　　其实，越是随着互联网的向前发展，互联网的工作要求也越来越高，不信你看一个小程序的发布就让产品运营的小伙伴们又一次重新构建了一套知识体系。&b&作者：菜頭先生，产品运营，专栏作家，一个集产品运营和设计于一身的实践者!微信公众号：caitoultt，头条号：菜頭先生。&/b&　　图片来源于互联网
作者：caitoultt
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
12月28日在微信公开课上，腾讯公司高级执行副总裁、微信事业群总裁张小龙再次现身公开课会场，宣布微信小程序将会在1月9日…
1.flex布局&br&2.css样式&br&3.JavaScript es6的语法就好了&br&4.阅读一遍微信小程序的开发文档&br&5.直接利用可视化界面，搭建UI界面，前两条可以pass掉&br&基本上就是中上级的小程序开发人员了
1.flex布局 2.css样式 3.JavaScript es6的语法就好了 4.阅读一遍微信小程序的开发文档 5.直接利用可视化界面，搭建UI界面，前两条可以pass掉 基本上就是中上级的小程序开发人员了
现在网上随便搜搜都可以搜搜到很多啊，不是最近极客学院的那什么教材都免费了，虽然他们说很简单，可是对于我来说还是看不懂&br&地址：&a href=&///?target=http%3A//blog.csdn.net/weixin_/article/details/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&极客学院内部首发唯一完整实战微信小程序培训课程，现在免费赠送（价值500 - 博客频道 - CSDN.NET&i class=&icon-external&&&/i&&/a&&br&&img src=&/v2-58adc7bcfaab4e5080a68b_b.png& data-rawwidth=&759& data-rawheight=&534& class=&origin_image zh-lightbox-thumb& width=&759& data-original=&/v2-58adc7bcfaab4e5080a68b_r.png&&&img src=&/v2-b69a459d354cdb128b05_b.png& data-rawwidth=&904& data-rawheight=&466& class=&origin_image zh-lightbox-thumb& width=&904& data-original=&/v2-b69a459d354cdb128b05_r.png&&
现在网上随便搜搜都可以搜搜到很多啊，不是最近极客学院的那什么教材都免费了，虽然他们说很简单，可是对于我来说还是看不懂 地址：
&b&我来谈谈我的观点，文字版如下，图文版首发公众号：&/b&&a href=&///?target=http%3A//mp./s%3F__biz%3DMzAwMjAxNzM3MQ%3D%3D%26mid%3D%26idx%3D1%26sn%3Dac3f4fd971a890aff3bd3db2echksm%3D8d0efa2cba79733aee143dd7e0acde3af4b6a89bbcbd493c7b0f1f062%23rd& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信小程序的这次公开课，给我们带来了哪些更确切的解读？&i class=&icon-external&&&/i&&/a&&br&&br&&p&随着小程序正式对外发布之即，微信团队近日在北京举办了一场线下公开课，笔者也应邀参加了这次公开课，微信团队在公开课里透漏的，有很多细节笔者在之前的一篇文章《&a href=&///?target=http%3A///2523715.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&小程序来了，这些细节你必须注意！&i class=&icon-external&&&/i&&/a&》都有提及过，但是通过这次与微信团队的接触，笔者希望通过这篇文章让更多的吃瓜群众对小程序有一个全面的认识。&br&&/p&&p&&strong&第一部分：小程序接入流程，吃瓜群众务必知晓&/strong&&/p&&p&图文见公众号(ID:wsbang520)&/p&&p&&strong&第二部分：运营规范，运营人员必须熟知&/strong&&/p&&p&图文见公众号(ID:wsbang520)&br&&/p&&p&&strong&第三部分：框架解析，技术党务必理解&/strong&&/p&&p&图文见公众号(ID:wsbang520)&br&&/p&&p&&strong&第四部分：实战分享，开发者最渴望的实战经验&/strong&&/p&&p&图文见公众号(ID:wsbang520)&br&&/p&&p&&strong&第五部分：小程序不是HTML5&/strong&&/p&&p&微信团队在本次公开课中明确提出“小程序不是HTML5”，其实说到这里我们可以这样分别定义小程序和HTML5，以小程序为代表的 hybrid app 和以 HTML 5 为代表的 web app。&/p&&p&小程序在腾讯内部被统一称为 web+，Web+ 是什么？可以简单理解为一种“混搭”的开发方式或是具备 Native 能力的 web 应用框架。它既不是纯粹的 web 开发，也不是 ios 或是 Android 开发，它是 MIX 的，虽然像 web 一样更轻，但也像 Native 应用开发一样更加重视用户体验本身。&/p&&p&　　关于小程序更多的开发、运营、设计的解读，大家可以查阅笔者早前发表的一篇文章《&a href=&///?target=http%3A///2523715.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&小程序来了，这些细节你必须注意！&i class=&icon-external&&&/i&&/a&》 去详细学习。&/p&&p&　　看了这么多图片，是不是都觉得头昏眼花了，没关系，笔者决定下面的描述中尽量少用图片，更多的使用文字来描述：&/p&&p&&strong&第六部分：小程序经典案例解读&/strong&&/p&&p&　　本次公开课微信团队除了分享有关开发层面的实战分享之外，还特例拿出了1-2个小程序作为经典案例进行分享。&/p&&p&在本次小程序公开课后的分享中，微信团队特别提到到了一个标杆性的小程序—自选股，笔者在课后也了解到了这只开发团队的相关情况，根据了解，这只团队是腾讯内部最早进入微信小程序内测的6个团队的其中之一。&/p&&p&自选股团队负责人强调它们的小程序是一款基于微信体系小而美额度产品，去掉了APP里像研报、投资评级、机构评级以及公司财报等功能，同时结合微信的社交属性，在用户与微信好友在聊天时，就能够通过自选股小程序了解当前的股市行情，这类产品就很好的响应了小程序&更小、更轻&的理念。&/p&&p&　　从效率上来说，小程序产品在微信Web+框架下的开发速度是远比原生应用更快，跨平台的适配性更高，开发成本更低。以腾讯自选股小程序为例，3个人的团队在5天内就开发完成了整个小程序。&/p&&p&　　同时，微信自选股团队负责人还透漏了一个细节，小程序能够支持股票移动的动态显示，让股民能够更直观的看到股票的变化，微信小程序已经支持整个 CSS3 的动画，而这在 Native 的股票 App 中，也不是所有的都能做到这一点。&/p&&p&　　这是一个典型的符合小程序设计理念的产品，正如微信团队在官方设计规范中所提及的“产品设计遵循重点突出”。&/p&&p&　　开发速度加快，必然的带来了开发成本的降低，效率因此获得提高。不过，开发者当对市场情况和用户需求并不十分确定的情况下，它让快速、低成本的试错成为可能。&/p&&p&&strong&第七部分：微信公开课给了我们更明确的信号&/strong&&/p&&ul&&li&&strong&小程序的设计完全可以对标第三方服务里的小应用&/strong&&br&　　在小程序推出之前，我们大家所熟知的微信第三方服务所包含的应用其实都可以看做是小程序的缩影，笔者对比了几个典型的应用，我们完全可以看出小程序所有细节，统一的Title标题和Background背景，统一的Tab格局，统一的按钮尺寸和色块，这些细节和小程序定义的规范极其接近。&/li&&br&&li&&strong&小程序就是要突出重点，快速直达用户的需求&/strong&&/li&&/ul&&p&　　小程序“自选股”把AP的重点功能“实时行情”放到了小程序里，并且做到了用户极致体验；同城旅游把重点功能票务预订放到了小程序里；艺龙旅行网把重点功能“酒店预订”放到了小程序里；大众点评把重点功能外卖放到了小程序里，通过以上案例我们不难看出，这些开发者只是把AP的其中一项功能或者单个页面搬到了小程序上，抛弃了除主需求之外所有的陪衬功能，以最直接的方式满足用户的需求。如果我们把APP定位成一顿满足胃口的大餐，那小程序就是快速解决温饱问题一顿快餐了。但是人在饿的时候，一顿快餐解决问题的快感显然要比一顿大餐好的多。&/p&&p&&strong&第八部分、微信团队正在逐步推进小程序的进程&/strong&&/p&&p&我在小程序公测之后的一篇文章《&a href=&///?target=http%3A///2523715.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&小程序来了，这些细节你必须注意！&i class=&icon-external&&&/i&&/a&》有提到过这样一个观点，小程序箭在弦上却不能发布是因为微信团队刚刚公布公测消息，市场的反馈需要一定的时间，微信团队还没有给市场一个可以借鉴的标杆。通过微信团队这次的公开课和前段时间张小龙爆出的手机截图显示，仅仅过去20多天，微信团队似乎已经找到了不下20个可以称得上标杆的小程序。微信团队通过这次公开课就是想再次给市场传递一个信号：什么可以做，什么不能做，应该怎么做。看到市场上这么多想拥抱小程序的开发者，笔者想说的是，其实最急的不是你们，而是微信团队。它们迫切的希望您们去拥抱，最乐意看到的现状就是，它们所制定的生态规则能够在最短的时间内被市场所接受，并且参与者上手的速度越快越好，从而帮助微信团队更好的打造这个伟大的生态系统。&/p&&br&&p&&b&本文首发在我的公众号：呆盟说（ID:wsbang520）专注互联网思维和营销方法论。&/b&&/p&
我来谈谈我的观点，文字版如下，图文版首发公众号： 随着小程序正式对外发布之即，微信团队近日在北京举办了一场线下公开课，笔者也应邀参加了这次公开课，微信团队在公开课里透漏的，有很多细节笔…
作者：赵九州&br&链接：&a href=&/question//answer/& class=&internal&&如何评价 9 月 21 日开始内测的「微信小程序」？ - 赵九州的回答&/a&&br&来源：知乎&br&著作权归作者所有，转载请联系作者获得授权。&br&&br&&p&&i&笔者注：本文来自于迅雷首席工程师刘智聪的个人分享，他毕业于南昌大学化学系，加入迅雷后设计开发了多款迅雷核心产品，凭借“大规模网络流媒体服务关键支撑技术”项目获得2015年国家科学技术进步奖二等奖，同时也是第四代UI交互技术-----BOLT 界面引擎的发明人，目前担任WebApp解决方案商--火速移动的首席技术顾问。&/i&&/p&&img src=&/fa8aebcd587a255a257057_b.png& data-rawwidth=&256& data-rawheight=&300& class=&content_image& width=&256&&&br&&p&
21号晚上正和朋友一起打牌，难得的小七对刚刚定口，突然间手机传来了“叮咚”的消消息提示音，随后就是“叮叮，咚咚”的连续震动。打开手机一看，微信上一堆人发信息给我，先是一篇《微信应用号来了》，然后就是：“你怎么看？”&/p&&p&
虽然之前曾经得到过消息说“微信应用号”会在年底发布，但没想到居然来的这么快，而且还改名叫“微信小程序了”（简称小程序）。已经无心打牌，赶紧完成一吃三后速度回到电脑前开始了持续几天的研究。而且这几天里各种相关资料都开始相继出现，内测用的开发工具也有破解版漏出了。&/p&&br&&p&
身边已经有不少朋友已经根据资料开始干活了，差不多有如下几类：&/p&&p&
1）好好释放想象力，要是能在公测的时候做个有趣的小程序出来一炮而红那就赚大了&/p&&p&
2）公司有一打的服务号，其实改成小程序会更合适（管它合不合适，改了再说！）&/p&&p&
3）又是一轮洗牌的机会！那个公众号的功能是我先想到的但被别人抢了，这次我要在小程序里第一个做出来并做到第一名！&/p&&p&
4）微信果然是互联网的“国务院”，新政策草案刚出立刻引起全行业的连夜研究。这么重要的关头，变革的前夜，我认为正确的做法是“战术上立刻响应，站略上不必着急”。不学习，不了解微信小程序是万万不行的，但立刻根据现在的资料，调整公司的方向，也有点为时过早。毕竟现在还在内测阶段，万一内测结果是“回炉重造”或则“大幅调整”（目前泄漏的资料已经处于正式发布的状态，应该不会大改了），那花在这里的时间都赔进去了还没地哭。所以我觉得对公司来说比较合理的做法是在立刻成立一个短期的临时小组，鼓励对小程序有兴趣的同学加入，一起开发几个有趣的小程序，主要目的就是学习。如果做出来的结果好还能赚一波眼球。等微信小程序正式公测了，再决策要不要把这个临时小组升级成一个正式的产品团队。&/p&&br&&p&
这几天通过目前公开的资料我已经对小程序的整体架构有了个初步的认识。我的风格一向是从架构和系统设计的视角做一些深度的，有观点的分析。现在终于可以回应朋友们的问题，谈谈我怎么看了。&/p&&br&&p&微信小程序是什么？&/p&&p&官方这么说：&/p&&p&“我们提供了一种新的开放能力，让开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验”。&/p&&br&&p&听起来非常美好，咱们具体一点，结合目前公开的信息和微信目前其它的开放形式对比一下吧 &/p&&br&&p&可以看到，腾讯还是非常有诚意的，这次在微信小程序上新开放的能力很多，不再是渐进式的演变而有一点像革命了。&/p&&br&&p&小程序的入口在哪？&/p&&p&目前公开的资料里对大家最关系的入口问题只提到了小程序可以扫二维码打开，于是业界对小程序的入口有了这么几种流行的假设：&/p&&br&&p&假设零：朋友圈，朋友可以把自己喜欢的小程序分享在朋友圈，看到了可以点击打开直接使用。&/p&&p&[配图1]&/p&&img src=&/8dee5482f4dab2e3ab4ff_b.png& data-rawwidth=&540& data-rawheight=&960& class=&origin_image zh-lightbox-thumb& width=&540& data-original=&/8dee5482f4dab2e3ab4ff_r.png&&&br&&p&可能性:99%。小程序不能出现在朋友圈，流量从哪来？&/p&&br&&p&假设一：出现在发现tab页面中，游戏下面（每个小程序占用一列），同时摇一摇也可以得到附近的小程序&/p&&p&[配图2]&img src=&/2a640c0acfa9f612abd55f96ca96ac28_b.png& data-rawwidth=&540& data-rawheight=&960& class=&origin_image zh-lightbox-thumb& width=&540& data-original=&/2a640c0acfa9f612abd55f96ca96ac28_r.png&&&/p&&p&可能性:80%。和一把腾讯的游戏挤在一起，不亏待你吧。&/p&&br&&p&假设二：和当前的公众号、服务号类似，安装出现在会话列表&/p&&p&[配图3]&img src=&/3dd3f86e3b94f7fd68fcf9_b.png& data-rawwidth=&540& data-rawheight=&960& class=&origin_image zh-lightbox-thumb& width=&540& data-original=&/3dd3f86e3b94f7fd68fcf9_r.png&&&/p&&p&可能性:90%。新的开放能力和旧的开放能力用一样的入口不奇怪吧。&/p&&br&&p&假设三：安装后和native app一样，直接出现在桌面&/p&&p&可能性:10%。和微信在同一级入口，腾讯同意Apple都不一定同意。&/p&&br&&p&假设四：微信多一个小程序的tab&/p&&br&&p&[配图4]&img src=&/3e60befccab_b.png& data-rawwidth=&540& data-rawheight=&960& class=&origin_image zh-lightbox-thumb& width=&540& data-original=&/3e60befccab_r.png&&&/p&&p&可能性:1%。多一个tab太丑了，而且小程序刚发布，不可能立刻就对微信的整体结构产生影响。&/p&&br&&p&假设五：出现在一些内置流程中（比如和好友的聊天界面内，发朋友圈的界面（拍照后处理）&/p&&p&[配图 5]&img src=&/af500d9faeec_b.png& data-rawwidth=&540& data-rawheight=&960& class=&origin_image zh-lightbox-thumb& width=&540& data-original=&/af500d9faeec_r.png&&&/p&&p&可能性:1%。小程序和微信本体使用不同的框架技术开发，互相嵌套有困难。&/p&&br&&p&微信小程序框架浅析&/p&&br&&p&
官方已经正式公开了小程序的开发资料（&a href=&///?target=https%3A//mp./debug/wxadoc/dev/%3Ft%3D6& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&mp./debug/&/span&&span class=&invisible&&wxadoc/dev/?t=6&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&），小程序的开发框架包含两大块内容，分别是：API 与 组件。官方的资料在组织和内容上都写的还不错，阅读体验也很顺畅，没看过的话推荐先简单的通读一遍。基本上有一定经验的前端开发都可以没有什么障碍的掌握目前资料里的内容，我就不去做入门性的介绍了，直接浅析吧。&/p&&br&&p&
先看框架的底层API部分。微信一直有一个贯穿的&JS-SDK&在不断演进。对比一下小程序的底层API的功能范围，和JS-SDK还是有很多相似的感觉，相信未来会在形式上达到统一(JS-SDK这名字也足够霸气，塞进去什么都不会觉得奇怪。不过JS-SDK的很多接口设计的实在不敢恭维，希望这次统一的进程也能重新修正下)。小程序的API部分由于可以跳出浏览器的框架，理论上肯定可以是JS-SDK的超集。&/p&&br&&p&这里面我觉得比较有意思的地方有：&/p&&p&&&网络通信&/p&&p&只要目标服务器的域名在小程序配置的安全列表之类，就可以直接通信。不用考虑js的跨域问题了。&/p&&p&既然跨域都支持了，没准以后能像nodejs一样，直接在小程序里使用tcp,udp协议，并基于buffer有一定的二进制协议的开发能力。跳出HTTP协议的框架，对于IoT方向是很有想象空间的。&/p&&br&&p&&&数据缓存&/p&&p&数据缓存接口的设计看起来和 HTML5里的localStorage基本上一样，本来没什么好说的。但文档里的一句话引起了我的兴趣：&/p&&br&&p&“注意： localStorage 是永久存储的，但是我们不建议将关键信息全部存在 localStorage，以防用户换设备的情况。”&/p&&br&&p&难道微信提供的数据缓存能力虽然不是永久的存储，但可以做到跟随用户账号而不是当前设备？ 也就是说，不管用户怎么换手机，已安装使用过的小程序都能使用同一份缓存（不存在不登陆使用小程序的场景）？虽然微信自己的聊天记录跨设备漫游都没做，但这种app personal file cloud的支持，还是能在不增加开发的工作量的情况下，大幅提升用户体验的（作为一个steam的重度用户我已经完全离不开游戏存档的自动同步功能）。这也让我对小程序在云端的能力，开始有了一些初步的想象。&/p&&br&&p&&&并不兼容一些常见js底层框架&/p&&p&小程序的官方QA里有一段话：&/p&&p&“zepto/jquery 会使用到window对象和document对象，所以无法使用”&/p&&p&这意味着所有基于HTML5的已有底层代码资产，并不能完全无缝的迁移过来。不过连jQuery这么常用的库都不能兼容还是有一点伤的。当然，现在用裁剪或兼容的方法，提供能在小程序平台运行的常见js底层库，短期内会很有市场。&/p&&br&&p&MINA框架剖析&/p&&p&接下来我要解读微信小程序提供的界面部分功能，也是最令人兴奋的部分。一个小程序，必须基于MINA框架（从泄漏的资料里得知这个框架叫MINA,正式的资料里删除了这个名字，但为了后面行文方便，我会一直把小程序的应用框架称之为MINA）构建。一个典型的小程序的结构如下：&/p&&p&[配图7]&/p&&img src=&/dca337af5_b.png& data-rawwidth=&836& data-rawheight=&399& class=&origin_image zh-lightbox-thumb& width=&836& data-original=&/dca337af5_r.png&&&br&&p&app.json 小程序配置： &/p&&p&小程序里一共包含哪些页面。&/p&&p&页面套在一个怎么样的 window里显示。&/p&&p&window是否需要支持多tab,支持的话每个tab的默认page是什么。&/p&&p&一些底层组件的默认参数。&/p&&br&&p&app.js（可以理解为入口函数）&/p&&p&处理app的几个关键事件:onLaunch,onShow&/p&&p&定义了app级（可以在不同的页面之间共享）的数据的格式&/p&&br&&p&app.wxss 公用样式表&/p&&p&每个页面的样式表，都是从这个应用级公有样式表继承下来的。&/p&&br&&p&
MINA一个最主要的核心概念是Page，一个Page是应用内可以导航到的最小粒度的界面。而如何构建Page是与大家过去猜测差别最大的地方。微信并没有使用HTML5，而是提供了一套新的设计。新的设计要求每个 Page由3个文件构成：&/p&&br&&p&index.js :包含Page的逻辑处理代码&/p&&p&其中比较重要的就是定义Page的数据（wxml可以通过数据绑定机制直接访问） &/p&&br&&p&index.wxml : Page的布局文件&/p&&p&随便从demo中选一个布局文件来看，其整体结构非常简介清晰，即使没有提供任何资料也大概能看出来表达了一个什么样的页面。&/p&&p&.wxml不算是完全的静态布局文件，还支持条件渲染和列表渲染。&/p&&p&.wxml使用{{}}语法来简单直接的支持数据绑定。&/p&&p&可以通过template的方法进行复用&/p&&br&&p&index.wxss:
样式表&/p&&p&决定了在wxml中定义的各种组件最终应该如何显示。官方文档并没有列出wxss的selector语法和支持的style，只是说“具有CSS的大部分特性”，wxss样式表里也扩展了一些微信小程序专用的样式是属性。&/p&&br&&p&Page的整体设计上有比较明显的“反应式”编程风格，相信有vue.js,angularJS，reactive.js开发经验的同学可以很快上手。由于没有内测资格所以没法在手机上测试性能，不清楚小程序的这套框架有没有反应式编程常见的性能问题。这个等公测后写个有10万条数据的列表，看看滚动流不流畅就知道了。&/p&&br&&p&目前demo没有使用ES6，所以看起来没那么“现代化”，这也可能是因为小程序这个项目立项比较早的缘故吧。不过ES6是大势所趋，相信未来小程序会支持使用ES6开发。&/p&&br&&p&一个基于MINA的小程序最后是如何跑起来的呢？&/p&&p&官方这么说：&/p&&p&“开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。”&/p&&br&&br&&p&网上已经有不少人通过琢磨开发工具的实现的方法，做了比较深度的研究了，推荐阅读：&/p&&p&(微信小程序「官方示例代码」剖析【下】：运行机制 &a href=&///?target=https%3A///blog/weapp-demo-process-webkit-app/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信小程序「官方示例代码」剖析【下】：运行机制&i class=&icon-external&&&/i&&/a&)&/p&&p&简单的总结一下：&/p&&p&wxml文件通过编译会得到html，wxss 文件通过编译会得到css，分离的各个页面的JS和App的主JS文件最终会打包在一起得到App Service。 开发状态下运行小程序，基于blink内核，每个html会加载一些moko js用来支持框架功能。生产环境在手机上估计是运行在一个专用，定制的浏览器内核中。&/p&&br&&br&&p&&br&为什么是MINA?&/p&&br&&p& 业界对目前微信使用的UI框架，有两种截然相反的观点：&/p&&p&微信“小程序”带动HTML5发展 数据波来助力 &a href=&///?target=http%3A//www.csdn.net/article/a//2893& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信“小程序”带动HTML5发展 数据波来助力-CSDN.NET&i class=&icon-external&&&/i&&/a&&/p&&p&“微信小程序的本质说来就是一个HTML5应用”&/p&&p&“以后互联网的发展方向可能更偏重于HTML5” &/p&&p&而有的人又认为&/p&&p&我们真的需要“小程序”么？| HTML5老兵如是说 &a href=&///?target=http%3A//mp./s%3F__biz%3DMzA5OTE3ODUyOA%3D%3D%26mid%3D%26idx%3D1%26sn%3D975819cabb2beb66d161%26chksm%3D8b1ab62ce1b79efe645d79edd3fb1a7dc2a0f5badf80b4%26scene%3D2%26srcid%3D09233GiJEUzQJ8Tgjc89HzV7%26from%3Dtimeline%26isappinstalled%3D0%23wechat_redirect& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&我们真的需要“小程序”么？&i class=&icon-external&&&/i&&/a&&/p&&p&“微信虽然用了 HTML5 技术来做应用号（正式名称：小程序），但是它并没有真正用到 HTML5 的精髓——开放、互联，也就决定了它可能无法实现“微信OS”的最终野心。”&/p&&br&&p&这两个观点是矛盾的，那么，到底那种观点是正确的呢？首先简化一下问题，微信小程序是基于HTML5开发的么？&/p&&br&&p&
通过分析小程序的运行原理，这个答案是明确的：小程序的开发过程会用到大量HTML5相关的技术,但并不是使用HTML5开发。有 HTML5经验的前端工程师学习微信小程序的开发相对会更容易一些。微信小程序的运行并不需要一个完整支持HTML5特性的标准浏览器内核，但也可以通过添加一些辅助设施，让小程序在个完整支持HTML5标准的浏览器上运行起来。&/p&&br&&p&
“由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。” 也就是说，一个已存在的HTML5页面，并不能通过自动转换工具变成一个合法的Page，而需要有工程师根据HTML5页面的功能，使用MINA框架再实现一次。&/p&&p&[配图 HTML5与MINA在功能上有交集，但并不相等]&/p&&br&&p&搞清楚MINA和 HTML5的关系后，我们还是没有搞清楚为什么微信要提供一个新的MINA框架 。事实上这个问题是一个讨论设计的问题，所以要回答这个问题，需要具备一定的设计能力，而不是只是停留在研究MINA实现的层面。而设计能力，是一种比较稀缺的能力。&/p&&br&&p&想要系统的提升自己的设计能力，简单的来说就是“多看+多想”，那么如何多想呢？我有一套还算完整的方法的，简单来说有如下几步：&/p&&br&&p&首先，在研究一个新东西以前，先想想这个新东西，是为了解决什么样的问题出现的。问题要多提，往深了提，反复提炼，最后得到几个好问题。或则从一个问题，引申出一些子问题。很多时候只要问题提对了，设计就明白了大半。&/p&&br&&p&下一步就是试着自己解决一下，回答一下自己提的问题，并比较不同的解决思路的优劣，形成一个对问题解的标准。比如说问题是“如何在一个超长文本中查找子串？” 那么对问题的评价标准就可以是查找速度，以及查找过程中的内存占用。&/p&&br&&p&接下里就是看别人是如何解决这些问题的了。如果和自己的设计差不多，一边窃喜一边开始按自己预先设计的评价标准对别人的设计的好坏进行判断。如果是自己完全没想到过的解法（这通常会出现在第一次接触某个领域问题），可以按图索骥的补充一些基础知识，再回来看。如果这个领域或解法非主流到不是常见范式，那么可以安下心来好好搞清楚，想明白。 这样带着问题研究设计，才能有效的提高自己的设计能力。&/p&&br&&p&介绍完套路后咱们回到正题：我们如何来评价微信小程序选择MINA框架？让我来持续提问吧。&/p&&br&&p&第一个问题：“为什么微信小程序不使用HTML5而是使用MINA来构建Page？”&/p&&p&不用HTML5我可以提供一个非技术答案：微信需要通过这种方法来转化开发者，这些开发者未来会逐渐演变成“微信OS平台”的忠实开发者。其实开发者通常都有患有“斯德哥尔摩综合症”，一旦在一个平台上投入了智力资源进行学习，就会开始下意识的维护这个平台（比如看不到平台的缺点，只看到平台的优点）。如果使用HTML5作为开发方式，那么现在小程序聚拢的开发者都是为了流量来的，并没有投入额外的学习成本，对平台不够忠诚。而微信要成为OS是一个长期的演变过程，那么现在就要通过要求学习一个新的开发框架的方法开始多转化一些忠诚的开发者。 &/p&&br&&p&当然是不是这个原因也只有张小龙自己知道了，这是一个揣摩动机的答案，所以没有评价标准。问题终结。&/p&&br&&p&为什么不用HTML5的技术答案可以是非常庸俗的。毕竟业界对于HTML5技术的优劣讨论已经持续了一段很长的时间了。但基本上，大家认为HTML5的主要缺点集中在性能上：同样的交互，用HTML5实现需要更多的系统资源，也可能会不够流畅。同时，应用还需要集成一个非常巨大的浏览器内核。&/p&&br&&p&这个答案尽管能让大部分人满意，但实际上是非建设性的（这些对HTML5性能的结论，是别人告诉你的）。大家一边相信HTML5的美好前景，一边把对性能问题的解决寄托于几家传统的浏览器厂商。按我们的套路，这个性能问题再往深了问是这样的：“渲染指定页面最少需要多少资源？”，“在当前硬件水平下，渲染指定页面最快需要多少时间？”，“实现一个完整支持HTML5标准的浏览器内核，需要大概多少代码？”。要回答这些问题就需要了解浏览器的实现了，这不会是一件容易的事情，在阅读浏览器的实现的时候，肯定会持续提出针对HTML的设计问题。最终你会对浏览器厂商什么时候能解决性能问题，得到一个更合理的预期：至少在5年内，HTML5的性能是不够的。&/p&&br&&p&虽然SAY NO的理由，有一条就够了。但如能从其它角度思考一下为什么不是HTML5,可以得到一些更有建设性的答案。&/p&&br&&p&第二个问题：“MINA作为一个新框架，为什么会设计成现在的样子？”&/p&&p&可以肯定的是，这是MINA的架构师在综合了多个因素后，拿出来的一个自己最满意的答案。所以这是一个非常有建设性的问题，思考这个问题的时候，就开始逐步代入MINA的架构师视角了。&/p&&br&&p&让我们一起进入MINA架构师的角色，首先在否决了HTML5后，要设计一个什么样的框架来支持小程序的交互开发？第一步就是要给这个新框架提一些基础性的目标与需求。&/p&&br&&p&这是一个现代化的框架，在最终表现力上要足够好。&/p&&p&小程序跑在微信里，所以必然是和android,iOS的具体平台特性无关的。&/p&&p&要面向更多的非专业开发者，所以学习门槛要低。&/p&&p&大规模的专业团队进行团队开发时，能有足够的工程支持。工程支持包括：&br&模块化&br&代码易于长期维护和修改。这意味着基于框架的实现具体需求的结果要足够清晰，好读。&/p&&p&可复用性设计。&/p&&p&小程序不需要安装就可以快速开始使用，只需要加载必要的资源就可以尽快展现用户需要的页面。&/p&&p&&br&进一步思考这些需求该如何解决，并对不同的解决方案进行评价需要的领域知识非常多，已经超过了本文的讨论范围。我在这里要做的只是带你入门，让你开始思考设计问题就够了。这也是本文的核心目的：学会对新技术，新设计进行独立的分析和判断。至于结果么，现在小程序还处于一个早期的状态，等公测了之后在下结论也不迟。&/p&&br&&br&&p&微信小程序的未来？&/p&&br&&p&
虽然现在小程序开放的功能并不丰富，处于一个早期的状态，但结合上面的观点去看微信小程序的设计，还是能从中读到许多远大的理想。而微信的核心愿景之一是“连接一切”，没准小程序是腾讯实现这个愿景道路上的重要一步。有超过7亿用户的微信如果成为一个新的平台，具有不可忽视的能量，下面让我来对小程序的下一步动作做一些无责任的预测吧。&/p&&br&&p&假设一、微信小程序未来会解决应用内搜索的问题&/p&&p&目前小程序规范的页面结构很方便实现应用内搜索。以后使用微信的搜索功能可以直达小程序内部的某个特点内容页面。&/p&&p&这种规范的设计也方便实现小程序之间的互相访问，可以通过一个类似wxapp://appid/pageid/的URL直接导航到另一个小程序的某个特定页面。这是App时代的超连接系统，App的信息孤岛也许就此打破。&/p&&br&&p&假设二、微信小程序会从本地数据读取开始，进化出一定的云端API. &/p&&p&现在小程序只提供了前端的开发功能，但从整体逻辑上已经包含了应用的上传，审核，发布流程。&/p&&p&以后腾讯也许会为小程序提供托管服务（&a href=&///?target=https%3A///act/event/yingyonghao.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&/act/event/yi&/span&&span class=&invisible&&ngyonghao.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&），让应用开发者可以用更少的精力完成一个完整小程序的开发，而不需要去管服务器申请，后台开发，服务器运维等反繁琐的工作，进一步降低一个真正小程序的开发门槛。我相信微信一定有团队在为这个方向努力，但最终实现目标需要更有创造力的云端API设计，这是需要有大智慧的工作。&/p&&br&&p&假设三、使用小程序连接一切&/p&&p&我并不认为小程序只是一个体验更好的服务号。张小龙说小程序是“触手可及”，“用完即走”，“无处不在”的。那么什么场景会需要这种能力? 我觉得“有复杂程序的低频商业行为”会有这种需求。举两个实际的例子：&/p&&br&&p&例1：有一间智能会议室，入口处有一个二维码。会议室的使用者扫描后可以打开一个小程序，通过这个小程序可以更好的访问、控制会议室的各种设备，比如灯光，窗帘，幕布等。&/p&&br&&p&例2：去体检，体检表上有个二维码，扫描后打开一个小程序，通过这个小程序可以更好的引导用户自助完成自己的体检项目。&/p&&br&&p&这两个场景的需求能通过小程序解决，意味着小程序的种类极大丰富，硬件厂商对微信生态的极大支持。我们可以通过小程序简单方便的进入各种陌生的环境，让生活更加智能。未来已经悄悄敞开了大门。&/p&&br&&p&而如何更好更快的探索小程序的可能性，也将是我接下来创业的方向。我将以火速移动技术顾问的身份，和小伙伴们一起从微信小程序开始，去探索移动Web的可能性。&/p&&p&感谢各位关心。&/p&
作者：赵九州 链接： 来源：知乎 著作权归作者所有，转载请联系作者获得授权。 笔者注：本文来自于迅雷首席工程师刘智聪的个人分享，他毕业于南昌大学化学系，加入迅雷后设计开发了多款迅雷核…
微信小程序开发必备技能都在这里了啦！&br&&p&&a href=&///?target=http%3A///data/2121865& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《HTML 5 从入门到精通》&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///data/2213571& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5与CSS3基础教程（第8版）中文高清版_51CTO下载中心_IT技术资料免费下载&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///data/2111155& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5权威指南 带书签 完整版_51CTO下载中心_IT技术资料免费下载&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///data/2065033& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5移动Web开发实战_51CTO下载中心_IT技术资料免费下载&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///data/2174610& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&2016年酷炫HTML5动画合集_51CTO下载中心_IT技术资料免费下载&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///data/2223399& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5与CSS3权威指南_51CTO下载中心_IT技术资料免费下载&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///data/2232818& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Web前端开发技术——HTML、CSS、JavaScript_51CTO下载中心_IT技术资料免费下载&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///data/2065799& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&《HTML 自学视频教程》原版图书配套视频教学光盘_51CTO下载中心_IT技术资料免费下载&i class=&icon-external&&&/i&&/a&&/p&&p&&strong&专题：&/strong&&/p&&p&&a href=&///?target=http%3A///zt/8614& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端开发从入门到精通【第一弹】&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///zt/8580& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&曹鹏 CSS层叠样式表视频教程&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///zt/8441& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&DIV+CSS基础系列视频教程&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///zt/7630& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&兄弟连新版 HTML视频教程&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A///zt/7413& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&初级班HTML5学习教程&i class=&icon-external&&&/i&&/a&&/p&&br&&p&&a href=&///?target=http%3A//aliyue./1516& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Html5实现移动端、PC端 刮刮卡效果&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A//laoxu./3527& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&从html5的新特性定位安全问题&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A//boytnt./2759& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&利用HTML5分片上传超大文件&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A//shayi5/1542663& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【web前端开发】浏览器原生API，DOM，Javascript，HTML5，CSS 代码运行实例参考&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A//liuxp3/1364435& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Golang 基于chrome浏览器语音识别web演示系统WebHTK开发之 HTML5 录音篇&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A//xiaominghimi./9847& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【Cocos2d-HTML5 开发之一】新建HTML5项目及简单阐述与cocos2d/x引擎关系&i class=&icon-external&&&/i&&/a&&/p&&p&&a href=&///?target=http%3A//xiaominghimi./4387& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【COCOS2D-HTML5 开发之二】cocos2d-html5项目定义成员,局部变量,函数笔记随笔&i class=&icon-external&&&/i&&/a&&/p&&br&&p&&a href=&///?target=http%3A//xiaominghimi./4255& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&【COCOS2D-HTML5 开发之三】示例项目附源码及运行的GIF效果图&i class=&icon-external&&&/i&&/a&&/p&&p&&strong&专题&/strong&&br&&a href=&///?target=http%3A///zt/619& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML5入门教程&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A///zt/637& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&从零开始学高德地图JS API_博客专题_51CTO技术博客&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=http%3A///zt/566& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Javascript面向对象技术基础&i class=&icon-external&&&/i&&/a&&br&&/p&&p&&a href=&///?target=http%3A///zt/39& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML 5 下一代Web开发标准详解&i class=&icon-external&&&/i&&/a&&br&&/p&&a href=&///?target=http%3A///zt/284& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&优秀的 HTML5 素材分享&i class=&icon-external&&&/i&&/a&
微信小程序开发必备技能都在这里了啦！
如果想深入理解小程序的话，欢迎来关注我的专栏：&br&&a href=&/fedevs& class=&internal&&前端动态 - 知乎专栏&/a&&br&&br&如果你是 vim 用户，可以使用我开发的全方位小程序开发支持插件：&br&&a href=&///?target=https%3A///chemzqm/wxapp.vim& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GitHub - chemzqm/wxapp.vim: 提供微信小程序开发全方位支持的 vim 插件&i class=&icon-external&&&/i&&/a&&br&它提供了 文件检测、智能补全、文档跳转、语法高亮、缩进、代码段、单词列表、语法检查等功能，全方位支持帮助开发者有效提高开发效率。&br&&br&如果你需要代码保存后实时更新到应用或者在 web 端调试你的小程序，可以使用我开发的小工具：&br&&a href=&///?target=https%3A///chemzqm/wept& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&GitHub - chemzqm/wept: 微信小程序实时开发工具&i class=&icon-external&&&/i&&/a&&br&&br&官网：&a href=&///?target=https%3A//chemzqm.github.io/wept/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&WEPT&i class=&icon-external&&&/i&&/a&
如果想深入理解小程序的话，欢迎来关注我的专栏：
如果你是 vim 用户，可以使用我开发的全方位小程序开发支持插件：
它提供了 文件检测、智能补全、文档跳转、语…
1、小程序开发文档&br&&a href=&///?target=https%3A//mp./debug/wxadoc/dev/index.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&mp./debug/&/span&&span class=&invisible&&wxadoc/dev/index.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&br&2、小程序设计指南&br&&a href=&///?target=https%3A//mp./debug/wxadoc/design/index.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&mp./debug/&/span&&span class=&invisible&&wxadoc/design/index.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&br&&br&3、小程序开发者工具&br&&a href=&///?target=https%3A//mp./debug/wxadoc/dev/devtools/download.html& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&mp./debug/&/span&&span class=&invisible&&wxadoc/dev/devtools/download.html&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&
1、小程序开发文档
2、小程序设计指南
3、小程序开发者工具
10月16日更新Treehouse 35小时学习体验。&br&&br&/***********
&/b&************/&br&&br&前面的知友也提到了，小程序大部分和前端开发类似，所以，入门可以去学 前端开发入门： &b&HTML, CSS和JavaScript的入门课程&/b&。因此本文不是小程序完整资源，&b&更适合那些零基础，或者入门新手来自学&/b&，&b&而非针对那些已有一定编程背景的。&/b&&br&&br&&p&很多微信小程序的文章分析指出，可能会让前端开发程序员更抢手。而不仅仅是程序员能从中受益，对于&b&产品经理、营销运营和自媒体作者&/b&，学习前端开发也是非常有益的。（冯大辉的 &a href=&///?target=http%3A//mp./s%3F__biz%3DMjM5ODIyMTE0MA%3D%3D%26mid%3D%26idx%3D1%26sn%3Dc5a84a746a0a5f8fc6845%26chksm%3Dbdfbfed65933cf93edc21b854c109d4cc8d02e1fd6d39%26mpshare%3D1%26scene%3D1%26srcid%3D0927F4xSwPD0a2jMXzGGYDv2%23wechat_redirect& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&如何把握「微信小程序」这一波红利？&i class=&icon-external&&&/i&&/a& 李笑来的 &a href=&///?target=http%3A//mp./s%3F__biz%3DMzAxNzI4MTMwMw%3D%3D%26mid%3D%26idx%3D1%26sn%3D6dcbbf3b8c5f56a39a73a4ffdfc8b46a%26chksm%3D801ff296beff50ae838c3e0bccae8c%26scene%3D1%26srcid%3D0924gMkivm48nSgEj7M5dhbA%23wechat_redirect& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&微信小程序是谁的“通往财富自由之路”？&i class=&icon-external&&&/i&&/a&）&br&&/p&&br&微信小程序大部分和前端开发类似或者通融，都是 HTML, CSS和JavaScript的入门课程。&br&&br&所以本文，也就对目前市面上，&b&Web&/b&&b&前端开发入门的公开课&/b&&b&作为一个资源汇总&/b&吧。适合任何想入门前端开发的人，尤其是&b&针对零基础小白&/b&，推荐理由中做了些解释和必要的删减。推荐中很多都是系列课程，并不需要学完全部，所以正文也在标出了HTML, CSS和JavaScript的入门 部分。&br&&br&本文咨询了南京大学计算机系的研究生，参考了知乎、Quora 的问答，以及过往学习者、资深程序员的点评，笔者查阅了相关课程的学生评论，尤其是差评，并且自己注册，初步体验部分课程，从而完成这篇总结评测的，但个人能力有限，若有疏漏错误，还望指正。&br&&br&文章太长，写完自己都没耐心看了，建议看“太长不看版”。&br&&br&/*********** 太长不看版 ************/&br&&br&注： 只能接受中文资源的，请直接拉倒结尾，抱歉只评测了一个中文资源。因为在我看来，有相当多的英文资源都非常优质好太多，仅从编程上说，是完全新手友好适合入门的。可以试着上treehouse的课，然后用中文参考着看，本身也是对英文的提高。&br&&br&&p&所以对于那些不能使用英文资源的表示可惜，当然也十分建议打磨下自身英语技能，同样是非常有用有价值的投资&a href=&/question//answer/& class=&internal&&学英语有什么用？ - FreeGrit潇洒毅行的回答&/a&。&br&&/p&&br&&p&所以对于英文不够的，此文提到的大部分，当然不能当做入门资料了。请直接跳转结尾。&/p&&br&非常推荐以下3个，可以按需选择一个，或者几个同时学习。&br&&br&1. &a href=&///?target=https%3A///tracks& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Treehouse | Tracks&i class=&icon-external&&&/i&&/a& 里面的 的 Front End Web Development
&br&最推荐，&b&非常适合零基础新手（所有课程之最）&/b&，交互式有趣的学习体验，游戏化的点数、成就系统，甚至让我开始的时候&b&学上瘾&/b&了。同时学习社区很活跃，提出的问题几小时内就收到答案。&br&&br&2. Udacity 的 &a href=&///?target=https%3A///course/front-end-web-developer-nanodegree--nd001& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端工程师（英文）&i class=&icon-external&&&/i&&/a&&br&由Google等公司合作制作，高质量，以实战项目为导向的课程，基础课程免费，适合有一定编程基础的。但若要参与的实战项目，收费较高。&br&&br&3. Coursera 上 约翰霍普金斯大学的 HTML, CSS, and Javascript for Web Developers &br&&p&&a href=&///?target=https%3A//www.coursera.org/learn/html-css-javascript-for-web-developers& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&coursera.org/learn/html&/span&&span class=&invisible&&-css-javascript-for-web-developers&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a&&/p&&p&课程和Quiz都&b&免费，&/b&在Coursera同类课中，好评率第一，1700+的学生中，仅4个差评&b&，很适合新手，&/b&并且会讲解一些实际项目的要求。&br&&/p&&br&&br&以上都是全英文授课，仅有英文字幕，但课程的质量非常优秀。必须要中文资源参考的，可以参考正文部分第三类，中文资源。&br&&br&对于有一定基础背景的，默认具有了科学上网、搜索技巧，&b&可以在以下资源站按需搜索&/b&。&br&1. Udemy 付费&br&2. Udacity 基础免费&br&3. Coursera 基础免费&br&4. Edx 免费，但开课时间有限制&br&5. Lynda 付费&br&6. Treehouse, codeschool, codecademy月费/年费&br&&br&========&br&&b&其他可能有用的资源：&/b&&br&&br&&br&1. 编程领域的知乎： &a href=&///?target=http%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Stack Overflow&i class=&icon-external&&&/i&&/a&&br&&br&&p&2. 开发工具（编辑代码和编译的工具）：WebStorm (凭借edu邮箱，可免费使用 &a href=&///?target=https%3A///student/& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://www.&/span&&span class=&visible&&/student/&/span&&span class=&invisible&&&/span&&i class=&icon-external&&&/i&&/a& ），Sublime Text 3&br&&/p&&br&&p&3. 搜索类：一颗懂得搜索的心 + Google + 百度（中文，或者网盘资源）&/p&&br&4. &a href=&///?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Learn to Code and Help Nonprofits&i class=&icon-external&&&/i&&/a& FreeCodeCamp （&a href=&///people/dc78bc4d9b1aeec93ae5f& data-hash=&dc78bc4d9b1aeec93ae5f& class=&member_mention& data-editable=&true& data-title=&@LALH& data-hovercard=&p$b$dc78bc4d9b1aeec93ae5f&&@LALH&/a& 推荐） 免费的课程，实战项目，很强的互动，顺带还能做公益。&br&&br&&br&&b&/***********
完整评测&/b&&b&版&/b&&b&
************/&/b&&br&&br&&br&正文评测导航：（详细评测还在更新完善中...）&br&&b&第一类： 交互式，在线编程课程&/b&&br&&b&第二类：传统英文公开课&/b&&br&&b&第三类：中文资源&/b&&br&&br&================&br&&b&第一类： 交互式，在线编程课程&/b&&br&评测的主要是Treehouse, codeschool 和 codecademy，这些相比于国内外公开课平台，有时在于都可以在线编程，及时反馈结果，对新手很友好的交互式指导，比如会提示你具体哪步错了。并且相比Coursera等理论型的公开课，这三家会加入实战项目，更强调实操训练。三家各有利弊，个人倾向Treehouse.&br&&br&&b&1. &a href=&///?target=https%3A///tracks& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Treehouse | Tracks&i class=&icon-external&&&/i&&/a&&/b&&br&&b&里面的 Front End Web Development &/b&&br&&br&10月16日止，共在这学了35小时。&br&&br&本身教学质量就很高，而且对零基础&b&新手非常友好&/b&，相比Coursera，一开始省去了开发环境安装的过程。很多细节做得很棒，每个视频的提问，智能填充代码等，相比另外两个网站更便捷，学习体验更好。同时还有积分、排行榜、徽章等游戏化的系统，会让学习者觉得有趣，获得成就感、掌控感。&br&&br&除了学习体验比另外两家更好些，其课程的结构，是以职业职责划分的，成为Tracks，包含多种需要的语言，而其他两家是以语言划分的。每个Track，含有一系列1-8小时的小课程，比如下图第一个前端网页开发（也就是我们需要的入门课程），整个系列就需要70小时。&br&&img src=&/8f9f81c97be427c5b25ac4d3d582a5a5_b.jpg& data-rawwidth=&1225& data-rawheight=&662& class=&origin_image zh-lightbox-thumb& width=&1225& data-original=&/8f9f81c97be427c5b25ac4d3d582a5a5_r.jpg&&&br&&br&&br&视频下有课程的重点笔记，名词解释，额外的资源等。并且会给出windows和mac不同系统下的快捷键操作。&br&&br&&img src=&/d932cad8a93b_b.jpg& data-rawwidth=&825& data-rawheight=&507& class=&origin_image zh-lightbox-thumb& width=&825& data-original=&/d932cad8a93b_r.jpg&&&br&&br&&br&每看完一个视频，就会出现前几天的学习记录，激励你趁热打铁。并且会增长相应的“技能点”，解锁一些成就。&br&&br&&img src=&/430ee7aee3c32_b.jpg& data-rawwidth=&758& data-rawheight=&625& class=&origin_image zh-lightbox-thumb& width=&758& data-original=&/430ee7aee3c32_r.jpg&&&br&&br&&img src=&/v2-80fc0f1ce126d4eaad5ba4_b.jpg& data-rawwidth=&636& data-rawheight=&608& class=&origin_image zh-lightbox-thumb& width=&636& data-original=&/v2-80fc0f1ce126d4eaad5ba4_r.jpg&&&br&&br&需要通过每个章节的Quiz，你才能拿到成就&br&&br&&img src=&/v2-75e8eb1b69a8ad0d494442cece16aa52_b.jpg& data-rawwidth=&573& data-rawheight=&665& class=&origin_image zh-lightbox-thumb& width=&573& data-original=&/v2-75e8eb1b69a8ad0d494442cece16aa52_r.jpg&&&br&社区比较活跃，&b&课程中不明白的地方，可以在下面提问&/b&，就像知乎一样，可以邀请同学，或者工作人员（moderator）,好几次，都是&b&1小时&/b&内就给出答案了。&br&&br&可能的一些缺点是，Code Challenge 的答案比较唯一，而且只能按照规定的一步步来，不过后面习惯了就好，也能发现自己具体哪一步错了。这里code challenge 和 quiz 你是无法看答案的，自己做不出来，就去前个视频下面提问，&b&其实已经存在很多和你一样的问题了，浏览这些问题和回复，也能学到很多。&/b&相比之下Codecademy的正确答案更多样化些。&br&&br&使用Treehouse每个月25美元，可以免费试用7天，不喜欢就退订。&br&&b&用这个链接，可以第一个月50%优惠：&a href=&///?target=http%3A//referrals.trhou.se/hanxiaojiang& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Plans & Sign Up&i class=&icon-external&&&/i&&/a&&/b&&br&&br&&br&&b&2. Codeschool &br&其path 中的 HTML/CSS ， JaveScript&br&&a href=&///?target=https%3A///learn/html-css& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Learn HTML and CSS&i class=&icon-external&&&/i&&/a&&br&&a href=&///?target=https%3A///learn-javascript-online/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&JavaScript programming: JavaScript for beginners&i class=&icon-external&&&/i&&/a&&/b&&br&&br&只有极其少数的课程免费，29美元/月。&br&&br&界面颜值很高，但个人认为学习体验上不及treehouse，习题有些重复冗长。同样的，有积分、成就系统，每个测试满分250分，当你提交前使用答案会扣除一定的分数。有时候字幕会遮住视频中的操作。并且有人反应，国内上Codeschool的视频，一些会加载很慢。&br&&img src=&/718fbed31b72e7ee2939822_b.jpg& data-rawwidth=&1219& data-rawheight=&656& class=&origin_image zh-lightbox-thumb& width=&1219& data-original=&/718fbed31b72e7ee2939822_r.jpg&&&br&下图是Codeschool的小测试界面，每题满分250分，每次查看提示（答案），会扣除一定的分数。和另外两家一样，也给出了在线编程-及时反馈的功能。有些不方便的是，虽然直接提供了回看视频的链接，但需要整个页面回过去，无法一边回看一边编程。这点上，codeacademy就更好些。Treehouse由于编程窗口永远是新开的，可以一边看视频一边编程，但Quiz的时候同样不能直接返回。&br&&br&&img src=&/6bbf6dc99e3af_b.jpg& data-rawwidth=&1358& data-rawheight=&659& class=&origin_image zh-lightbox-thumb& width=&1358& data-original=&/6bbf6dc99e3af_r.jpg&&&br&&br&&b&3. Codecademy,
&a href=&///?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Learn to code&i class=&icon-external&&&/i&&/a&&/b&&br&其中的 &a href=&///?target=https%3A///learn/web& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&HTML & CSS | Codecademy&i class=&icon-external&&&/i&&/a& （就是默认推荐你学习的第一个课程），&br&之后再学&a href=&///?target=https%3A///learn/learn-javascript& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&Introduction to JavaScript&i class=&icon-external&&&/i&&/a&&br&&br&所有基础课程免费，附加服务20美元/月&br&&br&秉承练习是学习编程的最好方式的逻辑，所以哪怕是一个很小的知识点，Codecademy 也会给你一个个操作的指示，直接通过实际操作来学习。&br&&br&同样是交互式的学习方式，但是教学&b&主要通过文字&/b&指示，&b&而非视频&/b&那么直观，因此学起来&b&可能更枯燥些&/b&。相比之下，&b&优点是&/b&，练习题中的答案比较多样化，而treehouse会更严格。&br&&br&&img src=&/cad395db8e_b.jpg& data-rawwidth=&1363& data-rawheight=&610& class=&origin_image zh-lightbox-thumb& width=&1363& data-original=&/cad395db8e_r.jpg&&&br&&br&============&br&&b&第二类：传统英文公开课&/b&&br&&br&传统公开课，主要以视频教学为主，含有在线答题Quiz测验，但没有交互式学习那样对新手非常友好的指导。并且更多需要学生自行阅读课外材料，搜索来解决问题，&b&对学生的自学能力有更高的要求。&/b&因此建议零基础的，可以至少参加一个交互式学习，然后可以依需求选择相应公开课&b&。&/b&&br&&br&&br&&b&1. Udacity 的 &a href=&///?target=https%3A///course/front-end-web-developer-nanodegree--nd001& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端工程师（英文）&i class=&icon-external&&&/i&&/a&&/b&&br&其中前2-3个项目的5-7个相关课程，属于入门类，单独上这些课程是免费的，参与实战项目需要付费。付费服务还包括结业证书，一对一辅导等。&br&注：视频在国内可能无法观看。&br&&br&课程是Google Amazon等企业联合制作的,并且是以&b&实战项目为导向&/b&的，&b&网上的评论都非常认可Udacity的质量。&/b&&br&&img src=&/bb3b4e8fe1d2db926b9801_b.jpg& data-rawwidth=&1164& data-rawheight=&612& class=&origin_image zh-lightbox-thumb& width=&1164& data-original=&/bb3b4e8fe1d2db926b9801_r.jpg&&&br&&p&&b&2. Coursera 上 约翰霍普金斯大学的 HTML, CSS, and Javascript for Web Developers&/b&&/p&&br&&img src=&/v2-d6cf461a85f20e49df6c_b.jpg& class=&content_image&&&br&&p&&a href=&///?target=https%3A//www.coursera.org/learn/html-css-javascript-for-web-developers& class