微信小程序教程(入门篇)

微信小程序教程

随着小程序正式上线，用户现在能够经过二维码、查找等方法体会到开发者们开发的小程序了。
用户只要将微信更新至最新版别，体会过小程序后，便可在发现页面看到小程序TAB，但微信并不会经过这个地方向用户引荐小程序。
值得一提的是，小程序供给了显示在谈天顶部的功用，这意味着用户在运用小程序的过程中能够快速返回至谈天界面，而在谈天界面也可快速进入小程序，完成小程序与谈天之间的便捷切换。
微信小程序展现的位置
用户运用过的小程序，将以列表的方法呈现在小程序TAB中。
小程序列表
如此前微信团队介绍的相同，小程序能够共享至对话。
“自选股”小程序共享展现
安卓版用户还可将小程序增加快捷方法至桌面。
从试用结果来看，小程序整体运行顺利，而开发者也对小程序抱以很大热情，例如猫眼电影供给了小程序体会礼包。
在体会了自选股、美团外卖、猫眼电影、滴滴公交查询几个小程序后，能够感触出，开发者将APP中最核心的功用在小程序中做了保存，对一些功用则进行了放弃。
比方滴滴出行小程序，仅保存了叫车功用，而APP中的地图、出行方法挑选、用户界面、商城等功用都被放弃掉了。
滴滴出行小程序界面
自选股小程序对APP功用做了相对更多的保存，仅放弃了“资讯”作为独立板块，而保存了自选、行情、设置三个主要功用板块。并且供给了与APP中一致的股价提醒等功用，共享具体股票页面，老友点击查看到的是实时股价信息，体会十分完整。
左为自选股小程序界面，右为自选股APP界面
微信团队此前说到的大众号相关功用在当时的大众号主页现已能够表现。
在开发了小程序的大众号主页上，能够看到该主体开发的小程序，点击即可进入相应小程序。因为处于同一账号体系下，大众号重视者能够更低的本钱转化为小程序的用户。
微信小程序正式上线咱们给出了一份最全指南
左为大众号介绍页；右为大众号主体开发的小程序
关于一些有意将大众号进行产品化的团队而言，小程序及其与大众号之间的相关将大大节约开发本钱及导流本钱。关于内容创业者而言也供给了不错的内容产品化东西。
结合体会及此前微信团队的介绍，小程序规矩现已明晰。
微信小程序不供给的功用
1.小程序在微信没有集中进口。
2.微信不会推出小程序商店，也不会向用户引荐小程序。
3.小程序没有订阅关系，没有粉丝，只要拜访，只要拜访量。
4.小程序不能推送音讯。
5.小程序不能做游戏。
微信小程序供给的功用
1.供给小程序页概念：支撑共享当时信息，例如共享00700股票页面，老友打开时看到的是00700股票的实时信息，而无需再次启动小程序。
2.对话共享：能够共享到对话，支撑共享给单个老友及微信群。
3.查找查找：小程序能够被查找，但微信会极力限制查找才能，现在供给的查找功用是用户可直接依据称号或品牌查找小程序。
4.大众号相关：在小程序与大众号为同一开发主体的前提下，供给小程序与微信大众号之间的相关。
5.线下扫码：供给线下提示用户邻近有哪些小程序存在的功用。用户能够经过线下扫码运用，这也是微信发起的接入方法。
6.小程序切换：小程序支撑挂起状况，即多窗口概念，用户能够把小程序先挂起，然后做其他事情，在需求这个小程序的时分能够快速调用，回到最开端的状况。
7.音讯通知：商户能够发送模板音讯给接受过服务的用户，用户能够在小程序内联系客服，支撑文字和图片，解决用户与小程序的沟通问题。
8.历史列表：用户运用过的小程序会被放入列表，方便下次运用。
小程序会带来什么
出于取得初期流量盈利的主意，外界关于小程序抱以热切期待。但在2016年12月28日微信揭露课的揭露演讲中，张小龙却给出了一个可能会让部分人绝望的答案。
“很多人看到微信开端内测小程序，说应该去取得一些流量上的盈利，但是那就十分惋惜，大众号在微信里边其实也没有进口，小程序也是相同的。”
做出这样的安排，与张小龙对小程序要承担的才能有关，而小程序要承担哪些才能，又根据张小龙对未来网络世界的思考。
在微信揭露课PRO版一个半小时的演讲中，张小龙把大部分时间都用在阐述移动互联网的下一站是什么、小程序的特性与定位以及开发小程序的原因上，而非简单的告诉咱们：小程序的规矩是什么，你们应该怎样做小程序。
在张小龙看来，移动互联网的下一站是“唾手可得”。
“咱们幻想在这样一个虚拟未来的智能眼镜里边，你会发现使用程序现已是彻底不同的形状，跟现在手机里边的使用形状是不相同的，它是一种真实的所见即所得的形状，我说的所见即所得不同于在PC时代，咱们在画图或者UI上面的所见即所得，而是说咱们看到的任何具体的一些事物，它就包含了它的信息，包含了对信息的处理在里边。”
张小龙表示，这就是他关于未来使用程序形状的期望：无处不在，随时拜访。
事实上，从微信小程序的功用设置上也能表现出这一理念，比方支撑供给线下提示用户邻近有哪些小程序存在的功用，经过二维码这一进口，打通小程序与线下服务之间的界限。经过线下的二维码，完成使用程序无处不在的愿景。
闻名IT谈论人洪波(微博)便以为，小程序的进口不是在微信，而是在现实日子中，比方医院的挂号小程序就在医院。微信将真实完成“一个日子方法”的目标，把不同的进口分散到不同的日子场景中，拓宽微信母程序的鸿沟，让微信的幻想空间更大更广。

