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

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

一:微信小程序的特點

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

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

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



5:查詢官方問答:最新的官方問答系列:
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章