preface
Although not background development, but also want to do their own projects, just cloud development appeared. Developers can use cloud development to develop wechat mini programs and games, without building a server, you can use cloud capabilities.
As a platform for communication, community can communicate and share with others by Posting their own and others’ favorite words and pictures.
Just after learning cloud development, you can practice your hand with community applets
[community small program] function realization
Home page [Square]
Displays user posts
Some tutorials posted by the administrator
2. To release a message.
Issued by
Slide display of horizontal pictures
Personal Center [Mine]
Displays the login information of the user
A list of users’ favorites
Release history
Invite friends
Product ideas
I. Home Page [Square]
-
Displays user posts
-
Some tutorials posted by the administrator
Achieved effect
Realize the point
1. Display of WXML data of different categories
Implemented via if-elif-else, render via
in a WXML file, because it’s just a wrapper element that doesn’t do any rendering in the page, only accepts control attributes. This means that you can use attributes to control whether or not you want to render this part of the page, which can reduce page rendering time.
2. Acquisition of cloud development data
First open the cloud development function, refer to the official documents, and then select the use of cloud development template when creating the project (see personal, I directly use after clicking login in the project) you can get the user’s OppenID, then you can use the cloud database.
-
Cloud Development Login:
-
Cloud data acquisition:
/ * *
* Lifecycle functions -- listen for page loads
* /
onLoad: function(options) {
console.log('onload');
this.getData(this.data.page);
},
/ * *
* Get list data
*
* /
getData: function(page) {
var that = this;
console.log("page--->" + page);
const db = wx.cloud.database();
// Get the total
db.collection('topic').count({
success: function(res) {
that.data.totalCount = res.total;
}
})
// get the first ten
try {
db.collection('topic')
.where({
OSly _openid: '* * * * * * * * * * * vU1KwZE', / / fill in the current user openid
})
.limit(tha.data.pagesize) // Limit the number of returns to 10
.orderBy('date', 'desc')
.get({
success: function(res) {
Res.data is an array containing the two records defined above
// console.log(res.data)
that.data.topics = res.data;
that.setData({
topics: that.data.topics,
})
wx.hideNavigationBarLoading(); // Hide the load
wx.stopPullDownRefresh();
},
fail: function(event) {
wx.hideNavigationBarLoading(); // Hide the load
wx.stopPullDownRefresh();
}
})
} catch (e) {
wx.hideNavigationBarLoading(); // Hide the load
wx.stopPullDownRefresh();
console.error(e);
}
},
Copy the code-
Cloud data addition:
/ * *
* Save to the publication collection
* /
saveDataToServer: function(event) {
var that = this;
const db = wx.cloud.database();
const topic = db.collection('topic')
db.collection('topic').add({
// Data indicates the JSON data to be added
data: {
content: that.data.content,
date: new Date(),
images: that.data.images,
user: that.data.user,
isLike: that.data.isLike,
},
success: function(res) {
// res is an object with the _ID field marking the ID of the newly created record
// Clear and redirect to the home page
console.log("success---->" + res)
// Save to publish history
that.saveToHistoryServer();
// Clear the data
that.data.content = "";
that.data.images = [];
that.setData({
textContent: '',
images: [],
})
that.showTipAndSwitchTab();
},
complete: function(res) {
console.log("complete---->" + res)
}
})
},
Copy the code3. Paging of data lists
The main idea is to define a temporary array to hold the loaded data, which is then passed to the object and finally to the layout.
/ * *
* A handler for a pull-down event on a page
* /
onReachBottom: function() {
var that = this;
var temp = [];
// get the following ten
if(this.data.topics.length < this.data.totalCount){
try {
const db = wx.cloud.database();
db.collection('topic')
.skip(5)
.limit(tha.data.pagesize) // Limit the number of returns to 5
.orderby ('date', 'desc') // Sort
.get({
success: function (res) {
Res.data is an array containing the two records defined above
if (res.data.length > 0) {
for(var i=0; i < res.data.length; i++){
var tempTopic = res.data[i];
console.log(tempTopic);
temp.push(tempTopic);
}
var totalTopic = {};
totalTopic = that.data.topics.concat(temp);
console.log(totalTopic);
that.setData({
topics: totalTopic,
})
} else {
wx.showToast({
Title: 'No more data ',
})
}
},
fail: function (event) {
console.log("======" + event);
}
})
} catch (e) {
console.error(e);
}
}else{
wx.showToast({
Title: 'No more data ',
})
}
},
Copy the codeIi. News [Release]
-
Issued by
-
Horizontal picture sliding display (the effect is not very good, can be changed to nine grid)
Release page effect is as follows:
Analyze how to implement
-
The implementation of the navigation bar is very simple, but refer to my previous article
-
The important thing is that ② in the middle is the content area
-
Area three is the functional operation area
Implementation of content areas
-
The first is the text area
-
The second is the horizontal image display area
There is a close button in the upper right corner of the image, where the icon component is used.
The main implementation code is as follows:
<view class="content">
<form bindsubmit="formSubmit">
<view class="text-content">
<view class='text-area'>
<textarea name="input-content" type="text" placeholder=" {{textContent}}" bindblur='getTextAreaContent'></textarea>
</view>
</view>
<scroll-view class="image-group" scroll-x="true">
<block wx:for='{{images}}' wx:for-index='idx'>
<view>
<image src='{{images[idx]}}' mode='aspectFill' bindtap="previewImg"></image>
<icon type='clear' bindtap='removeImg' data-index="{{idx}}" ></icon>
</view>
</block>
</scroll-view>
<view class='btn-func'>
<button class="btn-img" bindtap='chooseImage'> </button>
<button class=" BTN "formType='submit' open-type="getUserInfo">
<! -- <image hidden=''></image> -->
</view>
</form>
</view>
Copy the codeThe layout is as follows:
.content {
height: 100%;
width: 100%;
}
textarea {
width: 700rpx;
padding: 25rpx 0;
}
.text-content {
background-color: #f3efef;
padding: 0 25rpx;
}
.image-group {
display: flex;
white-space: nowrap;
margin-top: 30px;
}
.image-group view{
display: inline-block;
flex-direction: row;
width: 375rpx;
height: 375rpx;
margin-right: 20rpx;
margin-left: 20rpx;
background-color: #cfcccc;
}
.image-group view image{
width: 100%;
height: 100%;
align-items: center;
}
.image-group view icon{
display: inline-block;
vertical-align: top;
position: absolute
}
.btn-func {
display: flex;
flex-direction: column;
width: 100%;
position: absolute;
bottom: 0;
margin: 0 auto;
align-items: center;
}
.btn-img {
width: 220px;
height: 45px;
line-height: 45px;
margin-top: 20px;
margin-bottom: 20px;
background-color: rgb(113, 98, 250);
color: #fff;
border-radius: 50px;
}
.btn {
width: 220px;
height: 45px;
line-height: 45px;
background-color: #d50310;
color: #fff;
border-radius: 50px;
margin-bottom: 20px;
}
Copy the codeAfter the page layout, it is time to process data from JS. The main functions realized in JS are:
-
Get text content
-
Image selection
-
Picture viewing
-
Image deletion
-
Publish the results to the cloud database
1. Acquisition of text content
/ * *
* Get the content filled in
* /
getTextAreaContent: function(event) {
this.data.content = event.detail.value;
},
Copy the code2. Selection of pictures
/ * *
* Select image
* /
chooseImage: function(event) {
var that = this;
wx.chooseImage({
count: 6,
success: function(res) {
// tempFilePath can display images as the SRC attribute of the IMG tag
const tempFilePaths = res.tempFilePaths
for (var i in tempFilePaths) {
that.data.images = that.data.images.concat(tempFilePaths[i])
}
// Set the image
that.setData({
images: that.data.images,
})
},
})
},
Copy the code3. Preview images
// Preview the image
previewImg: function(e) {
// Get the subscript of the current image
var index = e.currentTarget.dataset.index;
wx.previewImage({
// The current image is displayed
current: this.data.images[index],
// All images
urls: this.data.images
})
},
Copy the code4. Delete pictures
/ * *
* Delete pictures
* /
removeImg: function(event) {
var position = event.currentTarget.dataset.index;
this.data.images.splice(position, 1);
// Render the image
this.setData({
images: this.data.images,
})
},
Copy the code5. Publish the content to the database
To publish data to data, you need to open cloud development first, and then create collections in the database, that is, tables, and then call the database’s add, delete, change and check API.
/ * *
* Add to the publication collection
* /
saveToHistoryServer: function(event) {
var that = this;
const db = wx.cloud.database();
db.collection('history').add({
// Data indicates the JSON data to be added
data: {
content: that.data.content,
date: new Date(),
images: that.data.images,
user: that.data.user,
isLike: that.data.isLike,
},
success: function(res) {
// res is an object with the _ID field marking the ID of the newly created record
console.log(res)
},
fail: console.error
})
},
Copy the codeIii. Personal Center [Mine]
-
[Display user login information] is mainly to call the small program interface to obtain the user’s wechat public information for display
-
[User’s Collection List] To obtain the collection list in the database for display
-
[Release History] On the release page, when the release data is successfully saved into the release history table, the data of the table can be obtained for display when necessary
-
[Invite friends] Call the sharing interface of the applet and share it directly to the wechat group or individuals
-
[Product Opinion] A page similar to the release page, the implementation idea is the same as the release page implementation.
Achieved effect
Implementation analysis
1. The effect to be achieved
-
When a user enters the personal center, the obtain user information window is displayed
-
Display a circular user profile picture
2. Authorize pop-ups
The official document of obtaining user information is adjusted to optimize user experience. The development mode of using the wx.getUserInfo interface to directly display the authorization box is gradually removed. Starting from April 30, 2018, the experience version and development version of small programs and small games will not be able to pop up the authorization query box when calling wx.getUserInfo interface. The default call fails. The official version is not affected.
Wx. getUserInfo does not pop up the authorization window directly, and in the new version, the call will return Fail. Now, the user is authorized by clicking a button.
The documentation explains that there are two ways to obtain user information.
-
One is to use
to get public user information:
<open-data type="userNickName" lang="zh_CN"></open-data>
<open-data type="userAvatarUrl"></open-data>
<open-data type="userGender" lang="zh_CN"></open-data>
Copy the code-
The other is to specify open-type as type getUserInfo using the button component:
<! -- Use button to authorize login -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindGetUserinfo =" bindgetUserinfo ">
<view wx:else> Please update wechat version </view>
Page({
data: {
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
onLoad: function() {
// Check whether authorization is granted
wx.getSetting({
success (res){
if (res.authSetting['scope.userInfo']) {
// The avatar nickname can be obtained by calling getUserInfo
wx.getUserInfo({
success: function(res) {
console.log(res.userInfo)
}
})
}
}
})
},
bindGetUserInfo (e) {
// Obtain user information
console.log(e.detail.userInfo)
}
})
Copy the code3. Implement circular avatar in <open-data>
<view class='amountBg'>
<view class='img'>
<open-data type="userAvatarUrl"></open-data>
</view>
<view class='account'>
<view class='nick-name'>
<open-data type="userNickName" lang="zh_CN"></open-data>
</view>
<view class='address'>
< open - data type = "userCountry lang =" zh_CN ">" < / open - data > ·
< open - data type = "userProvince lang =" zh_CN ">" < / open - data > ·
<open-data type="userCity" lang="zh_CN"></open-data>
</view>
</view>
</view>
Copy the codeThe CSS style is as follows:
.amountBg {
display: flex;
flex-direction: row;
height: 100px;
background-color: #5495e6;
align-items: center;
}
.img {
overflow: hidden;
display: block;
margin-left: 20px;
width: 49px;
height: 49px;
border-radius: 50%;
}
.account {
width: 70%;
color: #fff;
margin-left: 10px;
align-items: center;
}
.nick-name{
font-family: 'Mcrosoft Yahei';
font-size: 16px;
}
.address{
font-size: 13px;
}
.nav {
width: 15px;
color: #fff;
}
Copy the codeThere may be some problems
Content posted by other users sometimes doesn’t show up? Make the database permissions visible to all.
Does the home page not refresh automatically after Posting content? On the front page of the square, onShow, obtain data from the database for display.
Clone source code does not run? You need to create the corresponding tables in your own cloud database.
If you have any technical stories/practical experience about cloud development TCB, please leave a message and contact us! Than the heart!
(Followed me and I was pretty good)