小程序开发能力
1. 获取用户头像
当小程序需要让用户完善个人资料时，我们可以通过微信提供的头像、昵称填写能力快速完善。如图：
想使用微信提供的头像填写能力，需要两步：
- 将 button 组件
open-type的值设置为chooseAvatar - 当用户选择需要使用的头像之后，可以通过
bindchooseavatar事件回调获取到头像信息的临时路径。
<!-- 给 button 添加 open-type 属性，值为 chooseAvatar -->
<!-- 绑定 bindchooseavatar 事件获取回调信息 -->
<button open-type="chooseAvatar" bindchooseavatar="getAvatar">
按钮
</button>
落地代码：文章来源地址https://www.toymoban.com/news/detail-851762.html
<view class="avatar">
<button open-type="chooseAvatar" bindchooseavatar="getAvatar">
<image src="{{ avatarUrl }}" mode="" />
</button>
</view>
Page({
/**
* 页面的初始数据
*/
data: {
avatarUrl: '/assets/tom.png'
},
// 获取用户头像信息
getAvatar(e) {
// 获取选中的头像
const { avatarUrl } = e.detail
// 将获取到的头像赋值给 data 中变量同步给页面结构
this.setData({
avatarUrl
})
}
// coding...
}
2. 获取用户昵称
知识点：
当小程序需要让用户完善个人资料时，我们可以通过微信提供的头像、昵称填写能力快速完善。如图：
想使用微信提供的昵称填写能力，需要三步：
-
通过 form 组件中包裹住 input 以及 form-type 为 submit 的 button 组件
-
需要将 input 组件 type 的值设置为 nickname，当用户输入框输入时，键盘上方会展示微信昵称
-
给 form 绑定 submit 事件，在事件处理函数中通过事件对象获取用户昵称
落地代码：
<!-- 需要使用 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" plain form-type="submit">点击获取昵称</button>
</form>
Page({
// 获取微信昵称
onSubmit (event) {
// console.log(event.detail.value)
const { nickname } = event.detail.value
console.log(nickname)
}
}
3. 转发功能
转发功能，主要帮助用户更流畅地与好友分享内容和服务
想实现转发功能，有两种方式：
-
页面 js 文件 必须声明 onShareAppMessage 事件监听函数，并自定义转发内容。只有定义了此事件处理函数，右上角菜单才会显示“转发”按钮
-
通过给 button 组件设置属性 open-type=“share“ ，在用户点击按钮后触发 Page.onShareAppMessage 事件监听函数
官方文档 onShareAppMessage：
落地代码：
<!--pages/cate/cate.wxml-->
<button open-type="share">转发</button>
Page({
// 监听页面按钮的转发 以及 右上角的转发按钮
onShareAppMessage (obj) {
// console.log(obj)
// 自定义转发内容
return {
// 转发标题
title: '这是一个非常神奇的页面~~~',
// 转发路径
path: '/pages/cate/cate',
// 自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径
imageUrl: '../../assets/Jerry.png'
}
}
})
4. 分享到朋友圈
小程序页面默认不能被分享到朋友圈，开发者需主动设置“分享到朋友圈”才可以，实现分享到朋友圈需满足两个条件：
-
页面 必须 设置允许“发送给朋友”，页面 js 文件声明 onShareAppMessage 事件监听函数
-
页面 必须 需设置允许“分享到朋友圈”，页面 js 文件声明 onShareTimeline 事件监听函数
官方文档 onShareTimeline：
落地代码：
Page({
// 监听右上角 分享到朋友圈 按钮
onShareTimeline () {
// 自定义分享内容。
return {
// 自定义标题，即朋友圈列表页上显示的标题
title: '帮我砍一刀~~~',
// 自定义页面路径中携带的参数，如 path?a=1&b=2 的 【 “?” 后面部分 】
query: 'id=1',
// 自定义图片路径，可以是本地文件或者网络图片
imageUrl: '../../assets/Jerry.png'
}
}
})
5. 手机号验证组件
手机验证组件，用于帮助开发者向用户发起手机号申请，必须经过用户同意后，才能获得由平台验证后的手机号，进而为用户提供相应服务
-
手机号快速验证组件：平台会对号码进行验证，但不保证是实时验证
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"> -
手机号实时验证组件：在每次请求时，平台均会对用户选择的手机号进行实时验证
<button open-type="getRealtimePhoneNumber" bindgetrealtimephonenumber="getrealtimephonenumber" />
📌注意事项：
1.目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）
2.两种验证组件需要付费使用，每个小程序账号将有 1000 次体验额度
其他要求和注意事项，参考文档：
手机号快速验证组件
手机号实时验证组件
落地代码：
<!--pages/cart/cart.wxml-->
<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()获取实例之后，不要私自调用生命周期函数
落地代码：
➡️ 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，即可 自定义导航栏
在设置以后，就会移除默认的导航栏，只保留右上角胶囊按钮文章来源：https://www.toymoban.com/news/detail-851762.html
落地代码：
{
"usingComponents": {},
"navigationStyle": "custom"
}
<!--pages/cate/cate.wxml-->
<!-- <text>pages/cate/cate.wxml</text> -->
<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%;
}
到了这里，关于微信小程序 -- 小程序开发能力与拓展的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
