玩轉(zhuǎn)微信小程序
|
2007 年 1 月 9 號，蘋果一代在功能機盛行的年代中出世。 2017 年 1 月 9 號，微信小程序在重型app風(fēng)靡的壓力下上線。 蘋果的出世掀起了互聯(lián)網(wǎng)一波又一波的浪潮，而微信小程序( Wa )能帶給開發(fā)者和用戶什么呢？我們先從頭到尾做一個 Wa ，再來看看它的價值。 For Users如果你的微信還沒有找到小程序的入口，可以在微信中搜索已有小程序(如: "姨媽日歷")，進入后再退出就能在發(fā)現(xiàn)欄中看到小程序入口。 For Developers1. 認(rèn)證 在注冊 Wa 賬號時，會讓你填寫組織主體并認(rèn)證主體真實性，如果你是一個單純的個人開發(fā)者，可以隨意填寫，不要花錢去認(rèn)證就是了。 2. 開發(fā)者工具 下載并打開開發(fā)者工具，呈現(xiàn)出來的三個區(qū)域從左至右分別是: 功能區(qū)，視圖區(qū)，調(diào)試區(qū)。給開發(fā)者一種 IDE 即視感，特別是調(diào)試區(qū)，不就是 F12 么= =！什么 React，Angular 之流，你們再強還不是沒自帶 IDE，這點微信做的確實好，從開發(fā)者的體驗先下手，利用我等之手將 Wa 推向市場。 3. 文件類型 對于開發(fā)者，你只需要關(guān)注三種文件類型: .js ，.wxss ，.wxml 。特喵這不就是披著微信皮的前端代碼嗎？的確如此，.wxss => .css ，.wxml => .html ，這個轉(zhuǎn)換會在代碼構(gòu)建階段發(fā)生，這里先不提。 Preparation這次我們以"網(wǎng)易云音樂客戶端"為原型做一款能跑在 Wa 的播放器小程序，廢話不說了，直接開搞。 1. wxml 首先會看到示例中各種 view ，text ... 如果你使用過 React Native 或者阿里最近開源的 Rax 就不會陌生，這些標(biāo)簽實質(zhì)上就是已經(jīng)封裝好的組件，這個時候就可以推斷 Wa 很可能使用了 RN 的源碼。官方文檔 - 組件 羅列了 Wa 中幾大類組件，對于播放器而言，view，text，image，audio 這幾個組件就夠了，它們可以理解為分別對應(yīng)了 html 中的 div，span，img，audio 標(biāo)簽。 2. wxsscss 基本沒有變化，除了像素單位改成了 rpx，這里要說的是 Wa 將設(shè)備總寬規(guī)定為 750rpx。除此之外，flex 布局也是需要大量使用的。 3. js js 也是基本沒有變化，而且可以使用部分 ES6 的語法。需要注意的是在 Wa 中沒有 document 對象，因此不能操作 DOM 。Wa 組件化開發(fā)風(fēng)格比較明顯，會有一種寫 React 的感覺。 4. API 官方文檔 - API 都是微信上的常用API。 5. 資源服務(wù)器 這是比較坑的一個地方，首先你得去開發(fā)設(shè)置中添加你的服務(wù)器配置
當(dāng)你使用 wx.request() 時候如果沒有用綁定好的 url 是不能進行資源訪問的。同時必須要以 https 的方式請求，所以必須要給服務(wù)器配置 https 服務(wù)，我使用的是 Let's Encrypt ，這是個免費的證書機構(gòu)，每 90 天才會過期，及時更新就行，配置方法網(wǎng)上有非常多。 Coding Time最終形態(tài)
1. 模板編寫 首先來搭建 wxml。如上圖可以分為三個模塊 頂部固定的播放列表: 顯示音樂數(shù)量 中間的音樂清單: 顯示音樂的名字和作者 底部固定的功能欄: 顯示當(dāng)前的播放的音樂和可簡單操作的三個按鈕 模板的編寫如下:
<!--index.wxml-->
<view class="container music-list">
<audio id="myAudio" src=""></audio>
<view class="music-menu">
<view class="menu-btn">
<image class="menu-play-pause-btn" src="xxx.png"/>
</view>
<view class="menu-desc">
<text class="normal">播放列表(</text>
<text class="bold">{{musics.names.length}}</text>
<text class="normal">)</text>
</view>
</view>
<block wx:for="{{musics.names}}">
<view class="music-item" bindtap="changeToThis" data-mid="{{index}}">
<view class="left-item">
<image class="{{ index == MIndex ? 'voice-img' : 'no-img'}}" src="{{ index == MIndex ? 'xxx.png' : ''}}"></image>
<text class="music-index">{{ index + 1 }}</text>
</view>
<view class="right-item">
<text class="music-name">{{ item }}</text>
<text class="music-singer">{{ musics.singers[index]}}</text>
</view>
</view>
</block>
<view class="fixed-box">
<view class="fixed-img">
<image class="head-img" src="xxx.png" />
</view>
<view class="fixed-mesg">
<text class="mesg-name">{{names[MIndex]}}</text>
<text class="mesg-singer">{{singers[MIndex]}}</text>
</view>
<view class="fixed-btn">
<image class="prev-btn" src="xxx.png" bindtap="changeToPrev"/>
<image class="play-pause-btn" bindtap="changeLargeBtn" src="{{largeBtnSrc}}"/>
<image class="next-btn" src="xxx.png" bindtap="changeToNext"/>
</view>
</view>
</view>
里面混雜了許多類似 xtpl 的語法，我通過 js 傳入的對象是 musics ，因此該模板渲染的數(shù)據(jù)皆來源于這個對象。其次要注意某些關(guān)鍵位置的 bindtap ，它其實就是 Wa 中對 fastclick 的實現(xiàn)，綁定的這個事件需要在 js 文件中實現(xiàn)。 2. 功能實現(xiàn) 模板寫完后，就是導(dǎo)入數(shù)據(jù)和簡單的功能實現(xiàn)了。在 Wa 的 js 文件中，有一個 Page({})，它內(nèi)部的邏輯直接對應(yīng)了一個模板。大致寫法如下
Page({
data: {
// 這里放置不需加載資源即可確定的屬性
Mindex: 0, // 初始化歌曲的ID，0
largeBtnSrc: 'xxx.png' // 初始化的播放按鈕路徑
},
onLoad: {
// 這里是渲染模板之前一步的邏輯
wx.request({
url: 'https://xxx',
type: 'GET',
success: function(res) {
// 類似Jquery, 成功獲得數(shù)據(jù)后可對data進行修改
this.setData({
musics: res.xxx,
srcs: res.xxx,
names: res.xxx,
singers: res.xxx
});
// native中audio沒有autoplay的功能，需要手動添加邏輯
this.audioCtx = wx.createAudioContext('myAudio');
this.audioCtx.setSrc('https://xxx.mp3');
this.audioCtx.play();
this.audioCtx.paused = false;
// 最后別忘了綁定this對象
}.bind(this)
});
},
// 實現(xiàn)模板中綁定到bindtap的事件
changeLargeBtn: function() {
if (this.audioCtx.paused) {
// 如果音樂暫停，需要處理的邏輯
} else {
// 如果音樂播放，需要處理的邏輯
}
},
changeToNext: function() {
// 播放下一首歌
// 無論如何都變回播放狀態(tài)
this.setData({
largeBtnSrc: 'xxx.png'
});
this.audioCtx.play();
this.audioCtx.paused = false;
// 主邏輯
if (this.data.MIndex == (this.data.srcs.length - 1)) {
this.audioCtx.setSrc('https://xxx' + this.data.srcs[0]);
this.setData({
MIndex: 0
});
this.audioCtx.play();
} else {
this.audioCtx.setSrc('https://xxx' + this.data.srcs[this.data.MIndex + 1]);
this.setData({
MIndex: this.data.MIndex + 1
});
this.audioCtx.play();
}
},
// 同理播放上一首歌
changeToPrev: function() {},
// 通過點擊清單中的音樂，指定跳轉(zhuǎn)到某首音樂
changeToThis: function() {}
});
3. 強大的Flex wxss 的代碼有一百多行，就不貼了，就說下用的比較多的 flex 語法。自從 RN 出世了，flex 的使用率是越來越高，因為用它布局實在是很方便，再也不用去設(shè)置可惡的 float 等屬性來做自適應(yīng)。
如上圖，使用三次 flex 就能完成自適應(yīng)的布局。 首先，將圖片，當(dāng)前歌曲信息，按鈕的父級元素進行 flex 布局。
fixed-box {
position: fixed;
bottom: 0;
left: 0;
z-index: 100;
width: 100%;
height: 110rpx;
display: flex;
flex-direction: row;
justify-content: space-around;
background-color: #fff;
}
通過 display: flex 啟動 flex 布局，flex-direction: row 指讓元素橫向排列，justify-content: space-around 指讓元素在主軸上伸縮性的居中。具體語法可以參考 Flex 布局教程 - 阮一峰 。 其次對歌曲信息進行 flex 布局。 width: 380rpx; display: flex; flex-direction: column; flex-direction: column 指讓元素縱向排列。 最后再來對按鈕進行 flex 布局。 width: 240rpx; height: 88rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-around; align-items: center 指讓元素在交叉軸上居中。 項目發(fā)布 完成后選擇點擊項目，將編譯后的包上傳到云上，可以在開發(fā)管理中看到 Wa 當(dāng)前的體驗版本 ，所以...發(fā)布吧~
由于我們是個人開發(fā)者，所以只能發(fā)布體驗版本，而且只能有20個體驗者= =！體驗者可以在用戶體驗中添加。
接下來進行一系列的掃碼任務(wù)...掃描你的二維碼，然后可以在 Wa 看到你的作品了。
感受1. 開發(fā)者體驗 現(xiàn)如今各家各戶都在把 React 和 Jsbridge 往應(yīng)用上搬，加上 nw 的加持，Wa 對開發(fā)體驗是非常不錯的。 2. 用戶體驗 因為小程序是"用完即走"的產(chǎn)品，一旦退出我的音樂就播放不了了，而且每次進入都會去加載音樂，心疼我的流量。但在使用的時候應(yīng)用的帶給人的還是一種接近 native 的體驗。 瞎扯總的來說 Wa 感覺有點被高估了，"用完即走"是把雙刃劍，注定不適合大流量和部分高使用量的應(yīng)用，加上 Wa 規(guī)定打包后不能超過 1M ，最終在市場上受利的是那些中低頻的小流量的產(chǎn)品。 |
