微信小程序语法基础

# 1.开发环境

微信公众平台-微信小程序开发

1.注册开发者账号 https://mp.weixin.qq.com/wxopen/waregister?action=step1

2.完成账号实名认证

3.前往小程序开发后台获取小程序的APPID https://mp.weixin.qq.com/wxamp/home/guide?lang=zh_CN&token=303858676

4.首页--填写小程序基本信息--填写小程序类目

5.获取个人开发微信小程序的 APPID【设置---账号信息--APPID】

安装微信开发者工具

下载并安装最新稳定版微信小程序开发者工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

# 2.页面组件 js 生命周期

// pages/order/order.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

# 3.数据定义 data

定义数据

Page{
    data:{
        content:"黄四郎"
    }
}

1
2
3
4
5

页面直接取值没有双向绑定

输入input 的数据文本内容不发生改变

<input type="text"  class="inp" value="{{content}}" />
<text> {{content}}  </text>

1
2

双向绑定的实现 setData 修改数据【js中修改值】

<input type="text"  class="inp" value="{{content}}" bindInput="changeContent" />  #绑定输入事件

changeContent(event){ //事件执行函数
    //更新data 中的数据--达到类似的双向绑定效果
   this.setData({
       content:event.detail.value
    })   
}

1
2
3
4
5
6

在js中获取data 的数据

this.data.content

# 4.方法定义

微信小程序的方法直接写入到Page{}对象中即可。

Page{
    data{},
    方法名(){}，
    方法名1(){
        //调用其他方法
        this.方法名()
    }
}

1
2
3
4
5
6
7
8

# 5.事件定义

微信中绑定事件的代码相比vue 发生了比较大的变化

事件类型：

类型	触发条件	最低版本
touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	[1.5.0]
longtap	手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart	会在一个 WXSS animation 动画开始时触发
animationiteration	会在一个 WXSS animation 一次迭代结束时触发
animationend	会在一个 WXSS animation 动画完成时触发
touchforcechange	在支持 3D Touch 的 iPhone 设备，重按时会触发	[1.9.90]
submit	form表单事件，submit 事件中返回组件的字段名及其对应字段值,表单元素必须有：name和value属性

事件绑定语句：

<组件 bind事件类型="事件执行函数"><组件>

//方法中获取组件的数据
事件执行函数(event){
    //event.detail.value 获取value值
    //event.detail.dataset.自定义属性名   #获取自定义属性值
}

1
2
3
4
5

# 6.模块化语法 commonJS 规范

//暴露导出
moudle.exports = {
    xxx
}

1
2
3
4

//导入
const aaa = require('相对路径')
//使用
aaa.xxx

1
2
3
4

# 7.自定义组件

在项目根目录创建组件文件夹： components/toast 右键创建组件 toast

