微信小程序 入门

Posted 2020-11-17 tony_zhu

目录结构：

•  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 属性在开发者工具中没有体现，手机预览有作用。

 　　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 一定要写（坑）