小さなマイクロチャネル入門 - 音楽プレーヤー仕上げ[INGの]

            孟は新しいだけやって、ちょうど参照のPangyouポイントを確認することを望んで、小さなマイクロチャネルプログラムを見てください。                         

            インターネットを参照するには前に、この人に行わ私の5日間のいずれかを完了するために4日間のエントリを、格好良い彼はよりも、急に少し自信               

            その後、彼は彼自身が特に望んでいない、常に混乱して感じる書かれた、彼らのコードで再見しました。                                                 

            アイデアは、ああ、是非、仕様により慎重に精査し、注意をする必要があります。                                                                         

 小さなマイクロチャネル・プログラムの最初のエントリ

 1.スタート

  ゼロから、指示するに従って、公式ドキュメントは、その上の/ /ホスト環境/仕事を構成するコードをコンパイル/インストールして、/開発者ガイドを公開し、/アプリケーションIDを含め、非常に単純な何の問題も歩いていません。

  マイクロ手紙開発ツールのダウンロード:ジャンプします

 マイクロチャネルの開発ツールへ2.はじめに

  萌えは、新しいプロファイルを使用するために、直接に見えました。(私は......これらを使用してください)

 (1)開発ツールインタフェース

  ①プロジェクトディレクトリ

  ②コード領域

  ③コンソール

    コンソール・ビュー・レポートの情報が間違っ及び印刷

    アプリ内で各変数の値を参照してくださいAPPDATA

  ④シミュレータ

    実際のマシンはとても実機を試してみてください(わずかに異なっていると、シミュレータ、ないカードをリフレッシュすることができ、プロジェクトをコンパイル/プロジェクトを保存し、それは便利で、全体ではなく文字シミュレータは、多分あなたはどのシミュレータは正常であった出会いが、実際のマシンがいいえピットません)

 (2)メインカタログファイル

  これは、カタログで開いた表情が付属しています:

  • app.jsは、グローバル変数、メソッドを保存することができます
  • app.jsonアプリのプロフィール ページのパスをに書き込まれなければなりません
  • ページのページフォルダ
  • ページインデックスフォルダを開始
  • ページはHTML div->ビューに似たページを開始index.wxml
  • index.jsはJavaScriptに似たページを開始jsのページに制御変数を達成何ページ参照DOM操作することはできません
  • 同様のCSS Index.wxss

  以下では、必ずしも、他の人が理解していれば、私を啓発してくださいギャング右新しい理解非常に浅い孟、次のとおりです。

  マイクロ手紙のフロントエンド開発を備えページを開発することであるjsファイルを含む4つの文書を、必要とし、JSON、wxml、wxss、我々はまた、フォルダ内にあり、同じ名前のフォルダ。JSONはあまり使用しないで、気持ちは、マイクロチャネルインタフェース自体、関連する設定ファイル(書き込みである:「リスト」、小さなプログラムは、上記のタイトルバーと呼ばれる「navigationBarTitleText」、内部のJS、同様にHTMLでwxml、wxss同等CSS) wxmlは(そしてあなたがwxmlに書き込み、その値が1で、データコール名があるJS何か、と普通は、JavaScriptのように、そのデータを直接使用することができる方法を記述すること(または関数が呼び出されるべきです) {name}は、この場所は私がセッションでJSPページ)の内容を取得するために使用されている同様の使い方が表示されます。

 weUIの導入3。

  weUIマイクロ手紙はより一層美しく容易にするための新しい必要が発芽、ボタンのどのような独自のセットです。

  プレビュー:https://weui.io

  ダウンロード:https://github.com/Tencent/weui-wxss

  引用:

    ①輸入weui-wxssマスター\ distの\のディレクトリアプレットプロジェクトへのファイル

    (スタイルディレクトリに導入された);「スタイル/ weui.wxss」@import app.wxss参照内②追加weui.wxss

  注意:サンプルプロジェクトであるSRCでweui-wxssマスター、あなたは、コントロールの効果をプレビューするためのプロジェクトを開くことができます

音楽プレーヤーの第二に、開発

 1.アイデア

  データ:唯一のフロントエンドは、インターネットから取得したデータの種類にJSのAjaxのリクエストで、その後、データベースに従事しません。(または、小さなマイクロチャネルのクラウド開発プログラムで、私は特定の理解を持っていません)

  ページ:シンプルなプレーヤーを作る、あなたは、少なくとも2つのページを必要とする、音楽はリストページとページを再生しています。

 2.データを準備します

  ここでは、オブジェクトストアは、データテンセントクラウドを格納します。各ファイルは、ファイルを取得し、直接このアドレスを訪問し、生成したアドレスに格納されます。

  (どのテンセント雲は、あなたはしばらくの間、無料でデータを保存し、そのデータを取得することができますすることはお金を使うことで、我々はプレーを所有し、ない多くの訪問、それは......つ以上を要しました)

  ポイントLRC mp3や写真とどのような自分の好みに応じてで入金。

  そして、前に保存されたMP3、画像のアドレスを含んで音楽ライブラリとしてJSONを保ちます。

  我々はJSONファイルを取得する最初のプレーヤーを行い、その後、どの歌で内側から読み出され、その曲のmp3アドレスを取り、その後、実際のmp3ファイルを取得し、それを使用することができるように。

