在微信小程序中,编写页面布局是在wxml文件中进行的,则在wxml文件中,使用<view></view>标签进行内容的包裹,类似html中的<div>,现在进行一个需求的编写,在页面上编写布局,并将.js结尾文件中的处理数据进行展示到页面上;
index.wml
index.js
编译项目,则页面展示如下:
从上面结果可以知道在wxml文件中使用{{**}}可以将js文件中指定的内容展示在页面上,现在我们进行动态的展示数据,不需要展示起在page-data中固定的内容,修改js文件内容:
编译项目,显示结果如图:
由此可知,在js中动态的设置内容并将其更新到wml上,则使用 this.setData(),且修改的内容格式符合key:value。
就小程序页面数据展示就分析到这里,希望各位看官们有所收获,有什么错误的地方还望指出!!
方法:获取page数据,看代码:var text=this.data.name ,这样就获取到初始化的值
page({
data:{name:"test"},
showData:function(){
var text=this.data.name
}
})
示例如下:
util.js
//正则判断
function Regular(str, reg) {
if (reg.test(str))
return true
return false
}
//是否为中文
function IsChinese(str) {
var reg = /^[\u0391-\uFFE5]+$/
return Regular(str, reg)
}
module.exports = {
getRequestUrl: "http://localhost:59637",//获得接口地址
IsChinese: IsChinese,
}
//test.js
var util = require('../../utils/util.js')
Page({
onLoad: function () {
console.log("判断是否为中文:"+util.IsChinese('测试'))
console.log("输出接口url:"+util.getRequestUrl)
}
})
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)