小程序入门学习1-CSDN博客

本文链接：https://blog.csdn.net/m0_74029903/article/details/132547892

本文详细介绍了微信小程序中页面结构的关键组成部分，包括pages数组、app.js和app.json的配置，以及如何定义和绑定数据、设置窗口样式、底部导航栏(tabBar)和事件处理。还涉及了setData函数和for循环在页面渲染中的应用。

摘要由CSDN通过智能技术生成

对于基本页面组成部分的认识

”pages“存放页面的数组”pages/index/index“ ->index文件目录下的index页面

”pages “数组中排行第一位的是默认首页

对小程序来说 app.js和app.json文件是必须的

对小程序的页面来说.js和.wxml是必须的

创建页面

app.json中“pages”

"pages":[
    "pages/home/home",
    "pages/my/my"
  ],

app.json中window窗口

"window":{
    "backgroundTextStyle":"dark",
    "backgroundColor": "#fff",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true
  }

"backgroundTextStyle":"dark",向下刷新后小圆点颜色 dark/light

"backgroundColor": "#fff",向下刷新背景颜色

"navigationBarBackgroundColor": "#fff",顶部窗口颜色

"enablePullDownRefresh": true//是否支持向下刷新

app.json中tabBar底部导航栏

tabBar中跳转到页面在【pages】一定要靠前放置

  "tabBar": {
    "list": [{
      "pagePath": "pages/home/home",//跳转的页面路径
      "text": "home",//底部显示的名称
      "iconPath": "iconPath",//icon图标路径
      "selectedIconPath": "selectedIconPath"//按住以后icon图标路径
    }, {
      "pagePath": "pages/myself/myself",
      "text": "myself",
      "iconPath": "iconPath",
      "selectedIconPath": "selectedIconPath"
    }
  ]
  }

页面定义数据

【home.js】中【data】

 data: {
    info:'good',
    arry1:[{msg:'1'},{msg:'2'}]
  },

info 字符串数据

arry1数组名称

数据绑定

把【home.js】data里面的数据名称绑定到页面中，在【wxml】渲染利用Mustache语法（双大括号）

给内容节点、属性节点动态绑定数据

<!--1.用在内容节点-->
<view>{{message}} </view>

<!--2.用在属性节点-->
<view id = "item-{{id}}"> </view>

<!--3.三元运算-->
<view>{{ falg ? ‘条件为真’ : '条件为假'}}</view>
<!--4.输出字符串，条件为真在>

绑定事件

【button】

<button type="primary" bind:tap='btnHandler1'>按钮</button>

primary 是让按钮颜色与微信的主题一致，就是绿色

【bind:tap】单击事件 ' '中写的是方法名称，在【js】文件中与【date】同级写事件【function】

 btnHandler1: function() {
    console.log('你好')
  },

单击后会让【你好】在内部显示

setData

利用这个函数实现数据的修改

在【js】文件中与【date】同级写事件【function】

id修改为v2

 btnHandler1: function() {
    console.log('你好'),
	this.setData({id:'v2'})
  },

利用!让【data】中布尔类型数据【boo】取反

 btnHandler1: function() {
    console.log('你好'),
	this.setData({
		boo:!this.data.boo
	})
  },

for循环

【wxml】

利用【view】实现上文中已经定义的数组的输出

<view wx:for = "{{array1}}" wx:key="index">
	索引是：{{index}} ---对应的值是：{{item.msg}}
</view>