周末關于微信小程序的總結，原地址: 一張圖看微信小程序

微信小程序正式公測，公測時間：11月3日夜：公告地址：https://mp.weixin.qq.com/cgi-bin/announce?action=getannouncement&key=1478163659&version=14&lang=zh_CN公測配套使用攻略：微信小程序公測接入指南整理了一下最近收集了好久的資料，給同學們參考：共分了5類；1：官方文檔地址：2：免費視頻地址：3：教程系列集合；4：100個demo5：學習論壇11月5日更新內容--------19：_Wake新手入門攻略系列：博客地址：_Wake - 簡書_Wake：新手入門攻略《一》視圖與渲染，點擊事件_Wake：新手入門攻略《二》配置及生命周期，布局基礎&樣式基礎demo更新：適應新版（這里特指v0.10.102800版）的demo微信小程序demo：福利demo：美女薈萃；適用1028版本微信小程序demo：titans微信小程序學習用demo：附登錄設計實戰教程微信小程序優質demo：We重郵；適用1028版本微信小程序demo：仿手機淘寶；適用1028版本微信小程序demo：Dribbble微信小程序推薦demo：備忘錄：適用1028版本微信小程序優質demo推薦：24點計算游戲；適用1028版微信小程序demo：智能機器人；適用1028版本微信小程序demo：萬年歷微信小程序demo：github博客微信小程序優質demo推薦：高仿芒果TV（暫無接口）：適用1028微信小程序優質demo：知乎；適用1028版本微信小程序demo：夠野活動；適用1028版本微信小程序demo：水果小店：適合學習使用基于微信小程序開發的仿微信demo ★100微信小程序經典demo學習案例：flex布局柵格微信小程序demo：簡單的天氣預報：適用1028版本微信小程序demo：基于node：wechat app of girls scrapy spider微信小程序demo：面包旅行；適用1028版本微信小程序demo：小米天氣：適用1028版本微信小程序優質demo推薦：辯論計時微信小程序demo：豆瓣電影：適用1028版本優質demo推薦研究：桔子信用；適用1028版本微信小程序demo：精美計算器：適用1028版本微信小程序demo：大畫表情；適用1028版本；推薦研究微信小程序精品demo強烈推薦：有調商城：適用1028版本微信小程序入門教程+案例demo微信小程序demo：京東首頁微信小程序demo：在線音樂：適用1028版本微信小程序demo：音樂播放器 技術棧: redux + es7 +labrador--------11月2日更新內容--------14：Coco-LG的學習筆記：博客地址：cocoLG的專欄Coco-LG的學習筆記《一》事件Coco-LG的學習筆記《二》view(視圖容器)Coco-LG的學習筆記《三》image(圖片)15：Acmen、L學習案例系列：博客地址：Acmen、L - 博客園Acmen、L學習案例集錦《一》生命周期，組件Acmen、L學習案例集錦《二》彈框組件modal，底部菜單Acmen、L學習案例集錦《三》加載中提示框loading，Acmen、L學習案例集錦《四》video視頻播放，audio音頻播放16：夢斷難尋新手入門篇系列：博客地址：夢斷難尋 - 博客園夢斷難尋新手入門篇《一》：熟悉項目結構夢斷難尋新手入門篇《二》：獲取系統信息，地理位置，用戶信息夢斷難尋新手入門篇《三》：下拉刷新，上拉加載更多17：一斤代碼深入理解系列：專欄地址：一斤代碼 - 簡書一斤代碼深入理解系列《一》：微信小程序事件機制一斤代碼深入理解系列《二》：微信小程序樣式機制一斤代碼深入理解系列《三》：微信小程序和服務器通信一斤代碼深入理解系列《四》：微信小程序和服務器通信一斤代碼深入理解系列《五》：微信小程序中使用Promise進行異步流程處理18：qc_nj微信小程序準備工作系列：博客地址：再起航！微信小程序準備工作：微信開發實戰《一》申請測試號微信小程序準備工作：微信開發實戰《二》微信公眾平臺接口調試工具 ...微信小程序準備工作：微信開發實戰《三》開發者公眾號的交互原理 ...微信小程序準備工作：微信開發實戰《四》URL、Token認證、java源碼、免費新浪SAE部署 ...demo更新：適應新版（這里特指v0.10.102800版）的demo微信小程序優質demo推薦：心情筆記：適用10微信小程序demo：課程列表：適用1028版本微信小程序demo：外賣：適用1028版本優質demo推薦：百家菜譜：適用1028版本微信小程序demo：云圖音樂：適用1028版本使用TypeScript開發微信小程序的demo演示微信小程序優質demo推薦：知乎日報；適用10微信小程序demo：ITBLOG框架；適用1028版本微信小程序demo：黑市商城框架；適用1028版微信小程序demo：計時器：適用1028版本微信小程序demo：XY商城：適用1028版本微信小程序demo：嗶哩嗶哩bilibili排行榜：微信小程序demo：芒果TV：適用1028版本微信小程序demo：宅男社區優質demo推薦：老酒商城：適用1028版本微信小程序demo：豆瓣電影：適用1028版本微信小程序完整demo（附前后端代碼）--------微信小程序在10月27和28日連續更新了兩個版本，很多demo在新程序版本下無法使用；以下為10月30日更新內容：--------12：半桶水分享系列：作者博客：d617973306的博客半桶水技術分享：微信小程序實現跳轉傳參半桶水技術分享《二》：js實現單選功能半桶水技術分享《三》：wx:key理解13：jsong技術分析系列：作者博客：博客 - jsongo0的個人空間；作者公眾號：半圓生活微信小程序開發系列分析《一》視圖層微信小程序開發系列分析《二》數據層微信小程序開發系列分析《三》開發工具v0.10.102800-新增功能解析微信小程序開發系列分析《四》websocket微信小程序開發系列分析《五》模塊化微信小程序開發系列分析《六》主界面微信小程序開發系列分析《七》生命周期和路由demo新增：適應新版（這里特指v0.10.102800版）的demo微信小程序demo：qq號吉兇測試：適用1028版微信小程序完整demo：包含服務器端及數據庫優質demo推薦：豆瓣電影：適用1028版本微信小程序demo：冥想；部分適用1028版本微信小程序demo：工單：界面適用1028版本微信小程序demo：神馬假日與購物車：適用10微信小程序demo：一天任務：部分適用1028版微信小程序demo：共享ofo共享單車：適用1028--------一：官方地址集合：1：官方工具：https://mp.weixin.qq.com/debug/w ... tml?t=14764346784612：簡易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=14764346775993：設計指南：https://mp.weixin.qq.com/debug/wxadoc/design/index.html4：設計資源下載：https://mp.weixin.qq.com/debug/wxadoc/design/#資源下載5：騰訊云教程：https://www.qcloud.com/doc/product/44405二：免費視頻地址：均為網絡收集的免費視頻：視頻資源 - Demo/資源下載三：新手教程集合：原創不易，請大家多多支持作者專欄，教程系列均得到了原作者的授權；1：順子_RTFSC把玩系列：博客地址：順子_RTFSC的專欄微信小程序把玩《一》：window配置，tabBar底部導航，應用生命周期 ...微信小程序把玩《二》：頁面生命周期，模塊化，數據綁定，view組件 ...微信小程序把玩《三》：scroll-view組件，swiper組件，icon組件微信小程序把玩《四》：text組件，progress組件，button組件微信小程序把玩《五》：checkbox組件，form組件，input組件微信小程序把玩《六》：picker組件，radio組件，slider組件微信小程序把玩《七》：switch組件，action-sheet組件，modal組件微信小程序把玩《八》：toast組件，loading組件，navigator組件微信小程序把玩《九》：audio組件，image組件，video組件微信小程序把玩《十》：wx.request(object) API，wx.uploadFile(object)微信小程序把玩《十一》：Image API，Record API，Audio API微信小程序把玩《十二》：Video API，Storage API，location API微信小程序把玩《十三》：獲取設備信息 API，navigation API，animation API ...微信小程序把玩《十四》：canvas API2：秀杰實戰系列：博客地址：博客 - 秀杰的個人空間秀杰實戰教程系列《一》：記賬應用開發秀杰實戰教程系列《二》：微信小程序繪圖課程之餅圖秀杰實戰教程系列《三》：下拉篩選菜單WXDropDownMenu組件秀杰實戰教程系列《四》：倒計時組件，LXStepper組件-商品數量加減 ...秀杰實戰教程系列《五》：實戰課程之記賬應用開發（續）秀杰實戰教程系列《六》：服務端之用戶注冊與登錄基于ThinkPHP5描述 ...秀杰實戰教程系列《七》：實現購物車頁面秀杰實戰教程系列《八》：記賬應用實戰服務端之用戶注冊與登錄基于Codeigniter3描述 ...秀杰實戰教程系列《九》：應用實例教程服務端登錄篇秀杰實戰教程系列《十》：服務端實現賬目CRUD秀杰實戰教程系列《十一》：對接服務端賬目CRUD秀杰實戰教程系列《十二》：基于LeanCloud實現訪問網絡與數據存儲3：有漁入門系列：博客地址：編程藝術 - 51CTO技術博客有漁微信小程序系統概述《一》認識微信小程序與HelloWorld有漁微信小程序系統概述《二》了解.js文件及.json文件有漁微信小程序系統概述《三》view層及小程序框架概述有漁微信小程序系統進階《四》小程序組件有漁微信小程序技術分析《五》Mustache語法要點總結有漁微信小程序系統概述《六》小程序的API有漁微信小程序技術分析《七》實例開發教程有漁微信小程序系統概述《八》：小程序開發中應注意的幾個問題4：瘋狂的貓入門系列：博客地址：瘋狂的貓 - 博客園微信小程序入門系列《一》：入門正確姿勢微信小程序入門系列《二》：開發工具使用與設計規范微信小程序入門系列《三》：生命周期微信小程序入門系列《四》：觸控事件微信小程序入門系列《五》：數據綁定5：栁羅風塵的攻略系列：博客地址：不忘初心，才能始終微信小程序簡易全攻略《一》開始構建與創建頁面微信小程序簡易全攻略《二》設置頁面標題與底部導航微信小程序簡易全攻略《三》創建輪播圖與數據請求，表單的創建、提交、與接收 ...微信小程序簡易全攻略《四》模板條件列表渲染完成模擬公眾號自動回復 ...6：Bison試水系列：博客地址：Bison的技術博客IOS開發者試水：微信小程序開發教程-從零開始（1）IOS開發者試水：微信小程序開發教程-從零開始（2）IOS開發者試水：微信小程序開發教程-從零開始（3）7：二當家小武零基礎系列：博客地址：u012491227的專欄零基礎入門篇：微信小程序開發博客項目《上》零基礎入門篇：微信小程序開發博客項目《中》8：dzp_coder學習點滴系列：博客地址：dzp_coder微信小程序學習點滴《一》：如何獲取時間，頁面跳轉，傳遞參數 ...微信小程序學習點滴《二》：開發者工具快捷鍵，輪播圖 swiper圖片組件 ...微信小程序學習點滴《三》：開發工具及開發環境配置，尺寸單位rpx與px,rem相互轉換 ...微信小程序學習點滴《四》：網絡請求微信小程序學習點滴《五》：網絡請求(POST請求)填坑指南微信小程序學習點滴《六》吐司toast(消息提示框)微信小程序學習點滴《七》選項卡(窗口頂部TabBar)及(窗口底部TabBar)頁面切換微信小程序學習點滴《八》：數據存儲 參數傳遞 數據緩存9：Two_Water的學習系列：博客地址：【微信小程序】微信小程序學習《一》：目錄文件詳解，視圖渲染詳解微信小程序學習《二》：事件詳解10：oopsguy實戰系列：博客地址：oopsguy - 博客園精品教程：微信小程序實戰之知乎日報精品教程《二》：微信小程序實戰之小豆瓣圖書11：TITF實用代碼片段系列：博客地址：FutrueJet的博客TITF出品：微信小程序實用案例代碼片段大全《一》TITF出品：微信小程序實用案例代碼片段大全《二》TITF出品：微信小程序實用案例代碼片段大全《三》TITF出品：微信小程序實用案例代碼片段大全《四》TITF出品：微信小程序實用案例代碼片段大全《五》：ES6新特性專輯 ...TITF出品：微信小程序實用案例代碼片段大全《六》TITF出品：微信小程序實用案例代碼片段大全《七》四：demo合集；網絡上的demo十分分散，我專門集中了大部分目前可以搜尋到的demo，方便大家查找，每個demo均提供了github地址，方便查看最新更新代碼；官方開發者工具導入demo教程微信小程序demo：萬年歷|日歷微信小程序簡單demo功能：增刪微信小程序demo：快遞查詢（內含結構詳解）微信小程序優質demo推薦：微信挪車微信小程序優質demo推薦：像素鳥游戲微信小程序優質demo推薦：打飛機游戲微信小程序demo：百度小說搜索微信小程序demo：果庫微信小程序demo：爆米花popcorn微信小程序demo：Testerhome微信小程序demo：公眾號熱門文章信息流優質demo推薦：空氣質量查詢微信小程序demo：環球小鎮商城微信小程序demo：小林早餐微信小程序demo：狼人殺微信小程序demo：仿QQ，重點UI繪制 和微信微信小程序demo：半個醫生的探索版微信小程序demo：模仿city games 看還原度微信小程序demo：元寶幣錢包 YBCWallet微信小程序demo：骰子游戲微信小程序demo：500px微信小程序demo：有調商城微信小程序demo：巴爺商城微信小程序demo：禮物說微信小程序demo：德澤微特產微信小程序demo：備忘錄2微信小程序demo：24點計算游戲LeanCloud 的微信小程序用戶登陸Demo微信小程序demo：V2EX微信小程序demo：We重郵（親測可用）新手學習福音：基于微信小程序官方教程的代學習用demo：電影微信小程序demo：搜索歌詞（親測可用）微信小程序demo：電影app（親測可用）微信小程序demo：樂詞微信小程序demo：查詢號碼歸屬地微信小程序demo：幫你妹微信小程序demo學習示例：加載更多微信小程序demo：豆瓣電影， 照片， 地圖微信小程序種子項目demo微信小程序demo：flex布局頁面微信小程序demo：指尖書香微信小程序demo：火車票查詢微信小程序demo：新聞客戶端微信小程序demo：花禮網微信小程序demo：實現movecss效果微信小程序demo：新聞頭條微信小程序demo：滴滴公交微信小程序demo開發教程：地圖定位微信小程序demo：大好商城（新增功能天氣查微信小程序demo：吃貨APP(實現上拉加載更多方濤：微信小程序demo：智能機器人A閃：微信小程序demo：匯率計算器微信小程序demo：水滸傳Demo設計教程：Flex布局demo－4種必備常用騰訊云微信小程序一站式解決方案客戶端示例微信小程序demo：五十音圖（附作者感受）微信小程序demo：電商（附簡易教程）微信小程序demo：IT-EBOOKS微信小程序demo：英雄聯盟(LOL)戰績查詢微信小程序demo：影訊微信小程序demo：分答微信小程序demo：ToDoList微信小程序demo：gank.io微信小程序demo：燴面APP微信小程序demo：北歐風格家居設計館微信小程序demo：Artand微信小程序demo：番茄時鐘微信小程序demo：基本功能實現微信小程序demo實戰教程：仿UC天氣預報微信小程序demo：可以播放音樂的 Apple Mus微信小程序demo：計時器（兩個demo）微信小程序demo：健康菜譜微信小程序demo：掃雷（挖金子）微信小程序demo：A島微信小成都demo：小推車首頁展示 購物車的微信小程序demo：1024小游戲微信小程序 cnode社區版本VR視頻資源——微信小程序Gank——微信小程序Demo移動端商城——微信小程序DemoTeamToy——微信小程序DemoHiapp——微信小程序Demo商城——微信小程序Demo計算器——微信小程序Demo開發模板 vue init——微信小程序github博文展示——微信小程序Demo購物車——微信小程序Demo搶紅包——微信小程序Demo熱門文章信息流——微信小程序Demo微票——微信小程序Demo微信小程序demo：資訊類demo;功能實現列表微信小程序demo：知乎日報（附：知乎日報AP微信小程序demo：移動端商城微信小程序demo：簡易情緒音樂播放器V0.04微信小程序demo：小姨媽微信小程序demo導入小教程微信小程序demo詳解：今日頭條拉勾網App：微信小程序demo分享微信小程序demo分享：豆瓣電影微信小程序demo：搜索音樂小程序，調用酷狗五：學習論壇，1：很快社區：微信小程序,weixin,微信小程序開發：評價：新內容較少，老內容較豐富；2：weapp：微信小程序開發論壇：內容較少，但有自己的原創；3：微信小程序聯盟：微信小程序社區：也就是我的論壇，內容目前最為豐富，但是缺乏原創；4：青雀：青雀論壇_LarkApp_國內領先的小程序開發者社區：有自己的工具；

