只有前端确定了自己的页面和样式没有问题 才可以把服务器数据获取到页面上
在js文件中输入page点击回车 自动生成page脚本文件 其中里面有几个page的生命周期
其中 onload ：function() 页面初始化
onReady:function() 页面渲染完成
onShow:function() 页面显示
onHide:function() 页面隐藏
onUnload:function() 页面关闭
小程序中数据只要在js中的data中写入变量 然后后面写数据 在页面中只要双大括号 变量的形式 就可以直接在页面中渲染出来了 但是数据是单向绑定的 如果想在wxml改变js中要通过事件 通过后台获取的数据可以放进this.setDate(对象名)
控制标签元素的显示与隐藏 wx:if=”{{js中的变量名可以通过在js中设置变量为true或false来控制标签显示与否}}”
在双大括号中还可以进行字符串拼接 和 运算
数据请求
wx.request({
url: '*******',
data: {
"type":"nearest_village",
"district": that.data.district,
},
header: {
"Content-Type": "application/x-www-form-urlencoded"
},
method: 'POST',
success: function(res) {
//do somethind
}
})
一定要加上header否则数据请求为空
循环的使用 用 block标签把需要循环的代码包起来
wx:for = “{{数组名}}” 凡是对组件的属性进行操作加引号
wx:for-item=”item”item现在相当于数组中的子元素
wx:for-index = idx idx就相当于索引 可以打印出来
wx:for-item就算不写默认也是item
wx:for-index 默认值是 index 不写也可直接引入
跳转
当鼠标点击跳到另一个页面
wx.navigateTo({
url:"想要跳转页面的相对页面路径"
success:function(res)
跳转成功执行的函数
fail:function()
跳转失败执行的函数
complete:function()
不管跳转成功失败都会执行的一个函数
默认跳转到的页面为子页面 有返回按钮 但是最多不超过五层
默认调用onHide:function() 页面隐藏
})
但是跳转完默认跳转到当前页面的子页面的时候有返回 如果不想成为子页面 就用 wx.redirectTo({
url:"想要跳转页面的相对路径"
默认跳转页面为平级页面 跳转过后没有返回按钮
默认调用onUnload:function() 页面关闭
})
事件:tap用手指触摸后马上离开 在文档中的事件中可查看全部事件在事件前默认加上bindtap 任何事件前都要加上bind 或 catch
如果点击一次 调用两次的bug就关闭重新打开
事件冒泡 点击子元素上的事件 父元素上的事件也会执行 绝大多数都是冒泡事件 阻止冒泡可以在子元素的事件上的bindtap 改成 catchtap就可以了
把文件中的内容导出
module.exports ={
变量名 : 当前页面的数组名
}
接受别的文件导出的数据
var 变量名 = require("相对路径")
这个变量名就相当于另一个文件中的数据了
可以在当前文件中onload函数中使用this.setDate({
post_key:变量名
})
也可以用this.data.变量名 = 当前变量名.引入的文件的变量名
如果在onload中是异步就得调用setDate了 用setDate肯定是没错的