一、小程序-起步

1.1 小程序和普通网页开发的不同

1.2 项目的基本组成部分

1. pages用来存放所有小程序的页面
2. utils用来存放工具性质的模块（例如:格式化时间的自定义模块)
3. app.js 小程序项目的入口文件
4. app.json小程序项目的全局配置文件
5. app.wxss 小程序项目的全局样式文件
6. project.config.json项目的配置文件
7. sitemap.json用来配置小程序及其页面是否允许被微信索引
8. eslintrc.js是ESLint的配置文件，规范代码书写
9. project.private.config.json项目私有配置文件。此文件中的内容将覆盖 project.config.json 中的相同字段。项目的改动优先同步到此文件中。

1.3 小程序的宿主环境

• 手机微信是小程序的宿主环境
• 包含：通信模型、运行机制、组件、API

1.3.1 通信模型

1. 通信的主体
   • 小程序中通信的主体是渲染层和逻辑层，其中:
     • WXML模板和 wXSS样式工作在渲染层
     • JS脚本工作在逻辑层
2. 小程序的通信模型
   • 小程序中的通信模型分为两部分:
     1. 渲染层和逻辑层之间的通信
        • 由微信客户端进行转发
     2. 逻辑层和第三方服务器之间的通信
        • 由微信客户端进行转发

1.3.2 运行机制

• 小程序启动的过程
  1. 把小程序的代码包下载到本地
  2. 解析app.json 全局配置文件
  3. 执行app.js小程序入口文件，调用App()创建小程序实例
  4. 渲染小程序首页
  5. 小程序启动完成
• 页面的渲染过程
  1. 加载解析页面的.json配置文件
  2. 加载页面的.wxml模板和.wxSs样式
  3. 执行页面的.js 文件，调用Page()创建页面实例
  4. 页面渲染完成

1.3.3 常用的视图容器类组件view、scroll-view、swiper

1. view
   • 普通视图区域
   • 类似于HTML中的div，是一个块级元素
   • 常用来实现页面的布局效果
2. scroll-view
   • 可滚动的视图区域
   • 常用来实现滚动列表效果
   • scroll-y 属性：允许纵向滚动

---

1. swiper 和 swiper-item
   • 轮播图容器组件和轮播图item组件

• swiper组件的常用属性：

属性	默认值	说明
indicator-dots	false	是否显示面板指示点
indicator-color	rgba(0,0,0,.3)	指示点颜色
indicator-active-color	#000000	当前选中的指示点颜色
autoplay	false	是否自动切换
interval	5000	自动切换时间间隔
circular	false	是否采用衔接滑动

示例代码(wxml部分)：

<!-- 轮播图 -->
<swiper class="swiper-box" indicator-dots="true" indicator-active-color="grey" autoplay="true" circular="true" interval="5000"><swiper-item><view class="item">A</view></swiper-item><swiper-item><view class="item">B</view></swiper-item><swiper-item><view class="item">C</view></swiper-item>
</swiper>

1.3.4 常用的基础内容组件text、rich-text

1. text
   • 文本组件
   • 类似于HTML中的span标签，是一个行内元素
   • 通过 user-select 属性，可实现长按选中的效果

<view class="text-test"><text user-select="true">1888888888</text>
</view>

---

1. rich-text
   • 富文本标签
   • 支持把HTML字符串渲染为WXML结构
   • 通过 nodes 属性，可将HTML字符串渲染为对应的UI结构

<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>

1.3.5 其它常用组件button、image、navigator

1. button
   • 按钮组件
   • 功能比 HTML中的button按钮丰富
   • 通过open-type属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等)

• 示例代码：

<view>~~~~通过type指定按钮类型~~~~</view>
<button>普通按钮</button>
<button type="primary">主色调按钮</button>
<button type="warn">警告按钮</button><view>~~~~size=mini,小尺寸按钮~~~~</view>
<button size="mini">普通按钮</button>
<button type="primary" size="mini">主色调按钮</button>
<button type="warn" size="mini">警告按钮</button><view>~~~~plain 镂空按钮~~~~</view>
<button size="mini" plain="true">普通按钮</button>
<button type="primary" size="mini" plain="true">主色调按钮</button>
<button type="warn" size="mini" plain="true">警告按钮</button>

---

