前面已将基础知识准备的差不多了，下面实际做一个小程序。
一、目标
用于上传照片和文字。
2个主要页面：我me,设置set
二、开始制作
1、打开微信开发者工具（我用的1.02.1907160 Windows 64版本），点+号，新建项目diary,选择目录E:\wxDEV\diary，填入从微信开发平台申请到的AppID，开发模式默认为小程序，后端服务选择云开发，点新建，生成了云开发QuitStart示例模板。下面在此模板基础上制作。
2、建立me set页面，并给小程序增加tabBar。即修改E:\wxDEV\minishop\miniprogram\app.json并保存。代码如下：
{
"pages": [
"pages/index/index",
"pages/me/me",
"pages/people/people",
"pages/set/set"
],
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "日记",
"navigationBarTextStyle": "black"
},
"tabBar": {
"backgroundColor": "#eeeeee",
"position": "bottom",
"list": [
{
"pagePath": "pages/me/me",
"text": "我",
"iconPath": "images/img.jpg",
"selectedIconPath": "images/img.jpg"
},
{
"pagePath": "pages/set/set",
"text": "设置",
"iconPath": "images/img.jpg",
"selectedIconPath": "images/img.jpg"
}
]
},
"sitemapLocation": "sitemap.json"
}
同时，要在images目录中放置一张img.jpg图片（我自己画了一张）
3、我打算将现有的index页作为将来的splash页。所以先修改E:\wxDEV\diary\miniprogram\pages\index\index.js,以实现2秒后跳转me页，代码：
//index.js
Page({
data: {},
onLoad: function() {
setTimeout(function() {
wx.reLaunch({
url: '../me/me',
})
}, )
}
})
4、修改me页（为方便调试，可更改app.json中pages值的顺序，将me调整到前面）。原本想在me页上用movable-view增加可拖动的按钮样式，如下：
<!--可拖动按钮-->
<movable-area style="height:{{mHeight}}px;width:100%;position:fixed;z-index:999;pointer-events:none;">
<movable-view direction="all" style="height: 30px; line-height:30px;width: 30px; margin-left:100%; border:2px solid lightblue;border-radius:50%;">
<cover-view bindtap="writeDiary">
<cover-image src='../../images/img.jpg'></cover-image>
</cover-view>
</movable-view>
</movable-area>
结果在安卓真机上出现兼容性问题，拖动时cover-view瞬间移动，而cover-image不跟随移动，无法正常工作。（谁知道解决办法给我讲一下？）只好弃用。
云开发的云函数的独特优势在于与微信登录鉴权的无缝整合，参考：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/userinfo.html
所以，对不同用户上传内容可以用openid区分。
5.半成品的me.wxml ,代码如下：
<!--pages/me/me.wxml-->
<view style="display:flex;flex-direction: row-reverse;margin-right:20px;font-size:150%;"><text bindtap="writeDiary">{{inputCursor}}</text></view> <view style="width:100%;">
<!-- 上传图片 -->
<view class="uploader">
<view class="uploader-text" bindtap="selPic">
<text>拍照或选择图片(可选）</text>
</view>
<view class="uploader-container" wx:if="{{imgUrl}}">
<image class="uploader-image" src="{{imgUrl}}" mode="aspectFit" bindtap="previewImg"></image>
</view>
</view>
<!-- 表单 -->
<form class="formpub" bindsubmit="formSubmit" bindreset="formReset">
<!-- 保存图片临时路径 -->
<view class="section">
<input name="img" value="{{imgUrl}}" hidden="true" />
</view> <view class="content">
<view class="currentWordNumber">{{currentWordNumber|}}/{{max}}</view>
<!-- 别忘了给textarea加上name属性 -->
<textarea name="diaryContent" bindblur="getText" bindinput="getValueLength" show-confirm-bar='true' value="{{editText}}" bindconfirm="getText" maxlength="{{max}}" minlength="{{min}}" placeholder="内容..." auto-focus>
<text class="minWord">{{minWord}}</text>
</textarea>
</view>
<view class="tips">在上面填写内容</view> <view class="btn-area">
<button form-type="submit" style="width: 80%; margin-top: 20rpx;background-color: beige;color: black;border:2px solid lightblue;">写完了</button>
</view>
</form>
</view> <block wx:for="{{diarys}}" wx:key="{{index}}">
<view style="display:flex;width:100%;min-height:50px;background:rgb(248, 248, 248);margin:8px;">
<view style="border:20px;">
<image wx:if='{{item["img"]}}' src='{{item["img"]}}'mode="widthFix" style="width:100px;"></image>
</view>
<view style="width:100%;border-bottom:solid 1px lightgrey;padding-left:10px;"> {{item["content"]}} </view>
</view>
</block>
<view>
<image src='../../images/img.jpg' mode="widthFix" style="width:50px"></image>
</view>
me.js
// pages/me/me.js
Page({ /**
* 页面的初始数据
*/
data: {
//以下变量也可以不写在这里，可直接在代码中声明和使用，但推荐写在这里
mHeight: ,
hiddenInput: true,
inputCursor: '+',
max: , //限制最大输入字符数
min: , //限制最小输入字符数
minWord: '', //提示语句
imgUrl: '', //要上传的图片的url
editText: '', //textarea中编辑的内容
diarys: {},
curPage:
}, /**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) { }, //写日记
writeDiary: function() {
let tempCursor = ''
if (this.data.inputCursor == '+') {
tempCursor = '-'
} else {
tempCursor = '+'
}
this.setData({
hiddenInput: !this.data.hiddenInput,
inputCursor: tempCursor
})
//滚动视口，返回顶部
wx.pageScrollTo({
scrollTop: ,
duration:
})
},
/****限制字数与计算 */
getValueLength: function(e) {
let value = e.detail.value
let len = parseInt(value.length)
//最少字数限制
if (len <= this.data.min)
this.setData({
minWord: "至少填写10个字哦～"
})
else if (len > this.data.min)
this.setData({
minWord: " "
})
//最多字数限制
if (len > this.data.max) return;
this.setData({
currentWordNumber: len //当前字数
})
},
formSubmit: function(e) {
console.log('form发生了submit事件，携带数据为：', e.detail.value)
let upDiaryContent = e.detail.value["diaryContent"]
let upimgUrl = e.detail.value["img"]
let len = parseInt(upDiaryContent.length)
//最少字数限制
if (len <= this.data.min) {
this.setData({
minWord: "至少填写10个字哦～"
})
return
}
wx.showLoading({
title: '请等待',
})
//判断有无图片
if (typeof upimgUrl == "undefined" || upimgUrl == null || upimgUrl == "") {
//没有图片,直接上传文字
const db = wx.cloud.database()
db.collection('diarys').add({
data: {
content: upDiaryContent
},
success: res => {
//无图，文字上传成功了
this.reset()
console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)
},
fail: err => {
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
console.error('[数据库] [新增记录] 失败：', err)
} })
} else { //有图片，则先上传图片
const timestamp = new Date().getTime();
const relCloudPath = 'diarys/' + timestamp + upimgUrl.match(/\.[^.]+?$/)[]
console.log()
console.log(upimgUrl)
console.log(relCloudPath)
wx.cloud.uploadFile({
cloudPath: relCloudPath,
filePath: upimgUrl,
success: res => {
console.log('[上传文件] 成功：', res)
let imgFileID = res.fileID
//再上传文字
const db = wx.cloud.database()
db.collection('diarys').add({
data: {
img: imgFileID,
content: upDiaryContent
},
success: res => {
//文字也上传成功了
this.reset()
console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)
},
fail: err => {
//文字上传失败
wx.showToast({
icon: 'none',
title: '新增记录失败'
})
console.error('[数据库] [新增记录] 失败：', err)
}
})
},
fail: e => {
console.error('[上传文件] 失败：', e)
wx.showToast({
icon: 'none',
title: '上传失败',
})
}
})
}
//图片和文字全部上传了。
wx.hideLoading()
},
// 选择图片
selPic: function() {
var that = this
wx.chooseImage({
count: ,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function(res) { wx.showLoading({
title: '请等待',
}) const imgfilePath = res.tempFilePaths[]
that.setData({
imgUrl: imgfilePath
}) },
fail: e => {
this.setData({
imgUrl: ''
})
//console.error(e)
},
complete: () => {
wx.hideLoading()
}
})
},
//重置
reset: function() {
let tempCursor = ''
if (this.data.inputCursor == '+') {
tempCursor = '-'
} else {
tempCursor = '+'
}
this.setData({
'imgUrl': '',
'editText': '',
'hiddenInput': !this.data.hiddenInput,
minWord: '',
inputCursor: tempCursor
})
},
// 查询当前用户的数据库集合，暂时没用
onQuery: function(p) {
const db = wx.cloud.database()
db.collection('diarys').skip(p)
.get()
.then(res => {
console.log(res.data)
console.log(res.data[].img)
})
.catch(console.error)
}, /**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function() {
wx.getSystemInfo({
success: res => {
let h = res.windowHeight
//取20条数据
const db = wx.cloud.database()
db.collection('diarys')
.get()
.then(res => {
this.setData({
mHeight: h,
diarys: res.data
})
console.log(res.data)
console.log(res.data[].img)
})
.catch(console.error)
},
}) }, /**
* 生命周期函数--监听页面显示
*/
onShow: function() { }, /**
* 生命周期函数--监听页面隐藏
*/
onHide: function() { }, /**
* 生命周期函数--监听页面卸载
*/
onUnload: function() { }, /**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() { }, /**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() { }, /**
* 用户点击右上角分享
*/
onShareAppMessage: function() { }
})
me.wxss
/* pages/me/me.wxss */
.currentWordNumber {
height: 35px;
line-height: 35px;
font-size: 14px;
float: right;
margin-right: 15px;
color: rgba(, , , );
margin-bottom: 10px;
}
.minWord {
color: rgb(, , );
font-size: 14px;
position: absolute;
top: 30px;
}
.tips {
width: %;
margin-left: %;
height: 45px;
color: rgba(, , , );
font-size: 14px;
margin-top: 15px;
text-align: left;
font-family: PingFangSC-regular;
}
textarea {
min-height: 500rpx;
max-height: 500rpx;
padding: 10rpx 10rpx;
font-size: %;
width: %;
margin-left: %;
margin-top: 15px;
}
.content {
border-top: 1px solid rgb(, , );
width: %;
margin: auto;
background-color: #ffff;
}
参考：授权 https://www.jianshu.com/p/480ff10bfb54
textarea https://blog.csdn.net/ChibiMarukoChan/article/details/88659746
...
