小程序入門(mén)教程

• • 1， 建議先去看官方文檔
  • 2，說(shuō)說(shuō)app.json這個(gè)文件
  • 3、app.js
  • 4、點(diǎn)擊事件
  • 5、跳轉(zhuǎn)頁(yè)面
  • 最后要說(shuō)一下我踩的一個(gè)大坑，樣式問(wèn)題

1， 建議先去看官方文檔

微信小程序官方文檔
官方文檔里有下載微信開(kāi)發(fā)者工具的地址，他讓我們自己去注冊(cè)一個(gè)小程序，其實(shí)我們可以不用注冊(cè)，在新建小程序的時(shí)候會(huì)讓我們輸APPID，我們就直接點(diǎn)擊下面的使用測(cè)試號(hào)，他就會(huì)為我們生成一個(gè)APPID，我們就可以來(lái)學(xué)習(xí)小程序啦（當(dāng)然有需要就可以自己去注冊(cè)一個(gè)APPID，也不麻煩，一下就注冊(cè)好了）

2，說(shuō)說(shuō)app.json這個(gè)文件

1， app.json里面我們最常用到的就是"pages"這個(gè)屬性。
誰(shuí)在第一個(gè)，那個(gè)頁(yè)面就是主頁(yè)面，比如我這個(gè)是login.wxml是第一個(gè)頁(yè)面，我一編譯，左邊顯示的永遠(yuǎn)是這個(gè)login.wxml，我們?cè)陂_(kāi)發(fā)新的頁(yè)面的時(shí)候就要把我們的新頁(yè)面放在第一個(gè)。

{"pages":["pages/login/login","pages/personal/personal","pages/index/index","pages/logs/logs"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"style": "v2","sitemapLocation": "sitemap.json" }

2， 當(dāng)我們需要新建頁(yè)面的時(shí)候，我們只需要在這里添加這個(gè)路徑就行，他會(huì)自動(dòng)幫我們建好。比如我想建一個(gè)personal.wxml這個(gè)頁(yè)面，我們只需要在pages里添加"pages/personal/personal",，就可以了。

3， 在這里要說(shuō)一下，因?yàn)槊總€(gè)頁(yè)面都可以要有3 4個(gè)文件，所以為了方便找，我們都是一個(gè)頁(yè)面單獨(dú)一個(gè)文件夾，這樣便于我們梳理目錄。

4， 至于window里面的東西都是一樣小程序樣式的一些配置，大家可以去看文檔，這里就不一一介紹了。

3、app.js

app.js里面，我們可以配置一些全局的一些變量。
比如我是這樣用的：

在里面定義了一個(gè)data，然后定義了一個(gè)ctx，這個(gè)ctx是我后臺(tái)的端口，我在這里定義了，在其他的js里面調(diào)用一些就ok了，到時(shí)候這個(gè)后臺(tái)路徑和端口改了的話(huà)，我只需要改這里，就不需要每個(gè)js都去改，這樣就解耦合了。
調(diào)用

在我們要用的js的Page的上方調(diào)用，然后ctx在這個(gè)js就可以隨便用啦

4、點(diǎn)擊事件

1， 常用的就是bindtap，catchtap；
(1) 相同點(diǎn)：首先他們都是作為點(diǎn)擊事件函數(shù)，就是點(diǎn)擊時(shí)觸發(fā)。在這個(gè)作用上他們是一樣的，可以不做區(qū)分。
(2) 不同點(diǎn)：他們的不同點(diǎn)主要是bindtap是冒泡的，catchtap是非冒泡的。

2， 用法
這個(gè)是wxml：

這個(gè)是預(yù)覽：

這個(gè)是js：

5、跳轉(zhuǎn)頁(yè)面

常用的是

wx.navigateTo({url: '../personal/personal?user_id=111'　　// 頁(yè)面 A})wx.redirectTo({url: '../personal/personal?user_id=111'　　// 頁(yè)面 A})

這兩個(gè)區(qū)別是navigateTo跳轉(zhuǎn)后，頁(yè)面上面是一個(gè)返回上一個(gè)頁(yè)面的按鈕，返回是返回上一個(gè)頁(yè)面

而redirectTo是有一個(gè)home的標(biāo)識(shí)，他會(huì)讓頁(yè)面回到我們的在app.json中第一個(gè)pages，就是我們的主頁(yè)面。

由于我也是剛學(xué)，暫時(shí)就記錄這么多，以后學(xué)的更多了，再來(lái)記錄。

最后要說(shuō)一下我踩的一個(gè)大坑，樣式問(wèn)題

我們新建了一個(gè)新的小程序項(xiàng)目以后會(huì)發(fā)現(xiàn)不管是什么都沒(méi)有樣式。我當(dāng)時(shí)還想了很久，不會(huì)要我們開(kāi)發(fā)者自己寫(xiě)樣式吧，那這也太坑了。后來(lái)才發(fā)現(xiàn)是我沒(méi)有引入樣式。
官方的demo
把這個(gè)下載下來(lái)，把dist目錄下的app.wxss里面的樣式全部放到我們項(xiàng)目的app.wxss里就可以了。
這個(gè)demo我們還可以參考。新開(kāi)一個(gè)微信開(kāi)發(fā)者工具，點(diǎn)擊導(dǎo)入，然后導(dǎo)入dist目錄，就可以運(yùn)行起來(lái)了。在調(diào)試器的console中可以看到頁(yè)面的路徑

總結(jié)

以上是生活随笔為你收集整理的微信小程序入门的一些建议，替大家踩坑的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。