無內測邀請，1個小時快速搭建微信小程序「小程序」這個劃時代的產品發布快一周了，互聯網技術人都在摩拳擦掌，躍躍欲試。可是小程序目前還在內測，首批只發放了 200 個內測資格（淚流滿面）。本以為沒有 AppID 這個月就與小程序無緣了，慶幸的是微信這兩天發布了正式版開發者工具，無需內測邀請也可以嘗鮮了。因此也就有了我與「小程序」的初體驗，而我的感受只有一個字——爽！選擇哪個「小程序」Demo？在知名同性交友網站 Github 上，「小程序」的 Demo 不少，但是大多只是簡單的 API 演示，有的甚至直接把頁面數據寫在了 json 文件里（分明有網絡請求 API）。我想體驗的是能夠將服務端和小程序端無縫連接起來（體驗夠爽）的項目。最終，我選擇了騰訊云官方推出的「小相冊」Demo。「小相冊」主要實現了以下功能：列出對象存儲 COS 中的圖片列表。點擊左上角上傳圖片圖標，可以調用相機拍照或從手機相冊選擇圖片，并將選中的圖片上傳到 對象存儲 COS 中。輕按任意圖片，可進入全屏圖片預覽模式，并可左右滑動切換預覽圖片。長按任意圖片，可將其保存到本地，或從 對象存儲 COS 中刪除。效果演示圖（受開發工具的限制，部分功能尚未實現）COS對象存儲服務（Cloud Object Service）是騰訊云推出的面向企業和個人開發者提供的高可用，高穩定，強安全的云端存儲服務。可以將任意數量和形式的非結構化數據放入COS，并在其中實現數據的管理和處理。之所以選擇騰訊云的 Demo，一是因為它是騰訊自家推出的，項目的質量有保障；二是因為它是少有的既講小程序開發，又介紹云端部署的項目。稍微有點經驗的程序員都知道，架構要動靜分離，靜態文件最好不要放在自己的服務器上，要放在專門用來存儲的對象存儲服務器COS上，并且用CDN 加速。「小相冊」后端采用的是 Node.js，Nginx作為反向代理。第一步：搭開發環境首先，我們需要在本地搭建好微信「小程序」的開發環境。即下載開發者工具。微信官方已經推出了正式版 IDE，大家沒有必要再去下載破解版了。打開「官方下載地址」，根據自己的操作系統選擇。我使用的是 Mac 版。安裝好之后打開運行，會要求微信掃碼登陸。之后，就可以看到創建項目的頁面了。選擇添加項目，沒有 AppID 就選無（如果亂寫會報錯，到時可能無法進入項目）。如果你選擇的項目目錄為空，請如圖所示勾選在“當前目錄中創建quick start項目”。點擊“添加項目”之后，我們會進入開發工具的調試頁面。第二步：下載「小相冊」源碼接下來，我們下載「小相冊」的源碼。可以選擇直接從http://imgcache.qq.com/qcloud/la/demo-source/qcloud-applet-album.zip下載，也可以從騰訊云團隊的 Github 倉庫拉取。我推薦從 Github 倉庫拉取，這樣可以及時獲取最新的代碼。git clone https://github.com/CFETeam/weapp-demo-album.git最終，我們會得到類似這樣的文件目錄。簡單解釋下目錄結構：applet（或app）: 「小相冊」應用包代碼，可直接在微信開發者工具中作為項目打開。server: 搭建的Node服務端代碼，作為服務器和app通信，提供 CGI 接口示例，用于拉取圖片資源、上傳圖片、刪除圖片。assets：「小相冊」的演示截圖。源碼下載完成之后，我們打開微信 web 開發者工具，新建項目「小相冊」，選擇目錄applet（或app）。「小相冊」源碼分析在進行部署之前，我們來簡單分析一下「小相冊」的具體代碼。畢竟只看效果不是我們的目的，我們的目的是以「小相冊」為例，了解如何開發小程序并與服務端進行交互。「小相冊」包含一個描述整體程序的 app 和多個描述各自頁面的 page。主程序 app 主要由三個文件組成，分別是 app.js（小程序邏輯）、app.json（小程序公共設置）和 app.wxss（小程序公共樣式表），其中前兩個為必備文件。config.js 文件中包含了一些部署域名的設置，現在不用管。在 pages 目錄下，有兩個 page 頁面，分別是 index 和 album。頁面結構算是比較簡單的，其中 index 是小程序啟動時默認進入的頁面。每個頁面下，至少要有 .js（頁面邏輯）和 .wxml（頁面結構）兩個文件，.wxss（頁面樣式表）和 .json（頁面配置）文件為選填。你可能注意到了，這些文件的文件名與父目錄的名稱相同。這是微信官方的規定，目的是減少配置項，方便開發者。接下來我們以 index 頁面為例做簡單的解釋。index.wxml 是這個頁面的表現層文件，其中的代碼非常簡單，可以分為上下兩大部分。<view> <view class="page-top"> <text class="username">恭喜你</text> <text class="text-info">成功地搭建了一個微信小程序</text> <view class="page-btn-wrap"> <button class="page-btn" bindtap="gotoAlbum">進入相冊</button> </view> </view> <view class="page-bottom"> <text class="qr-txt">分享二維碼邀請好友結伴一起寫小程序！</text> <image src="../../images/qr.png" class="qr-img"></image> <image src="../../images/logo.png" class="page-logo"></image> </view> </view> 頁面的演示效果如下：我們看到，頁面上有一個“進入相冊”的按鈕。正常理解，點擊后該按鈕后我們就可以進入相冊了（這不廢話嘛）。那小程序背后是怎樣實現該操作的呢？在 index.wxml 中，我們發現對應的 button 標簽上定義了一個 bindtap 屬性，綁定了一個叫做gotoAlbum 的方法。而這個方法可以在 index.js 文件中找到。事實上，文件中也只定義了這一個方法，執行的具體動作就是跳轉到 album 頁面。Page({ // 前往相冊頁 gotoAlbum() { wx.navigateTo({ url: ../album/album }); }, }); album.js 頁面中編寫了程序的主要邏輯，包括選擇或拍攝圖片、圖片預覽、圖片下載和圖片刪除；album.wxml 中三種視圖容器 view、scroll-view、swiper均有使用，還提供了消息提示框 toast。具體方法和視圖的實現請查看項目源碼。所有的這些功能都寫在 Page 類中。lib 目錄下提供了小程序會用的一些輔助函數，包括異步訪問和對象存儲 COS 的 API。總的來說，和微信官方宣傳的一樣，在開發者工具下進行小程序的開發，效率確實提高了很多，而且有很多微信提高的組件和 API。所以，在開發速度這點上的體驗還是非常爽的。另外，由于「小相冊」需要使用諸多云端能力，如圖片的上傳和下載，我們還需要進行服務器端的部署和設置。具體請看接下來的步驟。第三步：云端部署 server 代碼雖然服務端的開發不是本文的重點，但是為了全面地體驗「小相冊」的整個開發部署流程，我們還是有必要了解服務端的部署，這里我們使用的是騰訊云。如果你想更爽一點，那么可以選擇騰訊云官方提供的小程序云端鏡像。「小相冊」的服務器運行代碼和配置已經打包成騰訊云 CVM 鏡像，可以直接使用。可謂是一鍵部署好云端。如果你以前沒有使用過騰訊云，可以選擇免費試用（我已經領取了 8 天的個人版服務器），或者領取禮包以優惠的價格購買所需的服務。你也可以選擇將「小相冊」源碼中的server文件夾上傳到自己的服務器。第四步：準備域名和配置證書如果你已經有騰訊云的服務器和域名，并配置好了 https，那么可以跳過第 4-6 步。在微信小程序中，所有的網絡請求受到嚴格限制，不滿足條件的域名和協議無法請求。簡單來說，就是你的域名必須走 https 協議。所以你還需要為你的域名申請一個證書。如果沒有域名，請先注冊一個。由于我們沒有收到內測，也就暫時不用登錄微信公眾平臺配置通信域名了。第五步：Nginx 配置 https微信小程序云端示例鏡像中，已經部署好了 Nginx，但是還需要在 /etc/nginx/conf.d 下修改配置中的域名、證書、私鑰。請將紅框部分換成自己的域名和證書，并且將 proxy_pass 設置為 Node.js 監聽的端口，我的是 9993。配置完成后，重新加載配置文件并且重啟 Nginx。sudo service nginx reload sudo service nginx restart 第六步：域名解析我們還需要添加域名記錄，將域名解析到我們的云服務器上，這樣才可以使用域名進行 https 服務。在騰訊云注冊的域名，可以直接使用云解析控制臺來添加主機記錄，直接選擇上面購買的 CVM。解析生效后，我們的域名就支持 https 訪問了。第七步：開通和配置 COS由于我們希望實現動靜分離的架構，所以選擇把「小相冊」的圖片資源是存儲在 COS 上的。要使用 COS 服務，需要登錄 COS 管理控制臺，然后在其中完成以下操作。點擊創建 Bucket。會要求選擇所屬項目，填寫相應名稱。這里，我們只需要填上自己喜歡的 Bucket 名稱即可。然后在 Bucket 列表中，點擊剛剛創建的 Bucket。然后在新頁面點擊“獲取API密鑰”。 彈出的頁面中包括了我們所需要的三個信息：唯一的 APP ID，一對SecretID和SecretKey（用于調用 COS API）。保管好這些信息，我們在稍后會用到。最后，在新的 Bucket 容器中創建文件夾，命名為photos。這點后面我們也會提到。最后，在新的 Bucket 容器中創建文件夾，命名為photos。這點后面我們也會提到。第八步：啟動「小相冊」的服務端在官方提供的鏡像中，小相冊示例的 Node 服務代碼已部署在目錄 /data/release/qcloud-applet-album下。進入該目錄，如果是你自己的服務器，請進入相應的文件夾。cd /data/release/qcloud-applet-album 在該目錄下，有一個名為 config.js 的配置文件（如下所示），按注釋修改對應的 COS 配置：module.exports = { // Node 監聽的端口號 port: 9993, ROUTE_BASE_PATH: /applet, cosAppId: 填寫開通 COS 時分配的 APP ID, cosSecretId: 填寫密鑰 SecretID, cosSecretKey: 填寫密鑰 SecretKey, cosFileBucket: 填寫創建的公有讀私有寫的bucket名稱, }; 另外，cd ./routes/album/handlers，修改 list.js，將 const listPath 的值修改為你的Bucket 下的圖片存儲路徑。如果是根目錄，則修改為 /。當前服務端的代碼中將該值設置為了 /photos ，如果你在第七步中沒有創建該目錄，則無法調試成功。小相冊示例使用 pm2 管理 Node 進程，執行以下命令啟動 node 服務：pm2 start process.json 第九步：配置「小相冊」通信域名接下來，在微信 web 開發者工具打開「小相冊」項目，并把源文件config.js中的通訊域名 host 修改成你自己申請的域名。將藍色框內的內容修改為自己的域名然后點擊調試，即可打開小相冊Demo開始體驗。最后提示一點，截止目前為止，微信小程序提供的上傳和下載 API 無法在調試工具中正常工作，需要用手機微信掃碼預覽體驗。但是由于沒有內測資格，我們暫時是沒辦法體驗了。嗯，就這點不夠爽，沒有內測邀請。我的同事還寫了另外3個demo的「小程序教程」，大家也可以看看。

