注冊

微信小程序怎么開發(fā)?快速開發(fā)一個小程序教程

2020-09-27
導讀:注冊小程序賬號,下載IDE 官網(wǎng)注冊https://mp.weixin.qq.com/,并下載IDE。 官方文檔一向都是最好的學習資料。 注意: (1)注冊賬號之后會有一個appid,新建項目的時候需要填上,不然很多功能...

  注冊小程序賬號,下載IDE

  官網(wǎng)注冊https://mp.weixin.qq.com/,并下載IDE。

  官方文檔一向都是最好的學習資料。

  注意:

  (1)注冊賬號之后會有一個appid,新建項目的時候需要填上,不然很多功能是用不了的,比如不能預覽,不能上傳代碼等等。

  (2)如果你注冊過微信公眾號的話,一定要注意,微信公眾號和小程序是兩個賬號,二者的appid也是不同,小程序開發(fā)必須使用小程序的appid。

  小程序框架介紹和運行機制

  1.我們建立了“普通快速啟動模板”,然后整個項目目錄如下:
微信小程序怎么開發(fā)?快速開發(fā)一個小程序教程

  2.app.js

  整個項目的啟動文件,如注釋寫的onlaunch方法有三大功能,瀏覽器緩存進行存和取數(shù)據(jù);用登陸成功的回調(diào);獲取用戶信息。

  globalData是定義整個項目的全局變量或者常量。

  3.app.json

  整個項目的配置文件,比如注冊頁面,配置tab頁,設置整個項目的樣式,頁面標題等等;

微信小程序怎么開發(fā)?快速開發(fā)一個小程序教程

  !注意:小程序啟動默認的第一個頁面,就是app.json的pages中的第一個頁面。

  4.pages

  小程序的頁面組件,有幾個頁面就會有幾個子文件夾。比如快速啟動模板,就有兩個頁面,index和logs

  5.打開index目錄

  可以看到有三個文件,其實和我們web開發(fā)的文件是一一對應的。

  index.wxml對應index.html;

  index.wxss對應index.css;

  index.js就是js文件。

  一般我們還會給每個頁面組件添加一個.json文件,作為該頁面組件的配置文件,設置頁面標題等功能

  6.雙擊index.js文件

  (1)var app = getApp();

  引入整個項目的app.js文件,用來取期中的公共變量等信息。

  如果要使用util.js工具庫中的某個方法,在util.js中module.exports導出,然后在需要的頁面中require即可得到。

  (2)比如,我們要獲取豆瓣電影的時候,我們需要調(diào)用豆瓣的api;我們先在app.js中的gloabData中定義doubanBase

  然后在index.js中使用app.globaData.doubanBase即可取到這個值。

  當然這些常量你也可以在頁面需要的時候,再用寫死的值,但是為了整個項目的維護,還是建議把這種公用參數(shù)統(tǒng)一寫在配置文件中。

  (3)接下來在整個page({})中,第一個data,就是本頁面組件的內(nèi)部數(shù)據(jù),會渲染到該頁面的wxml文件中,類似于vue、react~

  通過setData修改data數(shù)據(jù),驅(qū)動頁面渲染

  (4)一些生命周期函數(shù)

  比如onload(), onready(), onshow(), onhide()等等,監(jiān)聽頁面加載、頁面初次渲染、頁面顯示、頁面隱藏等等

  更多的可以查官網(wǎng)API。其中用的最多的就是onload()方法,和onShareAppMessage()方法(設置頁面分享的信息)

  7 .wxml模板的使用。

  比如本項目電影頁面,就是以最小的星級評價組件wxml當做模板,star到movie到movie-list,一級一級的嵌套使用。

  star-template.wxml頁面寫好name屬性;然后import引入的時候通過name獲得即可

  8.常用的wxml標簽

  view,text,icon,swiper,block,scroll-view等等,這些標簽直接查官網(wǎng)文檔即可

  小程序框架、各個頁面以及發(fā)布上線的注意點

  1.整個框架中的一些注意點

  (1)整個wxml頁面,最底層的標簽是。

  (2) 每個頁面頂部導航欄的顏色,title在本頁面的json中配置,如果沒有配置的話,取app.json中的總配置。

  (3)json中不能寫注釋,不然會報錯的。

  (4)路由相關(guān)

  1)使用wx.SwitchTab跳轉(zhuǎn)tab頁的話,在app.json中除了注冊pages頁面,還需要在tabBar中注冊tab頁,才能生效。

  注意:tab最多5個,也就是我們說的頭部或者底部最多5個菜單。其他的頁面只能通過其他路由方法打開。

  2)navigateTo是跳到某個非tab頁,比如歡迎頁,電影詳情頁,城市選擇頁;在app.json中注冊后,不能在tabBar里注冊,不然同樣也是不能跳轉(zhuǎn)的。

  3)reLaunch跳轉(zhuǎn),新開的頁面左上角是沒有退回按鈕的,本項目只用了一次,切換城市的時候。

  (5)頁面之間傳遞參數(shù)

  參數(shù)寫在跳轉(zhuǎn)的url之中,然后另一個頁面在onload方法中的傳參option接收到。如下傳遞和獲取id

  (6)data-開頭的自定義屬性的使用

  比如wxml中我們怎么寫

  點擊的事件對象可以這么取,var postId = event.currentTarget.dataset.postid;

  注意: 大寫會轉(zhuǎn)換成小寫,帶_符號會轉(zhuǎn)成駝峰形式

  (7)事件對象event,event.target和event.currentTarget的區(qū)別:

  target指的是當前點擊的組件 和currentTarget 指的是事件捕獲的組件。

  比如,輪播圖組件,點擊事件應該要綁定到swiper上,這樣才能監(jiān)控任意一張圖片是否被點擊,

  這時target這里指的是image(因為點擊的是圖片),而currentTarget指的是swiper(因為綁定點擊事件在swiper上)

  (8)使用免費的網(wǎng)絡接口:

  本項目中用到了 和風天氣api,騰訊地圖api,百度地圖api,豆瓣電影api,聚合頭條新聞api等,具體用法可以看各自官網(wǎng)的接口文檔,很詳細的

  注意:免費接口是有訪問限制的,所以如果用別人的組件用了這種接口的話,最好還是自己注冊一個新的key替換上

  附上一個免費接口大全:

  https://github.com/jokermonn/-Api

您可能感興趣:
重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個小商店

第三部分:如何登錄小商店

第四部分:開店任務常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)