微信小程序知識體系梳理

2018-3-9    seo達(dá)人

如果您想訂閱本博客內(nèi)容，每天自動發(fā)到您的郵箱中， 請點這里 

小程序介紹

17年一月9號，小程序剛發(fā)布的時候，個人很幸運的成為第一批吃螃蟹的人，當(dāng)然也是第一批采坑的人。

小程序是基于微信的一種應(yīng)用，使用微信自定義的組件，讓我們使用JavaScript的方式，達(dá)到匹配原生應(yīng)用的效果。小程序的一大優(yōu)勢就是，你只要有個微信，你就能搜索你所需要的點餐、買票、旅游等一些日常需求的小程序，而且——用完即毀、無需下載。

小程序開發(fā)所需要的技能

小程序是最適合前端開發(fā)人員，你所需的知識僅僅是JavaScript、css、html的基本知識，如果你有其他單頁面應(yīng)用的開發(fā)經(jīng)驗，那小程序會很快上手，但是這都不是必須的。

小程序的知識體系的梳理

項目整體架構(gòu)

app.js 小程序的啟動js文件。

app.json 小程序的全局json配置文件。同時也可以進(jìn)行pages配置、底部tab切換的配置等等。

app.wxss 小程序的全局樣式。

pages 小程序的相關(guān)頁面。在app.json中配置了pages，pages文件夾就會自動出現(xiàn)對應(yīng)的頁面。

pages

js 是小程序的邏輯部分。 
wxss 小程序的對應(yīng)page的布局，也就是局部樣式。相當(dāng)于web網(wǎng)頁的css。 
wxml 頁面布局。相當(dāng)于web網(wǎng)頁的html。 
json 小程序的局部頁面配置。

小程序路由

1、push路由 
wx.navigateTo({ 
url:’/pages/index/index’ 
});

2、替換路由 
wx.redirectTo({ 
url:”/pages/index/index” 
});

3、路由回退 
wx.navigateBack({ 
delta: 1 
});

4、tab切換 
wx.switchTab({ 
url:’相關(guān)頁面路徑’ 
});

5、路由清理替換 
wx.reLaunch({ 
url:’新的頁面路徑’ 
});

小程序路由傳參

wx.navigateTo({ 
url: “/pages/index/index?id=”+inputValue 
}); 
就會把inputValue的值傳遞過去。在相應(yīng)的界面的onLoad周期函數(shù)的options中接收。

//index.js 
onLoad: function(options){ 
console.log(options.id); 
}

小程序界面交互（Toast、Modal）

Toast分三種：sucess、loading、none； 
Modal：title、content屬性是必須要的。 
modal還有一些其他的屬性，比如確認(rèn)按鈕的顯示。

小程序page的生命周期

onLoad——初始化加載一次 
onReady——頁面初次渲染完成 
onShow——監(jiān)聽頁面顯示 
onHide——監(jiān)聽頁面隱藏 
onUnload——監(jiān)聽頁面卸載

生命周期函數(shù)的本質(zhì)：給開發(fā)人員一個觸發(fā)時機的暴露的接口。在這樣的時機下，我們可以做什么？

小程序如何更改data

vue中：this.message = ‘hello world’; 
小程序中： 
this.setData({ 
message: ‘hello world’ 
})

小程序分享功能

使用onShareAppMessage函數(shù)可以實現(xiàn)分享轉(zhuǎn)發(fā)功能。 
onShareAppMessage: function(){ 
return { 
title:’圖吧同行’, 
path:’/pages/index/index’, 
desc:’描述信息’ 
} 
}

登錄功能

小程序的登錄是一個項目的核心邏輯。分為三步。

第一步：wx.login，獲取code。 
第二步：把code發(fā)送給我們的后臺服務(wù)器，得到openId。 
第三步：服務(wù)器把openId返回給你。你就知道每次是哪一個用戶登錄了小程序。

藍(lán)藍(lán)設(shè)計( bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)


分享本文至：

日歷

鏈接

個人資料

存檔