More articles

preface

Quick draw is a quick drawing of small tools, are niche products, the reason to do this is to paragraph time on WeChat search business card kind of small programs, such as business CARDS, tencent’s business card and a cool cafe card only have fixed several fields, such as the layout of the fixed without too big extensibility, feeling is not very good, then there is a train of thought, make a customizable layout business card small program, Later, I found that in fact, posters can also be done. There are many limitations in the producers of large pictures (various bugs in small programs lead to a variety of pits that the visible area of the painting is not very large). Record my feelings & pits & bottlenecks in the development of small programs, and scan the qr code below to experience

technology

Wechat small program + cloud development mainly involves canvas. Painter is a good drawing tool. The advantage of cloud development is that you can use the database and storage space of small programs for free

The module

At present, there are four modules: template module, drawing module, login module and my module

  • Template module

At present, only two business card templates are used. In the later stage, more templates are expected to be provided, which are divided into two categories, poster and business card, and divided into different themes. Templates can be searched by theme

  • Drawing module

This is the most important function collection area, but due to various problems of the small program Canvas, the painting area is not full screen at present

  • The login module

Login is mainly the non-sensitive information of mobile phone users (personal small program restrictions or more), after login users can permanently save the production of works

  • My module

Personal information and work for display

Expected expansion function module: Currently there is still a lack of guidance module, do not know how to operate this piece of knowledge, to provide a market module, users can publish their works to the market, free or paid, drawing area is too small, drawing large picture is not friendly, layer relationship has not been set

function

With Painter, we can help solve canvas adaptive, select child elements, generate pictures and other functions related to painting. We only need to realize the functions we want by processing JSON data. However, due to the small program canvas level problems, the bindLongTap event does not take effect, scrolling does not trigger page scrolling, or compromise the painting covering the screen, long press 2s to move and other functions, the following are other functions

  • Authorized to log in

After login, some non-sensitive information (profile picture, nickname, etc.) of the user will be saved to the Users set. Each time the user logs in, the user will query the user information in the Users set. If the information exists, there will be no user authorized to log in again, so as to achieve the effect of once login and permanent login

  • Add elements

We currently support adding text, images, and rectangles

  • Save the picture

Save the picture to the local and to my, save to my user authorized login, after login, we will save the user’s drawing data in the database

// Save to local
wx.saveImageToPhotosAlbum()
// Save to mine
db.collection('cards').add({ data })
Copy the code
  • Move the whole canvas

This is a compromise. The idea is to press long for 2 seconds to move the canvas, but the bindLongTap event does not take effect. Instead, show the move icon and drag the move icon to move the canvas

  • Move modify elements

Click on the element to pop up attributes that can be modified by the element. Drag the element to move. When the move stops, the position attribute is updated

  • The canvas is a

In view of the problem that it is difficult to move the canvas back to the original after moving, the function of one-key attribution is provided

  • preview

Because of the canvas hierarchy, we can only use cover-view and cover-image

  • share

There is a difference between temporary sharing and permanent sharing

Technical difficulties and thinking

The problem of canvas

  • Hierarchy problems

The drawing area is canvas, and the initial assumption is to occupy at least the full screen. The part of configuration properties is floating on it through fixed positioning. Due to the hierarchy problem of canvas, only cover-view, cover-image, button and other labels can cover it, and the hierarchy problem of configuration properties module input label cannot be solved

  • The bindlongtap method is invalid

It is definitely not enough to make a large picture of the mobile phone screen, so the whole canvas must be moveable to avoid conflict with the movement of child elements. Long press 2s to move the canvas, but the bindlongtap event does not take effect

Consider: When testing various questions about Canvas, my friend proposed a solution: Since the operation is all JSON data rather than pictures, ordinary labels (view, etc.) can be used to realize the layout of the page, and only need to use Canvas when generating pictures. This scheme is completely feasible, and hierarchy and long-press events can be solved, and the experience of making large images will be better

Temporary share

In fact, this part of the sharing can not be done, but in line with the idea of solving the problem or to achieve it, for the works being edited, there is no data of these operations saved to the database, others click on the sharing link to come in, can not see the actual picture shared out, the experience is very bad

How to deal with this problem, I think of the tourist mode in the game, the tourists do not want to log in, nor do they want to save the pictures to my, they just share them after editing, because the shared link parameters cannot store a large amount of data, so the only way is to create a collection timeCards to store temporary shared data. Then the shared link only has a unique id, and each time you click the shared link to come in, you can query the painting data stored by timeCards through the ID

But temporary data can not always exist so it leads to the scheduled deletion of database data scheduled task, wechat small program provides a scheduled trigger, you can use this to trigger the scheduled deletion of temporary data task, then take a look at the specific operation

  1. The painting data and sharing time should be stored when sharing
// createTime Specifies the time when sharing
const db = wx.cloud.database();
db.collection('timeCards').add({
  data: { ...data, createTime: db.serverDate()}
}).then()
Copy the code
  1. Create a cloud function, and delete data that is more than 3 days old
// Cloud function entry file
const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
const day = 60 * 60 * 24 * 3 * 1000
// Cloud function entry function
exports.main = async (event, context) => {
  const db = cloud.database()
  const arr = await db.collection('timeCards').get().then(res= >{
    const currentTime = new Date().getTime()
    const { data } = res
    let deleteArr = []
    data.map(e= >{
      const { createTime } = e
      const time = new Date(createTime).getTime()
      const offstTime = currentTime - time;
      // Collect data over 3 days
      if(offstTime > day) {
        deleteArr.push(e._id)
      }
    })
    return deleteArr
  })
  arr.map(item= >{
    db.collection('timeCards').doc(item).remove()
  })
  
}
Copy the code
  1. Configure the trigger in config.json
{" Triggers ": [{"name": "timeCards", "type": "timer", "config": "0 0 0 * *? *"]}Copy the code
  1. Upload cloud functions and triggers

Cloud function directory mail, you can see the upload cloud function and upload trigger operation

conclusion

In fact, this is my first time using cloud development, and it’s very front-end friendly.

When you have an idea, you should do it!!