小程序入門教程

• • 1， 建議先去看官方文檔
  • 2，說說app.json這個文件
  • 3、app.js
  • 4、點擊事件
  • 5、跳轉頁面
  • 最后要說一下我踩的一個大坑，樣式問題

1， 建議先去看官方文檔

微信小程序官方文檔
官方文檔里有下載微信開發者工具的地址，他讓我們自己去注冊一個小程序，其實我們可以不用注冊，在新建小程序的時候會讓我們輸APPID，我們就直接點擊下面的使用測試號，他就會為我們生成一個APPID，我們就可以來學習小程序啦（當然有需要就可以自己去注冊一個APPID，也不麻煩，一下就注冊好了）

2，說說app.json這個文件

1， app.json里面我們最常用到的就是"pages"這個屬性。
誰在第一個，那個頁面就是主頁面，比如我這個是login.wxml是第一個頁面，我一編譯，左邊顯示的永遠是這個login.wxml，我們在開發新的頁面的時候就要把我們的新頁面放在第一個。

{"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， 當我們需要新建頁面的時候，我們只需要在這里添加這個路徑就行，他會自動幫我們建好。比如我想建一個personal.wxml這個頁面，我們只需要在pages里添加"pages/personal/personal",，就可以了。

3， 在這里要說一下，因為每個頁面都可以要有3 4個文件，所以為了方便找，我們都是一個頁面單獨一個文件夾，這樣便于我們梳理目錄。

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

3、app.js

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

在里面定義了一個data，然后定義了一個ctx，這個ctx是我后臺的端口，我在這里定義了，在其他的js里面調用一些就ok了，到時候這個后臺路徑和端口改了的話，我只需要改這里，就不需要每個js都去改，這樣就解耦合了。
調用

在我們要用的js的Page的上方調用，然后ctx在這個js就可以隨便用啦

4、點擊事件

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

2， 用法
這個是wxml：

這個是預覽：

這個是js：

5、跳轉頁面

常用的是

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

這兩個區別是navigateTo跳轉后，頁面上面是一個返回上一個頁面的按鈕，返回是返回上一個頁面

而redirectTo是有一個home的標識，他會讓頁面回到我們的在app.json中第一個pages，就是我們的主頁面。

由于我也是剛學，暫時就記錄這么多，以后學的更多了，再來記錄。

最后要說一下我踩的一個大坑，樣式問題

我們新建了一個新的小程序項目以后會發現不管是什么都沒有樣式。我當時還想了很久，不會要我們開發者自己寫樣式吧，那這也太坑了。后來才發現是我沒有引入樣式。
官方的demo
把這個下載下來，把dist目錄下的app.wxss里面的樣式全部放到我們項目的app.wxss里就可以了。
這個demo我們還可以參考。新開一個微信開發者工具，點擊導入，然后導入dist目錄，就可以運行起來了。在調試器的console中可以看到頁面的路徑

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。