1月9日,微信小程序如約而至.
小程序有點(diǎn)像升級(jí)版的服務(wù)號(hào)究反,通過其中的Demo:
可以知道一個(gè)應(yīng)用的基本組件表單、導(dǎo)航、媒體输枯、地圖等它都包含了。而且我在體驗(yàn)了京東和貓眼兩個(gè)小程序后占贫,感覺效果還不錯(cuò)桃熄,和原生應(yīng)用相比,已差別不大型奥,完全可以替代一些低頻次應(yīng)用的使用場(chǎng)景瞳收,且開發(fā)成本會(huì)大幅下降。
“微信最核心的價(jià)值厢汹,就是連接——提供一對(duì)一螟深、一對(duì)多和多對(duì)多的連接方式,從而實(shí)現(xiàn)人與人烫葬、人與智能終端界弧、人與社交化娛樂、人與硬件設(shè)備的連接搭综,同時(shí)連接服務(wù)垢箕、資訊、商業(yè)兑巾〗⒍铮” -From微信
目前小程序有幾個(gè)入口:
- 掃二維碼
- 微信搜索
- 公眾號(hào)關(guān)聯(lián)
- 好友分享
- 歷史記錄
小程序很好地縮短了獲得服務(wù)的路徑,想一想一掃碼就能獲得機(jī)票信息闪朱、能立馬買車票月匣,無需打開相對(duì)應(yīng)的app,不必要忍受每次幾秒的閃屏畫面奋姿,簡(jiǎn)單且快捷地獲得你所需锄开。
關(guān)于小程序所要解決的事情,可以看看這篇文章小程序想要什么? 称诗。
這個(gè)公眾號(hào)前段時(shí)間還寫了一篇激進(jìn)的文章:別開發(fā)app了并在文章最后說出“或許某一天萍悴,互聯(lián)網(wǎng)公司的技術(shù)團(tuán)隊(duì)里,會(huì)專門有一個(gè)崗位叫「微信開發(fā)工程師」,你信不信癣诱?我信计维。”撕予。預(yù)測(cè)大部分原生app的開發(fā)會(huì)被小程序所替代鲫惶。雖然此文的標(biāo)題略為聳人聽聞(要是真不需要開發(fā)app了,我也許就失業(yè)了-.-),但卻無法忽略微信強(qiáng)大的生態(tài),我預(yù)測(cè)微信小程序會(huì)成為很重要的一端实抡,與iOS和Android原生相輔相成欠母。
和原生app相對(duì)相比,小程序節(jié)省開發(fā)成本有目共睹吆寨。也許以后的創(chuàng)業(yè)公司會(huì)從做個(gè)微信小程序開始試驗(yàn)赏淌,而不是前兩年的遍地app.
從開發(fā)者角度,可以分析一個(gè)官方網(wǎng)站的一個(gè)小例子:
這個(gè)頁(yè)面有三個(gè)文件組成:index.js index.wxml index.wxss.
- index.js為腳本文件:
//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//調(diào)用應(yīng)用實(shí)例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo(function(userInfo){
//更新數(shù)據(jù)
that.setData({
userInfo:userInfo
})
})
}
})
- index.wxml為頁(yè)面的結(jié)構(gòu)文件(類似html):
<!--index.wxml-->
<view class="container">
<view bindtap="bindViewTap" class="userinfo">
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
- index.wxss(類似css):
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
小程序提供了一套api接口供開發(fā)者使用啄清,我們發(fā)起一個(gè)請(qǐng)求:
wx.request({
url: 'test.php', //僅為示例六水,并非真實(shí)的接口地址
data: {
x: '' ,
y: ''
},
header: {
'content-type': 'application/json'
},
success: function(res) {
console.log(res.data)
}
})
可以參考下它的API文檔
某一天,只要一個(gè)微信就足以應(yīng)對(duì)你的絕大部分需求辣卒。One is all.
對(duì)于移動(dòng)開發(fā)者來說缩擂,也許某一天你的老板會(huì)拉著你去開發(fā)小程序了(不要談就開發(fā)而言,iOS添寺、Android開發(fā)和小程序開發(fā)相關(guān)度有多么地低)胯盯。
對(duì)于我而言,2017年计露,順帶React Native,是時(shí)候點(diǎn)亮下自己的JS技能了博脑。據(jù)說前端撕逼比較嚴(yán)重,好想去感受下:)