微信小程序?qū)崙?zhàn)教程：模仿—網(wǎng)易云音樂

發(fā)布時(shí)間：2017-12-11 09:30 所屬欄目：小程序開發(fā)教程

初窺

todo:

[ ] 添加音樂到收藏（最近）列表
[ ] 歌詞滾動(dòng)

從一個(gè)hello world開始

微信開發(fā)者工具生成目錄如下：

.
|-- app.js
|-- app.json
|-- app.wxss
|-- pages     
|   |-- index   # 主頁
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   `-- log # 日志頁面
|   |   |-- log.js
|   |   |-- log.json
|   |   |-- log.wxml
|   |   `-- log.wxss
`-- utils       # 工具
    `-- util.js

大體為:
每一個(gè)page即是一個(gè)頁面文件，每個(gè)頁面有一個(gè)js/wxml/wxss/json文件規(guī)定：描述頁面的這四個(gè)文件必須具有相同的路徑與文件名。

全局下同路，為公共的邏輯，樣式，配置

與html不同:用view text navigator 代替 div span a

開發(fā)者文檔走馬觀花

app.json: 注冊pages window tabBar networkTimeout

組件說明

*.js: 作為邏輯層與wxml交互有著豐富的
網(wǎng)絡(luò)，
媒體，
文件，
數(shù)據(jù)緩存，
位置，
設(shè)備，
界面...的api

官方文檔

*.wxml: 數(shù)據(jù)驅(qū)動(dòng)的視圖層 + 微信提供了大量的組件表單導(dǎo)航媒體 ...

官方組件不夠,weui來湊

weui為

小程序

提供了 weui.wxcss 但大多是造官方組件的輪子

這里精選,也算是補(bǔ)充兩個(gè)常用組件

對于小程序沒有DOM操作不熟悉mvvm思想的同學(xué) 是個(gè)很好的入門

navbar

<!-- wxml -->
<view class="weui-tab">
            <view class="weui-navbar">
                <block wx:for="{{tabs}}" wx:key="*this">
                    <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
                        <view class="weui-navbar__title">{{item}}</view>
                    </view>
                </block>
                <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
            </view>
            <view class="weui-tab__panel">
                <view class="weui-tab__content" hidden="{{activeIndex != 0}}">選項(xiàng)一的內(nèi)容</view>
                <view class="weui-tab__content" hidden="{{activeIndex != 1}}">選項(xiàng)二的內(nèi)容</view>
                <view class="weui-tab__content" hidden="{{activeIndex != 2}}">選項(xiàng)三的內(nèi)容</view>
            </view>
 </view>

block渲染data里面的四個(gè)tabs,slider為激活tab選項(xiàng)時(shí)候的表現(xiàn)，panel為內(nèi)容面板

//js
var sliderWidth = 96; // 需要設(shè)置slider的寬度，用于計(jì)算中間位置
Page({
    data: {
        tabs: ["選項(xiàng)一", "選項(xiàng)二", "選項(xiàng)三"],
        activeIndex: 1,
        sliderOffset: 0,
        sliderLeft: 0
    },
    onLoad: function () {
        var that = this;
        wx.getSystemInfo({
            success: function(res) {
                that.setData({
                    sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
                    sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex
                });
            }
        });
    },
    tabClick: function (e) {
        this.setData({
            sliderOffset: e.currentTarget.offsetLeft,
            activeIndex: e.currentTarget.id
        });
    }
});

了解mvvm思想的同學(xué)不難看出通過tabs數(shù)組渲染出來選項(xiàng)后每次點(diǎn)擊獲取id 然后通過設(shè)置hidden顯示或隱藏

searchbar

        <view class="weui-search-bar">
            <view class="weui-search-bar__form">
                <view class="weui-search-bar__box">
                    <icon class="weui-icon-search_in-box" type="search" size="14"></icon>
                    <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
                    <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">
                        <icon type="clear" size="14"></icon>
                    </view>
                </view>
                <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput">
                    <icon class="weui-icon-search" type="search" size="14"></icon>
                    <view class="weui-search-bar__text">搜索</view>
                </label>
            </view>
            <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view>
        </view>
        <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}">
            <navigator url="" class="weui-cell" hover-class="weui-cell_active">
                <view class="weui-cell__bd">
                    <view>實(shí)時(shí)搜索文本</view>
                </view>
            </navigator>
        </view>

一個(gè)input輸入框+一個(gè)搜索label+一個(gè)清楚內(nèi)容的icon + 取消按鈕

