模板与配置

(一)WXML模板语法

1.数据绑定

1.1 数据绑定的基本原则

1.2 在data中定义数据

1.3 Mustache语法格式

1.4 Mustache语法的应用场景

1.5 Mustache动态绑定内容

1.6 Mustache动态绑定属性

1.7 Mustache三元运算

1.8 Mustache算数运算

2.事件绑定

2.1 事件概述

2.2 小程序中常用的事件

2.3事件对象的属性列表

2.4 target 和 currentTarget 的区别

2.5 bindtap 的语法格式

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

2.7 事件传参

2.8 bindinput的语法格式

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

3.条件渲染

3.1 wx:if / wx:elif / wx:else

3.2 结合使用 wx:if

3.3 hidden

3.4 wx:if 与 hidden 的对比 (v-if / v-show)

4. 列表渲染

4.1 wx:for

4.2 手动指定索引和当前项的变量名

4.3 wx:key 的使用

(二)WXSS模板语法

1.wxss

1.1.wxss和css的关系

wss与css相比,wxss的扩展特性主要有

2.rpx

2.1 什么是rpx尺寸单位

2.2 rpx的实现原理(解决屏幕适配的方案)

3.样式导入

3.1 什么是样式导入

3.2 @import语法

4.全局样式和局部样式

4.1 全局样式

4.2 局部样式

(三) 全局配置

1.全局配置文件及常用的配置项

1.1 小程序窗口组成部分

2. window节点常用的配置项

2.1 设置导航栏的标题 navigationBarTitleText

2.2 设置导航栏的背景色 navigationBarBackgroundColor

2.3 设置导航栏的标题颜色 navigationBarTextStyle

2.4 全局开启下拉刷新的功能 enablePullDownRefresh

2.5 设置下拉刷新时窗口的背景颜色 backgroundColor

2.6 设置下拉刷新时loading的样式 backgroundTextStyle

2.7 设置上拉触底的距离

3 tabBar

3.1 tabBar

3.2 tabBar 的6个组成部分

4 tabBar节点的配置项

每个tab项的配置选项

(四) 页面配置

1.页面配置文件和全局配置文件的关系

2.页面配置中常用的配置项

(五) 网络数据请求

1. 小程序中网络数据请求的限制

2. 配置request合法域名

3.发起get请求

4.发起post请求

5.在页面刚加载时请求数据

6.跳过 request 合法域名校验

7.关于跨域和ajax的说明

模板与配置

(一)WXML模板语法

1.数据绑定

1.1 数据绑定的基本原则

在data中定义数据
在wxml中使用数据

1.2 在data中定义数据

在页面对应的.js文件中,把数据定义到data对象即可

1.3 Mustache语法格式

在data中的数据绑定到页面中渲染,使用Mustache语法(双大括号)将变量包起来即可,语法格式:

注意: Mustache语法即为vue中的插值表达式

1.4 Mustache语法的应用场景

绑定内容
绑定属性
运算( 三元运算 / 算树运算等 )

1.5 Mustache动态绑定内容

1.6 Mustache动态绑定属性

注意: 在vue中数据的双向绑定通过 v-bind 实现,但在小程序中不同,绑定内容和绑定属性都需要使用 Mustache 语法

1.7 Mustache三元运算

1.8 Mustache算数运算

2.事件绑定

2.1 事件概述

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

2.2 小程序中常用的事件

2.3事件对象的属性列表

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

2.4 target 和 currentTarget 的区别

target 是触发事件的源头组件 , currentTarget 是当前事件所绑定的组件

点击内部的按钮时,点击时间以冒泡的方式向外扩散,也会触发外层view 的 tap 事件处理函数

此时对于外部view来说:

e.target 指向的是触发事件的源头组件,因此,e.target 是内部的按钮组件
e.currentTarget 指向当前正在出发事件的那个组件,因此,e.currentTarget 是当前的view组件

2.5 bindtap 的语法格式

在小程序中,不存在html中的onclick鼠标点击事件,而是通过tap事件来响应用户的触摸行为

通过bindtap可以为组件绑定tap触摸事件:

在页面的.js文件中定义对应的事件处理函数,事件参数通过形参event(一般写成e)来接收

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

通过调用 this.setData(dataObject) 方法,可以给页面data中的数据重新赋值

2.7 事件传参

小程序中的事件传参比较特殊,不能在绑定事件的同时为事件处理函数传递参数

在vue中可以在绑定事件的时候进行传值:小程序和vue的区别

因为小程序会把bindtap的属性值统一当作事件名称来处理,相当于要调用一个名称为 btnHandler(123)的事件处理函数

可以提供 data-* 自定义属性传参,其中 * 代表的是参数的名字,示例:

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

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

注意:传参时,data-info=" 2 " 代表string类型2 ;data-info=" {{ 2 }} " 才代表number类型的数字2

