原創：從零開始，微信小程序新手入門寶典《一》

時間 2019-11-10

標籤原創開始微信程序新手入門寶典简体版

原文原文鏈接

爲了方便你們瞭解併入門微信小程序，我將一些可能會須要的知識，列在這裏，讓你們方便的從零開始學習；

一：微信小程序的特色

張小龍：張小龍全面闡述小程序，推薦通讀此文；php

小程序是一種不須要下載、安裝便可使用的應用，它出現了觸手可及的夢想，用戶掃一掃或者搜一下即開打開應用，也出現了用完即走的理念，用戶不用關心安裝太多應用的問題，應用隨處可用，但又無須安裝卸載。我當時是這樣來定義什麼是小程序的。

1：無需下載：咱們直接使用它，因此無須安裝是小程序最基礎的一個特性；
2：觸手可及：當咱們拿着智能手機接觸周邊的時候，咱們能夠經過手機直接得到信息，就是周邊的信息；
3：用完即走：對於周邊要完成的任務來講咱們須要的是用完即走；
4：無須卸載：小程序看起來是程序，可是它以徹底不一樣於過去APP的形狀出現，它有更靈活的應用組織形態；

二：微信小程序官方地址

1：官方工具：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714
2：簡易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/
3：設計指南：https://mp.weixin.qq.com/debug/wxadoc/design/index.html；在這裏查看如何符合設計標準，僅供參考，非強制性；
4：運營規範：https://mp.weixin.qq.com/debug/wxadoc/product/index.html；在這裏查看禁止事項；
5：接入指南：https://mp.weixin.qq.com/debug/wxadoc/introduction/index.html
6：支付文檔：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_3&index=1
7：客服消息：https://mp.weixin.qq.com/debug/wxadoc/introduction/custom.html?t=20161221css

8：特殊行業所需資質材料：https://mp.weixin.qq.com/debug/wxadoc/product/material.html?t=201714html

9：數據分析：https://mp.weixin.qq.com/debug/wxadoc/analysis/index.html?t=201714程序員

三：如何學習微信小程序es6

多看官方文檔，多看幾遍，遇到問題時再看，沒有問題時繼續看；

@jsh5css ：
一、首先要通讀一遍官方文檔，看看都有哪些東西，都能幹什麼；
二、對感興趣的部分，把例子摳出來放到IDE上面運行一下，運行沒問題就本身折騰折騰例子
三、本身寫個demo，遇到困難固然就來小程序聯盟啦，找找看有沒有相似的demo
四、天天進論壇看看有什麼新帖子

@Somnus13 ：
我以爲基礎知識必定要過關！！！
事件綁定 ajax請求本地存儲之類先搞清楚小程序以外是怎麼實現的
遇到問題看文檔，看不懂第二遍，再不行啥時候看懂再開始作
若是你在羣裏發問沒人理你，不是你們都解決不了就是你問的問題別人根本不想理
百度，谷歌，bing 別一直就放着，用起來
還有最重要的一點不要眼高手低，人家的demo下載下來跑起來而後看懂以後必定要本身嘗試寫一遍！
-------
正常思路啊首先是靜態頁面數據展現而後是頁面跳轉而後就會考慮帶參數實現詳情頁面而後。。。
找一個熟悉的邏輯開始模仿而後就會一步步往前走了

@xiaoyedeng ：多走彎路才能少走彎路

四：公司開發前必讀web

根據觀察，不少公司由於不瞭解小程序，而致使盲目跟進而盲目開發，沒法有效利用小程序的特性，甚至白白浪費了開發週期；
事前準備：ajax

微信小程序須要https請求，須要準備
1：備案的域名：因爲備案須要必定的時間，因此請事先準備
2：受承認的證書
https排查說明： http://www.wxapp-union.com/forum.php?mod=viewthread&tid=648

1：必須通讀運營規範；有須要禁止開發的事項須要瞭解；好比直播，遊戲，抽獎，排行榜等； json

常見拒絕情形：https://mp.weixin.qq.com/debug/wxadoc/product/reject.html?t=201714canvas

2：在微信下禁止的一些規則，在微信小程序中一樣不能涉及；好比誘導分享；小程序

3：暫未開放的類目，沒法申請，詳情請在本站搜索「服務範圍」的文章查看最新服務類目
推薦閱讀：跳坑指南《七十》如何讓微信小程序服務類目審覈經過
1月4號更新圖：

4：微信小程序的問答

1：小程序沒有入口，這和公衆號同樣。