Page({
    data: {
        inputShowed: false,
        inputVal: ""
    },
    showInput: function () {
        this.setData({
            inputShowed: true
        });
    },
    hideInput: function () {
        this.setData({
            inputVal: "",
            inputShowed: false
        });
    },
    clearInput: function () {
        this.setData({
            inputVal: ""
        });
    },
    inputTyping: function (e) {
        this.setData({
            inputVal: e.detail.value
        });
    }
});

input上面有一層label 通過Page里面狀態(tài)的改變而操作其wxml狀態(tài)的改變

不難體會(huì)到：小程序和Vue的思想還是挺接近的

站在巨人的肩膀上--云音樂api

---獲取云音樂api

巨人的源github項(xiàng)目

在此我將他部署到leancloud上

即可在線訪問，免去煩人的本地localhost啟動(dòng),在線url

http://neteasemusic.leanapp.cn

調(diào)用例子:

http://neteasemusic.leanapp.c...

海闊**

http://neteasemusic.leanapp.c...

具體參考api

詳細(xì)文檔

一切具備只欠東風(fēng)

生成目錄本文講解核心內(nèi)容音樂的播放，讀者可自己實(shí)現(xiàn)其余頁面。

.
|-- app.js
|-- app.json
|-- app.wxss
|-- common.js #公用js
|-- images #存放項(xiàng)目圖片
|-- style
|   |-- weui.wxss   # 引入weui樣式  萬一你自己不想寫css樣式呢
|-- pages
|   |-- find   # 發(fā)現(xiàn)音樂
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   |--my   # 我的音樂
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   |--now  # 正在播放
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   |--account   # 賬號(hào)
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   |-- index   # 主頁
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   `-- log # 日志頁面
`-- utils       # 工具
    `-- util.js

請先在在app.json中注冊頁面，設(shè)置navigation，配置tabbar

{
  "pages":[
    "pages/find/index",
    "pages/my/index",
    "pages/now/index",
    "pages/account/index",
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#D43C33",
    "navigationBarTitleText": "網(wǎng)易云音樂",
    "navigationBarTextStyle":"white",
    "backgroundColor": "#FBFCFD"
  },
  "tabBar": {
    "backgroundColor":"#2A2C2E",
    "color": "#a7a7a7",
     "selectedColor": "#ffffff",
    "list": [{
      "iconPath":"./images/find.png",
      "selectedIconPath":"./images/find1.png",
      "pagePath":"pages/find/index",
      "text": "發(fā)現(xiàn)音樂"
    }, {
      "iconPath":"./images/my.png",
      "selectedIconPath":"./images/my1.png",
      "pagePath": "pages/my/index",
      "text": "我的音樂"
    }, {
      "iconPath":"./images/now.png",
      "selectedIconPath":"./images/now1.png",
      "pagePath": "pages/now/index",
      "text": "正在播放"
    }, {
      "iconPath":"./images/account.png",
      "selectedIconPath":"./images/account1.png",
      "pagePath": "pages/account/index",
      "text": "賬號(hào)"
    }]
  }
}

發(fā)現(xiàn)音樂

布局分為搜索框,navbar,swiper滑動(dòng)，三列，以及兩行三列構(gòu)成

tips:小程序中flex布局基本無兼容性問題，可大膽使用

前三個(gè)可用上文提

易優(yōu)小程序（企業(yè)版）+靈活api+前后代碼開源碼云倉庫:

本文地址：http://22321a.com/wxmini/doc/course/18132.html 復(fù)制鏈接如需定制請聯(lián)系易優(yōu)客服咨詢：800182392 點(diǎn)擊咨詢

免責(zé)聲明：本站所有文章和圖片均來自用戶分享和網(wǎng)絡(luò)收集，文章和圖片版權(quán)歸原作者及原出處所有，僅供學(xué)習(xí)與參考，請勿用于商業(yè)用途，如果損害了您的權(quán)利，請聯(lián)系網(wǎng)站客服處理。

熱門問題
最新問題

小程序模板網(wǎng)

微信小程序?qū)崙?zhàn)教程：模仿—網(wǎng)易云音樂

初窺

從一個(gè)hello world開始

開發(fā)者文檔走馬觀花

官方組件不夠,weui來湊

站在巨人的肩膀上--云音樂api

一切具備只欠東風(fēng)

產(chǎn)品

服務(wù)

幫助

關(guān)于

小程序模板網(wǎng)

微信小程序?qū)崙?zhàn)教程：模仿—網(wǎng)易云音樂

初窺

從一個(gè)hello world開始

開發(fā)者文檔走馬觀花

官方組件不夠,weui來湊

站在巨人的肩膀上--云音樂api

一切具備 只欠東風(fēng)

產(chǎn)品

服務(wù)

幫助

關(guān)于

一切具備只欠東風(fēng)