Preface: This is the first time that the author develops a small program. Before this, I have been planning to do one by myself, and can use it online, but I have been unable to find inspiration, and also need server-side, database and other skills, so all have not been able to achieve. Later, I happened to see wechat small program cloud development (a little amazing, really very simple), plus a little idea, so I started the journey of small program cloud development.

Step one, what do you make?

In view of my skill level (face covering) and seeing many people sharing their annual goals at the end of the year, I decided to make a simple, convenient and meaningful annual goal memo.

Step 2, think about the structure of the applets

In practical development, product-related mind maps and prototype maps are often needed to guide development. Even if a small project is done, I think it also needs a good idea. The following is the mind map of a small program:

The third step is the development stage

The main pages are listed below

Home page

Home page functions:

  1. Obtain the openID of the current user through the cloud function, and query the user’s goals for this year;
  2. Query the ID attached to the link to obtain the target content shared by other users;

Part of the code is as follows:

 // Call the cloud function
 wx.cloud.callFunction({
  name: 'login'.data: {},
  success: res= > {
    console.log('[login] user openID: ', res.result.openid)
    app.globalData.openid = res.result.openid;
    if(! id){this.getData(); }},fail: err= > {
    console.error('[cloud function] [login] call failed ', err)
  }
})
 // Query the database
 const db = wx.cloud.database();
 db.collection("targets").where({
  _openid: app.globalData.openid,
  date: new Date().getFullYear()
}).get({
  success: res= > {
    let data = res.data[0) | | {};this.setData({
      id: data._id || ' '.title: data.title || ' '.content: data.content || ' '.flag: false})},fail: err= > {
    console.log(err)
    this.setData({
      flag: false})}})Copy the code

List of pp.

Lists implement the following functions:

  1. Displays all the targets added by the user;
  2. Swipe left to delete, add target details, edit, add entry;

Part of the code is as follows:

 // Get all the targets
const db = wx.cloud.database();
db.collection("targets").where({
  _openid: app.globalData.openid
}).get({
  success: res= > {
    this.setData({
      flag: true.targetList: res.data, height: height
    })
    app.globalData.targetList = res.data;
  }, fail: err= > {
    wx.showToast({
      icon: "none".title: 'Record query failed',})}})// Response deleted
let id = e.currentTarget.id;
const db = wx.cloud.database();

db.collection("targets").doc(id).remove({
  success: res= > {
    wx.showToast({
      title: 'Deleted successfully',}}),fail: err= > {
    wx.showToast({
      title: 'Delete failed',})}})Copy the code

Add the target

Add goal implementation features:

  1. The picker component lets the user pick a year;
  2. Can add/edit annual target title, content;

Part of the code is as follows:

// Add data
db.collection("targets").add({
  data: data,
  success: res= > {
    wx.showToast({
      title: 'Added successfully',}}),fail: err= > {
    wx.showToast({
      title: 'New failure'.icon: 'none'})}})// Edit data
db.collection("targets").doc(data.id).update({
  data: data,
  success: res= > {
    wx.showToast({
      title: 'Modified successfully',}}),fail: err= > {
    wx.showToast({
      title: 'Modification failed',})}})Copy the code


Step 4: Final results

Small program from the development to the success of the release, only took a week, and is free, have to praise the cloud development to developers bring convenience

Some unsolved problems due to time, technology or environment constraints:

  1. The function of sharing to moments has not been implemented yet. In the future, it will be implemented to save the current page as a picture for users to share manually.
  2. Textarea tag is used to add data to the user, some crude, I hope the small program as soon as possible out of the rich text editor;
  3. Although I often come into contact with design drawings at work, I still have no sense of UI design. I will try my best to make up for the deficiencies in design in the future.
  4. Small program cloud development data response is a little slow, it is said that cloud development is only deployed in Shanghai, looking forward to subsequent optimization;


Finally, attach a small program code, wechat scan code to experience (or search my year goal). In addition, I wish you can develop your own mini program and achieve your life goals in the New Year






Github address for this small program: My annual goal

Reference documents/articles:

  • Wechat applets cloud development document
  • Wechat small program development platform new function “cloud development” quick start experience
  • Wechat small program to achieve left swipe delete – everything is not so simple
  • Wechat small program cloud development – simulation background add, delete, change and check