微信小程序学习 01_wx:key微信小程序-CSDN博客

本文链接：https://blog.csdn.net/qq_43324779/article/details/115187214

一小程序结构目录

1.1 小程序文件结构和传统web对比

结构	传统web	微信小程序
结构	HTML	WXML
样式	CSS	WXSS
逻辑	JavaScript	Javas
配置	无	JSON

传统web是三层结构，小程序是四层结构，多了一层配置JSON

1.2 基本项目目录

在这里插入图片描述

二小程序配置文件

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json , 和页面自己的 page.json

注意：配置文件中不能使用注释

2.1 全局配置文件 app.json

app.json 是当前⼩程序的全局配置，包括了⼩程序的所有⻚⾯路径、界⾯表现、⽹络超时时间、底

部 tab 等。普通快速启动项⽬⾥边的 app.json

配置

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
 ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
 }

1.pages 字段 — 用于描述当前小程序所有的页面路径，这是为了让微信客户端知道当前小程序页面在哪一个目录下。

2.window 字段 — 定义⼩程序所有⻚⾯的顶部背景颜⾊，⽂字颜⾊定义等。

2.1.1 tabBar

"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icon/_home.png",
      "selectedIconPath": "icon/home.png"
    },
    {
      "pagePath": "pages/img/img",
      "text": "图片",
      "iconPath": "icon/_img.png",
      "selectedIconPath": "icon/img.png"
    }
]}

在这里插入图片描述

2.2 页面配置 page.json

page.json 其实⽤来表⽰⻚⾯⽬录下的 page.json 这类和⼩程序⻚⾯相关的配置。开发者可以独⽴定义每个⻚⾯的⼀些属性，如顶部颜⾊、是否允许下拉刷新等等。⻚⾯的配置只能设置 app.json 中部分 window 配置项的内容，⻚⾯中配置项会覆盖 app.json的 window 中相同的配置项。

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜⾊，如 #000000
navigationBarTextStyle	String	white	导航栏标题颜⾊，仅⽀持 black /white
navigationBarTitleText	String		导航栏标题⽂字内容
backgroundColor	HexColor	#ffffff	窗⼝的背景⾊
backgroundTextStyle	String	dark	下拉 loading 的样式，仅⽀持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新。
onReachBottomDistance	Number	50	⻚⾯上拉触底事件触发时距⻚⾯底部距离，单位为px。
disableScroll	Boolean	false	设置为 true 则⻚⾯整体不能上下滚动；只在⻚⾯配置中有

2.3 sitemap 配置

⼩程序根⽬录下的 sitemap.json ⽂件⽤于配置⼩程序及其⻚⾯是否允许被微信索引。

三模板语法

WXML（WeiXin Markup Language）是框架设计的⼀套标签语⾔，结合基础组件、事件系统，可以构建出⻚⾯的结构。

3.1 数据绑定

3.1.1 普通写法

<view>{{message}}</view>

Page({
	data:{
		message:"hello wx"
	}
})

3.1.2 组件属性

<view id="item-{{id}}"></view>

Page({
	data{
		id:0
	}
})

3.1.3 bool 类型

不能直接写 checked=“false” ,其运算结构是一个字符串

<checkbox checked="{{false}}"></checkbox>

3.2 运算

3.2.1 三目运算

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

3.2.3 算数运算

<view>{{a+b}}+{{c}}+d</view>

Page({
	data:{
		a:1,
		b:2,
		c:3
	}
})

3.2.4 逻辑运算

<view wx:if="{{length>5}}"></view>

3.2.5 字符串运算

<view>{{"hello"+name}}</view>

Page({
	data:{
		name : "MINA"
	}
})

注意:花括号和引号之间如果有空格，将最终解析成为字符串

3.3 列表渲染

3.3.1 wx:for

项的变量名默认为 item , wx:for-item 可以指定数组当前元素的变量名
下标变量名默认为 index , wx:for-index 可以指定数组当前下标的变量名
wx:key 用来提高数组渲染的性能
wx:key 绑定的值，有如下选择

String类型，表示循环项中的唯一属性，如

list:[{id:0,name:"炒饭"}，{id:1,name:"炒面"}]
wx:key="id"

保留字 *this ,它的意思是 item 本身，*this 代表的必须是唯一的字符串和数组

list:[1,2,3,4,5]
wx:key="*this"

测试用例:

<view wx:for="{{array}}" wx:key="id">
	{{index}} : {{item.message}}
</view>

Page({
	data:{
		array:[{
			id:0,
			message:"我是0号"},
			{
			id:1,
			message:"我是1号"
		}]
	}
})

3.3.2 block

渲染⼀个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1,2,3]}}" wx:key="*this">
	<view>{{index}}</view>
    <view>{{item}}</view>
</block>

3.4 条件渲染

3.4.1 wx:if

在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view wx:if="{{false}}">if</view>
<view wx:elif="false">else if</view>
<view wx:else>else</view>

3.4.2 hidden

<view hidden="{{condition}}">true</view>

hidden类似于 wx:if ,如果频繁切换使用 hidden,不常使用用 wx:if

该代码块：

<view wx:if="{{false}}">if</view>
<view wx:elif="false">else if</view>
<view wx:else>else</view>

<view hidden="{{condition}}">true</view>