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 的对比
- 运行方式不同
- wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏
- hidden 以切换样式的方式(display: none/block;),控制元素的显示与隐藏
- 使用建议
- 频繁切换时,建议使用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请求文章来源:https://www.toymoban.com/news/detail-826099.html
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 合法域名的校验
- 仅限在开发与调试阶段使用
文章来源地址https://www.toymoban.com/news/detail-826099.html
- 关于跨域和Ajax
- 跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器,而是微信客户端,所以小程序中不存在跨域的问题
- Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象,由于小程序的宿主环境是微信客户端,所以小程序中不能叫做“发起Ajax请求”,而是叫做“发起网络数据请求”
到了这里,关于快速搭建微信小程序:模板和配置详细介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!