微信小程序知識點梳理

小程序介紹

17年一月9號，小程序剛發佈的時候，我的很幸運的成爲第一批吃螃蟹的人，固然也是第一批採坑的人。

小程序是基於微信的一種應用，使用微信自定義的組件，讓咱們使用JavaScript的方式，達到匹配原生應用的效果。小程序的一大優點就是，你只要有個微信，你就能搜索你所須要的點餐、買票、旅遊等一些平常需求的小程序，並且——用完即毀、無需下載。

 

小程序開發所須要的技能

小程序是最適合前端開發人員，你所需的知識僅僅是JavaScript、css、html的基本知識，若是你有其餘單頁面應用的開發經驗，那小程序會很快上手，可是這都不是必須的。

 

小程序的知識體系的梳理

 

項目總體架構

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

app.json 小程序的全局json配置文件。同時也能夠進行pages配置、底部tab切換的配置等等。

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

pages 小程序的相關頁面。在app.json中配置了pages，pages文件夾就會自動出現對應的頁面。

 

pages

js 是小程序的邏輯部分。
wxss 小程序的對應page的佈局，也就是局部樣式。至關於web網頁的css。
wxml 頁面佈局。至關於web網頁的html。
json 小程序的局部頁面配置。

 

小程序路由

一、push路由

 

wx.navigateTo({
url:'/pages/index/index'
});123

二、替換路由

 

wx.redirectTo({
url:"/pages/index/index"
});123

三、路由回退

 

wx.navigateBack({
delta: 1
});123

四、tab切換

 

wx.switchTab({
url:'相關頁面路徑'
});123

五、路由清理替換

 

wx.reLaunch({
url:'新的頁面路徑'
});123

小程序路由傳參

 

wx.navigateTo({
url: "/pages/index/index?id="+inputValue
});123

就會把inputValue的值傳遞過去。在相應的界面的onLoad周期函數的options中接收。

 

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

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

Toast分三種：sucess、loading、none；
Modal：title、content屬性是必需要的。
modal還有一些其餘的屬性，好比確認按鈕的顯示。

 

小程序page的生命週期

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

生命週期函數的本質：給開發人員一個觸發時機的暴露的接口。在這樣的時機下，咱們能夠作什麼？

 

小程序如何更改data

vue中：this.message = ‘hello world’;
小程序中：

 

this.setData({
message: 'hello world'
})123

小程序分享功能

使用onShareAppMessage函數能夠實現分享轉發功能。

onShareAppMessage: function(){
return {
title:'圖吧同行',
path:'/pages/index/index',
desc:'描述信息'
}
}1234567

登陸功能

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

第一步：wx.login，獲取code。 第二步：把code發送給咱們的後臺服務器，獲得openId。 第三步：服務器把openId返回給你。你就知道每次是哪個用戶登陸了小程序