首先,先去申请账号:https://developers.weixin.qq.com/miniprogram/dev/index.html?t=18090519
申请好账号,就有了appId, 如果没有appId,是不可以进行小程序云开发的;
然后, 再去下载微信开发者工具 : https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=18092022
新建一个项目, 模板选择云开发;
然后,大概的项目目录就只有默认的目录,包括数据库指导,上传图片以及云函数指导;这些目录先不要删,后面会有用到,可以参照;
然后新增一个栏,app.json里面的tabBar改变:
,
"tabBar": {
"color": "#666666",
"selectedColor": "#580000",
"borderStyle": "1px solid #f5f5f5",
"backgroundColor": "#fff",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath": "./images/index.png",
"selectedIconPath": "./images/index1.png"
},
{
"pagePath": "pages/pulish/pulish",
"text": "发表",
"iconPath": "./images/pulish.png",
"selectedIconPath": "./images/pulish1.png"
},
{
"pagePath": "pages/me/me",
"text": "我的",
"iconPath": "./images/me.png",
"selectedIconPath": "./images/me1.png"
}
]
}
pages 改成如下:
"pages": [
"pages/index/index",
"pages/advice/advice",
"pages/comment/comment",
"pages/me/me",
"pages/upload/upload",
"pages/itemDetail/itemDetail",
"pages/pulish/pulish"
],
保存,就会发现开发工具自动帮你创建了pages里面的所有不存在的目录;
接着,改写我的页面:
布局如下:
<!--pages/me/me.wxml-->
<view class='flexDownC font'>
<view class='bg flexDownC'>
<label>
<image class='userTx' src='{
{userTx || defaultUrl}}'></image>
<button open-type='getUserInfo' bindgetuserinfo='getUserInfoHandler'></button>
</label>
<view>
<text class='{
{ username == "点击头像登录" ? "usernameDe":"username"}} '>{
{username}}</text>
</view>
</view>
<view class='flexDownC mt80 rows'>
<navigator url='../comment/comment' class='row'>
<view class=" navRow flexSpaceBet">
<text>我的评论</text>
<image src='../../images/left.png' class='navTo'></image>
</view>
</navigator>
<navigator url='../upload/upload' class='row'>
<view class=" navRow flexSpaceBet">
<text>我的发布 </text>
<image src='../../images/left.png' class='navTo'></image>
</view>
</navigator>
<navigator url='../advice/advice' class='row'>
<view class=" navRow flexSpaceBet">
<text> 建议反馈 </text>
<image src='../../images/left.png' class='navTo'></image>
</view>
</navigator>
<view class="row navRow flexSpaceBet " bindtap='showInfo'>
<text class='pl10'> 关于 </text>
<image src='../../images/left.png' class='navTo'></image>
</view>
</view>
</view>
可以发现,我们先把登录的文字默认设置为"点击头像登录",然后一旦用户登录了,就可以马上进行替换,我把用户的头像,名称,userId都变成在本地,使用wx.setStorageSync()保存, 其中,userId使用的是自己创建的一个唯一生成id(现在有一个问题没解决,就是一旦用户的信息过期了,就会再次生成一个userId,我想这个后期改成使用微信的openId会好一点);
在登录的时候,我们随机生成一个id,然后保存(但最主要的还是使用微信的openid, 这个是唯一不重复的,且不变的),获得openid的时候,把他设置在本地保存
登录的代码如下:
,
getUserInfoHandler: function(e){
console.log(e)
let d = e.detail.userInfo
this.setData({
userTx: d.avatarUrl,
username: d.nickName
})
wx.setStorageSync('username', d.nickName)
wx.setStorageSync('avatar', d.avatarUrl)
const db = wx.cloud.database()
const _ = db.command
var userId = wx.getStorageSync('userId')
if (!userId) {
userId = this.getUserId()
}
db.collection('users').where({
_openid: d.openid
}).get({
success: res=>{
console.log('查询用户:',res)
if (res.data && res.data.length > 0){
console.log('已存在')
wx.setStorageSync('openId', res.data[0]._openid)
}else{
setTimeout(() => {
db.collection('users').add({
data: {
userId: userId,
iv: d.iv
},
success: function () {
wx.showToast({
title: '用户登录成功',
})
console.log('用户id新增成功')
db.collection('users').where({
userId: userId
}).get({
success: res => {
wx.setStorageSync('openId', res.data[0]._openid)
},
fail: err=>{
console.log('用户_openid设置失败')
}
})
},
fail: function (e) {
console.log('用户id新增失败')
}
})
}, 100)
}
},
fail: err=>{
}
})
},
生成唯一的id, 采用一个字母或数字+1970年到现在的毫秒数+10w的一个随机数组成,代码如下:
getUserId: function () {
var w = "abcdefghijklmnopqrstuvwxyz0123456789",
firstW = w[parseInt(Math.random() * (w.length))];
var userId = firstW + (Date.now()) + (Math.random() * 100000).toFixed(0)
console.log(userId)
wx.setStorageSync("userId", userId)
return userId;
},
然后,还有一个showInfo方法:(版权方面的免责声明)
showInfo: function(){
wx.showModal({
title: '关于糗皮虎',
content: '本小程序的内容来源于网上各大平台(如糗百等),如有侵权,请联系管理员***@gmail.com',
showCancel: false
})
}
最后,在onLoad方法里面,增加如下代码:
let username = wx.getStorageSync('username'),
avatar = wx.getStorageSync('avatar');
if (username){
this.setData({
username: username,
defaultUrl: avatar
})
}
在onload方法上面的data数组,增加如下字段:
data: {
userTx: '',
defaultUrl: '../../images/tx.png',
username: '点击头像登录',
userTx: ''
},
那么,到此为止,我的页面功能就基本完成了, :
详细代码请看