一.注冊小程序賬號，下載IDE

1.官網注冊https://mp.weixin.qq.com/，并下載IDE。

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

注意：

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

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

?

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

1.我們建立了“普通快速啟動模板”，然后整個項目目錄如下：

2.app.js

整個項目的啟動文件，如注釋寫的onlaunch方法有三大功能，瀏覽器緩存進行存和取數據；用登陸成功的回調；獲取用戶信息。

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

?

3.app.json

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

！注意：小程序啟動默認的第一個頁面，就是app.json的pages中的第一個頁面哦。

4.pages

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

5.打開index目錄

可以看到有三個文件，其實和我們web開發的文件是一一對應的。

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）比如，我們要獲取豆瓣電影的時候，我們需要調用豆瓣的api；我們先在app.js中的gloabData中定義doubanBase

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

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

?

（3）接下來在整個page({})中，第一個data，就是本頁面組件的內部數據，會渲染到該頁面的wxml文件中，類似于vue、react哦~

通過setData修改data數據，驅動頁面渲染

（4）一些生命周期函數

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

更多的可以查官網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等等，這些標簽直接查官網文檔即可

?

?

三.小程序框架、各個頁面以及發布上線的注意點

?

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

（1）整個wxml頁面，最底層的標簽是<page></page>哦。

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

（3）json中不能寫注釋哦，不然會報錯的。

（4）路由相關

1）使用wx.SwitchTab跳轉tab頁的話，在app.json中除了注冊pages頁面，還需要在tabBar中注冊tab頁，才能生效哦。

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

2）navigateTo是跳到某個非tab頁，比如歡迎頁，電影詳情頁，城市選擇頁；在app.json中注冊后，不能在tabBar里注冊哦，不然同樣也是不能跳轉的哦。

3）reLaunch跳轉，新開的頁面左上角是沒有退回按鈕的，本項目只用了一次，切換城市的時候哦。

（5）頁面之間傳遞參數

參數寫在跳轉的url之中，然后另一個頁面在onload方法中的傳參option接收到。如下傳遞和獲取id

?

（6）data-開頭的自定義屬性的使用

比如wxml中我們怎么寫?

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

注意： 大寫會轉換成小寫，帶_符號會轉成駝峰形式

（7）事件對象event，event.target和event.currentTarget的區別：

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

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

這時target這里指的是image（因為點擊的是圖片），而currentTarget指的是swiper（因為綁定點擊事件在swiper上）

（8）使用免費的網絡接口：

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

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

附上一個免費接口大全：

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

！！另外還要注意，要把這些接口的域名配置到小程序的合法域名中，不然也是訪問不了的

注意：wxss有一個坑：無法讀取本地資源，比如背景圖片用本地就會報錯哦。

把本地圖片弄成網絡圖片的幾種方式： 上傳到個人網站；QQ空間相冊等等也是可以的哦

四、推薦幾個小程序開發的資料

（1）知乎一篇小程序的資料：

https://www.zhihu.com/question/50907897

（2）小程序社區

http://www.wxapp-union.com/portal.php

（3）極樂小程序商店

http://store.dreawer.com/

總結

以上是生活随笔為你收集整理的微信小程序基础（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

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