微信小程序開發(fā)新手教程一小時入門微信小程序開發(fā)

2020-03-21 16:30:57

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

微信推出小程序后,有人看好,有人吃瓜觀望.奔著對新事物保持好奇心的原則,嘗嘗鮮.

1.對象:移動端工程師(安卓,iOS,H5).

2.目標(biāo):一小時了解微信小程序基本開發(fā)

一.基本回顧

1.前景

首先當(dāng)然是要腦補一下微信小程序的前景,給你打點雞血,以便能看完此文.

1).非技術(shù)角度:請君回望微信公眾號.

2).技術(shù)角度:對移動端跨平臺解決方案的一種嘗試,畢竟OCS都出來了.

2.基礎(chǔ)

1.如何開始?

從列表開發(fā)入手

移動端開發(fā)的基礎(chǔ)是UI開發(fā),而UI開發(fā)中最基本的技能便是對列表(UITableView,UICollectionView,ListView,GridView)的使用.因此能夠熟練使用列表,基本上已算是入門.

2.需要技能

在安卓,iOS,WP,H5任何一個平臺開發(fā)過列表頁面

二.準(zhǔn)備工作

1.注冊小程序號

2.下載開發(fā)工具

3.下載Demo源碼

4.簡易教程

三.微信小程序開發(fā)

1. 目標(biāo):入門小程序

途徑:編程實現(xiàn)一個列表頁和跳轉(zhuǎn)到響應(yīng)的詳情頁

2. 基礎(chǔ)知識

項目目錄

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

微信小程序開發(fā),小程序開發(fā)

頁面組成

一個小程序頁面由四個文件組成,分別為:頁面邏輯--index.js(必須),頁面結(jié)構(gòu)--index.wxml(必須),頁面樣式表--index.wxss(非必須),頁面配置--index.json(非必須)

微信小程序開發(fā),小程序開發(fā)

頁面的生命周期(js文件中)

1).onLoad: 頁面加載,2).onShow: 頁面顯示,3).onReady: 頁面初次渲染完成,4).onHide: 頁面隱藏,5).onUnload: 頁面卸載

3. 實現(xiàn)模塊

網(wǎng)絡(luò)數(shù)據(jù)->列表頁渲染->跳轉(zhuǎn)到詳情頁

4. 具體實現(xiàn)方式

在index.js中獲取網(wǎng)絡(luò)數(shù)據(jù)->將網(wǎng)絡(luò)返回數(shù)據(jù)傳遞到wxml->wxml接收并使用數(shù)據(jù)

邏輯層獲取數(shù)據(jù)

在index.js的onShow中調(diào)用wx.request()獲取網(wǎng)絡(luò)數(shù)據(jù)

邏輯層發(fā)送數(shù)據(jù)

通過調(diào)用this.setData()data 將會以 JSON 的形式由邏輯層傳至渲染層.如圖3,其中傳遞的數(shù)據(jù)格式為JSON{xxx:res.data}

微信小程序開發(fā),小程序開發(fā)

渲染層接收數(shù)據(jù)

如圖4,獲取數(shù)據(jù)方式:{{xxx}}

微信小程序開發(fā),小程序開發(fā)

渲染層列表的實現(xiàn)

如圖4,homelist便是列表,scrollviewcell為列表中的每一個item(根據(jù)數(shù)據(jù)的不同,可以定義多個樣式)

wx:for(包括wx:for-item,wx:for-index),wx:if為wxml的循環(huán)和判斷控制語句

跳轉(zhuǎn)詳情頁

如圖4. 在item中可以實現(xiàn)跳轉(zhuǎn)頁面功能,其中url為將要跳轉(zhuǎn)到頁面的js文件路徑,id,pic為攜帶的參數(shù),下級頁面的邏輯層可接收該信息.如圖5.onLoad:function(options){}中的options存放的url參數(shù)(上個頁面,中url的參數(shù))

微信小程序開發(fā),小程序開發(fā)