网站制作关键词,教人做饮料的网站,百度ai搜索引擎,汕头企业网站建设设计一、自定义属性
#xff08;1#xff09;定义#xff1a;
微信小程序中的自定义属性实际上是由data-前缀加上一个自定义属性名组成。
#xff08;2#xff09;如何获取自定义属性的值#xff1f;
用到target或currentTarget对象的dataset属性可以获取数据
#xff…一、自定义属性
1定义
微信小程序中的自定义属性实际上是由data-前缀加上一个自定义属性名组成。
2如何获取自定义属性的值
用到target或currentTarget对象的dataset属性可以获取数据
3注意无论你在JavaScript代码中如何命名data对象中的属性包括是否使用驼峰命名法在WXML模板中引用这些属性时你都应该使用全小写的形式。这是因为微信小程序的数据绑定系统不区分大小写它会自动将属性名解析为小写形式
4代码示例
自定义了两个新属性data-newname和data-newpassword
!--WXML 代码 --view bind:taptext1 data-newname李四 data-newpassword123获取用户名和密码/viewview用户名{{username}}/viewview密码:{{password}}/view
//WXSS代码
Page({data: {//原先的用户名与密码username: 张三,password: abc,},
text1: function (e) {// dataset属性获取数据// newname、newpassword是wxml里data—自定义的新属性this.setData({username: e.currentTarget.dataset.newname,password: e.target.dataset.newpassword})}
})
原先页面显示 添加自定义属性后点击 “ 获取用户名与密码显示 ” 二、模块
注意创建一个文件夹utils模块全在utils文件夹下进行创建 1创建模块 在文件夹下的js文件中的module.exports对象里创建
2引入模块 使用require引入创建的模块
3代码示例
在index.wxml文件里映射 button bind:taptest2欢迎/button
创建模块我在utils文件夹下创建了一个welcome.js文件 在welcome.js文件中写入
module.exports{msg:hello,
}
引入模块在index.js文件里引入welcome.js 接着在Page里写test2函数的内容
var wel require(../../utils/welcome); test2: function () {console.log(wel.msg);},
点击欢迎按钮控制台显示 三、列表渲染
1使用wx:for进行列表渲染
2微信小程序进行列表渲染时会根据列表中的数量渲染相应的数量内容.
3使用一般我们会定义一个数组arr在wxml里面wxfor{{arr}} 接着index-item映射出下标和内容
4代码示例
在wxml里面内容
!-- 普通数组 --view wx:for{{arr}}{{index}}——{{item}}/view!-- 对象数组 --view wx:for{{arr2}}{{index}}——{{item.mynum}}——{{item.myname}}/view
在index.js里面内容
Page({data: {//列表渲染 wx:for// 定义一个普通数组arrarr: [a,b,c],// 定义一个对象数组arr2arr2: [{mynum: 11,myname: 小明},{mynum: 22,myname: 小可},{mynum: 33,myname: 小等},]},
)}
页面内容显示 四、网络请求
1微信小程序发起网络请求通过调用wx.request方法
2wx.request方法常用属性:
1》url string型 开发者服务器接口地址默认值为
2》data string/object/ArrayBuffer型 请求的参数默认值为
3》header object型此属性可省略 设置请求的头默认值为
4》method string型 http请求方式默认值get
5》dataType string型 返回的数据格式默认值为json
6》responseType string型 响应的数据类型默认值为text
7》success function型 接口调用成功的回调函数
8》fail function型 接口调用失败的回调函数
9》complete function型 接口调用结束的回调函数 调用成功、 调用失败都会执行
3注意
3-1》method选项的合法值包括options、get、head、post、put、delete、trace、connect。具体使用哪个以服务器接口的要求为准
3-2》若网络请求运行结果出不来就在微信小程序开发工具上点击设置——项目设置——勾项目设置——勾选不校验合法域名、web... 4使用
先编译好代码在vscode中的简单服务器端再在微信小程序开发者工具中使用wxrequest方法进行相关网络请求操作。可以使用生命周期回调函数onload来创建函数写入网络请求代码
5代码示例
在vscode中先搭建一个简单的服务器
//第一个Node.js应用
//创建Node.js服务器的步骤大概分为两步
//第一步引入 http 模块
//使用 require 指令来载入 http 模块并将实例化的 HTTP 赋值给变量 http
var http require(http);
//第二步创建服务器
//使用 http.createServer() 方法创建服务器
//函数通过 request, response 参数来接收和响应数据。
http.createServer(function(request, response) {// 发送 HTTP 头部 // HTTP 状态值: 200 : OK// 内容类型: text/plainresponse.writeHead(200, { Content-Type: text/plain });//获取请求参数console.log(request.url);// 发送响应数据 // response.end(Hello World);response.end([{ name: JavaScript高级程序设计, author: 扎卡斯, price: ¥78.20 },{ name: HTML5移动Web开发, author: 黑马程序员, price: ¥39.50 },{ name: MongoDB设计模式, author: 科普兰, price: ¥28.40 }]);
}).listen(8888); //使用 listen 方法绑定 8888 端口
// 终端打印如下信息
console.log(Server running at http://127.0.0.1:8888/);
运行该代码 在微信小程序开发的index.js的page里面写入如下 onLoad: function () {// onLoad生命周期回调函数// 微信小程序利用wx:request发请求到服务器// 我先在vscode中对代码进行运行传到服务器再进行如下操作wx.request({// url请求的接口地址url: http://127.0.0.1:8888,// method网络请求方式 网络请求方式还有哪些method: GET,// data放置请求参数data: {userName: zhangsan,psw: 123456},// 接口调用成功的回调函数successsuccess: function (res) {console.log(res.data[2].author); //科普兰console.log(成功);},// 接口调用失败的回调函数failfail: function (res) {console.log(失败);},// 接口调用结束的回调函数complete无论调用成功还是调用失败都会执行complete: function (res) {console.log(结束);}})},
运行结果显示 点击vscode链接后终端显示 当我停止了服务器微信小程序开发的控制台显示 五、 提示框
1wx:showLoading方法
用于弹出加载提示框。加载提示框弹出后不会自动关闭
常用选项
title string型 提示的内容
mask boolean型 是否显示透明蒙层防止触摸穿透默认值为false
success function型 接口调用成功的回调函数
fail function型 接口调用失败的回调函数
complete function型 接口调用结束的回调函数调用成功、调用失败都会执行
2wx:hideLoading方法
用于关闭提示框
3wx:showToast方法
用于显示消息提示框
常用选项
title string型 提示的内容
icon string型 图标默认值为success。值有error、success、loading、none
duration number型 提示的停留时间单位毫秒默认值为1500
mask boolean型 是否显示透明蒙层防止触摸穿透默认值为false
fail function型 接口调用失败的回调函数
complete function型 接口调用结束的回调函数调用成功、调用失败都会执行
4代码示例
在微信小程序开发的index.js的page里面写入如下 // (5)提示框test3:function(){// wx.showLoading 用于弹出加载提示框。加载提示框弹出后不会自动关闭wx.showLoading({title: 我正在加载...,});// wx.hideLoading(); 关闭提示框setTimeout(() {wx.hideLoading();}, 3000);},// wx.showToast 显示消息提示框test4:function(){wx.showToast({title: 哈哈哈,duration: 2000,icon: error})},
在index.wxml里显示如下
!-- (5)提示框 --
button bind:taptest3显示加载/button
button bind:taptest4显示提示/button
页面如图
1》当我点击显示加载时三秒后关闭 2》当我点击显示提示时停留两秒后自动关闭 六、双向数据绑定 model
1微信小程序的单项数据绑定 setData
1-1代码示例
在index.wxml代码中 view用户名{{username}}/view
!--不使用双向数据绑定时利用this.setData单项数据绑定实现 --
input bind:changetest5 value{{username}} styleborder:1px solid red/在微信小程序开发的index.js的page里面写入如下 data: {username: 张三,password: abc,},
test5:function(e){this.setData({username:e.detail.value})}
页面如图所示当我的input框失焦时 2使用model双向数据绑定
2-1代码示例
我直接在index.wxml里写入如下代码即可实现效果
view用户名{{username}}/view
input model:value{{username}} styleborder:1px solid black/
页面如图所示用户名和我的input框两两实时更新数据 由此可见如1中不使用model想实现输入框数据与代码数据的变化的相对较复杂而我们直接使用model要清晰简单的多。微信小程序的内置属性为我们提供了诸多便利。