2：小程序沒有官方商店

3：小程序不會有訂閱的關係

4：頗有限的通知能力，限制的很是嚴格

5：小程序不能分享到朋友圈，可是能夠分享到聊天和羣聊之中。

6：小程序不能作遊戲

7：用戶能搜索到小程序，但咱們會極力限制搜索能力，避免被濫用。

8：目前有提供的關聯是能夠在公衆號中看到該企業還有哪些小程序，反之亦然。

9：會輕量提醒用戶附近有哪些小程序存在，好比附近哪一家店提供小程序。

5：目前能看到的入口

線下掃碼：用戶能夠在小程序中使用掃一掃。
對話分享：用戶能夠分享小程序或其中的任何一個頁面給好友或羣聊。
消息通知：商戶能夠發送模板消息給接受過服務的用戶，用戶能夠在小程序內聯繫客服，支持文字和圖片。
小程序切換：用戶能夠在使用小程序的過程當中快速返回聊天。
歷史列表：用戶使用過的小程序會被放入列表，方便下次使用。
公衆號關聯：微信小程序可與公衆號進行關聯。
搜索查找：用戶可直接根據名稱或品牌搜索小程序。

6：遇到沒法解決或難以理解的難題時，請在官方社區內進行反饋：https://developers.weixin.qq.com

7：你必須經過微信認證，纔可使用微信支付等功能：認證指引：https://mp.weixin.qq.com/debug/wxadoc/product/renzheng.html?t=201714

五：我的開發前必讀

我的開發和學習的同窗，最關心的是我的額能不能申請和發佈，目前的答案是：不能發佈，可是能夠開發；

1：申請Appid：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=495；
擁有appid後，便可開始真機預覽；本方法僅用於測試和研究，沒法認證和審覈，請勿申請認證；

2：如何真機預覽：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1812

3：如何設置體驗者/開發者/體驗版本/：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1248

4：快捷鍵列表：

格式調整

Ctrl+S：保存文件（必須保存才能夠看到效果）

Ctrl+[， Ctrl+]：代碼行縮進

Ctrl+Shift+[， Ctrl+Shift+]：摺疊打開代碼塊

Ctrl+C Ctrl+V：複製粘貼，若是沒有選中任何文字則複製粘貼一行

Shift+Alt+F：代碼格式化

Alt+Up，Alt+Down：上下移動一行

Shift+Alt+Up，Shift+Alt+Down：向上向下複製一行

Ctrl+Shift+Enter：在當前行上方插入一行

Ctrl+Shift+F：全局搜索

光標相關

Ctrl+End：移動到文件結尾

Ctrl+Home：移動到文件開頭

Ctrl+i：選中當前行

Shift+End：選擇從光標到行尾

Shift+Home：選擇從行首到光標處

Ctrl+Shift+L：選中全部匹配

Ctrl+D：選中匹配

Ctrl+U：光標回退

界面相關

Ctrl + \\：隱藏側邊欄

Ctrl + m: 打開或者隱藏模擬器

5：開發工具項目區簡介：

配置信息：用於解決在後臺配置域名未生效的問題；
預覽：真機預覽
上傳：管理員上傳至後臺，設置體驗及審覈版本使用；
開發環境不校驗：爲了讓開發環境中使用appid時，不合規則的域名也能夠正常使用（好比本地或IP地址及未配置的域名）
壓縮代碼：爲了節約空間，小程序上限爲1M：參考： http://www.wxapp-union.com/portal.php?mod=view&aid=934
刪除項目：刪除相應的項目

代理：在這裏能夠設置代理，或取消代理；用於解決不少因代理而引起的問題；

選擇無appid，便可在沒有appid狀況下進行開發，可是沒法預覽；

項目名稱：隨意填寫

項目目錄：

1：若是你選擇了一個demo導入，請選擇app.json所在的根目錄文件夾，請勿選擇其上級文件夾，不然會報錯：找不到app.json；

2：若是你想新建一個項目，請先在電腦內新建一個空文件夾，選擇空文件夾便可，假如你選擇的不是空文件夾，可能沒法看到新建quickstart項目；
快速生成項目目錄技巧：在app.json內輸入路徑後保存，便可生成相應路徑的完整文件目錄，防止因js或json文件爲空而引起的一系列報錯

6：後臺配置域名：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=803；
必須配置域名後，纔可使用配置的域名，好比你須要請求XX地址的數據，必須在後臺設置了域名以後，才能夠真機請求數據；
必須https的域名才能夠請求，若是出現https的問題，請查詢排查：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=648；

