微信小程序怎么在js中获取定义在page data里的值

JavaScript022

微信小程序怎么在js中获取定义在page data里的值,第1张

方法:获取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)

}

})

小程序的wxs功能可以让wsmxl可以调用和编写js,基本上wxs和JS无关系,只是语法形式很相似。 如下写了两个关于时间的函数,并将它们导出, <wxs module="m1"> var getMax = function(flightDate) {     var now = getDate().getDate()     var flDate = getDate(flightDate).getDate()     if( now <flDate ){       return '+1'     }else{       return ''     } } var formartTime = function(flightDate,format){   if(flightDate){     var realDate = getDate(flightDate)     function timeFormat(num) {       return num <10 ? '0' + num : num     }     var date = {       "Y": timeFormat(realDate.getFullYear()),       "M": timeFormat(realDate.getMonth() + 1),       "d": timeFormat(realDate.getDate()),       "h": timeFormat(realDate.getHours()),       "m": timeFormat(realDate.getMinutes()),       "s": timeFormat(realDate.getSeconds()),       "q": Math.floor((realDate.getMonth() + 3) / 3),       "S": realDate.getMilliseconds(),     }     if (!format) {       format = "yyyy-MM-dd hh:mm:ss"     }     if( format == 'hh:mm' ){         return date.h+':'+date.m     }else{         return date.h+':'+date.m     }   }else{     return false   } } module.exports.getMax = getMax module.exports.formartTime = formartTime </wxs> 可在页面添加如下使用: m1.formartTime()  m1.getMax()

建立两个canvas标签,先绘制底层的浅灰色圆圈背景,再绘制上层的红色进度条。

WXML代码

开始动态绘制

WXSS代码

特别注意:底层的canvas最好使用

z-index:-99;放置于底层

page { width: 100% height: 100% background-color: #fff

}.circle-box { text-align: center margin-top: 10vw

}.circle { position: absolute left: 0 right: 0 margin: auto

}.draw_btn { width: 35vw position: absolute top: 33vw right: 0 left: 0 margin: auto border: 1px #000 solid border-radius: 5vw

}

JS代码

//获取应用实例var app = getApp()var intervalvar varNamevar ctx = wx.createCanvasContext('canvasArcCir')

Page({ data: {

}, drawCircle: function () {

clearInterval(varName) function drawArc(s, e) {

ctx.setFillStyle('white')

ctx.clearRect(0, 0, 200, 200)

ctx.draw() var x = 100, y = 100, radius = 96

ctx.setLineWidth(5)

ctx.setStrokeStyle('#d81e06')

ctx.setLineCap('round')

ctx.beginPath()

ctx.arc(x, y, radius, s, e, false)

ctx.stroke()

ctx.draw()

}var step = 1, startAngle = 1.5 * Math.PI, endAngle = 0 var animation_interval = 1000, n = 60 var animation = function () { if (step