2022-06-15 分類: 微信小程序
2016年9月1日,微信小程序終于正式發布了,對于開發者朋友來說,今后都可以申請創建自己的小程序。那么微信小程序怎么申請?下面創新互聯的小編將詳細分享從零開始做一個微信小程序的實戰開發教程,希望操作步驟,對初期開發者會有所幫助。
首先,你需要注冊一個小程序賬號。需要用一個沒注冊過公眾號的郵箱注冊。注冊過程中需要很多認證,比較繁瑣。如果暫時只是試水、沒有發布的打算,那么只要完成基本信息填寫就可以,不需要完成微信認證。
之后,就可以在公眾平臺使用注冊的帳戶進行登錄。
然后,在主頁面左邊列表中點擊設置,再設置頁面中選開發設置,就可以看到AppID。而AppID 可以用于在開發工具中進行登記,使用開發工具的高級功能。你可以到官網下載開發工具。
打開開發者工具,選擇小程序選項,然后直接點擊「添加項目」按鈕。我們可以在這個步驟,填入剛才注冊的時候使用的 AppID。
如果項目目錄中的文件是個空文件夾,會提示是否創建 quick start 項目。
選擇「是」,開發者工具會幫助我們在開發目錄里生成一個簡單的 Demo。
這個 Demo 擁有一個完整的小程序的大概框架。
1. 框架
我們首先看一下官方提供的 Demo 含有的目錄:
app.js:小程序邏輯、生命周期、全局變量。
app.json:小程序公共設置、導航欄顏色等,不可以注釋。
app.wxss:小程序公共樣式,類似 CSS 。
小程序頁面構成類似這樣:
每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成,如:index.js、index.wxml、index.wxss、index.json。
微信小程序中的每一個頁面的路徑和頁面文件名,都需要寫在app.json的pages中,且pages數組中的第一個頁面是小程序的首頁。
這四個文件按照功能可以分成三個部分:
配置:json 文件
邏輯層:js 文件
視圖層:wxss.wxml 文件
在 iOS 上,小程序的邏輯代碼運行于 JavaScriptCore 中,而在 Android上,這個任務則是交給 X5 內核來完成。
在 開發工具上, 小程序的 JavaScript 代碼是運行在 NW.js(Chrome 內核) 中。這也導致開發工具上的效果跟實際效果有所出入。
2. 組件
微信提供了許多組件,主要分為八種:
這其中,包含了view、scroll-view、button、form等普通常用的組件,也提供了地圖mapcanvas
組件主要屬于視圖層,通過 WXML 來進行結構布局,類似于 HTML。樣式則通過 WXSS 來定義和修改,它的語法和使用都近似 CSS。
組件使用語法實例:
3. API
網絡
媒體
數據
位置
設備
界面
開發接口
網絡請求接口包含了普通的 HTTPS 請求,支持上傳、下載、Socket,基本上滿足了我們開發中所需要的網絡需求。
這些 API 屬于邏輯層,寫在 JS 邏輯文件中。
可以到官方文檔 – API 查看其它 API 的使用方法。
1. 模擬器調試
我們可以在微信提供的開發者工具中,使用模擬器查看小程序運行的效果。
之前我們提過,小程序的運行底層不同,這也導致在模擬器上的效果,會與在手機上運行有些差異。
2. 真機調試
在左邊的選項欄中,選擇項目,然后點預覽會生產一個二維碼,用管理員微信號掃一掃,就可以在真機上看實際效果。
微信小程序怎么申請 從零開始做一個微信小程序教程
實戰:跑步小程序
真機運行截圖(運行于 iPhone 7,微信版本:6.3.30):
首先實現一個計時器進行 計時,通過wx.getLocation獲取坐標,把獲取到的坐標存在一個數組中,通過坐標每隔一段時間獲取里程,進行累加得到總里程,同時也通過坐標點進行連線。存在的問題:
因為目前找不到在地圖上畫連線的方法,所以采用了在地圖上貼小紅點圖的方法顯示大概跑步路徑,路徑比較粗糙;
雖然采用了 API 里面的火星坐標 GCJ02 類型,但是獲取的坐標跟國際坐標差不多,依然存在著偏差。
我已經把全部代碼放在 GitHub 上,大家可以下載來看看或者先 Star 起來,我以后還會進行一些優化更新。現在只是一個學習 Demo,大家溝通學習,實際應用還需更多優化。
文章題目:微信小程序怎么申請?
轉載源于:http://m.newbst.com/news/167595.html
網站建設、網絡推廣公司-創新互聯,是專注品牌與效果的網站制作,網絡營銷seo公司;服務項目有微信小程序等
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容