【微信小程序篇-07】小程序的开放能力和项目发布流程

一、小程序的开放能力和项目上线流程

1，开放能力

1.1，获取用户头像

当小程序需要让用户完善个人资料时，可以通过微信提供的头像、昵称填写能力快速完善，只需要以下两步：

• 将button组件 open-type的值设置为chooseAvatar
• 通过 bindchooseavatar 事件回调获取到头像信息的临时路径

接下来举个例子，将默认图片替换成微信用户头像的图片，其index.wxml文件内容如下，open-type属性设置为chooseAvatar，bindchooseavatar绑定一个自定义事件

<view>
  <button class="btn" open-type="chooseAvatar" bindchooseavatar="chooseAvatar">
    <image class="avatar" src="{{ avatarUrl }}"></image>
  </button>
</view>

index.js文件内容如下，需要实现这个自定义事件，然后将微信小程序开放能力获取的微信头像进行替换

Page({
  data:{
    avatarUrl:"../../assets/images/floor.jpg"
  },
  // 获取微信头像事件
  chooseAvatar(event){
    console.log(event) 
    this.setData({
      avatarUrl:event.detail.avatarUrl
    })
  }
})

其index.wxss文件的样式如下，将图片设置成圆形

.btn{
  margin-top: 372rpx;
  background: transparent;
}
.btn::after{
  border: none;
}
.avatar{
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
}

其效果如下，点击图片按钮之后，会弹出用户的微信头像，然后点用微信头像即可，就能获取到微信头像的路径

1.2，获取用户昵称

当小程序需要让用户完善个人资料时，可以通过微信提供的头像、昵称填写能力快速完善。要使用微信提供的昵称填写能力，只需要三个步骤：

• 1，通过form组件中包裹住input组件和form-type为submit的button组件
• 2，需要将input组件type的值设置为nickname，当用户输入框输入时，键盘上方会展示微信昵称
• 3，给form绑定submit事件，在事件处理函数中通过事件对象获取用户昵称

接下里依旧和上面一样举个例子，首先在index.wxml中，定义一下内容。from表单上需要通过bindSubmit绑定表单提交的事件，内部包裹input组件和button组件，input组件需要设置type和name都为nickname，button组件需要设置form-type为submit，这样就能触发form标签上绑定的onSubmit事件

<!-- 通过form组件包裹input组件和button组件 -->
<form bindsubmit="onSubmit">
  <!-- input输入框组件的type属性设置为nickname，用户点击输入框，键盘上面会显示微信昵称 -->
  <!-- 如果也添加了name属性，form组件就会自动收集带有name属性的表单元素的值 -->
  <input type="nickname" name="nickname" placeholder="请输入用户昵称" />
  <!-- 如果将form-type设置为submit的时候，在提交按钮时，会触发表单的bindSubmit事件 -->
  <button type="primary" form-type="submit" plain>获取用户昵称</button>
</form>

在index.js中定义form表单提交对应的事件，可以发现点击按钮后也获取到了这个nickname

onSubmit(event){
  const {nickname} = event.detail.value
  console.log(nickname)
}

在index.wxss中设置的样式如下

input{
  border: 1px solid #179c16;
  margin: 20rpx;
  height: 60rpx;
  border-radius: 20rpx;
  padding-left: 20rpx;
}

其效果如下，在点击输入框之后，在底部会弹出当前用户的昵称，点击昵称之后将昵称设置到输入框中。如果想获取用户微信的昵称，也可以通过点击这个button按钮来获取用户的昵称

1.3，页面转发功能

想实现页面的转发功能，主要有以下两种方式：

• 1，页面.js文件必须声明onShareAppMessage事件监听函数，并自定义转发内容
• 2，通过button组件设置属性open-type=“share”，可以在用户点击按钮后触发Page.onShareAppMessage事件监听函数

首先第一种是在js文件中直接定义这个转发的事件，并且这个事件中支持参数的传递。同时也可以在这个事件中设置转发内容的标题，路径个图片等。

Page({
  onShareAppMessage(obj){
    console.log(obj)
    return{
      title:'这是一个非常神奇的页面',
      path:'/pages/cate/cate',
      imageUrl:'../../assets/images/floor-img.jpg'
    }
  }
})

第二种方式就是直接通过按钮的方式实现分享，属性需要设置为open-type，value需要设置为share

<button open-type="share">转发给好友</button>