六：新手學習可選系列：任選其一便可；

特別提示：微信小程序開發者工具版本及推出日期：

介紹目的：據此日期，能夠避免本身受到老教程的誤導，請優先閱讀/使用新日期的教程/demo；在教程中遇到困惑時，請對比官方教程，假如沒法解決，請請教熟悉的同窗或發帖求助；
1014版本：10月14日推出：
1028版本：10月28日推出：
1123版本：11月23日推出：最新版本 0.11.112200 更新內容詳情
1221版本：12月21日推出： -0.11.1221版本新增功能：客服消息使用指南
 微信小程序0.11.122100 版本更新詳情
 微信小程序-0.11.1221版本新增細節點：掃碼接口，微信支付及分享的調試
1230測試版本：12月30日推出：開發者工具測試版本下載：12月30日更新

如下系列僅供參考，有效期僅限於2017年1月期間，你能夠在新手入門教程內看到更多：http://www.wxapp-union.com/portal.php?mod=list&catid=7

開發詳解系列：

程序員實戰系列

學習記錄系列

現學現賣系列

至此，你應該會修改一些基本的屬性了，剩下的開始遇到問題，開始跳坑：如下是最新的坑十個：

你能夠在這裏看到整個跳坑系列：http://www.wxapp-union.com/forum.php?mod=forumdisplay&fid=2&filter=typeid&typeid=3

七：如何解決學習過程當中的問題

1：看文檔，尤爲是版本更新後，可能文檔已經更新，附上了你問題的說明；
2：羣內問，羣是一個比較好的途徑，可是隻能解決較爲簡單的問題；
3：論壇搜索；你能夠在本站或官方社區內搜索相應的關鍵詞，來查看是否有解決方案；你能夠在這裏查看搜索方法：http://www.wxapp-union.com/forum.php?mod=viewthread&tid=1824
4：發帖詢問，在綜合交流區內發帖詢問，並@幾個大神；5：常見錯誤及基本排除方法

1：ES6；使用es6可能致使安卓端真機調試時不少問題出現，還有其餘未知問題；緣由未知；

2：字母拼錯，包括字母拼寫錯誤，大小寫沒有注意；微信小程序中，有大量這樣的代碼示例，從中間冒出一個大寫，好比支付中的appId

3：官方文檔示例代碼有誤，有時官方文檔示例代碼也會出現問題，好比大小寫出錯，或者其餘缺乏參數等問題；

4：https，這個坑目前遇到的人最多，首先說明一下，工具的這個設置，，這個設置有一些獨特的做用，讓你可讓本地避開一些限制；可是這個設置對真機無效，因此假如存在https問題，是否勾選並影響；仍然須要按貼排查： http://www.wxapp-union.com/forum.php?mod=viewthread&tid=648

8：重啓/重裝工具大法：有時候編輯器會出現一些莫名其妙的BUG，好比昨天仍是好的，今天打開各類問題等等，能夠考慮從新編譯或屢次重啓工具或重啓電腦；

10：前人經驗：有不少人遇到了不少問題，你能夠在版塊的問答分類下看看其餘人遇到的問題及如此解決的； http://www.wxapp-union.com/forum.php?mod=forumdisplay&fid=2&page=2&filter=author&orderby=dateline&typeid=16

11：沒法登錄：參考 @M-信念同窗的建議：能夠稍微等等；當出現賬號登錄問題時，能夠嘗試使用他人微信號，或是諮詢其餘人是否也遇到了相同的狀況，不要着急；

12：代理設置；代理設置應該是一個隱藏比較深的坑，可是不少人被坑過，假如你的機器設置了代理，開發者工具可能會也跟着默認帶來代理，而後會接踵而來不少登錄，空白等問題；

13：使用搜索；如今本站聚合了大量的微信小程序相關內容，能夠考慮使用本站的搜索，來獲取本身想找的東西或用於解決問題，搜索時，請使用主要關鍵詞，或相近關鍵詞進行搜索，而不要直接搜索一句話，好比你須要appid，你能夠搜索「appid」，你遇到了登錄問題，應該搜索「登錄」，真機預覽遇到了問題，能夠搜索「真機」，遇到了上傳問題，能夠搜索「uploadfile」

14：微信版本問題，伴隨微信的版本更新，不一樣的微信版本之間可能會出現不一樣的未知BUG；你能夠在這裏查看最新微信版本：weixin.qq.com