まず、アカウントの申請に移動します：https：
//developers.weixin.qq.com/miniprogram/dev/index.html？t = 18090519アカウントを申請すると、appIdが作成されます。 appIdがある場合、Mini ProgramCloud開発を使用することはできません。
次に、WeChat開発者ツールのダウンロードに移動します：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/index/index",
"pages/advice/advice",
"pages/comment/comment",
"pages/me/me",
"pages/upload/upload",
"pages/itemDetail/itemDetail",
"pages/pulish/pulish"
],
保存すると、開発ツールがページ内に存在しないすべてのディレクトリを自動的に作成することがわかります。
次に、私のページを書き直します。
レイアウトは次のとおりです。
<!--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（）Saveを使用します。ここで、userIdは自分で作成した一意の生成IDを使用します（現在、解決されていない問題があります。つまり、ユーザーの情報が期限切れになると、userIdが再度生成されます。これは後でWeChatのopenIdを使用するように変更する方が良いでしょう）;
ログインするときは、ランダムにIDを生成して保存します（ただし、最も重要なことは、WeChatの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=>{
}
})
},
文字または数字+1970から現在のミリ秒+乱数10wを使用して、一意のIDを生成します。コードは次のとおりです。
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: {
userTx: '',
defaultUrl: '../../images/tx.png',
username: '点击头像登录',
userTx: ''
},
これまでのところ、私のページ機能は基本的に完了し
ています。詳細なコードを参照してください。