為了更好的服務開發者，騰訊云已經提供了幾個小程序開發示例，有興趣的可以看下。地址：https://www.qcloud.com/act/event/yingyonghao.html

10月16日更新Treehouse 35小時學習體驗。/*********** What ************/前面的知友也提到了，小程序大部分和前端開發類似，所以，入門可以去學 前端開發入門： HTML, CSS和JavaScript的入門課程。因此本文不是小程序完整資源，更適合那些零基礎，或者入門新手來自學，而非針對那些已有一定編程背景的。很多微信小程序的文章分析指出，可能會讓前端開發程序員更搶手。而不僅僅是程序員能從中受益，對于產品經理、營銷運營和自媒體作者，學習前端開發也是非常有益的。（馮大輝的 如何把握「微信小程序」這一波紅利？ 李笑來的 微信小程序是誰的“通往財富自由之路”？）微信小程序大部分和前端開發類似或者通融，都是 HTML, CSS和JavaScript的入門課程。所以本文，也就對目前市面上，Web前端開發入門的公開課作為一個資源匯總吧。適合任何想入門前端開發的人，尤其是針對零基礎小白，推薦理由中做了些解釋和必要的刪減。推薦中很多都是系列課程，并不需要學完全部，所以正文也在標出了HTML, CSS和JavaScript的入門 部分。本文咨詢了南京大學計算機系的研究生，參考了知乎、Quora 的問答，以及過往學習者、資深程序員的點評，筆者查閱了相關課程的學生評論，尤其是差評，并且自己注冊，初步體驗部分課程，從而完成這篇總結評測的，但個人能力有限，若有疏漏錯誤，還望指正。文章太長，寫完自己都沒耐心看了，建議看“太長不看版”。/*********** 太長不看版 ************/注： 只能接受中文資源的，請直接拉倒結尾，抱歉只評測了一個中文資源。因為在我看來，有相當多的英文資源都非常優質好太多，僅從編程上說，是完全新手友好適合入門的。可以試著上treehouse的課，然后用中文參考著看，本身也是對英文的提高。所以對于那些不能使用英文資源的表示可惜，當然也十分建議打磨下自身英語技能，同樣是非常有用有價值的投資學英語有什么用？ - FreeGrit瀟灑毅行的回答。所以對于英文不夠的，此文提到的大部分，當然不能當做入門資料了。請直接跳轉結尾。非常推薦以下3個，可以按需選擇一個，或者幾個同時學習。1. Treehouse | Tracks 里面的 的 Front End Web Development 最推薦，非常適合零基礎新手（所有課程之最），交互式有趣的學習體驗，游戲化的點數、成就系統，甚至讓我開始的時候學上癮了。同時學習社區很活躍，提出的問題幾小時內就收到答案。2. Udacity 的 前端工程師（英文）由Google等公司合作制作，高質量，以實戰項目為導向的課程，基礎課程免費，適合有一定編程基礎的。但若要參與的實戰項目，收費較高。3. Coursera 上 約翰霍普金斯大學的 HTML, CSS, and Javascript for Web Developers https://www.coursera.org/learn/html-css-javascript-for-web-developers課程和Quiz都免費，在Coursera同類課中，好評率第一，1700+的學生中，僅4個差評，很適合新手，并且會講解一些實際項目的要求。以上都是全英文授課，僅有英文字幕，但課程的質量非常優秀。必須要中文資源參考的，可以參考正文部分第三類，中文資源。對于有一定基礎背景的，默認具有了科學上網、搜索技巧，可以在以下資源站按需搜索。1. Udemy 付費2. Udacity 基礎免費3. Coursera 基礎免費4. Edx 免費，但開課時間有限制5. Lynda 付費6. Treehouse, codeschool, codecademy月費/年費========其他可能有用的資源：1. 編程領域的知乎： Stack Overflow2. 開發工具（編輯代碼和編譯的工具）：WebStorm (憑借edu郵箱，可免費使用 https://www.jetbrains.com/student/ ），Sublime Text 33. 搜索類：一顆懂得搜索的心 + Google + 百度（中文，或者網盤資源）4. Learn to Code and Help Nonprofits FreeCodeCamp （@LALH 推薦） 免費的課程，實戰項目，很強的互動，順帶還能做公益。/*********** 完整評測版 ************/正文評測導航：（詳細評測還在更新完善中...）第一類： 交互式，在線編程課程第二類：傳統英文公開課第三類：中文資源================第一類： 交互式，在線編程課程評測的主要是Treehouse, codeschool 和 codecademy，這些相比于國內外公開課平臺，有時在于都可以在線編程，及時反饋結果，對新手很友好的交互式指導，比如會提示你具體哪步錯了。并且相比Coursera等理論型的公開課，這三家會加入實戰項目，更強調實操訓練。三家各有利弊，個人傾向Treehouse.1. Treehouse | Tracks里面的 Front End Web Development 10月16日止，共在這學了35小時。本身教學質量就很高，而且對零基礎新手非常友好，相比Coursera，一開始省去了開發環境安裝的過程。很多細節做得很棒，每個視頻的提問，智能填充代碼等，相比另外兩個網站更便捷，學習體驗更好。同時還有積分、排行榜、徽章等游戲化的系統，會讓學習者覺得有趣，獲得成就感、掌控感。除了學習體驗比另外兩家更好些，其課程的結構，是以職業職責劃分的，成為Tracks，包含多種需要的語言，而其他兩家是以語言劃分的。每個Track，含有一系列1-8小時的小課程，比如下圖第一個前端網頁開發（也就是我們需要的入門課程），整個系列就需要70小時。視頻下有課程的重點筆記，名詞解釋，額外的資源等。并且會給出windows和mac不同系統下的快捷鍵操作。每看完一個視頻，就會出現前幾天的學習記錄，激勵你趁熱打鐵。并且會增長相應的“技能點”，解鎖一些成就。需要通過每個章節的Quiz，你才能拿到成就社區比較活躍，課程中不明白的地方，可以在下面提問，就像知乎一樣，可以邀請同學，或者工作人員（moderator）,好幾次，都是1小時內就給出答案了。可能的一些缺點是，Code Challenge 的答案比較唯一，而且只能按照規定的一步步來，不過后面習慣了就好，也能發現自己具體哪一步錯了。這里code challenge 和 quiz 你是無法看答案的，自己做不出來，就去前個視頻下面提問，其實已經存在很多和你一樣的問題了，瀏覽這些問題和回復，也能學到很多。相比之下Codecademy的正確答案更多樣化些。使用Treehouse每個月25美元，可以免費試用7天，不喜歡就退訂。用這個鏈接，可以第一個月50%優惠：Plans & Sign Up2. Codeschool 其path 中的 HTML/CSS ， JaveScriptLearn HTML and CSSJavaScript programming: JavaScript for beginners只有極其少數的課程免費，29美元/月。界面顏值很高，但個人認為學習體驗上不及treehouse，習題有些重復冗長。同樣的，有積分、成就系統，每個測試滿分250分，當你提交前使用答案會扣除一定的分數。有時候字幕會遮住視頻中的操作。并且有人反應，國內上Codeschool的視頻，一些會加載很慢。下圖是Codeschool的小測試界面，每題滿分250分，每次查看提示（答案），會扣除一定的分數。和另外兩家一樣，也給出了在線編程-及時反饋的功能。有些不方便的是，雖然直接提供了回看視頻的鏈接，但需要整個頁面回過去，無法一邊回看一邊編程。這點上，codeacademy就更好些。Treehouse由于編程窗口永遠是新開的，可以一邊看視頻一邊編程，但Quiz的時候同樣不能直接返回。3. Codecademy, Learn to code其中的 HTML & CSS | Codecademy （就是默認推薦你學習的第一個課程），之后再學Introduction to JavaScript所有基礎課程免費，附加服務20美元/月秉承練習是學習編程的最好方式的邏輯，所以哪怕是一個很小的知識點，Codecademy 也會給你一個個操作的指示，直接通過實際操作來學習。同樣是交互式的學習方式，但是教學主要通過文字指示，而非視頻那么直觀，因此學起來可能更枯燥些。相比之下，優點是，練習題中的答案比較多樣化，而treehouse會更嚴格。============第二類：傳統英文公開課傳統公開課，主要以視頻教學為主，含有在線答題Quiz測驗，但沒有交互式學習那樣對新手非常友好的指導。并且更多需要學生自行閱讀課外材料，搜索來解決問題，對學生的自學能力有更高的要求。因此建議零基礎的，可以至少參加一個交互式學習，然后可以依需求選擇相應公開課。1. Udacity 的 前端工程師（英文）其中前2-3個項目的5-7個相關課程，屬于入門類，多帶帶上這些課程是免費的，參與實戰項目需要付費。付費服務還包括結業證書，一對一輔導等。注：視頻在國內可能無法觀看。課程是Google Amazon等企業聯合制作的,并且是以實戰項目為導向的，網上的評論都非常認可Udacity的質量。2. Coursera 上 約翰霍普金斯大學的 HTML, CSS, and Javascript for Web Developershttps://www.coursera.org/learn/html-css-javascript-for-web-developers學生評分 4.Quiz 小測驗免費。耗時：5周，4-6小時/周1700+的學生評論，只有4篇差評，并且一些是學生自身的問題，比如有學生期待所有的都由老師解釋，而不是自己去搜索。好評大多集中在，課程的結構易于理解，上課方式非常棒，很有趣，非常適合新手，并且會和你講解實際項目中的要求。另一個很大的優勢是，相比于大多Coursera的付費Quiz測試來說，這門課的Quiz全免費。Coursera上還有3門前端開發的入門課，但評價都不及上述約翰霍普金斯大學的。 a. 倫敦大學的Responsive Website Basics: Code with HTML, CSS, and JavaScript學生評分 4.耗時，4周，2-4小時/周Quiz小測驗免費。差評集中于，原本期待中級課程的學生，會失望的覺得太簡單。對于完全新手來說的問題，主要是測試中的一些題超綱，并且因為不知道術語，難以用google搜索到。 b. 香港科技大學的HTML, CSS and JavaScript學生評分 4.7 /5Quiz 小測驗需要付費。耗時：3周，3-7小時/周全英文，有英文字幕，是全棧工程師專項系列的第一課。綜合評論來看，對于有一定編程基礎的，會比較容易。相比倫敦大學的課，內容更多更詳細些。負面評論主要集中在，對于一些有背景的學生，這門課過于簡單、重復，而對于完全的新手，感覺這門課上的有些快，并且會有些過于理論學術化。 c. 杜克大學的Programming Foundations with JavaScript, HTML and CSS學生評分 4.Quiz 小測驗收費耗時：4周，3-7小時/周這門課評分最低。差評集中在，不適合新手，課程解釋不清楚，簡單問題復雜化，Quiz小測驗和課程相關度低。并且差評中也出現了一個17年的碼農，他也認為這門課對新手極其不友好，連他這樣有編程背景的，每周耗時都需要10小時/周，是宣傳上的2-3倍。3. UdemyLearn HTML: Web Design for BeginnersJavaScript programming: JavaScript for beginners這兩門都是人氣和評分排名較高的，涵蓋了HTML CSS和JS，也可以自行在Udemy上搜索綜合課程。Udemy上的課都是付費的。Udemy上 也有很多豐富的優秀資源。不過局限性在于：所有課程收費，一套20 - 40+小時的課程，價格為100-200美元左右那些學習人數多，評分高的，大多是一整套課程，因此對于初學者來說，在學人數多的高分的入門課程很少見。由于教學視頻大多數是個人制作，同一課程有很多教學視頻，對于新手來說難以辨別好壞，基本只能根據評論數、評分來選擇。所以相同價格，在Treehouse, codecademy, codeschool 這種更權威專業的平臺，會有對新手更友好、高效、高質量的學習體驗4. 其他edx上課程較少，并且有些課開課時間是固定的，無法立刻上。Lynda都是付費，一些學校是購買資源的，學生可以免費用。========第三類：中文資源1. 慕課網 的 Web前端工程師 路徑，前三塊：HTML和CSS基礎，JavaScript語言，jQuery2. 手冊類自助查詢學習： w3school 在線教程中文類搜集的比較少，因為英文類的做得非常出色了，而且大多英文課程并沒有想象中那么難，并且有英文字幕，當然首先推薦英文資源了。同時也歡迎補充中文類學習資源。===特別鳴謝，南京大學計算機系的X同學，像開發工具的推薦，幾大課程的推薦都有他的功勞。參考文獻知乎-WebStorm 有哪些過人之處？ WebStorm 有哪些過人之處？ - 前端開發wiki百度百科Treehouse, Codeacademy & Code School相應課程下的學生評論https://www.quora.com/What-do-professional-developers-think-of-online-programming-courses-such-as-Codecademy-or-Code-School========這兩天廢寢忘食地搜集整理，體驗評測，當然也是為了自己去學。寫完這篇資源匯總貼后，已經組織了個學習社群，大家互相督促一起組團學。感興趣的可以加個人公眾號ID： FreeGrit , 回復“JS”。會定期清理打雜人員，10月16日，已剩18人。FreeGrit是一個關于效率習慣、英語、理性讀書的原創公眾號。FreeGrit的個人簡介

1、小程序開發文檔https://mp.weixin.qq.com/debug/wxadoc/dev/index.html2、小程序設計指南https://mp.weixin.qq.com/debug/wxadoc/design/index.html3、小程序開發者工具https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

總結

以上是生活随笔為你收集整理的如何入门微信小程序开发,有哪些学习资料? 财富值60的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。