小程序介紹
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 小程序的局部頁面配置。
小程序路由
1、push路由
wx.navigateTo({
url:'/pages/index/index'
});123
2、替換路由
wx.redirectTo({
url:"/pages/index/index"
});123
3、路由回退
wx.navigateBack({
delta: 1
});123
4、tab切換
wx.switchTab({
url:'相關頁面路徑'
});123
5、路由清理替換
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返回給你。你就知道每次是哪一個用戶登錄了小程序
