目录

• 官方文档
• 一、小程序结构目录
  • 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

推荐阅读

• 

  大衬衣怎么搭配 让人眼前一亮
• 

  玻璃胶如何使用？玻璃胶如何使用?
• 

  橙子是什么季节的水果 怎么挑选橙子
• 

  华为手机忘记锁屏密码怎么办
• 

  如何快速升级公益服务器？ 公益服务器怎么升级最快
• 

  苹果动图如何保存 苹果怎么保存贴吧动图
• 

  志高空调无法开机该怎么解决?,基本上用这几种方法
• 

  国庆节购车指南 2020国庆节买车优惠力度大吗
• 

  立式空调怎么消毒
• 

  华为S7703交换机,一个镜像口如何对应多个观察口？华为S7703的介绍
• 

  灵芝孢子粉怎么吃
• 

  linux的echo命令 linux中echo命令的用法
• 

  李白的《清平调》是李白最有意境的诗吗？
• 

  最新版excel怎么制作迷你图 excel2016怎么添加迷你图
• 

  湖北荆州一周天气预报_湖北荆州天气查询
• 

  新款混动汉兰达报价及图片 新款汉兰达混动版落地多少钱
• 

  驱动桥类型 驱动桥类型有哪几种
• 

  文明6全面开战神级难度教学 全面开战怎么玩
• 

  玩咖女是什么意思
• 

  android中shape 的使用

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