微信小程序

微信小程序今天正式上線了，可是怎麼看到呢？
第一：升級微信到最新的版本：6.5.3
第二：在微信中搜索「小程序示例」，在搜索結果中找到黑色圖標S形狀點開它，進入這個頁面也就激活了小程序。
第三：回到微信菜單欄發現，你會看到最下面一欄多了小程序的功能。

進入小程序就能夠搜索小程序相關的例子了，下面介紹幾款小程序例子：
騰訊視頻
京東購物
貓眼電影
自選股
滴滴出行DiDi
等......

如何開發小程序？
準備：
1.註冊小程序帳號
註冊地址：
https://mp.weixin.qq.com/cgi-bin/home?t=home/index&lang=zh_CN&token=1017155583

2.下載開發工具
開發教程及下載工具地址：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715

3.下載示例代碼
下載地址：
https://github.com/BeanDu/wxdemo

小程序包含一個描述總體程序的 app(由三個文件組成小程序邏輯--app.js,小程序公共設置--app.json,小程序公共樣式表--app.wxss,必須放在項目的根目錄) 和多個描述各自頁面的 page。
頁面組成

一個小程序頁面由四個文件組成,分別爲:頁面邏輯--index.js(必須),頁面結構--index.wxml(必須),頁面樣式表--index.wxss(非必須),頁面配置--index.json(非必須)
頁面的生命週期(js文件中)
1).onLoad: 頁面加載,2).onShow: 頁面顯示,3).onReady: 頁面初次渲染完成,4).onHide: 頁面隱藏,5).onUnload: 頁面卸載

實現模塊

網絡數據->列表頁渲染->跳轉到詳情頁
具體實現方式

在index.js中獲取網絡數據->將網絡返回數據傳遞到wxml->wxml接收並使用數據

    邏輯層獲取數據
    在index.js的onShow中調用wx.request()獲取網絡數據
    邏輯層發送數據
    經過調用this.setData()data 將會以 JSON 的形式由邏輯層傳至渲染層.如圖3,其中傳遞的數據格式爲JSON {xxx:res.data}

 

 

基本的入門只須要了解UI如何佈局,數據如何傳遞,列表如何實現,頁面上如何綁定點擊事件。