微信小程序开发入门教程（四）-自己动手做个小程序

姚不可及 發表於 2019-8-23 13:21:00

微信小程序开发入门教程（四）---自己动手做个小程序

前面已将基础知识准备的差不多了，下面实际做一个小程序。
一、目标
用于上传照片和文字。
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并保存。代码如下：
<div class="cnblogs_code">
<pre>{
"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"
}</pre>
</div>
<pre>同时，要在images目录中放置一张img.jpg图片（我自己画了一张）</pre>
3、我打算将现有的index页作为将来的splash页。所以先修改E:\wxDEV\diary\miniprogram\pages\index\index.js,以实现2秒后跳转me页，代码：
<div class="cnblogs_code">
<pre>//index.js

Page({
data: {},

onLoad: function() {
setTimeout(function() {
 wx.reLaunch({
 url: '../me/me',
 })
}, 2000)

}
})</pre>
</div>
4、修改me页（为方便调试，可更改app.json中pages值的顺序，将me调整到前面）。原本想在me页上用movable-view增加可拖动的按钮样式，如下： 
<div class="cnblogs_code">
<pre>
<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-imagesrc='../../images/img.jpg'></cover-image>
</cover-view>
</movable-view>
</movable-area></pre>
</div>
结果在安卓真机上出现兼容性问题，拖动时cover-view瞬间移动，而cover-image不跟随移动，无法正常工作。（谁知道解决办法给我讲一下？）只好弃用。 
<span style="color: rgba(34, 34, 34, 1); font-family: -apple-system, BlinkMacSystemFont, "SF UI Text", "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", Arial, sans-serif">云开发的云函数的独特优势在于与微信登录鉴权的无缝整合，参考：https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/functions/userinfo.html
所以，对不同用户上传内容可以用openid区分。
5.半成品的me.wxml ,代码如下：
<div class="cnblogs_code">
<pre>
<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|0}}/{{max}}</view>
 
 <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></pre>
</div>
me.js
<div class="cnblogs_code">
<pre>// pages/me/me.js
Page({

/**
* 页面的初始数据
*/
data: {
//以下变量也可以不写在这里，可直接在代码中声明和使用，但推荐写在这里
mHeight: 500,
hiddenInput: true,
inputCursor: '+',
max: 2000, //限制最大输入字符数
min: 10, //限制最小输入字符数
minWord: '', //提示语句
imgUrl: '', //要上传的图片的url
editText: '', //textarea中编辑的内容
 diarys: {},
curPage: 1
},

/**
* 生命周期函数--监听页面加载
*/
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: 0,
 duration: 300
})
},
/****限制字数与计算 */
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(/\.[^.]+?$/)[0]
 console.log(1)
 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: 1,
 sizeType: ['compressed'],
 sourceType: ['album', 'camera'],
 success: function(res) {

 wx.showLoading({
 title: '请等待',
 })

 const imgfilePath = res.tempFilePaths[0]
 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[0].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[5].img)
 })
 .catch(console.error)
 },
})

},

/**
* 生命周期函数--监听页面显示
*/
onShow: function() {

},

/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {

},

/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {

},

/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function() {

},

/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {

},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {

}
})</pre>
</div>
me.wxss
<div class="cnblogs_code">
<pre>/* pages/me/me.wxss */
.currentWordNumber {
height: 35px;
line-height: 35px;
font-size: 14px;
float: right;
margin-right: 15px;
color: rgba(136, 136, 136, 1);
margin-bottom: 10px;
}
.minWord {
color: rgb(248, 248, 248);
font-size: 14px;
position: absolute;
top: 30px;
}
.tips {
width: 96%;
margin-left: 2%;
height: 45px;
color: rgba(136, 136, 136, 1);
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: 100%;
width: 94%;
margin-left: 3%;
margin-top: 15px;
}
.content {
border-top: 1px solid rgb(247, 247, 247);
width: 100%;
margin: 0 auto;
background-color: #ffff;
}</pre>
</div>
<pre></pre>
参考：授权 https://www.jianshu.com/p/480ff10bfb54
textarea https://blog.csdn.net/ChibiMarukoChan/article/details/88659746
 ...
<h3 id="_1-02-1907160-Windows-64-、-Windows-32-、-macOS"> </h3> 
来源：https://www.cnblogs.com/pu369/p/11398114.html

頁: [1]

琼殿技术论坛's Archiver

微信小程序开发入门教程（四）---自己动手做个小程序