目录

• 官方文档
• 一、小程序结构目录
  • 1.1 小程序文件结构和传统web对比
  • 1.2 基本的项目目录
• 二、配置介绍
  • 2.1 配置介绍
  • 2.2 全局配置app.json
  • 2.3 page.json
• 三、视图层
  • 3.1 数据绑定
    • 3.1.1 普通写法
    • 3.1.2 组件属性
    • 3.1.3 bool类型
  • 3.2 运算
    • 3.2.1 三元运算
    • 3.2.2 算数运算
    • 3.2.3 逻辑判断
    • 3.2.4 字符串运算
    • 3.2.5 注意
  • 3.3 列表渲染
    • 3.3.1 wx:for
    • 3.3.2 wx:for
    • 3.3.3 wx:key
  • 3.4 条件渲染
    • 3.4.1 wx:if
    • 3.4.2 hidden

官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/
一、小程序结构目录 小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。
小程序框架提供了自己的视图层描述语言 WXML 和 WXSS，以及 JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
官网

文章图片

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

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

通过以上对比得出，传统web 是三层结构。而微信小程序 是四层结构，多了一层 配置.json
1.2 基本的项目目录
文章图片


文章图片

二、配置介绍 2.1 配置介绍 一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和 页面自己的 page.json
注意：配置文件中不能出现注释
2.2 全局配置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字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
   
   文章图片
   
   
3. 完整的配置信息请参考 app.json配置
   

2.3 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	是否全局开启下拉刷新。 详见 Page.onPullDownRefresh
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px。 详见 Page.onReachBottom
disableScroll	Boolean	false	设置为 true 则页面整体不能上下滚动；只在页面配置中有效，无法在 app.json 中设置该项

三、视图层 WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
3.1 数据绑定
文章图片

3.1.1 普通写法

{{ message }} Page({ data: { message: 'Hello MINA!' } })

3.1.2 组件属性
简直和上面没区别啊

文章图片

Page({ data: { id: 0 } })

3.1.3 bool类型

文章图片

不要直接写 checked="false"，其计算结果是一个字符串

3.2 运算
文章图片

3.2.1 三元运算

3.2.2 算数运算

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

3.2.3 逻辑判断

3.2.4 字符串运算

{{"hello" + name}} Page({ data:{ name: 'MINA' } })

3.2.5 注意

文章图片

花括号和引号之间如果有空格，将最终被解析成为字符串
3.3 列表渲染
文章图片

3.3.1 wx:for
项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名
下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名

{{index}}: {{item.name}}:{{item.age}} Page({ data: { array: [{ name: 'foo', age: 18, }, { name: 'bar' 'age': 20, }] } })

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

{{index}}: {{item}}

3.3.3 wx:key
提高效率使用的
3.4 条件渲染
文章图片

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

True

3.4.2 hidden

类似 wx:if
频繁切换 用 hidden
不常使用 用 wx:if

推荐阅读

• 

  绮字五行属什么 绮的组词
• 

  电线如何选择几方 电线选2.5方还是4方
• 

  怎么才能把金牛座的男生追到手？
• 

  尼康fm2常见问题 尼康FM2怎么启动电源
• 

  烤鸭架子汤怎么做好吃
• 

  qq空间怎么设置仅自己可见
• 

  百度网盘Svip如何购买便宜 百度网盘vip共享
• 

  国际和平日手抄报文字 国际宽容日手抄报内容
• 

  无症状感染者|广州新疫情传播力强，市民通宵排队打疫苗，专家：10天后可产生保护力
• 

  让你的打印机重获新生 佳能MG6150废墨清零方法详解
• 

  新手开网店怎样开呢 网店怎么样
• 

  核桃仁冷冻了三年还能吃吗
• 

  菲斯曼壁挂炉怎么调水压？
• 

  acl会议含金量,acl2023什么时候出结果
• 

  三角战略试玩版队友怎么招募 三角战略试玩版队友招募方法
• 

  世界足球日小孩踢足球简笔画
• 

  郑州公租房在等待分房期间居住证换地址有影响吗？
• 

  如何正确清洗羽绒服？
• 

  iphone13第一次充电注意事项
• 

  一花一世界|一花一世界|小说连载

• 微信小程序|微信小程序基础知识点
• 微信小程序底部导航栏实现
• 微信小程序|微信小程序视图层
• 微信小程序|【你踩的坑这里都有】微信小程序分包指南
• 前端|微信小程序 - 进阶（自定义组件、promis化、mobx、分包、自定义tabBar）
• 微信小程序|uniapp微信小程序subPackages分包处理
• BUG小王子|String转Date问题
• 小河的忧愁
• 投稿|扫地机器人的中场战事：“扫地茅”狂奔，小米系内卷，家电巨头升维
• #|11 种主要神经网络结构图解