{
    "appname": "MUMU Music",
    "version": "1.0",
    "music": [
        {
            "name": "光年之外",
            "singer": "G.E.M",
            "time": 235,
            "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/gnzw/gnzw.mp3",
            "lrc": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/gnzw/gnzw.lrc",
            "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/gnzw/gnzw.jpg"
        },
        {
            "name": "Life is like a Boat",
            "singer": "Rie fu",
            "time": 300,
            "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/lilab/lilab.mp3",
            "lrc": "null",
            "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/lilab/lilab.jpg"
        },
        {
            "name": "I Will Return",
            "singer": "Skylar Grey",
            "time": 236,
            "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/iwr/iwr.mp3",
            "lrc": "null",
            "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/iwr/iwr.jpg"
        },
        {
            "name": "青鸟",
            "singer": "生物股长",
            "time": 216,
            "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bb/bb.mp3",
            "lrc": "null",
            "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bb/bb.jpg"
        },
        {
            "name": "大鱼",
            "singer": "周深",
            "time": 313,
            "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bf/bf.mp3",
            "lrc": "null",
            "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bf/bf.jpg"
        },
        {
            "name": "小小恋歌",
            "singer": "新垣结衣",
            "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/cknu/cknu.mp3",
            "lrc": "null",
            "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/cknu/cknu.jpg"
        },
 {
            "name": "光年之外",
            "singer": "G.E.M",
            "time": 235,
            "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/gnzw/gnzw.mp3",
            "lrc": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/gnzw/gnzw.lrc",
            "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/gnzw/gnzw.jpg"
        },
        {
            "name": "Life is like a Boat",
            "singer": "Rie fu",
            "time": 300,
            "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/lilab/lilab.mp3",
            "lrc": "null",
            "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/lilab/lilab.jpg"
        },
        {
            "name": "I Will Return",
            "singer": "Skylar Grey",
            "time": 236,
            "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/iwr/iwr.mp3",
            "lrc": "null",
            "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/iwr/iwr.jpg"
        },
        {
            "name": "青鸟",
            "singer": "生物股长",
            "time": 216,
            "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bb/bb.mp3",
            "lrc": "null",
            "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bb/bb.jpg"
        },
        {
            "name": "大鱼",
            "singer": "周深",
            "time": 313,
            "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bf/bf.mp3",
            "lrc": "null",
            "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/bf/bf.jpg"
        },
        {
            "name": "小小恋歌",
            "singer": "新垣结衣",
            "downloadURL": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/cknu/cknu.mp3",
            "lrc": "null",
            "pic": "https://music-1300015560.cos.ap-beijing.myqcloud.com/musics/cknu/cknu.jpg"
        }
    ]
}
musics.json

 3.开发

(1)新建项目

  在微信开发者工具里面点左上角“项目”-“新建项目”,弹窗里填写信息,AppID可以用测试号(这里仅仅自己开发着玩所以无所谓,想要让别人你的小程序也用就去注册一个),点击新建就好了。

(2)写代码

  首先项目给了一个获取用户信息的页,咱也懒得改,直接留着作为启动页(?),下面加个按钮跳转到列表页。

   先不着急写别的页面,我想app打开之后就先把我那大json获取到,反正之后会经常用,直接作为全局变量留着了。全局变量是app.js里的globalData,在里面声明一个名字叫musicLib,在下面写个微信小程序写法的请求数据的一段代码(wx.request,详情参考官方文档),然后把获取到的结果给musicLib存住(this.globalData.musicLib = res.data,萌新翻译:这页的globalData里的musicLib的值是请求结果中的数据)。

//はapp.js 
アプリ({ 
  {:グローバルデータ
    // ... 
    MUSICLIB:[] // ライブラリ
    // ... 
  }、
  OnLaunch:関数(){
     // ... 
    // 取得音楽ライブラリ
    WXを。要求({ 
      URL: 'https://music-1300015560.cos.ap-beijing.myqcloud.com/musics.json' 
      成功:RES => {
         この .globalData.musicLib = res.data 
      } 
    })
     // 。 .. 
  } 
})
MUSICLIB

  その後、スタートページを押してください!仕事、その後、少し少し終了した後。

おすすめ

転載: www.cnblogs.com/unpro-mercy/p/11549194.html