实现的效果如下，前面两张图是用右上角三个点点击后出现的分享，最后一张图是通过按钮的方式实现的分享

1.4，分享到朋友圈

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

• 1，页面必须设置允许发送给朋友，即在js文件中需要定义 onShareAppMessage这个事件监听函数
• 2，页面必须设置运行分享到朋友圈，js文件中需要定义这个 onShareTimeline 这个事件监听函数

就是需要在js文件中定义这个事件就行，转发功能上面讲过，分享功能如下，需要定义对应的标题，以及携带一些下定义参数，同时可以上传图片

Page({
  onShareAppMessage(obj){
    console.log(obj)
    return{
      title:'这是一个非常神奇的页面',
      path:'/pages/cate/cate',
      imageUrl:'../../assets/images/floor-img.jpg'
    }
  },
  onShareTimeline(){
    return{
      title:'帮我砍一刀~~~',
      query:"id=1",
      imageUel:"../../assets/images/floor.jpg"
    }
  }
})

其效果如下，如果没对这个onShareTimeline事件函数，那么这个分享到朋友圈这个功能不可用，定义之后这个分享到朋友圈之后可以用了，最后一张图是分享到朋友圈的效果图

1.5，手机号验证组件

手机验证组件，用于帮助开发者向用户发起手机号申请，必须经过用户同意之后，才能获得由平台验证后的手机号，进而为用户提供相应服务。手机号验证主要分为两种：快速验证组件和实时验证组件。该接口目前主要是针对于非个人开发者，且完成了认证的小程序开发，且都需要付费使用。因此这里制作演示

首先定义两个button按钮在index.wxml文件中，分别用于验证这两个组件

<button
  type="primary"
  plain
  open-type="getPhoneNumber"
  bindgetphonenumber="getphonenumber"
>快速验证组件</button>

<view></view>

<button
  type="warn"
  plain
  open-type="getRealtimePhoneNumber"
  bindgetrealtimephonenumber="getrealtimephonenumber"
>实时验证组件</button>

随后在index.js文件中写getphonenumber自定义事件和getrealtimephonenumber自定义事件

Page({
  getphonenumber(event){
    console.log(event)
  },
  getrealtimephonenumber(event){
    console.log(event)
  }
})

由于需要付费，这里具体效果不做展示

1.6，客服功能

微信小程序提供了客服功能，提供了移动端和网页端的支持，便于及时处理消息，具体使用如下：

• 1，需要将button组件的open-type的值设置为contact，当用户点击后就会进入客服会话
• 2，在微信公众平台，绑定后的客服账号，可以登录网页端或者移动端小程序接收或者发送客服消息

首先需要在小程序设置中添加客服

需要先搜索微信号，然后将这个用户加入到客服人员即可，添加成功后会出现在列表里

随后在index.wxml中，设置联系客服的按钮用于测试

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

通过真机测试之后，就可以测试到这个客服使用的效果。

2，小程序上线发布流程

当小程已经完成开发，并且通过了本地测试之后，这个时候就需要小程序上线发布，其流程如下

• 首先需要在开发者工具上点击上传代码，测试就会将代码存到开发版本中
• 随后将开发版本转化为体验版本，给测试或者产品验收
• 随后再转成审核版本，需要微信那边进行审核
• 审核通过之后，在进行上线成为线上版本，此时就能供外部用户访问

首先第一步就是点击上传，然后填写版本号以及项目的备注信息，随后点击上传

然后打开微信公众平台，找到小程序里面的版本管理，在开发版本中可以看到这个1.0.0版本已经提交和上传

随后在这个开发版本中，点击这个提交审核的下拉框，可以发现有一个设置为体验版本

提交完成之后，会出现一个二维码，那么就可以把这个二维码给产品或者测试验收，前提是需要将他们的微信号加入到体验者权限里面，不然会没权限访问。

设置完成体验版之后，可以发现这个1.0.0版本的下面出现这个体验版的标识

当产品和测试验收完成之后，那么这个小程序的项目就可以正式的提审上线了，那么就需要点击提交审核，并且勾选这个条款，随后再点击下一步

随后填版本描述，是否加急审核等，除非腾讯工作人员快要放假了，否则不建议加急审核，因为次数有限

最后点击提交审核，最终出现下面这个已提交审核，需要等1-7个工作日，等待腾讯那边工作人员进行审核

最终在审核版本中，可以看到如下页面，审核版本中出现这个1.0.0的版本，到审核完成之后，那么成功的版本就会在线上版本