小程序的模板与配置

WXML的模板语法

事件绑定

小程序中常用的事件：

事件对象的属性：

bindtap事件示例：

为data里面的数据赋新值：

事件绑定时的传参：

bindinput语法格式：

 

 实现文本框与data同步：

在wxml中写入一个输入框

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

 定义输入事件的函数

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

 条件渲染

 

控制元素显示与隐藏的第二种方式

 wx：if与hidden的对比

 列表渲染

 wx：key：注意，key值后不用插值语法

WXSS模板样式

关于rpx

rpx的实现原理:鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx把所有设备的屏幕，在宽度上等分为750份（即:当前屏幕的总宽度为750rpx)。

• 在较小的设备上，1rpx所代表的宽度较小
• 在较大的设备上，1rpx所代表的宽度较大

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

通常建议设计师以iphone6作为设计标准，正好1rpx=0.5px

样式导入

 在当前页面的wxss中导入其他页面中的wxss

全局样式和局部样式

全局样式：

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

局部样式：

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

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

全局配置

 Window配置项

注意：

• 导航栏背景和窗口背景颜色都只支持十六进制，不能直接使用颜色文本。
• 要以手机扫码预览为准，不要太相信模拟器
• 窗口背景颜色指的是下拉刷新露出来的窗口
• 上拉触底的距离默认为50px，如果没有特殊需求，建议使用默认值即可

tabBar配置项

tabBar是什么

tabBar的组成部分

 tabBar节点的配置项

每个页签中的配置项：

 配置一个tabBar页面：

页面要放在pages中靠前面的位置，不要往后放。

"tabBar": {
    "list": [{
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "/tabs/home.png",
        "selectedIconPath": "/tabs/home-active.png"
    },{
        "pagePath": "pages/message/message",
        "text": "消息",
        "iconPath": "/tabs/message.png",
        "selectedIconPath": "/tabs/message-active.png"
    },{
        "pagePath": "pages/contact/contact",
        "text": "联系我们",
        "iconPath": "/tabs/contact.png",
        "selectedIconPath": "/tabs/contact-active.png"
    }]
}

 页面配置

小程序中，每个页面都有自己的.json配置文件，用来对当前页面的窗口外观、页面效果等进行配置。

配置项与全局配置中window的配置项内容一样。

数据请求

 发起get/post请求

发起post请求，把method改为POST即可

 

数据请求时的注意事项

跳过合法域名校验

关于小程序中ajax和跨域

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