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

為了方便大家了解并入門微信小程序,我將一些可能會需要的知識,列在這里,讓大家方便的從零開始學習;

一:微信小程序的特點

張小龍:張小龍全面闡述小程序,推薦通讀此文;

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

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=20161221
8:特殊行業所需資質材料:https://mp.weixin.qq.com/debug/wxadoc/product/material.html?t=201714
9:數據分析:https://mp.weixin.qq.com/debug/wxadoc/analysis/index.html?t=201714

三:如何學習微信小程序

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

@jsh5css : 1、首先要通讀一遍官方文檔,看看都有哪些東西,都能干什么; 2、對感興趣的部分,把例子摳出來放到IDE上面運行一下,運行沒問題就自己折騰折騰例子 3、自己寫個demo,遇到困難當然就來小程序聯盟啦,找找看有沒有類似的demo 4、每天進論壇看看有什么新帖子

@Somnus13 : 我覺得基礎知識一定要過關!!! 事件綁定 ajax請求 本地存儲之類 先搞清楚小程序之外是怎么實現的 遇到問題 看文檔,看不懂第二遍,再不行 啥時候看懂再開始做 如果你在群里發問沒人理你,不是大家都解決不了就是你問的問題別人根本不想理 百度,谷歌 ,bing 別一直就放著,用起來 還有最重要的一點 不要眼高手低,人家的demo下載下來跑起來 然后看懂之后一定要自己嘗試寫一遍!
——————
正常思路啊 首先是靜態頁面數據展示 然后是頁面跳轉 然后就會考慮帶參數實現詳情頁面 然后。。。 找一個熟悉的邏輯 開始模仿 然后就會一步步往前走了

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

四:公司開發前必讀

根據觀察,很多公司因為不了解小程序,而導致盲目跟進而盲目開發,無法有效利用小程序的特性,甚至白白浪費了開發周期;事前準備:

微信小程序需要https請求,需要準備
1:備案的域名:由于備案需要一定的時間,所以請事先準備
2:受認可的證書
https排查說明: http://www.wxapp-union.com/forum.php?mod=viewthread&tid=648

1:必須通讀運營規范;有需要禁止開發的事項需要了解;比如直播,游戲,抽獎,排行榜等;
常見拒絕情形:https://mp.weixin.qq.com/debug/wxadoc/product/reject.html?t=201714
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
5:重啟/重裝工具大法:有時候編輯器會出現一些莫名其妙的BUG,比如昨天還是好的,今天打開各種問題等等,可以考慮重新編譯或多次重啟工具或重啟電腦;
6:前人經驗:有很多人遇到了很多問題,你可以在版塊的問答分類下看看其他人遇到的問題及如此解決的;http://www.wxapp-union.com/forum.php?mod=forumdisplay&fid=2&page=2&filter=author&orderby=dateline&typeid=16
7:無法登陸:參考 @M-信念 同學的建議:可以稍微等等;當出現帳號登陸問題時,可以嘗試使用他人微信號,或是咨詢其他人是否也遇到了相同的情況,不要著急;
8:代理設置;代理設置應該是一個隱藏比較深的坑,但是很多人被坑過,假如你的機器設置了代理,開發者工具可能會也跟著默認帶來代理,然后會接踵而來很多登陸,空白等問題;

9:使用搜索;現在本站聚合了大量的微信小程序相關內容,可以考慮使用本站的搜索,來獲取自己想找的東西或用于解決問題,搜索時,請使用主要關鍵詞,或相近關鍵詞進行搜索,而不要直接搜索一句話,比如你需要appid,你可以搜索“appid”,你遇到了登陸問題,應該搜索“登陸”,真機預覽遇到了問題,可以搜索“真機”,遇到了上傳問題,可以搜索“uploadfile”
10:微信版本問題,伴隨微信的版本更新,不同的微信版本之間可能會出現不同的未知BUG;你可以在這里查看最新微信版本:weixin.qq.com

5:查詢官方問答:最新的官方問答系列:

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,283評論 6 530
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 97,947評論 3 413
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 175,094評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,485評論 1 308
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,268評論 6 405
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,817評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,906評論 3 440
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,039評論 0 285
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,551評論 1 331
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,502評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,662評論 1 366
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,188評論 5 356
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,907評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,304評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,563評論 1 281
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,255評論 3 389
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,637評論 2 370

推薦閱讀更多精彩內容