本文主要介绍 uniapp 和 uniCloud 的基础使用，以及使用小程序在测试开发的过程中的一个详细流程，比较适合第一次使用uniapp和uniCloud开发微信小程序的伙伴，或者没有过实战经验的小伙伴参考；使用 Hbuildx 配合 Uniapp 框架结合uni-ui的UI框架为大家展示Demo！
这是暑假自己做的一个《发现自然周围》的小程序，刚开始自己找不到合适的后端接口于是想着自己配置Java后端打算自己写一个后端服务器，还为此特意买了一个一个月的腾讯云2核2G轻量应用服务器，可惜后面连接到云端Mysql数据库一直失败，因为是菜鸟也一直不知道原因，并且本身是搞前端的就没继续深究了。后来用uniapp做项目时发现unicloud这个云开发平台可以基本上搞定前后台整体业务，于是就打算自己来体验一下。
具体步骤请看腾讯地图开放平台
这里需要注意的点：
地点搜索的具体实现代码：
search() {
var _this = this;
const Token = uni.getStorageSync("Token")
if (!Token) {
uni.navigateTo({
url: '../../pages/login/login'
})
} else {
// console.log(Token)
this.markers = []
qqmapsdk.search({
keyword: this.inputValue,
success: function(res) {
console.log(res);
for (var i = 0; i < res.data.length; i++) {
_this.markers.push({
id: res.data[i].id - 0,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
callout: {
content: res.data[i].title,
display: 'BYCLICK',
borderRadius: 8,
borderWidth: 8
},
iconPath: "../../static/images/地点.png",
alpha: 0.5,
width: 45,
height: 45
})
}
_this.$emit('locationMarkers', _this.markers)
},
fail: function(res) {
console.log(res);
},
});
}
},
路线规划的实现代码：
route(){
var _this = this;
qqmapsdk.direction({
mode: _this.mode,
from: {
latitude: _this.latitude,
longitude: _this.longitude
},
to: {
latitude: _this.tolatitude,
longitude: _this.tolongitude
},
success: function(res) {
var ret = res;
var coors = ret.result.routes[0].polyline,
pl = [];
//坐标解压（返回的点串坐标，通过前向差分进行压缩）
var kr = 1000000;
for (var i = 2; i < coors.length; i++) {
coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
}
//将解压后的坐标放入点串数组pl中
for (var i = 0; i < coors.length; i += 2) {
pl.push({
latitude: coors[i],
longitude: coors[i + 1]
})
}
_this.polyline.push({
points: pl,
color: '#00ff00',
width: 4,
arrowLine:true
})
},
})
}
获取数据（注意是异步操作）
async getImage() {
const db = uniCloud.database();
const res = await db.collection('image').get()
this.ImageURL =res.result.data
},
上传图片
upload(){
const db = uniCloud.database();
this.getUserData()
this.imageData.username=this.userdata.nickname
this.imageData.date=currentDate.getDate()
db.collection('image').add(this.imageData).then(e=>{
uni.showToast({
title:"上传成功"
})
setTimeout(function(){
uni.navigateBack()
},1500)
})
console.log(this.imageData)
},
这里使用的是百度智能云的图像识别，具体步骤详见技术文档
以上步骤跟着文档注册获取Token即可，这里需要注意的是图片不是普通路径而是base64编码，通过wx自带api（wx.getFileSystemManager().readFile()）将图片转化成base64格式编码即可
具体实现代码
getEncoding(){
let _this=this
wx.chooseMedia({
count:1,
mediaType:['image'],
sizeType:['compressed'],
success(res){
_this.imagePath=res.tempFiles[0].tempFilePath
wx.showLoading({
title:'加载中',
mask:true
})
//将图片转化成base64格式编码
wx.getFileSystemManager().readFile({
filePath:_this.imagePath,
encoding:"base64",
success(res){
const discoverUrl=`https://aip.baidubce.com/rest/2.0/image-classify/v1/plant?access_token=${_this.accessToken}`
wx.request({
url:discoverUrl,
method:'POST',
header:{
'Content-Type':'application/x-www-form-urlencoded'
},
data:{
image:res.data,
baike_num:6
},
dataType:'json',
success(res) {
console.log(res)
wx.hideLoading()
_this.searchResult=res.data.result
},
fail() {
wx.showToast({
title:'忙碌，请稍后再试',
icon:'none',
mask:true,
duration:2000
})
}
})
},
fail(res) {
console.log(res)
}
})
}
})
},
成功获取数据之后想让百度百科页面铺满整个小程序页面，选择承载网页的容器（web-view），再点击事件跳转之后马上呈现，通过页面周期onLoad监听页面加载，其参数为上个页面传递的数据。
eventChannel这个属性可以和被打开页面进行通信。
具体实现代码：
//discover.vue
toWebView(e){
uni.navigateTo({
url:'./../baike/baike',
success(res) {
res.eventChannel.emit('getbaikeURL',{data:e})
}
})
}
//baike.vue
onLoad(option) {
let _this=this
// #ifdef APP-NVUE
const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
// #endif
// #ifndef APP-NVUE
const eventChannel = this.getOpenerEventChannel();
// #endif
eventChannel.on('getbaikeURL', function(data) {
_this.baikeURL = data.data
_this.baikeURL = "https://" + _this.baikeURL.substr(7)
})
},
切记使用百度的图像识别API后也要在微信公众平台的服务器域名中设置request合法域名（https://aip.baidubce.com）
实现思路：通过动态绑定高度样式viewTop实现上拉框的滑动渲染，再通过touchstart、touchmove、touchend分别监听手指触摸动作开始、手指触摸后移动、手指触摸动作结束。
具体实现代码：
//<view class="upframe" :style="{ top: viewTop + 'px' }" @touchstart="touchStart" @touchmove="touchMove"
//@touchend="touchEnd">XXX</view>
touchStart(e) {
this.touchPoint = [e.touches[0].pageX, e.touches[0].pageY]
},
touchMove(e) {
var curPoint = [e.touches[0].pageX, e.touches[0].pageY]
var addValue = Math.abs(curPoint[1] - this.touchPoint[1]) * 1.05
//-60在下面，-200在上面
//向下拖
if (curPoint[1] >= this.touchPoint[1]) {
if (this.viewTop >= -60) {
return
}
var resTop = this.viewTop + addValue
this.viewTop = resTop
} else {
//向上拖
if (this.viewTop <= -200) {
return
}
var resTop = this.viewTop - addValue
this.viewTop = resTop
}
this.touchPoint[1] = curPoint[1]
},
touchEnd(e) {
if (this.viewTop <= -110) {
while (this.viewTop > -200) {
this.viewTop = this.viewTop - 1.8
}
} else {
while (this.viewTop < -60) {
this.viewTop = this.viewTop + 1.8
}
}
},
实现思路：登录时输入的用户名在数据库查询是否存在，存在就进行密码验证都成功便可获得一个Token值，用于小程序各个功能的点击使用。Token值可自定利用uni.setStorageSync进行存储，最后在App.vue页面中在生命周期onLaunch利用uni.removeStorageSync中进行销毁。
async signIn(){
const db = uniCloud.database();
const res= await db.collection('users').where({username:this.username}).get()
// console.log(res.result.data[0].username,res.result.data[0].password)
if(this.username==res.result.data[0].username&&this.password==res.result.data[0].password){
uni.setStorageSync('Token','15sda6d1sa5#4d5asa')
this.$store.commit('getuserData',res.result.data[0])
uni.showToast({
title:'登陆成功',
})
setTimeout(function(){
uni.navigateBack()
},1500)
}else{
uni.showToast({
title:'登陆失败',
icon:'error'
})
}
}
}
onLaunch: function() {
console.log('App Launch')
uni.removeStorageSync('Token')
},
以上就是项目的主要内容，本文仅仅简单介绍了项目的主要功能，重点熟悉了uniapp的使用和uniCloud云数据库和一些接口的调用与布局.具体可以代码可在我的GitHub（https://github.com/18859985795/Find）下载。