微信小程序api语法及代码实例（入门到精通）

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。[[点击跳转到网站。]]

小程序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’

//频繁切换使用hidden反之是if
//如果isShow是false那就隐藏反之显示，跟vue的v-if和v-show区别一样
<view hidden="{
   {isShow}}"></view>

循环渲染

wx:for="{ {data}}"

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

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

事件绑定

bind:eventType='callback'

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

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

点击子集父级也会执行

非冒泡事件

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

点击子集父级并不会触发

监听input框实现数据双向绑定

<view>
   <input type="text" value="{
   {msg}}" bindinput="changeInput"/>
</view>

Page({
   
  data: {
   
   msg:"请输入密码"
  },
  changeInput(e:any){
   
    this.setData({
   
      msg:e.detail.value
    })
    console.log(e.detail.value)
  }
})

事件对象的属性列表

当事件回调触发之后，会收到一个·事件对象event，它的详细属性如下：

1.type：字符串类型 事件类型
2.timeStamp：页面打开到触发事件所经过的毫秒数
3.target：对象类型 触发事件组件的一些属性值集合
4.currentTarget：对象类型 当前组件的ixie属性值集合
5.detail：对象类型 额外的信息
6.touchs：数组类型 触摸事件，当前停留在屏幕中的触摸点信息的数组
7.changedTouches：数组类型 触摸事件，当前变化的触摸点信息的数组

target是触发该事件的源头组件，currentTarget是指当前事件所绑定的组件

事件传参

可以为组件上提供data-自定义属性传参，其中代表的是参数名字,引号内的内容是参数值

<button type="button" data-info="{
   {2}}" bindtap="btnHandel"></button>
 <text>{
   {
   num}}</text>

可以通过event.target.dataset.参数名字来拿到具体参数的值

Page({
   
  data: {
   
   num:0
  },
  btnHandel(event:any){
   
    this.setData({
   
      num:event.target.dataset.info
    })
  }
})

`

路由

声明式导航跳转

注意事项：url地址必须以/开头

 //跳转到tabbar页面
 <navigator url="/pages/message/message" open-type="switchTab">跳转tabbar页面</navigator>
 //跳转到非tabbar页面
  <navigator url="/pages/message/message" open-type="navigate">跳转非tabbar页面</navigator>
 //后退到上一级或者多级   delta表示后退的层级
   <navigator url="/pages/message/message" open-type="navigateBack" delta="1">后退</navigator>

编程式导航跳转

例子：

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 大于现有页面数，则返回到首页

导航传参

声明式导航传参

1. 参数与路径之间用？隔开
2. 参数名与参数值用等号链接
3. 不同参数用&分割

  <navigator url="/pages/message/message?name=zs&age=20" open-type="navigate">声明式传参</navigator>

编程式导航传参

fn(){
   
	wx.navigateTo({
   
		url:"/pages/message/messgae?name=ls&age=33"
	})
}

内置的网络请求

wx:request({})写法和jq.ajax几乎一样，但是小程序中不存在跨域问题

出于安全考虑微信小程序官方对数据接口做了限制，只能请求https类型的接口，而且必须将接口域名添加到详情中的合法域名信任列表中；如果要配置多个则用；号隔开

如何配置request合法域名

配置步骤如下：

1. 登录微信小程序管理后台
2. 开发
3. 开发设置
4. 服务器域名
5. 修改request合法域名

注意事项：域名只支持https协议；域名不能使用ip地址或者localhost；域名必须经过icp备案；服务器域名一个月只能修改5次

如果在开发或者调试过程中后端暂时没有提供https域名接口只有http接口，那么我们可以在微信开发者工具中勾选开发环境不校验请求域名...即可

发起get请求

wx.request({
   
	url:'',//请求的接口地址
	method:'GET'//请求的方式
	data:{
   
		name:"zyb",
		age:23
	},
	success:(res)=>{
   //请求成功以后的回调函数
		console.log(res)//返回的数据
	}
})

发起post请求

wx.request({
   
	url:'',//请求的接口地址
	method:'POST'//请求的方式
	data:{
   
		name:"zyb",
		age:23
	},
	success:(res)=>{
   //请求成功以后的回调函数
		console.log(res)//返回的数据
	}
})

小程序事件对象传参方式

1、id传参

只能传递一个值
标签上使用id属性进行传递
事件中使用event.currentTarget.id进行接收

2、data传参

可以传递多个值
标签上使用bind-key 进行传递
事件中使用event.currentTarget.key进行接收

3、mark传参

mark 会包含从触发事件的节点到根节点上所有的 mark
标签上使用mark: key="value"进行传递
事件中使用event.mark.key进行接收

小程序中像素单位rpx原理

因为不同设备的屏幕大小不同，为了能够实现屏幕的自动适配，rpx把所有的屏幕在宽度上都等分为750份
从而实现在较小的设备上1rpx显示的宽度较小，在较大设备上显示的1rpx宽度较大

px和rpx的单位换算

例子：在iphone6手机上屏幕宽度为375px，共有750个物理像素等分为750rpx，则：750rpx=375px/1rpx=0.5px

下拉刷新

注意事项：开启下拉刷新之后模拟器下拉刷新会自动停止下拉刷新，真机不会自动停止，需要手动处理

启动下拉刷新的俩种方式：

全局开启：在app.json的window节点中设置enablePullDownRefresh设置为true
局部开启：在页面的json文件中设置enablePullDownRefresh设置为true

监听页面的下拉刷新事件onPullDownRefresh

小例子：点击按钮实现自增加一，刷新之后将count重置为0

  data: {
   
   count:0//初始值
  },
  //监听下拉刷新
onPullDownRefresh(){
   
    this.setData({
   
      count:0
    })
  },
  //点击自增加一的事件
  add(){
   
    this.setData({
   
      count:this.data.count+1
    })
  }

停止下拉刷新

  onPullDownRefresh(){
   
    this.setData({
   
      count:0
    })
    //调用微信提供的api事件
    wx.stopPullDownRefresh()
  },

上拉触底