小程序介紹
17年一月9號(hào)，小程序剛發(fā)布的時(shí)候，個(gè)人很幸運(yùn)的成為第一批吃螃蟹的人，當(dāng)然也是第一批采坑的人。
小程序是基于微信的一種應(yīng)用，使用微信自定義的組件，讓我們使用JavaScript的方式，達(dá)到匹配原生應(yīng)用的效果。小程序的一大優(yōu)勢(shì)就是，你只要有個(gè)微信，你就能搜索你所需要的點(diǎn)餐、買(mǎi)票、旅游等一些日常需求的小程序，而且——用完即毀、無(wú)需下載。
小程序開(kāi)發(fā)所需要的技能
小程序是最適合前端開(kāi)發(fā)人員，你所需的知識(shí)僅僅是JavaScript、css、html的基本知識(shí)，如果你有其他單頁(yè)面應(yīng)用的開(kāi)發(fā)經(jīng)驗(yàn)，那小程序會(huì)很快上手，但是這都不是必須的。
小程序的知識(shí)體系的梳理
項(xiàng)目整體架構(gòu)
app.js 小程序的啟動(dòng)js文件。
app.json 小程序的全局json配置文件。同時(shí)也可以進(jìn)行pages配置、底部tab切換的配置等等。
app.wxss 小程序的全局樣式。
pages 小程序的相關(guān)頁(yè)面。在app.json中配置了pages，pages文件夾就會(huì)自動(dòng)出現(xiàn)對(duì)應(yīng)的頁(yè)面。
pages
js 是小程序的邏輯部分。
wxss 小程序的對(duì)應(yīng)page的布局，也就是局部樣式。相當(dāng)于web網(wǎng)頁(yè)的css。
wxml 頁(yè)面布局。相當(dāng)于web網(wǎng)頁(yè)的html。
json 小程序的局部頁(yè)面配置。
小程序路由
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)頁(yè)面路徑’
});
5、路由清理替換
wx.reLaunch({
url:’新的頁(yè)面路徑’
});
小程序路由傳參
wx.navigateTo({
url: “/pages/index/index?id=”+inputValue
});
就會(huì)把inputValue的值傳遞過(guò)去。在相應(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——頁(yè)面初次渲染完成
onShow——監(jiān)聽(tīng)頁(yè)面顯示
onHide——監(jiān)聽(tīng)頁(yè)面隱藏
onUnload——監(jiān)聽(tīng)頁(yè)面卸載
生命周期函數(shù)的本質(zhì)：給開(kāi)發(fā)人員一個(gè)觸發(fā)時(shí)機(jī)的暴露的接口。在這樣的時(shí)機(jī)下，我們可以做什么？
小程序如何更改data
vue中：this.message = ‘hello world’;
小程序中：
this.setData({
message: ‘hello world’
})
小程序分享功能
使用onShareAppMessage函數(shù)可以實(shí)現(xiàn)分享轉(zhuǎn)發(fā)功能。
onShareAppMessage: function(){
return {
title:’圖吧同行’,
path:’/pages/index/index’,
desc:’描述信息’
}
}
登錄功能
小程序的登錄是一個(gè)項(xiàng)目的核心邏輯。分為三步。
第一步：wx.login，獲取code。
第二步：把code發(fā)送給我們的后臺(tái)服務(wù)器，得到openId。
第三步：服務(wù)器把openId返回給你。你就知道每次是哪一個(gè)用戶登錄了小程序。
藍(lán)藍(lán)設(shè)計(jì)( www.0391cbd.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
