微信小程序教程

隨著小程序正式上線，用戶現(xiàn)在能夠經(jīng)過二維碼、查找等方法體會到開發(fā)者們開發(fā)的小程序了。
用戶只要將微信更新至最新版別，體會過小程序后，便可在發(fā)現(xiàn)頁面看到小程序TAB，但微信并不會經(jīng)過這個地方向用戶引薦小程序。
值得一提的是，小程序供給了顯示在談天頂部的功用，這意味著用戶在運用小程序的過程中能夠快速返回至談天界面，而在談天界面也可快速進入小程序，完成小程序與談天之間的便捷切換。
微信小程序展現(xiàn)的位置
用戶運用過的小程序，將以列表的方法呈現(xiàn)在小程序TAB中。
小程序列表
如此前微信團隊介紹的相同，小程序能夠共享至對話。
“自選股”小程序共享展現(xiàn)
安卓版用戶還可將小程序增加快捷方法至桌面。
從試用結(jié)果來看，小程序整體運行順利，而開發(fā)者也對小程序抱以很大熱情，例如貓眼電影供給了小程序體會禮包。
在體會了自選股、美團外賣、貓眼電影、滴滴公交查詢幾個小程序后，能夠感觸出，開發(fā)者將APP中最核心的功用在小程序中做了保存，對一些功用則進行了放棄。
比方滴滴出行小程序，僅保存了叫車功用，而APP中的地圖、出行方法挑選、用戶界面、商城等功用都被放棄掉了。
滴滴出行小程序界面
自選股小程序?qū)PP功用做了相對更多的保存，僅放棄了“資訊”作為獨立板塊，而保存了自選、行情、設(shè)置三個主要功用板塊。并且供給了與APP中一致的股價提醒等功用，共享具體股票頁面，老友點擊查看到的是實時股價信息，體會十分完整。
左為自選股小程序界面，右為自選股APP界面
微信團隊此前說到的大眾號相關(guān)功用在當(dāng)時的大眾號主頁現(xiàn)已能夠表現(xiàn)。
在開發(fā)了小程序的大眾號主頁上，能夠看到該主體開發(fā)的小程序，點擊即可進入相應(yīng)小程序。因為處于同一賬號體系下，大眾號重視者能夠更低的本錢轉(zhuǎn)化為小程序的用戶。
微信小程序正式上線咱們給出了一份最全指南
左為大眾號介紹頁；右為大眾號主體開發(fā)的小程序
關(guān)于一些有意將大眾號進行產(chǎn)品化的團隊而言，小程序及其與大眾號之間的相關(guān)將大大節(jié)約開發(fā)本錢及導(dǎo)流本錢。關(guān)于內(nèi)容創(chuàng)業(yè)者而言也供給了不錯的內(nèi)容產(chǎn)品化東西。
結(jié)合體會及此前微信團隊的介紹，小程序規(guī)矩現(xiàn)已明晰。
微信小程序不供給的功用
1.小程序在微信沒有集中進口。
2.微信不會推出小程序商店，也不會向用戶引薦小程序。
3.小程序沒有訂閱關(guān)系，沒有粉絲，只要拜訪，只要拜訪量。
4.小程序不能推送音訊。
5.小程序不能做游戲。
微信小程序供給的功用
1.供給小程序頁概念：支撐共享當(dāng)時信息，例如共享00700股票頁面，老友打開時看到的是00700股票的實時信息，而無需再次啟動小程序。
2.對話共享：能夠共享到對話，支撐共享給單個老友及微信群。
3.查找查找：小程序能夠被查找，但微信會極力限制查找才能，現(xiàn)在供給的查找功用是用戶可直接依據(jù)稱號或品牌查找小程序。
4.大眾號相關(guān)：在小程序與大眾號為同一開發(fā)主體的前提下，供給小程序與微信大眾號之間的相關(guān)。
5.線下掃碼：供給線下提示用戶鄰近有哪些小程序存在的功用。用戶能夠經(jīng)過線下掃碼運用，這也是微信發(fā)起的接入方法。
6.小程序切換：小程序支撐掛起狀況，即多窗口概念，用戶能夠把小程序先掛起，然后做其他事情，在需求這個小程序的時分能夠快速調(diào)用，回到最開端的狀況。
7.音訊通知：商戶能夠發(fā)送模板音訊給接受過服務(wù)的用戶，用戶能夠在小程序內(nèi)聯(lián)系客服，支撐文字和圖片，解決用戶與小程序的溝通問題。
8.歷史列表：用戶運用過的小程序會被放入列表，方便下次運用。
小程序會帶來什么
出于取得初期流量盈利的主意，外界關(guān)于小程序抱以熱切期待。但在2016年12月28日微信揭露課的揭露演講中，張小龍卻給出了一個可能會讓部分人絕望的答案。
“很多人看到微信開端內(nèi)測小程序，說應(yīng)該去取得一些流量上的盈利，但是那就十分惋惜，大眾號在微信里邊其實也沒有進口，小程序也是相同的?！?br /> 做出這樣的安排，與張小龍對小程序要承擔(dān)的才能有關(guān)，而小程序要承擔(dān)哪些才能，又根據(jù)張小龍對未來網(wǎng)絡(luò)世界的思考。
在微信揭露課PRO版一個半小時的演講中，張小龍把大部分時間都用在闡述移動互聯(lián)網(wǎng)的下一站是什么、小程序的特性與定位以及開發(fā)小程序的原因上，而非簡單的告訴咱們：小程序的規(guī)矩是什么，你們應(yīng)該怎樣做小程序。
在張小龍看來，移動互聯(lián)網(wǎng)的下一站是“唾手可得”。
“咱們幻想在這樣一個虛擬未來的智能眼鏡里邊，你會發(fā)現(xiàn)使用程序現(xiàn)已是徹底不同的形狀，跟現(xiàn)在手機里邊的使用形狀是不相同的，它是一種真實的所見即所得的形狀，我說的所見即所得不同于在PC時代，咱們在畫圖或者UI上面的所見即所得，而是說咱們看到的任何具體的一些事物，它就包含了它的信息，包含了對信息的處理在里邊。”
張小龍表示，這就是他關(guān)于未來使用程序形狀的期望：無處不在，隨時拜訪。
事實上，從微信小程序的功用設(shè)置上也能表現(xiàn)出這一理念，比方支撐供給線下提示用戶鄰近有哪些小程序存在的功用，經(jīng)過二維碼這一進口，打通小程序與線下服務(wù)之間的界限。經(jīng)過線下的二維碼，完成使用程序無處不在的愿景。
聞名IT談?wù)撊撕椴?微博)便以為，小程序的進口不是在微信，而是在現(xiàn)實日子中，比方醫(yī)院的掛號小程序就在醫(yī)院。微信將真實完成“一個日子方法”的目標(biāo)，把不同的進口分散到不同的日子場景中，拓寬微信母程序的鴻溝，讓微信的幻想空間更大更廣。

微信小程序教程入門篇

微信小程序（下面簡稱小程序）近些月來刷爆了咱們這些程序猿們的圈子，能夠說無數(shù)的程序猿磨刀霍霍，準(zhǔn)備在這快蛋糕上殺出一片天地。那么作為前端開發(fā)人員，小程序開發(fā)和咱們往常的開發(fā)有什么不同的當(dāng)?shù)啬兀孔屧蹅円黄饋碜哌M門里看看。
咱們從下面幾個方向來了解一下小程序的開發(fā)：
1.開發(fā)東西
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
一、開發(fā)東西
微信供給了一款’微信開發(fā)者東西‘，能夠直接在小程序的官網(wǎng)下載（https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=20161107）。
微信開發(fā)者東西集成了開發(fā)調(diào)試、代碼修正及程序發(fā)布。關(guān)于東西自身沒什么好介紹的，用了一段時間，從代碼修正的習(xí)氣來說，比較類似sublimetext3，各種特性也都和st3相差不大,估量也是內(nèi)置了emmet，上手仍是比較輕松的。
需求留意一點的問題是在運用微信開發(fā)者東西時，要習(xí)氣運用”編譯“功用，有的人會遇到自己在修正器里分明修正了某些當(dāng)?shù)?，可是頁面里卻沒有發(fā)生變化，這個時分其實只需求重新編譯一次，就妥妥的處理了。一起，遇到一些奇怪問題的時分，也無妨清理一下緩存，也許會有意外收獲。
二、布局差異
1.標(biāo)簽
小程序的標(biāo)簽和咱們習(xí)氣的div,p,span等標(biāo)簽有較大的差異，小程序里徹底取消了這些咱們所了解標(biāo)簽，取而代之的標(biāo)簽又被叫做組件，分別是視圖容器、基礎(chǔ)內(nèi)容、表單組件、操作反饋（將會廢棄，改為API）、導(dǎo)航、媒體組件、地圖和畫布這八類。（傳送門：https://mp.weixin.qq.com/debug/wxadoc/dev/component/?t=20161107）
組件的用法和標(biāo)簽相同，比方view組件<view></view>、text組件<text></view>。從寫法上看起來和標(biāo)簽寫法沒什么區(qū)別，可是這些組件和標(biāo)簽最大的區(qū)別便是，組件自身設(shè)置了款式，比方icon組件：
咱們只需求運用icon組件，不需求去自己設(shè)置款式就能夠得到對應(yīng)的icon款式。
在日常小程序開發(fā)中，比較常用的組件有view和text，其中用的最多的便是view，view自身并沒有默許太多的款式，只要一個display:block款式，所以在我看來view就類似于div，咱們也就把它當(dāng)作div來運用就行了，然后你就會發(fā)現(xiàn)布局的時分到處都是view~，就像下圖：
滿眼全是view這種寫法不需求像html相同考慮語義、seo神馬的，十分的簡略粗暴~。
額外提一下text組件，text具有view所沒有的一個特性便是text組件內(nèi)的文本能夠被仿制、能夠被仿制、能夠被仿制（重要的事情說三遍~）。假如你希望某段文本能夠被仿制，那么你只能運用text組件。一起需求留意的一點，text組件內(nèi)部不能嵌套view組件！嵌套無效！
2.款式
假如說html的標(biāo)簽發(fā)生了較大變化的話，那么css則幾乎是沒有什么變化，這意味著咱們能夠十分快速的在小程序里重構(gòu)咱們的移動端網(wǎng)頁（直接把款式拷貝過來即可）?？墒怯袔c問題咱們需求留意下：
1.小程序引入了新的單位rpx:能夠依據(jù)屏幕寬度進行自適應(yīng)。規(guī)則屏幕寬為750rpx。如在iPhone6上，屏幕寬度為375px，共有750個物理像素，則750rpx=375px=750物理像素，1rpx=0.5px=1物理像素。
2.不支撐less、sass等寫法
3.不支撐不支撐級聯(lián)選擇器，例如:.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’（應(yīng)該不叫dom），這也是咱們前端人員需求思路轉(zhuǎn)變的當(dāng)?shù)兀酝蹅兞?xí)氣于獲取某個dom，然后這個dom上綁定各種事情，一起對頁面進行一些改動操作，可是小程序并沒有供給這種咱們習(xí)氣的辦法。
不能獲取dom，也不能直接操作dom，那咱們該怎么寫呢？
1.bind和catch
bind和catch的作用從字面意思就能夠大致猜出是用來綁定某些東西的，沒錯，這是小程序供給綁定事情的兩個辦法，而他們的區(qū)別在于bind不阻撓冒泡，而catch阻撓冒泡。小程序不供給獲取dom的操作，而是讓咱們直接將事情綁定寫入到組件內(nèi)，如下代碼：
1
Clickme!
看到這咱們或許發(fā)現(xiàn)了bind后邊跟著一個tap，這個tap是什么東東？
2.tap
tap其實便是一個事情，你能夠理解為click，不過在手機端叫做tap，其它的事情還有：touchstart、touchmove、touchcancel、touchend、longtap。
bindtap=”tapName”組合起來便是綁定個tap事情,tapName則是對應(yīng)的辦法名，在這里需求留意一點，調(diào)用辦法時不能夠運用tapName(“txt”)這種方式來傳參，小程序不支撐。那么假如咱們想要給辦法傳遞一些參數(shù)該怎么做呢？接著往下看。
3.event
咱們先看一段代碼：
Page({
tapName:function(event){
console.log(event)
}
})
打印出來的結(jié)果:
{
“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想來咱們應(yīng)該明白是什么，event包括了方針方針的相關(guān)信息。那意味著，咱們只要去修正方針方針的相關(guān)信息，就能夠給tapName辦法傳輸參數(shù)了。
那么如何修正方針方針的相關(guān)信息呢？在這之前咱們有必要要先了解下currentTarget和target兩個特點，前者是綁定事情的組件，后者是觸發(fā)事情的組件源。理解清楚這兩個特點很重要！假如是上面比如這種情況，只要一個view組件，那么這兩
咱們再輸出看看（為了便利對比，只保留下currentTarget和target兩個特點）:
{
“target”:{
“id”:”tap2″,
“dataset”:{
“hi”:”觸發(fā)組件源”
}
},
“currentTarget”:{
“id”:”tap1″,
“dataset”:{
“hi”:”綁定組件”
}
}
}
經(jīng)過這個比如就能夠很清楚的發(fā)現(xiàn)，currentTarget對應(yīng)的便是外層綁定了tapName辦法的view組件，而target對應(yīng)的則是內(nèi)部的view組件。
經(jīng)過兩個比如，相信咱們也留意到了兩個特點，data-hi和dataset，這兩個特點有什么關(guān)系呢？咱們應(yīng)該猜到了，dataset的值其實便是咱們設(shè)置的data-xxx的值，而xxx則是dataset里面的key。咱們關(guān)于data-xxx的寫法應(yīng)該不生疏，便是html中常見的自定義特點的寫法，而在小程序中，則被用來傳參。
4.改動款式
前面就提到了小程序并不供給獲取和操作dom的能力，這就又帶來了一個問題，咱們?nèi)绾稳討B(tài)的改動款式呢？咱們先看下比如：
Page({
data:{
screenType:”
},
bindType:function(){
this.setData({
screenType:’1′
})
}
})
咱們是不是有點明白了呢，咱們沒有辦法直接獲取dom然后去改動他的款式，所以咱們只能經(jīng)過data里的特點來操控款式的變化，如上面的代碼，overflow的值取決于screenType的值是否存在，假如存在，則overflow:hidden，反之overflow:scroll-y；那么咱們只需求改動screenType的值。要改動screenType的值也簡略了，小程序供給了this.setData辦法，能夠設(shè)置data內(nèi)的值。
四、其它
最終提一下咱們了解的ajax懇求，在小程序里，它不叫ajax，而叫做wx.request。用法和ajax沒什么區(qū)別，唯一需求特別留意的是，懇求有必要是https懇求！而不是往常的http懇求！除了有必要要是https懇求以外，還需求到小程序的后臺里設(shè)置合法域名，否則無法懇求。