微信小程序 入门
时间 2019-12-04
标签
微信
程序
入门
目录结构:json
- pages: 当前小程序全部页面路径。
- window:小程序全部页面的顶部背景颜色,文字颜色定义在这里。
- tabBar: 设置底部 tab
- networkTimeout:设置网络超时时间
- 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 必定要写(坑)