微信小程序客服、支付、定位、下拉加载功能

2023-07-29,,

一.客服功能

1.只要你微信小程序,后台添加了客服,引用以下button,就可以进入聊天(在小程序官网如何添加客服用户,请自行百度,谢谢)

2.通过按钮方式

 <button open-type="contact">进入客服会话</button>

二.支付流程

https://blog.csdn.net/monkey_wei/article/details/107246438?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-107246438-blog-121436086.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-2-107246438-blog-121436086.pc_relevant_default&utm_relevant_index=5

三.地理定位

1.首先呢你要有一个方法去触发这个点击事件,下面已经写好啦,非常简单的两行代码。

<input placeholder="请选择地址..." value="{{mapName}}"></input>
<button bindtap="moveToLocation">地图选点</button>

2.接下来就到js了,我们要在data中声明首次加载的经度和维度,然后在声明一个选点的位置。

data: {
latitude: 0, //首次加载维度
longitude: 0, //首次加载的经度
mapName: "", //选点的位置
},

3.下面就是在moveToLocation事件中执行地图操作啦,主要是通过wx.chooseLocation方法,然后将拿到的值赋值给上面data中定义的mapName即可。

moveToLocation() {
let that = this
wx.chooseLocation({
success: function (res) {
console.log(res);
//赋值给data中的mapName
that.setData({
mapName: res.name,
latitude: res.latitude,
longitude: res.longitude
})
},
//错误信息
fail: function () {
console.log(err);
}
})
}

4.js完整代码

Page({
data: {
latitude: 0, //首次加载维度
longitude: 0, //首次加载的经度
mapName: "", //选点的位置
},
moveToLocation() {
let that = this
wx.chooseLocation({
success: function (res) {
console.log(res.name);
//赋值给data中的mapName
that.setData({
mapName: res.name,
latitude: res.latitude,
longitude: res.longitude
})
},
//错误信息
fail: function () {
console.log(err);
}
})
}
})

5.最后的最后我们需要在app.json文件中添加这么一段:

"permission": {
"scope.userLocation": {
"desc": "你的位置信息将用于小程序位置接口的效果展示"
}
},

四、微信小程序的下拉刷新和上拉触底

onLoad(options)

页面逻辑里,onLoad函数接收一个参数options,其中包含了当前页面路径的参数。看个例子吧。

// pages/index/index.js
Page({
onReady:function(){
wx.navigateTo({
url: '/pages/test/test?name1=value1&name2=value2',
})
}
})
// pages/test/test.js
Page({
onLoad: function (options) {
console.log(options);
}
})

onPullDownRefresh | onReachBottom | onPageScroll

页面配置里,enablePullDownRefresh默认是false,我们将其置为true,使能下拉刷新,这样就可以触发onPullDownRefresh事件了。
onReachBottomDistance单位是px,默认值是50,我们不妨将值改小,比如10,这样上拉的话就比较容易触底,就可以触发onReachBottom事件了。
disableScroll默认是false,即默认页面可以上下滚动,我们不妨让页面内容大于页面显示高度,让页面出现滚动条。当页面上下滚动时,会触发onPageScroll事件。
综上,页面配置(pages/index/index.json)如下,

{
"usingComponents": {},
"navigationBarBackgroundColor": "#336699",
"navigationBarTitleText": "数值比较",
"enablePullDownRefresh": true,
"onReachBottomDistance":10
}

为了让页面内容高于页面显示区域,pages/index/index.wxml中复制了三份相同的内容,如下,

<!-- 第一份 -->
<view>
<text>请输入第1个数字:</text>
<input text="number"/>
</view>
<view>
<text>请输入第2个数字:</text>
<input type="number"/>
</view>
<button>比较</button>
<view>
<text>比较结果:</text>
</view>
<!-- 第二份 -->
<view>
<text>请输入第1个数字:</text>
<input text="number"/>
</view>
<view>
<text>请输入第2个数字:</text>
<input type="number"/>
</view>
<button>比较</button>
<view>
<text>比较结果:</text>
</view>
<!-- 第三份 -->
<view>
<text>请输入第1个数字:</text>
<input text="number"/>
</view>
<view>
<text>请输入第2个数字:</text>
<input type="number"/>
</view>
<button>比较</button>
<view>
<text>比较结果:</text>
</view>

接下来,就是pages/index/index.js中的内容了,如下,

// pages/index/index.js
Page({
onPullDownRefresh:function(){
console.log("页面正在下拉,且已刷新!");
},
onReachBottom:function(){
console.log("页面正在上拉,且已触底!");
},
onPageScroll:function(options){
console.log("页面正在滚动,且距离顶端 ",options.scrollTop.toFixed(2),"px");
}
})

五、判断用户是否授权登录

onLoad: function (options) {
var that = this
// 判断用户是否授权登录
wx.getSetting({
success: function (res) {
// 判断是否授权
if (res.authSetting['scope.userInfo']) {
//获取用户信息
wx.getUserInfo({
success: function (res) {
//用户已经授权过,添加用户信息
// var that = this
//wx.setStorageSync('nickName', res.userInfo.nickName)
//wx.setStorageSync('avatarUrl', res.userInfo.avatarUrl)
}
});
}else{
wx.showToast({
title: '请授权登录!',
icon: 'none',
duration: 1500,
success: function () {
//定时器,未授权1.5秒后跳转授权页面
setTimeout(function () {
wx.reLaunch({
url: '../index/index',
})
}, 1500);
}
})
}
}
})
},

微信小程序客服、支付、定位、下拉加载功能的相关教程结束。

《微信小程序客服、支付、定位、下拉加载功能.doc》

下载本文的Word格式文档,以方便收藏与打印。