微信小程序 入门

目录结构:json

  •  app.json  .小程序的全局配置 

  1. pages:  当前小程序全部页面路径。
  2. window:小程序全部页面的顶部背景颜色,文字颜色定义在这里。
  3. tabBar:  设置底部 tab 
  4. networkTimeout:设置网络超时时间
  5. debug:设置是否开启 debug 模式
  • project.config.json .工具配置(开发项目时的个性化配置)

  • app.js 小程序入口

组件:小程序

  1.scroll-view   网络

   enable-back-to-top 属性在开发者工具中没有体现,手机预览有做用。app

   style="height:{{windowHeight}}" 必须设置高度值不能用百分比,采用js获取视口高度 getSystemInfo函数框架

     js文件:wx.getSystemInfo({
        success: function (res) {
                self.setData({
                    windowHeight: res.windowHeight + "px",
               })
           }  
       })
 2.view
        列表循环实现:
<view wx:for="{{songList}}" wx:key="songName" class='flex-wrp bc_songList' style=" background-color:{{index%2==0?'':'wheat'}}"> //根据行号 动态生成行背景颜色
<view>
  <image style='width:32px;height:32px' mode="aspectFit" src="/static/icons/songList.png"></image>
</view>
<view>{{index+1}}.</view>
<view>{{item.songName}}</view>
</view>
框架:
    wx:if="{{item.play==false}}"   wx:else   // 条件是true是false 必定要写(坑)