2.8 bindinput的语法格式

在小程序中,通过input事件来响应文本输入框的输入事件,语法格式为:

通过bindinput可以为文本框绑定输入事件

在页面的js文件中定义事件处理函数

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

实现步骤:

定义数据

渲染结构

美化样式

绑定input事件处理函数

3.条件渲染

3.1 wx:if / wx:elif / wx:else

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

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

wx:if wx:elif都需要添加判断条件 wx:else表示最后一种情况,不需要添加条件

3.2 结合<block>使用 wx:if

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

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

3.3 hidden

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

3.4 wx:if 与 hidden 的对比 (v-if / v-show)

(1)运行方式不同

wx:if 以动态创建和移除元素的方式控制元素的展示与隐藏
hidden 以切换样式的方式 (类似于 display : none/block ;) 控制元素的显示与隐藏

(2)使用建议

频繁切换时,建议使用hidden
控制条件复杂时,建议使用 wx:if 搭配 wx:elif / wx:else 进行展示与隐藏

4. 列表渲染

4.1 wx:for

通过wx:for可以根据指定的数组,循环渲染重复的数组,语法:

默认情况下,当前循环项的索引用inndex表示,当前循环项用item表示

4.2 手动指定索引和当前项的变量名

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

示例:

4.3 wx:key 的使用

类似于vue列表循环中的 :key ,小程序在实现列表渲染时,也建议为渲染出来的列表指定唯一的key值,从而提高渲染效率,代码示例:

注意:在指定key的时候外面不用包Mustache语法,直接将对应的key值填充就可以,也建议将id或index作为key值

(二)WXSS模板语法

1.wxss

wxss 是一套样式语言,用于美化wxml的组件样式,类似于网页开发中的css

1.1.wxss和css的关系

wxss具有css大部分特性,同时,wxss还对css进行了扩充以及修改,以适应微信小程序的开发

wss与css相比,wxss的扩展特性主要有

rpx尺寸单位
@import样式导入

2.rpx

2.1 什么是rpx尺寸单位

rpx: 是微信小程序独有的,用来解决屏适配的尺寸单位

2.2 rpx的实现原理(解决屏幕适配的方案)

rpx的实现原理非常简单 : 鉴于不同设备屏幕尺寸大小不同,为了实现屏幕的自动适配,rpx把所有设备的屏幕,在宽度上等分750份, ( 即:当前屏幕的总宽度为750rpx )

小程序在不同设备上运行的时候,底层会自动把rpx的样式单位换算成对应的像素单位来渲染,从而实现屏幕适配

3.样式导入

3.1 什么是样式导入

使用wxss提供的@import语法,可以导入外联样式表

3.2 @import语法

@import " 外联样式表的相对路径 " ;

4.全局样式和局部样式

4.1 全局样式

定义在app.wxss中的样式为全局样式,作用于每个页面

4.2 局部样式

在页面的 .wxss 文件中定义的样式为局部样式,只作用于当前页面

注意:

当全局样式和局部样式冲突时,根据就近原则,局部样式会覆盖全局样式
当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局样式

注意:

权重比较: !important > 内敛样式 > id > 类选择器&属性选择器&伪类选择器 > 元素选择器&伪类选择器 > 通配符 > 继承

app.wxss => view:nth-child(1){ backgroung-color : blue }

index.wxss => view{ background-color: pink }

局部样式不会覆盖全局样式,因为全局样式权重高于局部样式

(三) 全局配置

微信小程序配置文件_卷心菜007的博客-CSDN博客

1.全局配置文件及常用的配置项

小程序根目录下的app.json文件就是小程序的全局配置文件,常用的配置项:

pages : 记录当前小程序所有页面的存放路径
window : 全局设置小程序窗口的外观
tabBar : 设置小程序底部的tabBar效果
style : 是否启用新版的组件样式

1.1 小程序窗口组成部分

2. window节点常用的配置项

以navigationBar 开头的配置项 => 配置导航栏

以background 开头的配置项 => 配置窗口背景样式

其余样式配置项 => 用来配置页面效果的配置项

2.1 设置导航栏的标题 navigationBarTitleText

设置步骤: app.json => window => navigationBarTitleText

"window" :{ "navigationBarTitleText" : "我的应用" }

2.2 设置导航栏的背景色 navigationBarBackgroundColor

设置步骤: app.json => window => navigationBarBackgroundColor

"window" :{ "navigationBarBackgroundColor" : "#2b4b6b" }

注意: 导航栏颜色设置只支持十六进制颜色设置

2.3 设置导航栏的标题颜色 navigationBarTextStyle

设置步骤: app.json => window => navigationBarTextStyle

"window" :{ "navigationBarTextStyle" : "white" }

