uniapp项目开发的功能点
一.手机
- 判断什么手机
const platform = uni.getSystemInfoSync().platform;//platform == 'ios'
- 什么机型
const model = uni.getSystemInfoSync().model //model.toindex('iPhone')
二.授权登录
授权登录有2种方式
（一）静默授权
就直接通过uni.login 获取code ,传递给后端就好
（二）弹出框授权
现在只有手机授权会弹出框的，获取微信用户信息getUserProfile(新版)–不支持弹出框 同时不能获取真实微信头像和昵称【统一都是灰色头像和微信用户】
<button class="button btn-normal" type="primary" open-type="getPhoneNumber"
@getphonenumber="getPhoneNumber">授权登录</button>
//获取手机号授权
async getPhoneNumber({
detail
}) {
const app = this
if (detail.errMsg != 'getPhoneNumber:ok') {
app.$toast("微信授权获取手机号失败")
return
}
app.isLoading = true
// 后端的获取手机号的接口
store.dispatch('LoginMpWx', {
phoneCode: detail.code,
encryptedData: detail.encryptedData,
iv: detail.iv
})
.then(result => {
this.$navTo('pages/user/personalData');
})
.catch(err => {
const resultData = err.result.data
// 显示错误信息
if (isEmpty(resultData)) {
app.$toast(err.result.message)
}
})
.finally(() => app.isLoading = false)
},
三. 昵称头像
现在微信用户信息getUserProfile(新版)–不支持弹出框 同时不能获取真实微信头像和昵称【统一都是灰色头像和微信用户】，改成了头像昵称填写。
<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
<image class="avatar" :src="avatarUrl"></image>
</button>
<input type="nickname" class="weui-input" placeholder="请输入姓名" @input="bindinput"
v-model="name" />
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
Page({
data: {
name:'',
avatarUrl: defaultAvatarUrl,
},
onChooseAvatar(e) {
// 这个是微信临时头像，传给后端存是不行，需要转化，这边可以转成base
const { avatarUrl } = e.detail
let s = uni.getFileSystemManager().readFileSync(avatarUrl , 'base64')
this.avatarUrl = 'data:image/jpeg;base64,' + s
},
//昵称输入框blur
bindblur(e) {
this.name = e.detail.value;
},
})
四.支付-uni.requestPayment
uniapp 不需要配置，直接调接口就好
后端接口返回订单信息
let params = {
orderId: _this.orderId,
emplyeeNo: _this.formInfos.emplyeeNo,
titleId: _this.formInfos.invoiceTitleId
}
Api.nuonuoPay(params).then(payRes => {
_this.wxPayment(payRes.data)
.then(() => {
//跳转到支付成功页面
})
.catch(err => {
console.log(err, '错误')
})
}).catch(err => {
console.log(err, '错误')
})
/**
* 发起支付请求-微信支付
* @param {Object} 参数
*/
wxPayment(options) {
var _this = this;
return new Promise((resolve, reject) => {
uni.requestPayment({
provider: 'wxpay',
timeStamp: options.timeStamp, // 时间戳（单位：秒） 当前
nonceStr: options.nonceStr, //随机字符串，长度为32个字符以下。
package: options.package, //统一下单接口返回的 prepay_id 参数值
signType: options.signType, //签名算法，应与后台下单时的值一致
paySign: options.paySign, // 签名，这里用的 MD5/RSA 签名
success: res => resolve(res),
fail: res => reject(res)
})
})
}
五.地址授权
uni.getLocation(OBJECT)
注意这边获取address 只有app 支持，其他都是获取经纬度
这个会弹出定位授权的弹出框
uni.getLocation({
type: 'gcj02',
geocode: true,
altitude: true,
isHighAccuracy: true,
success: function(res) {
console.log(res, '经纬度')
const longitude = res.longitude + ',' + res.latitude
//这边经纬度 传给后端 转成正确地址
},
fail: function(err) {
console.log(err, 'err')
}
});
六.分享页面以及我的名片-onShareAppMessage
async onShareAppMessage(res) {
const config = await getShaerConfig({
type: '2',
subtype: '1'
})
const returnParams = {
title: data.title,
content: data.content,
imageUrl: data.imageUrl
}
//分享的内容请求后端的接口
return {
...returnParams,
path: 'pages/index/index'//分享的路径
}
},
同理
onShareAppMessage() {
return {
title: `您好，我是${this.userInfo.name}。这是我的名片请惠存。`,
path: '/pages/user/businessCard?id=' + this.id,
}
},
补充图片可以转发，分享。增加:show-menu-by-longpress=“true”
七.发起订阅-uni.requestSubscribeMessage
取消后，就不会弹出来，需要在小程序设置内，打开
uni.requestSubscribeMessage({
tmplIds: [
'W7LUiaNM',
'XFu6M206S1wWGaaoU',
'9siJPU2cCfSUkHF8RBQ'
],
success(res) {
if (res['W7LUiaNM'] ===
'accept') { // 用户点击确定后
console.log('已经授权');
} else {
console.log('未授权')
}
}
})