微信小程序文件介绍

pages目录用于存放所有的页面

utils目录用于存放工具类文件

app.js是入口文件，程序运行时，首要执行该文件

app.json是全局配置文件，用于配置小程序的信息

app.wxss是全局样式文件

project.config.json是项目配置文件

sitemap.json是SEO配置文件

每个页面有四个文件

xxx.wxml文件，就相当与一个html文件

xxx.wxss文件，就相当与一个css文件

xxx.js文件，是交互文件

xxx.json，是页面配置文件（当前页面）

wxml

view就相当于html的div

text就相当于html的span

swiper是滑块视图容器，它里面只能放swiper-item组件

scroll-view

可滚动视图区域。使用竖向滚动时，需要给scroll-view一个固定高度，通过 WXSS 设置 height。组件属性的长度单位默认为px，2.4.0起支持传入单位(rpx/px)。

scroll-x：允许横向滚动。

scroll-y：允许纵向滚动。

image是图片组件，注意：最好全部采用网络图片（图片的地址），因为小程序总体积不能超过2MB

{ { } }是插值表达式这里可以直接使用js里面定义的数据

wx:for指令用于循环列表，循环出来的每一项通过item返回，每一项对应的索引，通过index返回

循环列表时wx:key的好处，奖励列表发生变化时重新渲染列表的损耗更低

循环列表

定义的页面数据

bindtap=""是触击事件，其实就相当于网页中的点击事件

条件判断

wx:if wx:elif wx:else 指令用于判断条件，满足条件显示上面的组件。

wx:if 是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

<view hidden="{{flag ? true : false}}"> Hidden </view>

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

<view class="item {{i%2===0?'blue':''}}" style="color:{{i%2===0?'red':''}}">

更多标签组件：https://developers.weixin.qq.com/miniprogram/dev/framework/

wxss

在wxss中，最好不要写标签选择器和id选择器，统一写类选择器

calc（）函数，是css3中计算尺寸的函数

calc(100vw/1080*420) //1080*420是图片的尺寸自适应屏幕的尺寸

为了让小程序里面的内容在各种设备上能够自适应显示微信推出了响应式单位：rpx，在iphone中2rpx=1px

js

page()函数，返回页面对象，该函数需要传一个配置参数，这个配置参数是一个对象

这个配置对象中，定义当前页面所有内容

data选项，定义页面的数据

生命周期函数--监听页面加载

onLoad: function (options) {

}

// 生命周期函数--下拉刷新函数

onPullDownRefresh:function(){

}

下拉刷新函数

// 生命周期函数--上拉触底函数

onReachBottom:function(){

}

上拉触底函数

//更新页面信息

this.setData({

})

tabBat

在app.json文件中添加tabBar节点。

color：tab上的文字默认颜色，仅支持十六进制颜色。

selectedColor：tab上的文字选中时的颜色，仅支持十六进制颜色。

backgroundColor：tab的背景色，仅支持十六进制颜色。

borderStyle：tabbar上边框的颜色，仅支持 black / white。

position：tabBar的位置，仅支持 bottom / top。

custom：自定义tabBar。

list：tab的列表。

list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。

pagePath：页面路径，必须在 pages 中先定义。

text：tab 上按钮文字。

iconPath：图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。

当 position 为 top 时，不显示 icon。

selectedIconPath：选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。

当 position 为 top 时，不显示 icon。

tabBat

导航栏图标地址：iconfont.cn

跳转

navigator组件，用于页面链接，默认只能跳转普通页面。

如果要跳转tabBar页面，需要设置open-type="switchTab"。

<navigatorurl="/pages/details/details">详情</navigator><navigatoropen-type="switchTab"url="/pages/menu/menu">菜单</navigator>

代码跳转：

跳转到普通页面

wx.navigateTo({url:'/pages/details/details',})

跳转到tabBar页面

wx.switchTab({url:'/pages/menu/menu',})

使用方法跳转页面的好处是：在跳转之前可能需要做其他事情，比如：验证权限等等。

确认框和消息框

确认框：

wx.showModal({

title:”标题”,

success:res=>{}

})

消息框：

wx.showToast({

title:”标题”,

duration:1000

})

封装方法

确认框方法：

// 定义消息框方法，并导出

export let $msg = (title,icon='success',duration=1500)=>{

  // showToast()方法，打开消息框

  wx.showToast({

    //消息框的内容

    title,

    //消息框的图标

    icon,

    //消息框显示时间

    duration,

    //显示遮罩层

    mask:true

  })

}

消息框方法：

// 定义确认框方法，并导出

export let $confirm = (content)=>{

  return new Promise((resolve)=>{

    //showModal()方法，打开确认框

    wx.showModal({

      content,

      success:({confirm})=>{

        //confirm返回true，表示点击的是确定按钮，否则是取消按钮

        if(confirm){

          resolve()

        }

      }

    })

  })

}