微信小程序

1、小程序 -- 模板与配置
- 1.1 WXML模板语法
- 1.2 WXSS模板样式
- 1.3 全局配置
- 1.4 页面配置
- 1.5 网络数据请求

1、小程序 – 模板与配置

1.1 WXML模板语法

数据绑定

在data中定义数据

Page({data:{//字符串类型数据info:'init data',//数组类型数据msgList:[{msg:'hello'},{nsf:'world'}]}
})

在WXML中使用数据

<view>{{ 要绑定的数据名称 }}</view>
//Mustache语法(双大括号)
//应用场景：绑定内容,绑定属性,运算（三元运算、算术运算等)

事件绑定

事件是渲染层到逻辑层的通讯方式

小程序中常用事件

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

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

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

事件绑定语法格式：

//wxml
<button type="primary" bindtap="btnTapHandler">按钮</button>//js
Page({btnTapHandler(e){console.log(e)},
})

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

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

事件传参

//wxml
<button bindtap = "btnHandler" data-info="{{2}}">事件传参</button>
//通过data-*自定义属性传参//js
btnHandler(event){console.log(event.target.dataset.info)
}
//通过event.target.dataset.参数名获取到具体参数的值

bindinput语法格式
- 通过input事件来响应文本框的输入事件

//wxml
<input bindinput="inputHandler"></input>//js
Page({inputHandler(e){console.log(e.detail.value)}
})

数据同步

步骤

定义数据(data数据)
渲染结构(wxml)
美化样式(wxss)
绑定input事件处理函数(js函数)

条件渲染

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>//要一次性控制多个组件的展示与隐藏，可以使用一个<block> </block>标签将多个组件包装起来，<block>并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染。
<block wx: if="{{true}}"><view> view1 </view><view> view2 </view>
</block>//hidden也能控制元素的显示与隐藏
<view hidden="{{condition}}">条件为true隐藏，条件为 false显示</view>

wx:if 与 hidden 的对比
1. 运行方式不同
  - wx:if 以动态创建和移除元素的方式，控制元素的展示与隐藏
  - hidden 以切换样式的方式(display: none/block;)，控制元素的显示与隐藏
2. 使用建议
  - 频繁切换时,建议使用hidden
  - 控制条件复杂时，建议使用wx:if 搭配wx:elif、wx:else进行展示与隐藏的切换

列表渲染

<view wx:for="{{arr}}">索引是：{{index}}, item项：{{item}}
</view>
//默认情况下，当前循环项的索引用index表示;当前循环项用item表示
//也可以手动指定索引和当前项的变量名 wx:for-index="" wx:for-item=""//小程序在实现列表渲染时，也建议为渲染出来的列表项指定唯一的key值，从而提高渲染的效率
//wxml
<view wx:for="{{userList}}" wx:key="id">{{item.name}}</view>
//js
Page({data:{userList:[{id:1,name:'小红'},{id:2,name:'小黄'},{id:3,name:'小白'}]},
})

1.2 WXSS模板样式

rpx

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

设备	rpx换算px (屏幕宽度750)	px换算rpx (750/屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6 Plus	1rpx = 0.552px	1px = 1.81rpx

开发中建议采用iPhone 6作为视觉设计稿

样式导入

使用WXSS提供的import语法。可以导入外联的样式表

@import "demo.wxss"

全局样式

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

局部样式

在页面的.wxss文件中定义的样式为局部样式，只作用于当前页面
注意:
- 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
- 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

1.3 全局配置

小程序根目录下的 app.json文件是小程序的全局配置文件。常用的配置项如下:
- pages：记录当前小程序所有页面的存放路径
- window：全局设置小程序窗口的外观
- tabBar：设置小程序底部的tabBar效果
- style：是否启用新版的组件样式

window

常用配置项

属性名	类型	默认值	说明
navigationBarTitleText	String	字符串	导航栏标题文字内容
navigationBarBackgroundColor	HexColor	#000000	导航栏背景颜色，仅支持16进制颜色
navigationBarTextStyle	String	white	导航栏标题颜色，仅支持 black / white
backgroundColor	HexColor	#ffffff	窗口的背景色，仅支持16进制颜色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

tabBar

tabBar是移动端应用常见的页面效果,用于实现多页面的快速切换，分为底部和顶部两类
只能配置最少2个，最多5个tab页签；渲染顶部tabBar时并不显示icon

tabBar配置项：

属性	类型	必填	默认值	描述
position	String	否	bottom	tabBar 的位置，仅支持 bottom/top
borderStyle	String	否	black	tabBar 上边框的颜色，仅支持 black/white
color	HexColor	否		tab 上文字的默认（未选中）颜色
selectedColor	HexColor	否		tab 上的文字选中时的颜色
backgroundColor	HexColor	否		tabBar 的背景色
list	Array	是		tab 页签的列表，最少 2 个、最多 5 个 tab

每个tab项的配置选项

属性	类型	必填	描述
pagePath	String	是	页面路径，页面必须在 pages 中预先定义
text	String	是	tab 上显示的文字
iconPath	String	否	未选中时的图标路径；当 postion 为 top 时，不显示 icon
selectedIconPath	String	否	选中时的图标路径；当 postion 为 top 时，不显示 icon

1.4 页面配置

小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置
当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准
常用配置项：(同全局配置项)

属性	类型	默认值	描述
navigationBarBackgroundColor	HexColor	#000000	当前页面导航栏背景颜色，如 #000000
navigationBarTextStyle	String	white	当前页面导航栏标题颜色，仅支持 black / white
navigationBarTitleText	String		当前页面导航栏标题文字内容
backgroundColor	HexColor	#ffffff	当前页面窗口的背景色
backgroundTextStyle	String	dark	当前页面下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否为当前页面开启下拉刷新的效果
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为 px

1.5 网络数据请求

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制:
- 只能请求HTTPS类型的接口
- 必须将接口的域名添加到信任列表中

配置域名步骤：登录微信小程序管理后台 -> 开发 -> 开发设置 -> 服务器域名 -> 修改request合法域名
注意：
- 域名只支持https协议
- 域名不能使用IP地址或localhost
- 域名必须经过ICP备案
- 服务器域名一个月内最多可申请5次修改
发起GET请求

wx.request({url: 'https://www.escook.cn/api/get', //请求的接口地址，必须是基于https协议method:'GET',  //请求的方式data:{         //发送到服务器的数据name:'xyk',age:21},success:(res=>{  //请求成功之后的回调函数  console.log(res)})})

发起POST请求

wx.request({url: 'https://www.escook.cn/api/post', //请求的接口地址，必须是基于https协议method:'POST',  //请求的方式data:{         //发送到服务器的数据name:'xyk',age:21},success:(res)=>{  //请求成功之后的回调函数  console.log(res)}})

页面加载时请求数据

//生命周期函数
onLoad(options) {this.getInfo()this.postInfo()
},

跳过合法域名检验
- 我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS版本及 HTTPS证书」选项，跳过request 合法域名的校验
- 仅限在开发与调试阶段使用

关于跨域和Ajax
- 跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题
- Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”

小程序（模板与配置）相关推荐

微信小程序----第二天（小程序 - 模板与配置）
一.WXML 模板语法 WXML 模板语法 - 数据绑定 1. 数据绑定的基本原则在 data 中定义数据在 WXML 中使用数据 2. 在 data 中定义页面的数据在页面对应的 .js 文件 ...
微信小程序-模板与配置
1.数据绑定 1.1.数据绑定的基本原则在 data 中定义数据在 WXML 中使用数据 1.2.在 data 中定义页面的数据 # 在页面对应的 .js 文件中,把数据定义到 data 对象中即 ...
2 - 微信小程序 - 模板与配置
模板与配置 1 模板语法 - 数据绑定 1.1 数据绑定的基本原则在 data 中定义数据在 WXML 中使用数据 1.2 在 data 中定义页面的数据在页面对应的 .js 文件中,把数据定义 ...
微信小程序模板与配置
文章目录 1. 数据绑定 2. 事件绑定 3. 事件传参 4. 网络请求 1. 数据绑定在data中定义数据:在页面对应的js文件中,把数据定义到data对象中即可 // index.js Page ...
支付宝小程序模板开发，一整套流程
支付宝小程序服务商模板开发着力于解决支付宝生态体系内的小程序管理问题,一套模板,随处部署.能尽可能地减少系统服务商的开发成本,系统服务商只用开发一套小程序代码作为模板就可以快速批量的孵化出大量的商家小 ...
微信小程序模板消息php,微信小程序模板消息实现（PHP+小程序）
参考官方文档和部分资料,总结小程序模板消息推送以及相关注意事项,楼主踩过的坑,特来与大家分享. 一.开发准备: 1.在微信公众平台-小程序的模板中心申请消息模板二.实现原理: 文档示例:小程序 + ...
微信小程序模板发送,openid获取，以及api.weixin.qq.com不在合法域名内解决方法
主要内容在标题三,老手可直接跳到标题三. 本文主要解决个人开发者模板消息发送的问题(没有服务器,不能操作服务器的情况) 针对api.weinxin.qq.com不在以下合法域名列表内的问题提出的解决方 ...
前端开发人员如何制作微信小程序模板
(我的博客网站中的原文:http://www.xiaoxianworld.com/archives/305,欢迎遇到的小伙伴常来瞅瞅,给点评论和建议,有错误和不足,也请指出.) 最近接触了一下微信小程 ...
微信小程序_1,基础配置及其开发工具
如果你想找某一内容,请ctrl+f,全文搜索小程序与普通网页开发的区别: 获取小程序的AppID 微信开发者工具 1.快速创建小程序项目 2.代码的查看和编辑 3.对小程序功能进行调试 4.小程序的 ...
微信小程序模板消息（服务通知消息）原始post工具封装(不使用jar包--坑比较多)，解决47001(JSON格式)和中文乱码问题
微信小程序模板消息(服务通知消息)原始post工具封装(不使用jar包--坑比较多),解决47001(JSON格式)和中文乱码问题参考文章: (1)微信小程序模板消息(服务通知消息)原始post工具 ...

小程序（模板与配置）

微信小程序

1、小程序 – 模板与配置

1.1 WXML模板语法

1.2 WXSS模板样式

1.3 全局配置

1.4 页面配置

1.5 网络数据请求

小程序（模板与配置）相关推荐

最新文章

热门文章