微信小程序的框架

小程序的配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。

pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

小技巧

当想要移动页面位置时，除了最后一个，都可以Alt+方向键上下来快速调整位置

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

navigationBarBackgroundColor属性

可以更改导航栏的颜色，默认为黑色

可以通过输入十六进制的颜色码进行自定义（感觉主要是用来和主题色相匹配）

navigationBarTitleText属性

标题文字内容

navigationBarTextStyle属性

标题字颜色，只有黑色（black）和白色（white）

enablePullDownRefresh属性

下拉刷新

tabBar

菜单栏，可以通过这个地方连接多个页面，其属性是菜单栏的全局属性

list属性

最少2个最多5个，内容是每个功能的

地址

名称

图标

选中后图标

color属性

默认字体颜色

selectedColor属性

选中后的颜色，默认是绿色

background属性

背景色，默认为白色

borderStyle

边框，仅黑白两种可选

wxml语法

数据绑定

可以在wxml中调用js的数据（只能在date中的数据）可以是字符串、数组、对象……

条件判断

if 和 else之间不能有其他语句插入，否则会报错

for循环

wx:for="{{循环次数}}"
           

索引值为index 循环中的每一项为item，循环次数为数组的大小

也可以用对象数组，用于输出

可以对item进行个性化重命名，以方便使用，比如在多层for循环时，此时的item就会有多个

更多语法

page内声明周期

onLoad

页面加载，进入小程序，执行此语句

onReady

页面渲染，渲染完成执行此语句

onShow

颜面显示，渲染完成执行此语句，在跳转出去后再跳转回来时会再次执行

onHide

页面隐藏，离开当前页面时执行

onPullDownRefresh

监听下拉动作

onReachButtom

监听上拉触底动作

onShareAppleMessage

设置分享样式

事件系统

需要绑定触碰事件

在js中写入函数（事件）

在wxml中绑定此事件

即可完成对触控事件才监测

在点击后其实会生成一个点击对象

通过函数可以返回这个对象

点击事件发生后产生交互效果

wxml中只能获取到js里面data的数据

如果我们想要让前端显示的数据有所改变，关键就是改变此处的data内容

获取数据

可以看到，函数内可以直接调用data中的数据，那么能修改吗？

可以看到这样就直接报错了

改变数据

使用

即可完成设置

myTap:function(res){
    console.log(res)
    console.log(this.data.num)
    this.setData({
      num:"789"
    })
    console.log(this.data.num)
  },
           

即便一开始没有数据，使用setDate也可以帮你创建