微信小程序二

1. 学前准备

• 工具
  • 微信开发者工具
  • 微信小程序账号
• 前置知识
  • html、css基础知识
  • js基础知识

2. 学习主题

• 自定义组件

• 小程序中websocket；

• 小程序中授权登录

• 《3秒谁准》多人小游戏案例；

3. 学习目标

• 学会使用自定义组件

• 学会小程序组件间的通信

• 会使用小程序授权登录

• 会使用小程序中的websocket请求

4. 自定义组件

• 预定义组件

  • Img 组件:绝对地址、相对地址；

• 自定义组件

  • 创建自定义组件

  {
    "component": true
  }
  

  • 使用自定义组件

  {
    "usingComponents": {
      "component-tag-name": "path/to/the/custom/component"
    }
  }
  

  • 组件传参

      properties: {
          message:{
            type:"string",
            value:"默认消息",
            observer(newVal,oldVal){
              console.log(newVal, oldVal);
            }
          }
      },
    

  • slot插槽:匿名插槽、具名插槽；

5. 小程序中websocket请求

• 创建一个 WebSocket 连接

let ws = wx.connectSocket({
      url: 'ws://192.168.0.101:8282',
})

• 监听 WebSocket 连接打开事件

  ws.onOpen(() => {
  		console.log("连接成功");
  })
  

• 发送消息

  ws.send({
              data: JSON.stringify(data)
        })
  

• 监听 WebSocket 接受到服务器的消息事件

   ws.onMessage(res => {
   		console.log(res);
   })
  

6.《3秒谁准》多人小游戏

• 获取用户信息同步用户信息
  • 获取用户信息
    • wx.getUserInfo({})
  • 授权获取openid
    • 通过wx.login 获取code；
    • 通过code 换取openid 接口文档地址
• 同步每个用户登录信息
• 获取点击时间同步点击时间

7. 总结

• 自定义组件

• 小程序中websocket；

• 《3秒谁准》多人小游戏案例；

• 授权获取用户信息及openid