1. image
   • 图片组件
   • image 组件默认宽度约300px、高度约240px

<image src="/images/1.png"></image>

• image 组件的mode 属性用来指定图片的裁剪和缩放模式，常用的mode属性值如下:

mode值	说明
scaleToFill	(默认值）缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

---

1. navigator
   • 页面导航组件
   • 类似于HTML中的a链接

1.3.6 API

• 小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力，例如:获取用户信息、本地存储、支付功能等。
• 小程序把API分为了如下三大类：
  1. 事件监听API
     • 特点：以on开头，用来监听某些事件的触发
     • 举例： wx.onWindowResize(function callback)监听窗口尺寸变化的事件
  2. 同步API
     • 特点1：以Sync 结尾的API都是同步API
     • 特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
     • 举例：wx.setStorageSync('key', 'value')向本地存储中写入内容
  3. 异步API
     • 特点:类似于jQuery 中的$.ajax(options)函数，需要通过success、fail、complete接收调用的结果
     • 举例: wx.request()发起网络数据请求，通过success回调函数接收数据

二、小程序-模板

2.1 WXML模板语法

2.1.1 数据绑定

1. 数据绑定的基本原则
   • 在data中定义数据
   • 在WXML中使用数据
2. 在data中定义页面的数据
   • 在页面对应的 .js 文件中，把数据定义到data对象中即可：

Page({data:{//字符串类型的数据info:'init data',//数组类型的数据msgList:[{msg:'Hello'},{msg:'world'}]//生成随机数字randomNum:Math.random() * 10}
})

1. 使用Mustache语法
   • 把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为:

<view>{{要绑定的数据名称}}</view>
<view>{{info}}</view>
<view>{{ msgList[0].msg + msgList[1].msg }}</view>
//三元表达式
<view>{{ randomNum >= 5?'随机数字大于5' : '随机数字小于5' }}</view>

2.1.2 事件绑定

• 事件是渲染层到逻辑层的通讯方式。通过事件可以将用户在渲染层产生的行为，反馈到逻辑层进行业务的处理。
• 常用事件：

类型	绑定方式	事件描述
tap	bindtap 或 bind:tap	手指触摸后马上离开，类似于HTML中的click事件
input	bindinput 或 bind:input	文本框的输入事件
change	bindchange 或 bind:change	状态改变时触发

---

• 当事件回调触发的时候，会收到一个事件对象event，它的详细属性如下表所示:

属性	说明
type	事件类型
timeStame	页面打开到触发事件所经过的毫秒数
target	触发事件的组件的一些属性值集合
currentTarget	当前组件的一些属性值集合
detail	额外的信息
touches	触摸事件，当前停留在屏幕中的触摸点信息的数组
changedTouches	触摸事件，当前变化的触摸点信息的数组

1. bindtap的语法格式

<button type="primary" bindtap="btnTapHandle">按钮</button>

Page({btnTapHandle(e){console.log(e)}
})

2. 在事件处理函数中为data中的数据赋值

• 通过调用this.setData(dataObject)方法，可以给页面data中的数据重新赋值，示例如下:

Page({data:{count:0},changeCount(){this.setData({count:this.data.count + 1})}
})

3. 事件传参

• 小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数
• 可以为组件提供data-*自定义属性传参，其中*代表的是参数的名字，示例代码如下:

<button bindtap="btnTapHandle" data-info="{{2}}">事件传参</button>

• info 会被解析为参数的名字
• 数值2会被解析为参数的值

---

• 在事件处理函数中，通过event.target.dataset.参数名即可获取到具体参数的值，示例代码如下:

btnTapHandle(e){// dataset是一个对象，包含了所有通过 data-* 传递过来的参数项console.log(e.target.dataset)console.log(e.target.dataset.info)
}

4. bindinput的语法格式

<input type="text" bindinput="inputHandle"/>

inputHandle(e){// 输出文本框内最新的值console.log(e.detail.value);
}

5. 实现文本框和data之间的数据同步

1. 定义数据：

Page({data:{msg:'你好，'}
})

1. 渲染结构：

<input value="{{msg}}" bindinput="inputHandle"/>

1. 美化样式：

input{border: 1px solid #eee;padding: 5px;margin: 5px;border-radius: 3xp;
}

1. 绑定input事件处理函数：

inputHandle(e){this.setData({msg:e.detail.value})
}

2.1.3 条件渲染

1. wx:if

• 在小程序中，使用wx:if="{{condition}}"来判断是否需要渲染该代码块:

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

• 也可以用wx:elif和wx:else来添加else判断:

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>

2. 结合<block>使用wx:if

• 如果要一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用 wx:if 控制属性，示例如下:

<block wx:if="{{true}}"><view> view1 </view><view> view2 </view>
</block>

• 注意: <block>并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染

3. hidden

• 在小程序中，直接使用hidden="{{ condition }}"也能控制元素的显示与隐藏

<view hidden="{{ condition }}">条件为true的时候隐藏元素，否则显示</view>

4. wx:if和hidden的对比

① 运行方式不同

wx:if 以 动态创建和移除元素的方式，控制元素的展示与隐藏

hidden 以 切换样式的方式( display:none/block;)，控制元素的显示与隐藏

② 使用建议

频繁切换时，建议使用 hidden

控制条件复杂时，建议使用 wx:if 搭配 wx:elif、 wx:else进行展示与隐藏的切换

2.1.4 列表渲染

1. wx:for

• 通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下:

<view wx:for="{{array}}">索引是：{{index}},当前项是：{{item}}
</view>

• 默认情况下，当前循环项的索引用index表示;当前循环项用item表示。

---

• 手动指定索引和当前项的变量名
  • 使用 wx:for-index 可以指定当前循环项的索引的变量名
  • 使用 wx:for-item 可以指定当前项的变量名

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="item1">索引是：{{idx}},当前项是：{{item1}}
</view>

2. wx:key的使用

• 类似于Vue列表渲染中的 :key，小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的 key值，从而提高渲染的效率，示例代码如下:

data:{userlist:[{id:1,name:'小红'},{id:2,name:'小蓝'},{id:3,name:'小绿'}]
}

<!-- wxml结构 -->
<view wx:for="{{userlist}}" wx:key="id">{{item.name}}</view>

2.2 WXSS模板样式

WXSS (WeiXin Style Sheets)是一套样式语言，用于美化WXML的组件样式，类似于网页开发中的CSS。

• WXSS 具有CSS大部分特性，同时，WXSS还对CSS进行了扩充以及修改，以适应微信小程序的开发。
• 与CSS相比，WXSS扩展的特性有：
  • rpx 尺寸单位
  • @import 样式导入

2.2.1 rpx尺寸单位

• rpx (responsive pixel）是微信小程序独有的，用来解决屏适配的尺寸单位。
• rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕在宽度上等分为750份（即:当前屏幕的总宽度为750rpx）
  • 在较小的设备上，1rpx所代表的宽度较小
  • 在较大的设备上，1rpx所代表的宽度较大
• 小程序在不同设备上运行的时候，会自动把 rpx的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。

2.2.2 样式导入

• 使用WXSS提供的@import语法，可以导入外联的样式表。
• @import后跟需要导入的外联样式表的相对路径，用;表示语句结束。示例如下:

/** common.wxss **/
.small-p{padding:5px;
}

/** app.wxss **/
@import "common.wxss";
.middle-p{padding:15px;
}

2.2.3 全局样式和局部样式

1. 全局样式
   • 定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
2. 局部样式
   • 在页面的.wxss 文件中定义的样式为局部样式，只作用于当前页面。

注意：

① 当局部样式和全局样式冲突时，根据 就近原则，局部样式会 覆盖全局样式

② 当局部样式的 权重大于或等于全局样式的权重时，才会覆盖全局的样式

【小程序】小程序起步、WXML模板语法和WXSS模板样式相关推荐

1. 微信小程序基础学习（2）- 模板与配置：WXML 模板语法、WXSS 模板样式、全局配置、页面配置、网络数据请求

   1. WXML 模板语法 1.1 数据绑定 (1) 数据绑定的基本原则 ① 在 data 中定义数据 ② 在 WXML 中使用数据 (2)在 data 中定义页面的数据 在页面对应的 .js 文件中, ...

2. 分享一个微信小程序编辑页面的WXML模板

   分享一个微信小程序编辑页面的WXML模板 最近在进行微信小程序开发的时候经常会碰到编辑页面的搭建,大致格式如图所示: 顶部:返回按钮和确认按钮,在中间还可以自行加上一些别的元素. 中间部分:编辑的标题 ...

3. [小程序] 微信开发者工具下载与安装 WXMLfor if 模板页面引用 tabBar

   文章目录 帐号设置 微信开发者工具 1.工具的下载与安装 2.helloworld项目 小程序目录结构及配置 1.目录结构 2.全局配置文件app.json 3.全局样式文件app.wxss 4.小程 ...

4. 微信小程序-B站：wxml和wxss文件

   WXML WXML(WeiXin Markup Language)是微信的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. (小安娜:好像很厉害的样子,那基础组件.事件系统是什么?感觉更厉 ...

5. 3.微信小程序-B站：wxml和wxss文件

   WXML WXML(WeiXin Markup Language)是微信的一套标签语言,结合基础组件.事件系统,可以构建出页面的结构. (小安娜:好像很厉害的样子,那基础组件.事件系统是什么?感觉更厉 ...

6. 小程序看练代码02--模板、封装模板，include模板，wxs，全局样式，导入样式，微信基础样式库，hover-class等，过渡动画，空格使用，图片懒加载，ico图标，图像vh居中，矢量库，表单

   1.定义及使用模板 模板没有自己的js,也没有自己的监听,而是直接使用页面的js和监听.请更倾向去使用组件 <text>模板的使用</text> <!--模板的定义,要给 ...

7. 微信小程序将html转为wxml开发案例

   微信小程序开发虽说是比较偏向前端开发,但是它们的语法结构又不太一样.例如,wxml跟html就有本质的不同,就拿a标签来说吧,wxml是不支持a标签的,还有就是wxml不兼容html,下面小编就针对这 ...

8. 微信小程序基础学习（WXML）

   一.全局配置 在小程序配置文件可以查找自己想要使用的配置文件 1.底部导航栏 "tabBar": {"list": [{"pagePath" ...

9. 微信小程序3（WXSS模板样式和全局局部配置）

   WXSS模板样式 WXSS模板样式-rpx rpx(responsive pixel)是微信小程序独有的,用来解决屏适配的尺寸单位 实现原理' 鉴于不同设备的屏幕大小不同,为了实现屏幕的自动适配,rp ...

最新文章

1. Kotlin on Android 开发环境介绍
2. 小孩都看得懂的YOLO！
3. MySQL等关系型数据库概述
4. IF-ERRORLEVEL使用方法
5. Java学习之文件操作
6. Enterprise Library +Caliburn.Micro+ＷＰＦ CM框架下使用企业库验证,验证某一个属性,整个页面的文本框都变红的原因...
7. python 数字类型判断_Python中 各种数字类型的判别(numerica, digital, decimal)
8. 【图像融合】基于matlab GUI SIFT+小波变换图像拼接融合系统【含Matlab源码 815期】
9. 通过vba代码将word转换为PDF
10. CSS中文字体对照表
11. 定位神器：1秒定位DOM元素绑定的事件代码的位置
12. 数据结构与算法(一) 链表（代码示例）
13. matlab命令行窗口显示长度设置_设置命令行窗口输出显示格式 | MATLAB format| MathWork...
14. python用两分钟告诉你，怎样暴力破解隔壁老王的 WiFi 密码
15. ArcGIS基础学习：数据类型
16. SEDA源码解读（三）
17. Python解决：当文件夹存在时清空文件夹，文件夹不存在时新建文件夹
18. 入侵必读:网警如何找到你
19. 高性能数据库连接池的内幕
20. 2005计算机885编程题

热门文章

1. ReSharper 使用感受
2. 服务器找不到存储服务器,Alfresco社区版“在此服务器上找不到Alfresco存储库”...
3. Supervisor启动java服务(jar)
4. 解决：“由于可能不会将凭据发送到远程计算机，因此将不会进行连接。若要获得协助，请与您的系统管理员联系”
5. ps 仿章工具的使用
6. EXCEL的几个取整函数对比，int() round() ceiling() ceiling.math()等
7. 左旋肉碱溶液铁离子去除办法
8. java kml_当Java遇上KML
9. c语言打开指定文件,C语言文件的打开和关闭
10. Rancher2.6 Monitoring Grafana 对接 LDAP