官方文档

https://developers.weixin.qq.com/miniprogram/dev/component/

一、小程序结构目录

小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

小程序框架提供了自己的视图层描述语言 WXMLWXSS,以及 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.jsonwindow 中相同的配置项。

属性 类型 默认值 描述
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 普通写法

<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})

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="{{flag ? true : false}}"> Hidden </view>

3.2.2 算数运算

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

3.2.3 逻辑判断

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

3.2.4 字符串运算

<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})

3.2.5 注意

花括号和引号之间如果有空格,将最终被解析成为字符串

3.3 列表渲染

3.3.1 wx:for

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

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

<view wx:for="{{array}}">
{{index}}: {{item.name}}:{{item.age}}
</view>
Page({
data: {
array: [{
name: 'foo',
age: 18,
}, {
name: 'bar'
'age': 20,
}]
}
})

3.3.2 wx:for

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

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

3.3.3 wx:key

提高效率使用的

3.4 条件渲染

3.4.1 wx:if

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

<view wx:if="{{condition}}"> True </view>

3.4.2 hidden

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

类似 wx:if

频繁切换 用 hidden

不常使用 用 wx:if

微信小程序结构目录、配置介绍、视图层(数据绑定,运算,列表渲染,条件渲染)的更多相关文章

  1. 微信小程序 - 结构目录 | 配置介绍

    结构目录 小程序框架提供了自己的视图层描述语言 WXML 和 WXSS,以及 JavaScript,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑. 一.小程序文件结构和传 ...

  2. 微信小程序的目录结构解剖

    在微信小程序当中,我们看到有: .js后缀文件,.json后缀文件,.wxss后缀文件,.wxml后缀文件 .js后缀文件就是我们写的普通的js文件 .json后缀文件就是小程序的配置文件,比如:wi ...

  3. 微信小程序:全局配置app.json

    微信小程序:全局配置app.json 一.全局配置app.json app.json文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包 ...

  4. 微信小程序 app.json 配置

    我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 以下是一个包含了所有配置选项的简单配置app.json : { " ...

  5. 微信小程序:工具配置 project.config.json

    微信小程序:工具配置 project.config.json 一.项目配置文件project.config.json 小程序开发者工具在每个项目的根目录都会生成一个 project.config.js ...

  6. 微信小程序 (全局配置和页面配置)

    全局配置 app.json 文件用来对微信小程序进行全局配置. 一.配置页面路径 二.window 配置全局默认的窗口 navigationBarTextStyle:导航栏的标题颜色 navigati ...

  7. 微信小程序:页面配置 page.json

    微信小程序:页面配置 page.json 一.页面配置 page.json 如果整个小程序的风格是蓝色调,那么可以在 app.json 里边声明顶部颜色是蓝色即可. 实际情况可能不是这样,可能你小程序 ...

  8. 微信小程序 | app.json配置属性

    app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. widows: 用于设置小程序的状态栏.导航条.标题.窗口背景色. navig ...

  9. 微信小程序基本目录结构学习

    今天我们就以firstdemo为例,介绍一下小程序的基本目录结构.当我们打开一个微信小程序项目后,点击进入“编辑”菜单,我们可以看到有以下5个文件/文件夹):pages文件夹,utils文件夹,全局文 ...

随机推荐

  1. StartDT AI Lab | 视觉智能引擎——从Face ID说起,浅析顾客数字化

    “顾客就是上帝”,这句西谚揭示了顾客占据着商业活动中心地位这一客观规律.为了能更好地服务顾客,优化商家自身的服务与产品,对顾客的分析与需求调研一直是商业经营分析中的重中之重. 在商业互联网化.社会数字 ...

  2. 12款优秀的 JavaScript 日历和时间选择控件

    这些插件能够帮助  Web 开发人员更快速的实现各种精美的日历和时间选择效果. 1. The Coolest Calendar 界面非常漂亮的一款日期选择插件,有详细的使用文档,最新版本 1.5. 点 ...

  3. Django的乐观锁与悲观锁实现

    1)     事务概念 一组mysql语句,要么执行,要么全不不执行.  2)  mysql事务隔离级别 Read Committed(读取提交内容) 如果是Django2.0以下的版本,需要去修改到 ...

  4. MYSQL语句中的explain

    1.使用mysql explain的原因 在我们程序员的日常写代码中,有时候会发现我们写的sql语句运行的特别慢,导致响应时间特别长,这种情况在高并发的情况下,我们的网站会直接崩溃,为什么双十一的淘宝 ...

  5. JS去重函数的扩展应用

    数据: 账单id[1,1,1,1,2,2,2,3,3,3,3,3,3,3], 相对于账单id的金额[100,120,110,150,200,180,220,115,150,120,180,220,14 ...

  6. JS计算日期加天数后的日期(起始日期+有效天数=截至日期)

    /** * 优惠券有效期 * startDate:起始日期 * valueTime:有效天数 */ function transferCouponValueTime(startDate,valueTi ...

  7. 「CometOJ」Contest #11

    Link Aeon 显然字典序最大就是把最小的字母放在最后 Business [动态规划] 简单dp dp[i][j]dp[i][j]dp[i][j]表示到第iii天,当前有jjj块钱,最后返还的钱最 ...

  8. python IO多路复用版FTP

    需求: 实现文件上传及下载功能 支持多连接并发传文件 使用select or selectors

  9. angular知识点(2)

    angular知识点(2) 1.为了代码规范,对于需要自动加载的依赖,需要在前面加上注释,注释为://@ngInject 或者是/*@ngInject*/ 2.ngSwitch的应用 在需要用到选择出 ...

  10. 2018.2最新-Scrapy+elasticSearch+Django打造搜索引擎(二)

    请问您今天要来个引擎吗? 工欲善其事必先利其器 最终项目上线演示地址: http://search.mtianyan.cn 第二节:我们搞搞比利,搞搞环境的搭建.Github地址: https://g ...