|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 微信小程序已經推出很久了,最近開始有時間搗鼓一下,由于從來沒有寫過任何前端代碼,所以這篇博文也是總結自己摸索調研的過程,希望對像我一樣前端0經驗的同學有所幫助。1. 環境小程序發布流程如下圖:
小程序發布流程 1.1 微信認證根據用戶不同需求, 對注冊要求也不同:
類型1\2的用戶, 首先需要一個 類型3的用戶只能下載微信web開發者IDE, 通過模擬器開發體驗無app id功能受限的小程序.用于注冊小程序的企業帳號可添加
配置服務器 1.2 小程序開發工具1.2.1 微信web開發者工具微信提供了
IDE 1.2.2 webstorm由于官方IDE代碼補全和體驗不是很好, 例如每打開一個文件就新開一個tab\背景色無法調等等, 強迫癥開發者可以選擇使用webstorm作為IDE+微信IDE只作為模擬器.webstorm還有很多感人的小細節, 比如hex顏色可以在左側預覽.
webstorm hex 2. 社區資源匯總微信公眾平臺 官方的; 像我一樣前端0基礎的同學可以先大體看一下官方平臺上的簡易教程\ 框架\ 組件\ API\ 工具的介紹, 對整體有個基本的概念, 然后再從demo入手, 一邊研究別人的demo 一邊寫自己的demo, 遇到不會的問題尋求搜索引擎和社區的幫助. 3. 框架由于官方文檔已經有框架等的介紹, 我這里通過自己的理解總結一下, 看到這的同學如果還沒讀官方文檔可以先看一下我的理解, 后續再自己摸索時形成自己的理解. 3.1 簡介通過官方demo可以看到根文件夾就是項目名, 其下有
框架示例
3.2 mvc角度從 3.3 各類型文件都干了什么3.3.1 app.jsApp()是小程序的生命周期方法, 可根據小程序生命周期的各個階段進行業務邏輯, 還可以在這里設置全局變量.
app.js 3.3.2 app.json
app.json
3.3.3 app.wxss
app.wxss app.wxss用于設置全局樣式, .xxx對應.wxml中相應UI控件所對應的class名.
app.wxml 4. 模塊化4.1 js項目中與業務緊密相關的模塊作為components放在pages下, 業務間通用的模塊放到IDK下, 與業務無關的放到IDP下.
模塊化-代碼結構 若pages中的類B引用IDK中的類A, 可如下在類B中創建一個A的實例, 并在類B的Page()方法中引用. var aObj = require('../../IDK/A.js')4.2 wxss公用的UI控件樣式可寫到app.wxss中, 例如loading控件等; 只與page相關的UI樣式可寫到各page對應的wxss中.
wxss模塊化 5. 寫demo過程總結由于是前端小白, 寫demo時是面向官方文檔編程&面向百度\面向谷歌\面向stackoverflow編程...遇到問題邊查邊解決, 最終解決各種問題誕生出demo小崽子時是非常有成就感的哈. 下面將我在寫demo中遇到的一些場景總結一下. 5.1 涉及到的應用場景5.1.1 點擊事件
點擊事件 bindTap="響應點擊事件的方法名" 5.1.2 滾動視圖
scroll-view
5.1.3 列表數據綁定< block wx:for-items="{{數據源們}}" wx:for-item="一個數據"> 綁定數據源; 5.1.4 網絡請求可用微信小程序API發送get\post請求,
wx.request
fetch-then 5.2 遇到的坑5.2.1 模擬器上看不到圖片微信小程序bug, 模擬器上有時圖片被攔截無法顯示 5.2.2 真機網絡請求數據為空需要在小程序運營配置平臺中配置請求域名, 并需要交500注冊費之后才可以支持真機網絡請求. 應用場景雜談微信官方對小程序的定位是——微信小程序是一種全新的連接用戶與服務的方式,它可以在 以上就是微信小程序調試的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!