title: 微信小程序接口以及页面跳转 date: 2018-08-27 10:24:28 tags: 微信小程序
只有前端确定了自己的页面和样式没有问题 才可以把服务器数据获取到页面上 在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肯定是没错的
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。