Meng new, just doing, just look at the small micro-channel program, hoping to see Pangyou point of reference.
Before the Internet to see this person entry four days to finish one of my five days done, good-looking than he is, suddenly a little self-confidence
Then he found himself not particularly willing to re-look at their code, written always feel confused.
Ideas should be more careful scrutiny and attention to specification, ah, come on.
First, the entry of small micro-channel program
1. start
From scratch, according to direct the official documentation walked no problem, very simple, including the application ID / install / compile / code that constitutes / host environment / work and publish / Developer's Guide, and so on.
Micro letter Developer Tools Download: click to jump
2. Introduction to micro-channel Developer Tools
Moe looked directly on to use the new profile. (I only use these ......)
(1) development tool interface
① project directory
② coding region
③ console
Console View report information wrong and printing
AppData see the value of each variable within the app
④ simulator
Save the project / compile the project can refresh simulator, no card, with the real machine is slightly different (so be sure to try the real machine, it is convenient, not the whole letter simulator, maybe you encounter any simulator was normal but the real machine No pit)
(2) the main catalog file
It comes with an open look at the catalog:
- app.js can store global variables, methods
- Profile app.json app's page path must be written into
- page page folder
- Start page index folder
- Page index.wxml start page similar to html div-> view
- index.js start page similar to JavaScript js achieve control variables on a page can be no page references dom operation
- Index.wxss similar css
The following is the new understanding Meng, very shallow, not necessarily right, if others understand, please enlighten me Gangster:
Micro features front-end development of the letter is to develop a page requires four documents, including js, json, wxml, wxss, we are in a folder, and the folder of the same name also. json not use too much, the feeling is with the micro-channel interface itself relevant configuration file (write "navigationBarTitleText": "List", a small program called the title bar of the above ), wxml with html Similarly, wxss equivalent css, js inside may write method (or function should be called) what, and ordinary, like JavaScript, but which data can be directly used wxml (js there is a data call name, its value is 1, then you write in the wxml a {name}, this place will show a similar usage I have used to obtain the contents of the session in which jsp page).
3. The introduction of weUI
weUI micro letter is what their own set of buttons, sprouting new necessary to facilitate still more beautiful.
Preview: https://weui.io
Download: https://github.com/Tencent/weui-wxss
Quote:
① import weui-wxss-master \ dist \file to a directory applet project
② added weui.wxss in app.wxss references @import 'style / weui.wxss'; (where introduced to the style directory)
Note: weui-wxss-master in src which is a example project, you can open the project to preview the effect of the controls
Second, the development of the music player
1. idea
Data: only the front end, not to engage in a database, then in the js ajax request with the kind of data acquired from the Internet. (Or with a small micro-channel cloud development program, I have not a specific understanding)
Page: Make a simple player, you need at least two pages, the music is playing list page and pages.
2. Prepare data
Here the object store to store data Tencent cloud. Each file is stored in an address generated, visit this address directly obtain the file.
(Which Tencent cloud, you can store data for free for a while, but get the data is to spend money, we own play, not many visits, it took more than one ......)
Deposit in point lrc mp3 and pictures and what according to their own preferences.
Then keep a json as a music library, which includes mp3, picture address before stored.
So that we do the first player to get the json file, and then read from the inside with which song, and then took that song mp3 address and then get it real mp3 files, can use it.
{ "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" } ] }
3.开发
（1）新建项目
在微信开发者工具里面点左上角“项目”-“新建项目”，弹窗里填写信息，AppID可以用测试号（这里仅仅自己开发着玩所以无所谓，想要让别人你的小程序也用就去注册一个），点击新建就好了。
（2）写代码
首先项目给了一个获取用户信息的页，咱也懒得改，直接留着作为启动页（？），下面加个按钮跳转到列表页。
先不着急写别的页面，我想app打开之后就先把我那大json获取到，反正之后会经常用，直接作为全局变量留着了。全局变量是app.js里的globalData，在里面声明一个名字叫musicLib，在下面写个微信小程序写法的请求数据的一段代码（wx.request，详情参考官方文档），然后把获取到的结果给musicLib存住（this.globalData.musicLib = res.data，萌新翻译：这页的globalData里的musicLib的值是请求结果中的数据）。
// app.js the App ({ GlobalData: { // ... musicLib: [], // library // ... }, OnLaunch: function () { // ... // acquire music library wx. Request ({ URL: 'https://music-1300015560.cos.ap-beijing.myqcloud.com/musics.json' , Success: RES => { the this .globalData.musicLib = res.data } }) // . .. } })
Then you press the start page! Work, and then after finishing slightly slightly.