天天看點

微信小程式

微信小程式今天正式上線了,但是怎麼看到呢?

第一:更新微信到最新的版本: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如何布局,資料如何傳遞,清單如何實作,頁面上如何綁定點選事件。

微信小程式

繼續閱讀