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

作者：前端阿龙

链接：https://blog.csdn.net/weixin_42790916/article/details/82117752

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。