注意: navigationBarTextStyle 导航栏标题颜色的可选值只有black 和 white

2.4 全局开启下拉刷新的功能 enablePullDownRefresh

设置步骤 : app.json => window => enablePullDownRefresh 的值设置为 true

"window" :{ "enablePullDownRefresh" : true } //默认为false

注意: 在app.json中开启下拉刷新功能,会作用于每个小程序页面, 在模拟器中下拉刷新存在误差

2.5 设置下拉刷新时窗口的背景颜色 backgroundColor

当全局开启了下拉刷新的功能后,默认的窗口背景为白色.

设置步骤 : app.json => window => 为backgroundColor指定16进制的颜色值

"window" :{ "backgroundColor" : " #efefef " }

2.6 设置下拉刷新时loading的样式 backgroundTextStyle

当全局开启了下拉刷新的功能后,默认的窗口的loading 为白色.

设置步骤 : app.json => window => 为backgroundTextStyle指定 dark 值

"window" :{ "backgroundTextStyle" : " dark " }

注意 : backgroundTextStyle的可选值只有light 和 dark

2.7 设置上拉触底的距离

概念: 上拉触底是移动端的专有名词,通过手指在屏幕上的拉滑操作,从而加载更多数据的行为

设置步骤 : app.json => window => 为onReachBottomDistance 设置新的数值

注意: 默认距离为50px,没有特殊需求时,保持默认值即可

"window" :{ "onReachBottomDistance" : 100}

3 tabBar

3.1 tabBar

tabbar是移动端应用常见的页面效果,用于实现多页面的快速切换,小程序中通常将其分为:

底部tabBar
顶部tabBar

注意:

tabBar中只能配置最少2个,最多5个tab标签
当渲染顶部tabBar时,不显示icon图标,只显示文本

3.2 tabBar 的6个组成部分

backgroundColor : tabBar的背景颜色
selsctedconPath : 选中时的图片路径
borderStyle : tabBar上边框的颜色
iconPath : 未选中时的图片路径
selectedColor : tab上的文字选中时的颜色
color : tab 上文字的默认(未选中)颜色

4 tabBar节点的配置项

每个tab项的配置选项

"tabBar" : {

"list" :[ { "pagePath":"pages/index/index" , "text":"index" } ,

{ "pagePath":"pages/test/test" , "text":"test" } ] }

(四) 页面配置

1.页面配置文件和全局配置文件的关系

当全局样式和局部样式冲突时,根据就近原则,局部样式会覆盖全局样式
当局部样式的权重大于或等于全局样式的权重时,才会覆盖全局样式

2.页面配置中常用的配置项

注意: 并不是所有的页面都是需要下拉刷新,不在app.json中定义下拉刷新,在设计页面下拉刷新时,将下拉刷新写在页面配置中

message.json => { "enablePullDownRefresh" : true }

(五) 网络数据请求

1. 小程序中网络数据请求的限制

出于安全性方面的考虑,小程序官方对数据接口请求做出了限制:

只能请求 HTTPS 类型的接口 , 不能请求HTTP类接口
必须将接口的域名添加到信任列表中

2. 配置request合法域名

配置步骤:登录微信小程序管理后台=>开发=>开发设置=>服务器域名=>修改request合法域名

注意:

域名只支持 https 协议
域名不能使用 IP 地址或 localhost
域名必须经过ICP备案
服务器域名一个月内最多可申请五次

3.发起get请求

调用微信小程序官方提供的 wx:request() 方法,可以发起get请求,实例:

home.wxml配置

home.js配置,res.data是最后的真实数据

4.发起post请求

调用微信小程序提供的 wx.request()方法,可以发起post数据请求,实例:

home.js配置,res.data是最后的真实数据

5.在页面刚加载时请求数据

在页面刚加载的时候,自动请求一些初始化的数据,需要在页面的onLoad事件中调用获取数据的函数,实例:

注意: 通过this调用,this代表当前页面加载的的实例

6.跳过 request 合法域名校验

如果后端程序员仅仅提供了http协议接口,暂时没有提供https协议接口,此时为了不耽误开发进度,我们可以在微信开发者工具中,临时开启 " 开发环境不校验请求域名,TLS版本及HTTPS证书 " 选项,

跳过request选项.

注意 : 跳过request 合法域名校验的选项,仅限在来发与调试阶段使用

7.关于跨域和ajax的说明

跨域问题只存在于基于浏览器的web开发中,由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域问题.

ajax技术的核心是依赖于浏览器中的 XMLHTTPRequest 这个对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做 " 发起ajax请求 " ,而是叫做" 发起网络数据请求 "

微信小程序3-模板与配置相关推荐

