小程序 --- 微信开放能力

1. 获取头像

1. 将 button 组件的 open-type 设置为 chooseAvatar

<button 
  open-type="chooseAvatar" 
  bindchooseavatar="getAvatar">
  <image src="{{ avatar }}"/>
</button>

2. 通过 bindchooseavatar 事件回调函数获取到头像信息的临时路径

Page({
  data:{
    avatar: "../../assets/cat.jpeg"   // 默认头像
  },
  getAvatar(event){
    this.setData({
      // 这里获取的是临时路径, 需要将临时路径上传到服务器保存
      avatar: event.detail.avatarUrl
    })
  }
})

2. 获取昵称

1. 通过 form 组件 包裹 input 以及 form-type 为 submit 的 button 组件,将 input 组件的 type 设置为 nickname, 当用户输入框输入时,键盘上方会展示微信昵称

<form bindsubmit="getNickname">
  <!-- 如果有name属性, form 组件会自动收集带有 name 属性的表单元素的值 -->
  <input type="nickname" name="nickname" placeholder="请输入昵称"/>
  <!-- form-type="submit" 的button点击时,会触发form的submit事件  -->
  <button form-type="submit" plain type="primary">点击获取昵称</button>
</form>

2. 给 form 绑定 submit 事件, 在事件处理函数中 通过事件对象获取用户昵称

Page({
  getNickname(event){
    console.log(event.detail.value.nickname);
  } 
})

3. 转发

1. 方式一

页面 js 文件中必须声明 onShareAppMessage() 事件监听函数, 并自定义转发内容。只有定义了此事件处理函数,右上角菜单的 三个点 才会显示转发按钮

Page({
  // 用来监听页面按钮 以及右上角三个点的事件函数
  onShareAppMessage(obj){
    console.log(obj.from)  // 转发来源,button / menu  
    console.log(obj.target)  // 如果是通过按钮转发的 target有值,如果点了三个点进行转发的 target 是undefined
      
    // 可以自定义转发内容
    return {
      title:"这是一个神奇的页面",    // 标题
      path:"/pages/index/index",    // 要转发的页面路径
      imageUrl:"../../assets/cat.jpeg"  // 封面
    }
  }
})

2. 方式二

通过给 button 组件设置属性 open-type="share",可以在用户点击按钮后触发 Page.onShareAppMessage() 事件监听函数

<button open-type="share" plain type="warn" size="mini">转发</button>

js

Page({
  // 用来监听页面按钮 以及右上角三个点的事件函数
  onShareAppMessage(obj){
    console.log(obj.from)  // 转发来源,button / menu  
    console.log(obj.target)  // 如果是通过按钮转发的 target有值,如果点了三个点进行转发的 target 是undefined
      
    // 可以自定义转发内容
    return {
      title:"这是一个神奇的页面",    // 标题
      path:"/pages/index/index",    // 要转发的页面路径
      imageUrl:"../../assets/cat.jpeg"  // 封面
    }
  }
})

4. 分享朋友圈

小程序默认不能被分享到朋友圈, 开发者需要主动设置才可以, 实现分享到朋友圈需要满足两个条件:

1. 页面必须允许 发送给朋友, 页面js文件中必须声明 onShareAppMessage() 事件监听函数
2. 页面必须允许 分享到朋友圈, 页面js文件中必须声明 onShareTimeline() 事件监听函数

Page({
  onShareAppMessage(){   // 必须有 onShareAppMessage()
  },
  onShareTimeline(){
    // 可以自定义分享内容
    return {
      title:"帮我砍一刀~~~",    // 标题
      query:"id=1",    		  // 要携带的参数
      imageUrl:"../../assets/cat.jpeg"  // 封面
    }
  }
})

5. 手机号验证组件

目前该接口针对非个人开发者, 且完成了认证的小程序,两种验证组件需要付费使用,每个小程序账号有1000次体验额度

1. 快速验证组件

<button 
  open-type="getPhoneNumber" 
  bindgetphonenumber="getPhoneNumber"
  plain 
  type="warn">
  手机号
</button>

js

event 对象属性

2. 实时验证组件

选中号码后会弹出验证码输入框

<button 
  open-type="getRealtimePhoneNumber" 
  bindgetrealtimephonenumber="getrealtimephonenumber"
  plain 
  type="warn">
  实时手机号
</button>

js

event 对象属性

3. code 换取手机号

将 code 发送给后端, 后端将 code 发送给小程序的 API 来获取用户真正的手机号,然后将真实手机号返回给前端

6. 客服功能

1. 将 button 组件设置为 open-type="contact",当用户点击后会进入客服回话

<button open-type="contact">联系客服</button>

2. 在微信公众后台, 绑定后的客服账号,可以登录 网页端客服 或 移动端小程序客服 接收、发送客服消息