初窺

 

 

 

 

todo:

• [ ] 添加音樂到收藏（最近）列表

• [ ] 歌詞滾(gun)動

從一個hello world開始

微(wei)信(xin)開發者工具生成 目錄如(ru)下：

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

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

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

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

開發者文檔走馬觀花

app.json: 注冊pages window tabBar networkTimeout
 

組件說明

*.js: 作為邏輯層 與wxml交互 有著豐富的 
網絡，
媒體，
文件，
數據緩存，
位置，
設備，
界面...的api

官方文檔

*.wxml: 數據驅動的視圖層 + 微信提供了大量的組件 表單 導航 媒體 ...

 

官方組件不夠,weui來湊

weui為

小程序

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

這里精選,也算是補充兩個常用組件

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

 

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}}">選項一的內容</view>
                <view class="weui-tab__content" hidden="{{activeIndex != 1}}">選項二的內容</view>
                <view class="weui-tab__content" hidden="{{activeIndex != 2}}">選項三的內容</view>
            </view>
 </view>
       

block渲染data里面的四個tabs,slider為(wei)激活tab選(xuan)項時候的表現，panel為(wei)內容面板

//js
var sliderWidth = 96; // 需(xu)要設置slider的寬度，用于計算(suan)中間(jian)位置
Page({
    data: {
        tabs: ["選項一", "選(xuan)項二", "選(xuan)項三"],
        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思想的同(tong)學不難(nan)看出 通過tabs數組渲染出來選項后(hou)每次點擊(ji)獲取(qu)id 然后(hou)通過設(she)置hidden顯示或隱(yin)藏

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="搜(sou)索" 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>實時搜索文本</view>
                </view>
            </navigator>
        </view>

 一(yi)個input輸入框(kuang)+一(yi)個搜索label+一(yi)個清楚內容的(de)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里面狀態的改變而操作其wxml狀態的改變

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

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

---獲取(qu)云音樂api

 

巨人的源(yuan)github項目(mu)

 

在此我將他部署到leancloud上

即可在線訪問，免去煩人的本地localhost啟動,在線url
 

//neteasemusic.leanapp.cn

調用例子:

//neteasemusic.leanapp.c...

海闊**

//neteasemusic.leanapp.c...

具體參考api

 

 

詳細文檔

 

一切具備 只欠東風

生成目錄本文講解核心(xin)內容音樂的播(bo)放，讀(du)者可自己實現(xian)其(qi)余頁(ye)面。

.
|-- app.js
|-- app.json
|-- app.wxss
|-- common.js #公用js
|-- images #存(cun)放項目圖片(pian)
|-- style
|   |-- weui.wxss   # 引入weui樣式(shi)  萬(wan)一(yi)你(ni)自(zi)己不想寫css樣式(shi)呢(ni)
|-- pages
|   |-- find   # 發現音樂
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   |--my   # 我的音(yin)樂
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   |--now  # 正(zheng)在播放
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   |--account   # 賬號(hao)
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   |-- index   # 主頁
|   |   |-- index.js
|   |   |-- index.json
|   |   |-- index.wxml
|   |   `-- index.wxss
|   `-- log # 日(ri)志(zhi)頁面
`-- utils       # 工(gong)具
    `-- util.js

請先(xian)在在app.json中(zhong)注冊頁面，設置(zhi)navigation，配(pei)置(zhi)tabbar

{
  "pages":[
    "pages/find/index",
    "pages/my/index",
    "pages/now/index",
    "pages/account/index",
    "pages/index/index"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#D43C33",
    "navigationBarTitleText": "網易云(yun)音樂(le)",
    "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": "發現音樂"
    }, {
      "iconPath":"./images/my.png",
      "selectedIconPath":"./images/my1.png",
      "pagePath": "pages/my/index",
      "text": "我(wo)的音樂"
    }, {
      "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": "賬(zhang)號"
    }]
  }
}

• 發現音樂
   

   

   

  

   

   

布局分為搜索框,navbar,swiper滑動，三列，以及兩行三列構成

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

前(qian)三(san)個可用上文提