微信小程序 -- 小程序开发能力与拓展

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

落地代码：

<button open-type="share">转发button>

Page({
  // 监听页面按钮的转发 以及 右上角的转发按钮
  onShareAppMessage (obj) {
    // console.log(obj)
    // 自定义转发内容
    return {
      // 转发标题
      title: '这是一个非常神奇的页面~~~',
      // 转发路径
      path: '/pages/cate/cate',
      // 自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径
      imageUrl: '../../assets/Jerry.png'
    }
  }
})

4. 分享到朋友圈

小程序页面默认不能被分享到朋友圈，开发者需主动设置“分享到朋友圈”才可以，实现分享到朋友圈需满足两个条件：

页面 必须 设置允许“发送给朋友”，页面 js 文件声明 onShareAppMessage 事件监听函数

页面 必须 需设置允许“分享到朋友圈”telegram中文版，页面 js 文件声明 onShareTimeline 事件监听函数

落地代码：

Page({
  // 监听右上角 分享到朋友圈 按钮
  onShareTimeline () {
    // 自定义分享内容。
    return {
      // 自定义标题，即朋友圈列表页上显示的标题
      title: '帮我砍一刀~~~',
      // 自定义页面路径中携带的参数，如 path?a=1&b=2 的 【 “?” 后面部分 】
      query: 'id=1',
      // 自定义图片路径，可以是本地文件或者网络图片
      imageUrl: '../../assets/Jerry.png'
    }
  }
})

5. 手机号验证组件

手机验证组件，用于帮助开发者向用户发起手机号申请，必须经过用户同意后，才能获得由平台验证后的手机号，进而为用户提供相应服务

手机号快速验证组件： 平台会对号码进行验证whatsapp登录，但不保证是实时验证

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">

手机号实时验证组件： 在每次请求时，平台均会对用户选择的手机号进行实时验证

<button
  open-type="getRealtimePhoneNumber"
  bindgetrealtimephonenumber="getrealtimephonenumber"
/>

注意事项：

1.目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）

2.两种验证组件需要付费使用，每个小程序账号将有 1000 次体验额度

其他要求和注意事项，参考文档：

手机号快速验证组件

手机号实时验证组件

落地代码：

<button
  type="primary"
  plain
  open-type="getPhoneNumber"
  bindgetphonenumber="getphonenumber"
>快速验证组件button>
<button
  type="warn"
  plain
  open-type="getRealtimePhoneNumber"
  bindgetrealtimephonenumber="getrealtimephonenumber"
>实时验证组件button>

Page({
  // 手机号快速验证
  getphonenumber (event) {
    // 通过事件对象，可以看到，在 event.detail 中可以获取到 code
    // code 动态令牌，可以使用 code 换取用户的手机号
    // 需要将 code 发送给后端，后端在接收到 code 以后
    // 也需要调用 API，换取用户的真正手机号
    // 在换取成功以后 ，会将手机号返回给前端
    console.log(event)
  },
  // 手机号实时验证
  getrealtimephonenumber (event) {
    console.log(event)
  }
})

6. 客服能力

小程序为开发者提供了客服能力，同时为客服人员提供移动端、网页端客服工作台便于及时处理消息

使用方式：

需要将 button 组件 open-type 的值设置为 contact，当用户点击后就会进入客服会话

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

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

框架接口-getApp

getApp() 用于获取小程序全局唯一的 App 实例，通过小程序应用实例可实现数据或方法的共享

注意事项 ：

1.不要在 App() 方法中使用 getApp() ，使用 this 就可以拿到 app 实例通过 getApp() 获取实例之后whatsapp网页版，不要私自调用生命周期函数

落地代码：

️ app.js

App({
  // 全局共享的数据
  globalData: {
    token: ''
  },
  // 全局共享的方法
  setToken (token) {
    // 如果想获取 token，可以使用 this 的方式进行获取
    this.globalData.token = token
    // 在 App() 方法中如果想获取 App() 实例，可以通过 this 的方式进行获取
    // 不能通过 getApp() 方法获取
  }
})

️ pages/index/index.js

// getApp() 方法用来获取全局唯一的 App() 实例
const appInstance = getApp()
Page({
  login () {
    // 不要通过 app 实例调用钩子函数
    console.log(appInstance)
    appInstance.setToken('fghioiuytfghjkoiuytghjoiug')
  }
})

小程序页面间通信

如果一个页面通过 wx.navigateTo 打开一个新页面，这两个页面间将建立一条数据通道

在 wx.navigateTo 的 success 回调中通过 EventChannel 对象发射事件

被打开的页面可以通过 this.getOpenerEventChannel() 方法获得一个 EventChannel 对象，进行监听、发射事件

wx.navigateTo 方法中可以定义 events 配置项接收被打开页面发射的事件

这两个 EventChannel 对象间可以使用 emit 和 on 方法相互发送、监听事件。

落地代码：

页面 .js 文件

Page({
  // 点击按钮触发的事件处理函数
  handler () {
    wx.navigateTo({
      url: '/pages/list/list',
      events: {
        // key：被打开页面通过 eventChannel 发射的事件
        // value：回调函数
        // 为事件添加一个监听器，获取到被打开页面传递给当前页面的数据
        currentevent: (res) => {
          console.log(res)
        }
      },
      success (res) {
        // console.log(res)
        // 通过 success 回调函数的形参，可以获取 eventChannel 对象
        // eventChannel 对象给提供了 emit 方法，可以发射事件，同时携带参数
        res.eventChannel.emit('myevent', { name: 'tom' })
      }
    })
  }
})

被页面 .js 文件

Page({
  onLoad () {
    // 通过 this.getOpenerEventChannel() 可以获取 EventChannel 对象
    const EventChannel = this.getOpenerEventChannel()
    // 通过 EventChannel 提供的 on 方法监听页面发射的自定义事件
    EventChannel.on('myevent', (res) => {
      console.log(res)
    })
    // 通过 EventChannel 提供的 emit 方法也可以向上一级页面传递数据
    // 需要使用 emit 定义自定义事件，携带需要传递的数据
    EventChannel.emit('currentevent', { age: 10 })
  }
})

自定义导航栏

小程序默认的导航栏与 APP 一样都位于顶部固定位置。但是默认导航栏可能会影响小程序整体风格，且无法满足特定的设计需求，这时候，就需要进行自定义导航栏。

在 app.json 或者 page.json 中， 配置 navigationStyle 属性为 custom ，即可 自定义导航栏

在设置以后，就会移除默认的导航栏，只保留右上角胶囊按钮

落地代码：

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

<swiper class="custom-swiper" indicator-dots autoplay interval="2000">
  <swiper-item>
    <image src="../../assets/banner/banner-1.png" mode=""/>
  swiper-item>
  <swiper-item>
    <image src="../../assets/banner/banner-2.png" mode=""/>
  swiper-item>
  <swiper-item>
    <image src="../../assets/banner/banner-3.png" mode=""/>
  swiper-item>
swiper>

/* pages/cate/cate.wxss */
.custom-swiper {
  height: 440rpx;
}
.custom-swiper image {
  height: 100%;
  width: 100%;
}