微信小程序开发-模板与配置
微信小程序消息模板设计及实现
本文以微信小程序内置的两个模板:购买成功和评论回复提醒为例来阐述第三方微信小程序平台的设计. 小程序端微信用户支付成功后,微信服务通知中会收到支付成功服务提醒.见下图: 商家端用户完成评价后,商家 ...
微信小程序开发教程！博卡君第二弹【微信小程序项目结构以及配置】
前面我们转了博卡君通宵吐血赶稿的微信小程序开发教程,当时只更新了两章,现在接着发布第三章:微信小程序项目结构以及配置,第四章:微信小程序首页面开发,以下是微信小程序教程找到创建的 demo 文件夹, ...
修改小程序swiper 点的样式_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
小程序长按api_高质量的微信小程序样式模板应该长什么样？
现在不懂技术的小白若想快速制作自己的小程序,一般是通过小程序模板来实现.通过在模板上添加自己的图片.文字.商品等等,可以很简单地生成一个小程序.不过要想把小程序做得好看,你得找高质量的小程序样式模板才 ...
商城模板_商城模板网站html5_微信小程序商城模板
分享一个商城模板平台,商城模板网站html5平台,微信小程序商城模板平台,这个平台可以提供超60+行业的商城模板. ☞商城模板平台另外给大家分享一下,在这个商城模板平台可以制作商城网站,电脑商城和微 ...
微信小程序-WXML-template模板
微信小程序-WXML-template模板微信小程序中的模板,可以在其中定义代码片段,然后再不同的地方调用. 1.定义模板 name属性,取值为模板的名字 <tempalte name=&qu ...
TP6 微信小程序消息推送配置Token校验失败200302
ThinkPHP6 微信小程序消息推送配置时报错: {"ret":200302,"err_msg":"verify token fail"} ...
php+实现群发微信模板消息_使用php实现微信小程序发送模板消息（附代码）
本篇文章给大家带来的内容是关于使用php实现微信小程序发送模板消息(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本章将会简单说一下微信小程序的模板消息发送,相对来说比较简 ...
java计算机毕业设计基于安卓Android/微信小程序的电脑组装机配置商城APP
项目介绍网络的广泛应用给生活带来了十分的便利.所以把组装机配置商城管理与现在网络相结合,利用java技术建设组装机配置商城app,实现组装机配置的信息化.则对于进一步提高组装机配置商城管理发展,丰富 ...

微信小程序3-模板与配置

模板与配置

(一)WXML模板语法

1.数据绑定

1.1 数据绑定的基本原则

1.2 在data中定义数据

1.3 Mustache语法格式

1.4 Mustache语法的应用场景

1.5 Mustache动态绑定内容

1.6 Mustache动态绑定属性

1.7 Mustache三元运算

1.8 Mustache算数运算

2.事件绑定

2.1 事件概述

2.2 小程序中常用的事件

2.3事件对象的属性列表

2.4 target 和 currentTarget 的区别

2.5 bindtap 的语法格式

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

2.7 事件传参

2.8 bindinput的语法格式

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

3.条件渲染

3.1 wx:if / wx:elif / wx:else

3.2 结合<block>使用 wx:if

3.3 hidden

3.4 wx:if 与 hidden 的对比 (v-if / v-show)

4. 列表渲染

4.1 wx:for

4.2 手动指定索引和当前项的变量名

4.3 wx:key 的使用

(二)WXSS模板语法

1.wxss

1.1.wxss和css的关系

wss与css相比,wxss的扩展特性主要有

2.rpx

2.1 什么是rpx尺寸单位

2.2 rpx的实现原理(解决屏幕适配的方案)

3.样式导入

3.1 什么是样式导入

3.2 @import语法

4.全局样式和局部样式

4.1 全局样式

4.2 局部样式

(三) 全局配置

1.全局配置文件及常用的配置项

1.1 小程序窗口组成部分

2. window节点常用的配置项

2.1 设置导航栏的标题 navigationBarTitleText

2.2 设置导航栏的背景色 navigationBarBackgroundColor

2.3 设置导航栏的标题颜色 navigationBarTextStyle

2.4 全局开启下拉刷新的功能 enablePullDownRefresh

2.5 设置下拉刷新时窗口的背景颜色 backgroundColor

2.6 设置下拉刷新时loading的样式 backgroundTextStyle

2.7 设置上拉触底的距离

3 tabBar

3.1 tabBar

3.2 tabBar 的6个组成部分

4 tabBar节点的配置项

每个tab项的配置选项

(四) 页面配置

1.页面配置文件和全局配置文件的关系

2.页面配置中常用的配置项

(五) 网络数据请求

1. 小程序中网络数据请求的限制

2. 配置request合法域名

3.发起get请求

4.发起post请求

5.在页面刚加载时请求数据

6.跳过 request 合法域名校验

7.关于跨域和ajax的说明

微信小程序3-模板与配置相关推荐

最新文章

热门文章