//toast.js 
// components/toast/toast.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
  },
  /**
   * 组件的初始数据
   */
  data: {

  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

//toast.wxml
<text> 你好呀 我是子组件 toast</text>

1
2

父组件页面中使用该组件

//index.json 
{
  "usingComponents": {
    "toast":"/components/toast/toast"
  }
}

1
2
3
4
5
6

//index.wxml
<toast></toast>

1
2

# 8.组件传值

# 8.1 父传子

父组件-页面级组件传值

  <toast title="我是页面传递的标题" content="{{content}}"></toast>

子组件获取使用参数

properties: {
      title:{
        type:String,
        value:'标题'
      },
      content:{
        type:{
          type:String,
          value:"内容"
        }
      }
  },

1
2
3
4
5
6
7
8
9
10
11
12

//页面中使用
<text>{{title}}</text>
<text>{{content}}</text>

1
2
3

//js中使用
this.data.title

1
2

# 8.2 子传父自定义事件

子组件定义自定义事件带参数发送

//子组件
  methods: {
     //子组件自己的事件
     changeData(){
      this.triggerEvent('sendData',{data:'我是子组件传递的数据',msg:"你好啊，我是儿子"})
    }
  }

1
2
3
4
5
6
7

父组件通过监听自定义事件在执行函数中获取数据

  <toast  bindsendData="getData"></toast>

  getData(e){
    console.log(e.detail.data); //我是子组件传递的数据
    console.log(e.detail.msg);   //你好啊，我是儿子
  },

1
2
3
4

# 9.指令

微信小程序的指令以 wx:* 语法格式使用

# 9.1 循环指令 wx:for

自带 item 和 index

如果有多个子节点的循环渲染失败，可以将顶级view 更换为无意义标签< block>

<view wx:for="{{userList}}" wx:key="index">
    <view>
      {{item.name}}
    </view>
    <view>
    {{item.age}}
    </view>
</view>

1
2
3
4
5
6
7
8

Page({
  data: {
   userList:[{name:'张麻子',age:40},{name:"黄四郎",age:33}]
  }
})

1
2
3
4
5

自定义item 和index

<view wx:for="{{arr}}" wx:for-index="index" wx:for-item="item" wx:key="index">
    <view wx:for="{{item}}" wx:for-index="index1" wx:for-item="item1" wx:key="index1">
      {{item1}}
    </view>	
</view>

1
2
3
4
5

Page({
  data: {
   arr:[[1,2,3],[4,5,6]]
  }
})

1
2
3
4
5

# 9.2 判断指令 wx:if

<view wx:if="{{condition}}"> True </view>

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

1
2
3

# 9.3 显隐属性 hidden

hidden 是否隐藏该dom 值为true 隐藏

<view wx:if="{{show}}">    //show 为true新增dom   false:移除dom
  我是显隐内容
</view>

1
2
3

<view hidden="{{show}}">    //show 为true 隐藏dom  false:移除dom 
  我是显隐内容
</view>

1
2
3

# 10.底部导航 tabBar 全局配置

可以理解为 vue 中的一级路由

文档链接：https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

app.json 中添加 tabBar 配置

前提条件

1.在项目根目录下创建 images文件夹存储所有用到的图片

2.三个页面已经创建且在app.json pages属性中声明

"tabBar": {
    "color":"#666",
    "selectedColor":"#00ff00",
    "borderStyle":"white",
    "list": [
      {
        "pagePath":"pages/home/home",
        "text":"首页",
        "iconPath":"images/home.png",
        "selectedIconPath": "images/home-active.png"
      },
      {
        "pagePath":"pages/shop/shop",
        "text":"商城",
        "iconPath":"images/shop.png",
        "selectedIconPath": "images/shop-active.png"
      },
      {
        "pagePath":"pages/user/user",
        "text":"个人中心",
        "iconPath":"images/user.png",
        "selectedIconPath": "images/user-active.png"
      }
    ]
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 11.页面跳转

# 11.1 wx.switchTab()

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

wx.switchTab({
  url: '/home'
})

1
2
3

# 11.2 wx.reLaunch()

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

wx.reLaunch({
  url: 'test?id=1'   #携带参数跳转
})

1
2
3

Page({
  onLoad (option) {
    console.log(option.query)   #接收传递过来的参数
  }
})

1
2
3
4
5

# 11.3 wx.redirectTo()

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

wx.redirectTo({
  url: 'test?id=1'
})

1
2
3

# 11.4 wx.navigateTo()

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack (opens new window) 可以返回到原页面。小程序中页面栈最多十层。

wx.navigateTo({
  url: 'test?id=1'
})

1
2
3

# 11.5 wx.navigateBack()

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages (opens new window) 获取当前的页面栈，决定需要返回几层

wx.navigateBack({
  delta: 2      #返回的层数
})

1
2
3

# 12 微信小程序 API

微信小程序api 针对很多微信中的扩能的调用，比如获取用户信息，获取用户手机号，转发，分享功能，支付，定位功能等等。

文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/

编辑

← Promise核心重写微信小程序进阶→

微信小程序语法基础

# 1.开发环境

# 2.页面组件 js 生命周期

# 3.数据定义 data

# 4.方法定义

# 5.事件定义

# 6.模块化语法 commonJS 规范

# 7.自定义组件

# 8.组件传值

# 8.1 父传子

# 8.2 子传父 自定义事件

# 9.指令

# 9.1 循环指令 wx:for

# 9.2 判断指令 wx:if

# 9.3 显隐属性 hidden

# 10.底部导航 tabBar 全局配置

# 11.页面跳转

# 11.1 wx.switchTab()

# 11.2 wx.reLaunch()

# 11.3 wx.redirectTo()

# 11.4 wx.navigateTo()

# 11.5 wx.navigateBack()

# 12 微信小程序 API

# 8.2 子传父自定义事件