微信小程序

开发工具下载：
https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
app.js     存储动作[全局js]
app.json   页面配置文件
app.wxss   样式   [全局样式配置]


pages   是页面文件夹

pages中每一个页面都对应一个文件夹
页面中必须要有的文件是 .js 和.wxml

wxml文件是存储结构内容；
js文件是存储动作的。



研究任何一个项目都必须要知道的3点！

1、找准视图位置；
2、了解视图中引用的标签；
3、找到全局自定义函数的位置



js ：

data: {
    
      id: 1,
      mp3name: "xdw点歌系统"

  },


wxml:

{{mp3name}}


js:

  data: {
    newsList2: {
      id: 1,
      mp3name: "xdw点歌系统"

    }
  },

wxml:

{{newsList2.mp3name}}



小程序开发中！图片标签是：
<image src="../../image/mp3.jpg"></image>





wxml:

<!--循环输出列表 begin-->
<view wx:for="{{newsList}}" class="list">

{{item.id}} == {{item.mp3name}}

</view>
<!--循环输出列表 end-->

当前循环只是循环列出了内容。但是我们需要给内容增加一个点击跳转到对应的播放页面。


JS:

  onLoad: function (options) {

    var that = this  //不能少

 //调用应用实例的方法获取全局数据
        that.setData({
          newsList: res.data
        })



<!--循环输出列表 begin-->

<view wx:for="{{newsList}}" class="list">


<navigator url="../../pages/show/show?id={{item.id}}" hover-class="navigator-hover" >


{{item.id}} == {{item.mp3name}}


</navigator>

</view>

<!--循环输出列表 end-->

注意：跳转页面必须存在且在app.json中有配置！========================================



找组件-》媒体组件-》audio


小程序中如何声明函数：

 audioPlay: function () {
   console.log(123);
  }


事件的绑定：bindtap="audioPlay"  点击后执行audioPlay方法。

<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>



底部导航！
API，搜索tabBar



 "tabBar": {
    "list": [
      {
        "pagePath": "pages/obj/obj",
        "text": "首页",
        "iconPath": "image/index2.png",
        "selectedIconPath": "image/index.png"
        
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "关于我们"
      }
    ]
  }
https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowmodalobject