微信小程序入門示例

下面做一個非常簡單的小程序(列出新聞列表,點擊標題后進入詳細頁面)用來體會小程序的開發方式

共有兩個頁面,一個是列表頁,一個是詳細頁

通過這個示例,我們可以了解:

1. 視圖中如何獲取數據
2. 如何添加頁面
3. 頁面間如何跳轉,如何參數傳遞
4. 如何控制視圖樣式

主要步驟

1. 創建項目

小程序開發工具下載地址

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=1475052055364

打開后選擇 “添加項目”

如果沒有appid,就點擊“無AppID”,功能會受限,主要是API調用方面的,視圖層的開發沒什么限制

2. 準備測試數據集合

如果想從自己的服務器獲取數據,需要在公眾平臺的小程序配置中添加自己的域名才可以

我沒法設置,所以只能使用假的測試數據,在項目的根目錄下新建一個數據文件

data.js

內容形式為:

module.exports = [    {        image: '...',        title: '...',        content: '...'    },    ...]

是一個JSON數組,每條的結構是:新聞圖片、標題、內容

在 app.js 中引入測試數據

// app.jsvar newsdata = require('data.js');App({  globalData:{    data:newsdata  }})

3. 列表頁的邏輯代碼中獲取數據,視圖代碼中循環展示

pages/index/index.js

// 取得 app 對象var app = getApp() Page({  data: {    // 獲取全局數據,設置到本頁的數據對象    news: app.globalData.data  }})

pages/index/index.wxml

<view  wx:for="{{news}}">  ...  {{item.title}}  ...</view>

外層的

wx:for="{{news}}" 

用來遍歷 news,視圖代碼中可以直接調用 Page 對象的 data 中設置的數據

內層代碼中使用

{{item.title}} 

獲取本條數據中的 title 值,'item' 是默認對象,用來代表循環中的單個條目

4. 新建詳細頁,添加到配置文件

在 pages 目錄下新建目錄 detail,在其中新建3個文件 detail.js、detail.wxml、detail.wxss

└── pages    ├── detail    │   ├── detail.js (頁面業務邏輯代碼)    │   ├── detail.wxml (頁面視圖代碼)    │   └── detail.wxss (樣式代碼)

頁面以目錄為單位,以后需要新建頁面時,就在 pages 目錄下新建子目錄及相關文件

新建頁面后,需要告訴app,修改 app.json,添加新建的 detail 頁面

{  ...  "pages":[    "pages/index/index",    "pages/detail/detail"  ],  ...}

注意:不要寫具體的文件后綴名

5. 點擊列表中的標題跳轉到詳細頁

頁面的跳轉通過 navigator 組件來實現

pages/index/index.wxml

...<navigator url="../detail/detail?index={{index}}"><view >{{item.title}}</view></navigator>...

就像html中的a鏈接一樣,指向目標頁面地址,'?' 后面跟著參數,{{index}}中的‘index’是 wx:for 循環中的默認參數,是當前循環索引值

6. 詳細頁獲取目標新聞的ID,從數據集合中取得此新聞的詳細信息,視圖代碼中展示出來

pages/detail/detail.js

var app = getApp() //取得 app 對象Page({  onLoad: function (options){      // 獲取傳遞過來的參數       var news_index = options.index;      // 根據 index 從數據集合中取得目標數據      // 設置到 Page 對象的 data 中,供視圖代碼中調用      this.setData({          news : app.globalData.data[news_index]      });  }})

setData 方法非常重要,用來設置本頁面中的 data 對象

視圖中展示,pages/detail/detail.wxml

<view >{{news.title}}</view><view >{{news.content}}</view>

Demo代碼下載

很小的例子,適合作為入門了解,上面給出了主要部分的代碼,如需完整代碼,請在此下載: