微信小程序常用api及语法

Posted 2021-09-25 老张在线敲代码

小程序Api

App

全局入口，整个小程序项目中，只允许有一个App入口函数。

全局数据

• globalData:写在全局的js里

• 使用this.globalData.data

私有的生命周期【全局的生命周期】

• onLaunch:初始化函数

• onShow:启动或切换前台

• onHide:小程序后台运行

Page

私有的生命周期【页面的生命周期】

• onLoad:页面加载

• onShow:页面显示

• onHide:页面隐藏

• onReady:页面初始化渲染完成

• onUnload:页面卸载–销毁

Component

1. 构建自定义组件的，需要在json组件中声明："component":true之后才可以在page文件中使用。

2. 使用组件：在page页面的json里引入

    "usingComponents":{
        "wk-header":"/components/header/header"

    }

生命周期

• created:创建组件的生命周期

小程序语法

渲染数据

1. 在文档内使用插值的写法{{}}

2. 在标签上属性内使用也需要{{}}

3. 修改数据使用this.setData({data:newValue})

条件渲染

wx:if,‘wx:else if’,‘wx:else’

循环渲染

wx:for="{{data}}"

默认在for语法内注入了item变量和index变量；

如果需要修改名字，在元素上使用wx:for-item="别名".

事件绑定

bind:eventType='callback'

移动端没用click事件，对应的是tap事件
事件又分成俩种
冒泡事件

• 父级标签：bindtap='parentChange'
• 子集标签：bindtap='childrenChange'

点击子集父级也会执行

非冒泡事件

• 父级标签：catchtap='parentChange'
• 子集标签：catchtap='childrenChange'

点击子集父级并不会触发

路由

例子：

parent(){
    wx.navigateTo({
          url: '../logs/logs'
        })
  },

wx.switchTab(Object object)

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

wx.reLaunch(Object object)

关闭所有页面，打开到应用内的某个页面

wx.redirectTo(Object object）

关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

属性

url string 是 需要跳转的 tabBar 页面的路径 (代码包路径)（需在 app.json 的 tabBar 字段定义的页面），路径后不能带参数 **

success function 否 接口调用成功的回调函数

fail function 否 接口调用失败的回调函数

complete function 否 接口调用结束的回调函数（调用成功、失败都会执行

wx.navigateTo(Object object)

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。

比前三个多出一个属性

events Object 否 页面间通信接口，用于监听被打开页面发送到当前页面的数据。基础库 2.7.3 开始支持。

wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈

属性将url替换成了

delta number 1 否 返回的页面数，如果 delta 大于现有页面数，则返回到首页

内置的网络请求

wx:request({})写法和jq.ajax几乎一样