1. 数据绑定

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

// index.js
Page({// string 类型info:'init data',// 数组 类型msgList:[{msg:'hello'},{msg:'world'}]
})

在WXML中使用数据：把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。语法格式为：
```
<view>{{要绑定的数据名称}}</view>
```
应用场景：
1. 绑定内容
2. 绑定属性
3. 运算（三元运算、算术运算等）

2. 事件绑定

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

常用的事件：

tap：bindtap或bind:tap（手指触摸后马上离开，类似于HTML中的cick事件）

在小程序中，不存在HTML中的onclick鼠标点击事件，而是通过tap事件来响应用户的触摸行为。
```
  
<button type="primary" bindtap="btnTapHandler">按钮</button>
```
```
  // index.js  定义按钮的事件处理函数btnTapHandler(e){console.log(e)}
```
input：bindinput bind:input（文本框的输入事件）

在小程序中，通过input事件来响应文本框的输入事件，语法格式如下：
```
<input bindinput="inputHandler"><input>
```
```
inputHandler(e){//e.detail.value是变化过后，文本框最新的值console.log(e.detail.value)
}
```
change：bindchange bind:change（状态改变时触发）

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

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

target 是触发该事件的源头组件，而 currentTarget 则是当前事件所绑定的组件。举例如下：

3. 事件传参

小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数。例如，下面的代码将不能正
常工作：

<button type="primary"bindtap='btnHandler(123)'>事件传参</button>

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

可以为组件提供dta-* 自定义属性传参，其中 *代表的是参数的名字，示例代码如下：

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

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

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

btnHandler(event){//dataset是一个对象，包含了所有通过data-*传递过来的参数项console.log(event.target.dataset)//通过dataset可以访问到具体参数的值console.log(event.target.dataset.info)
}

4. 网络请求

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制：

只能请求HTTPS类型的接口

必须将接口的域名添加到信任列表中

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

注意事项

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

get和post请求示例

调用微信小程序提供的wX.request()方法，可以发起GET数据请求，示例代码如下：

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

调用微信小程序提供的wx.request()方法，可以发起POST数据请求，示例代码如下：

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

在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在页面的onLoad事件
中调用获取数据的函数，示例代码如下：

// 生命周期函数--监听页面加载
onLoad(options) {this.getInfo()
},

跳过request合法校验

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

# ☑不校验合法域名、web-view(业务域名)、TLS版本以及HTTPS证书

注意：跳过request合法域名校验的选项，仅限在开发与调试阶段使用！

跨域和Ajax

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

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

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

微信小程序-模板与配置
1.数据绑定 1.1.数据绑定的基本原则在 data 中定义数据在 WXML 中使用数据 1.2.在 data 中定义页面的数据 # 在页面对应的 .js 文件中,把数据定义到 data 对象中即 ...
2 - 微信小程序 - 模板与配置
模板与配置 1 模板语法 - 数据绑定 1.1 数据绑定的基本原则在 data 中定义数据在 WXML 中使用数据 1.2 在 data 中定义页面的数据在页面对应的 .js 文件中,把数据定义 ...
微信小程序模板消息（服务通知消息）原始post工具封装(不使用jar包--坑比较多)，解决47001(JSON格式)和中文乱码问题
微信小程序模板消息(服务通知消息)原始post工具封装(不使用jar包--坑比较多),解决47001(JSON格式)和中文乱码问题参考文章: (1)微信小程序模板消息(服务通知消息)原始post工具 ...
axure小程序模板_微信小程序模板案例收集
微信小程序发布近四年来,诞生了各行各业的高质量小程序,其中有很多都是用微信小程序模板制作的.新手在制作自己的小程序时,就可以参考这些好看的小程序模板案例. 1.电商小程序这是目前非常常见的小程序类型 ...
微信小程序02【配置详解、生命周期-app对象使用、页面跳转详解】
学习地址:https://www.bilibili.com/video/BV1sx411z77P 笔记01:https://blog.csdn.net/weixin_44949135/article/ ...
微信小程序模板消息群发解决思路
基于微信的通知渠道,微信为开发者提供了可以高效触达用户的模板消息能力,以便实现服务的闭环并提供更佳的体验.(微信6.5.2及以上版本支持模板功能.低于该版本将无法收到模板消息.) 模板推送位置:服务通 ...
微信小程序傻瓜制作_微信小程序模板制作：手把手教你做一个生鲜小程序
传统线下生鲜水果类商家如今正面临诸多问题,包括服务范围有限.客户源不稳定.缺少订单导致新鲜食材过期等等.新零售概念的提出,很多商家虽然懂得要打通线上渠道,但通常都是仅仅局限于普通O2O外卖平台,其实这 ...
【微信小程序模板】可以用微信小程序模板制作小程序吗？
小程序作为电子商务营销和企业营销的一个重要方式,很多很多商家.公司已经建立了自己的小程序.那小程序怎么做呢?可以用微信小程序模板制作小程序吗? 答案是可以的,你可以使用小程序制作平台. 首先,是要申请 ...
微信小程序：工具配置 project.config.json
微信小程序:工具配置 project.config.json 一.项目配置文件project.config.json 小程序开发者工具在每个项目的根目录都会生成一个 project.config.js ...

微信小程序模板与配置

文章目录

1. 数据绑定

2. 事件绑定

3. 事件传参

4. 网络请求

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

最新文章

热门文章