微信小程序教程入门篇

微信小程序（下面简称小程序）近些月来刷爆了咱们这些程序猿们的圈子，能够说无数的程序猿磨刀霍霍，准备在这快蛋糕上杀出一片天地。那么作为前端开发人员，小程序开发和咱们往常的开发有什么不同的当地呢？让咱们一起来走进门里看看。
咱们从下面几个方向来了解一下小程序的开发：
1.开发东西
2.布局差异
3.JS差异
4.其它
序
先看一张小程序初始化的目录：
小程序包括一个描述全体程序的app和多个描述各自页面的page。一个小程序主体部分由三个文件组成，有必要放在项目的根目录，如下：app.js、app.json、app.wxss；一个小程序页面由四个文件组成，分别是：js、wxml、wxss、json。
概况传送门请戳–>https://mp.weixin.qq.com/debug/wxadoc/dev/framework/structure.html?t=20161107
一、开发东西
微信供给了一款’微信开发者东西‘，能够直接在小程序的官网下载（https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161107）。
微信开发者东西集成了开发调试、代码修正及程序发布。关于东西自身没什么好介绍的，用了一段时间，从代码修正的习气来说，比较类似sublimetext3，各种特性也都和st3相差不大,估量也是内置了emmet，上手仍是比较轻松的。
需求留意一点的问题是在运用微信开发者东西时，要习气运用”编译“功用，有的人会遇到自己在修正器里分明修正了某些当地，可是页面里却没有发生变化，这个时分其实只需求重新编译一次，就妥妥的处理了。一起，遇到一些奇怪问题的时分，也无妨清理一下缓存，也许会有意外收获。
二、布局差异
1.标签
小程序的标签和咱们习气的div,p,span等标签有较大的差异，小程序里彻底取消了这些咱们所了解标签，取而代之的标签又被叫做组件，分别是视图容器、基础内容、表单组件、操作反馈（将会废弃，改为API）、导航、媒体组件、地图和画布这八类。（传送门：https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=20161107）
组件的用法和标签相同，比方view组件<view></view>、text组件<text></view>。从写法上看起来和标签写法没什么区别，可是这些组件和标签最大的区别便是，组件自身设置了款式，比方icon组件：
咱们只需求运用icon组件，不需求去自己设置款式就能够得到对应的icon款式。
在日常小程序开发中，比较常用的组件有view和text，其中用的最多的便是view，view自身并没有默许太多的款式，只要一个display:block款式，所以在我看来view就类似于div，咱们也就把它当作div来运用就行了，然后你就会发现布局的时分到处都是view~，就像下图：
满眼全是view这种写法不需求像html相同考虑语义、seo神马的，十分的简略粗暴~。
额外提一下text组件，text具有view所没有的一个特性便是text组件内的文本能够被仿制、能够被仿制、能够被仿制（重要的事情说三遍~）。假如你希望某段文本能够被仿制，那么你只能运用text组件。一起需求留意的一点，text组件内部不能嵌套view组件！嵌套无效！
2.款式
假如说html的标签发生了较大变化的话，那么css则几乎是没有什么变化，这意味着咱们能够十分快速的在小程序里重构咱们的移动端网页（直接把款式拷贝过来即可）。可是有几点问题咱们需求留意下：
1.小程序引入了新的单位rpx:能够依据屏幕宽度进行自适应。规则屏幕宽为750rpx。如在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。
2.不支撑less、sass等写法
3.不支撑不支撑级联选择器，例如:.test:nth-child(2)、.test:last-child等
4.支撑::before和::after
注：想了解更多请戳–>https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxss.html?t=20161107
二、JS差异
尽管小程序的交互采用的是js的语法，可是最大的变化就在于小程序无法运用选择器获取到页面的某个’dom’（应该不叫dom），这也是咱们前端人员需求思路转变的当地，以往咱们习气于获取某个dom，然后这个dom上绑定各种事情，一起对页面进行一些改动操作，可是小程序并没有供给这种咱们习气的办法。
不能获取dom，也不能直接操作dom，那咱们该怎么写呢？
1.bind和catch
bind和catch的作用从字面意思就能够大致猜出是用来绑定某些东西的，没错，这是小程序供给绑定事情的两个办法，而他们的区别在于bind不阻挠冒泡，而catch阻挠冒泡。小程序不供给获取dom的操作，而是让咱们直接将事情绑定写入到组件内，如下代码：
1
Clickme!
看到这咱们或许发现了bind后边跟着一个tap，这个tap是什么东东？
2.tap
tap其实便是一个事情，你能够理解为click，不过在手机端叫做tap，其它的事情还有：touchstart、touchmove、touchcancel、touchend、longtap。
bindtap=”tapName”组合起来便是绑定个tap事情,tapName则是对应的办法名，在这里需求留意一点，调用办法时不能够运用tapName(“txt”)这种方式来传参，小程序不支撑。那么假如咱们想要给办法传递一些参数该怎么做呢？接着往下看。
3.event
咱们先看一段代码：
Page({
tapName:function(event){
console.log(event)
}
})
打印出来的结果:
{
“type”:”tap”,
“timeStamp”:895,
“target”:{
“id”:”tapTest”,
“dataset”:{
“hi”:”WeChat”
}
},
“currentTarget”:{
“id”:”tapTest”,
“dataset”:{
“hi”:”WeChat”
}
},
“detail”:{
“x”:53,
“y”:14
},
“touches”:[{
“identifier”:0,
“pageX”:53,
“pageY”:14,
“clientX”:53,
“clientY”:14
}],
“changedTouches”:[{
“identifier”:0,
“pageX”:53,
“pageY”:14,
“clientX”:53,
“clientY”:14
}]
}
看到这么一堆东西咱们或许有点晕，没事，咱们来捋一捋。这个event想来咱们应该明白是什么，event包括了方针方针的相关信息。那意味着，咱们只要去修正方针方针的相关信息，就能够给tapName办法传输参数了。
那么如何修正方针方针的相关信息呢？在这之前咱们有必要要先了解下currentTarget和target两个特点，前者是绑定事情的组件，后者是触发事情的组件源。理解清楚这两个特点很重要！假如是上面比如这种情况，只要一个view组件，那么这两
咱们再输出看看（为了便利对比，只保留下currentTarget和target两个特点）:
{
“target”:{
“id”:”tap2″,
“dataset”:{
“hi”:”触发组件源”
}
},
“currentTarget”:{
“id”:”tap1″,
“dataset”:{
“hi”:”绑定组件”
}
}
}
经过这个比如就能够很清楚的发现，currentTarget对应的便是外层绑定了tapName办法的view组件，而target对应的则是内部的view组件。
经过两个比如，相信咱们也留意到了两个特点，data-hi和dataset，这两个特点有什么关系呢？咱们应该猜到了，dataset的值其实便是咱们设置的data-xxx的值，而xxx则是dataset里面的key。咱们关于data-xxx的写法应该不生疏，便是html中常见的自定义特点的写法，而在小程序中，则被用来传参。
4.改动款式
前面就提到了小程序并不供给获取和操作dom的能力，这就又带来了一个问题，咱们如何去动态的改动款式呢？咱们先看下比如：
Page({
data:{
screenType:”
},
bindType:function(){
this.setData({
screenType:’1′
})
}
})
咱们是不是有点明白了呢，咱们没有办法直接获取dom然后去改动他的款式，所以咱们只能经过data里的特点来操控款式的变化，如上面的代码，overflow的值取决于screenType的值是否存在，假如存在，则overflow:hidden，反之overflow:scroll-y；那么咱们只需求改动screenType的值。要改动screenType的值也简略了，小程序供给了this.setData办法，能够设置data内的值。
四、其它
最终提一下咱们了解的ajax恳求，在小程序里，它不叫ajax，而叫做wx.request。用法和ajax没什么区别，唯一需求特别留意的是，恳求有必要是https恳求！而不是往常的http恳求！除了有必要要是https恳求以外，还需求到小程序的后台里设置合法域名，否则无法恳求。