微信小程式今天正式上線了,但是怎麼看到呢?
第一:更新微信到最新的版本: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如何布局,資料如何傳遞,清單如何實作,頁面上如何綁定點選事件。