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() {
  }
})

3.数据定义 data

• 定义数据

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

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

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

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

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

<input type="text"  class="inp" value="{{content}}" bindInput="changeContent" />  #绑定输入事件
changeContent(event){ //事件执行函数
    //更新data 中的数据--达到类似的双向绑定效果
   this.setData({
       content:event.detail.value
    })   
}

• 在js中获取data 的数据

this.data.content

4.方法定义

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

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

5.事件定义

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

事件类型：

事件绑定语句：

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

6.模块化语法 commonJS 规范

//暴露导出
moudle.exports = {
    xxx
}
//导入
const aaa = require('相对路径')
//使用
aaa.xxx

7.自定义组件

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

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

  },
  /**
   * 组件的方法列表
   */
  methods: {
  }
})
//toast.wxml
<text> 你好呀 我是子组件 toast</text>

父组件页面中使用该组件

//index.json 
{
  "usingComponents": {
    "toast":"/components/toast/toast"
  }
}
//index.wxml
<toast></toast>

8.组件传值

8.1 父传子

• 父组件-页面级组件传值

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

• 子组件获取使用参数

properties: {
      title:{
        type:String,
        value:'标题'
      },
      content:{
        type:{
          type:String,
          value:"内容"
        }
      }
  },
//页面中使用
<text>{{title}}</text>
<text>{{content}}</text>
//js中使用
this.data.title

8.2 子传父 自定义事件

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

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

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

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

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>
Page({
  data: {
   userList:[{name:'张麻子',age:40},{name:"黄四郎",age:33}]
  }
})

• 自定义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>
Page({
  data: {
   arr:[[1,2,3],[4,5,6]]
  }
})

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>

9.3 显隐属性 hidden

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

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

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"
      }
    ]
  },

11.页面跳转

11.1 wx.switchTab()

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

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

11.2 wx.reLaunch()

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

wx.reLaunch({
  url: 'test?id=1'   #携带参数跳转
})
Page({
  onLoad (option) {
    console.log(option.query)   #接收传递过来的参数
  }
})

11.3 wx.redirectTo()

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

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

11.4 wx.navigateTo()

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

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

11.5 wx.navigateBack()

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

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

12 微信小程序 API

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

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