微信小程序接口以及页面跳转

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肯定是没错的

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!