小程序模板網(wǎng)

微信小程序?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 | | ...

 
 
 

初窺

 

 

 

 


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è)很好的入門

 

  1. 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顯示或隱藏

  1. 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+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/18132.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