Creativity comes from life, this campus about small program, because on the photography elective course is listening to the teacher complained that sketches out the old to find models, many students want to have a photographic works of their own, memory, recorded not indelible memories, can be found how to let oneself satisfactory photographer is their problem. Yuepai House is an O2O booking platform for campus photography, providing a full range of booking services, as well as a platform for self-exhibition, learning and communication, and interactive entertainment. Next I will be combined with the project to share some practical technology and some experience for cloud development, I hope to be helpful to you who are learning small procedures.

preface

Before developing a project, technology selection should be carried out first to reduce the technical risk of product development and improve the efficiency of development. Technology selection must be closely selected around the business scenario.

  • Product prototype design: ink knife
  • The UI component library

    1. Wechat native Style libraryWeUITo make the user’s perception more unified

    2. Focus on visual interactive experienceColorUIComponent library, on the basis of perceptual unity, visual element diversification
  • The front end

    1. Applets native syntax andAPI

    2.PromiseImplementing asynchronous calls

    3.ES6Write page interaction logic
  • The back-end

    1. Cloud functions: there is no need to build a server, and the code running in the cloud is authenticated by wechat private protocol. Developers only need to write their own business logic code

    2. Cloud database: no need to build a database, a small program can be operated in front, also can read and write in the cloud functionJSONThe database

    3. Cloud storage: realize direct upload/download of cloud files in the front end of small programs and visual management on the cloud development console

    4. Cloud call: integrated by the original wechat service, the ability to use applets open interface based on cloud function authentication exemption, including server-side call, access to open data and other capabilities
  • other

    1. Conduct defect test, performance data analysis and model coverage test on the small programs that are not online by using the cloud test provided by wechat to ensure the normal operation of the small programs after they are online

    2. Use cloud-based developmentAI visual ability– Id card identification realizes real-name authentication, and intelligent yellow authentication is combined with manual verification of published information

    3. Development tools: wechat developer tools, VScode

    4. Some ICONS are from Alibaba Vector icon library

The overall design

Functional structure diagram

This diagram gives you an idea of the main functional points of the entire project

Product prototype drawing

Here is an example of a home page prototype diagram, the ink knife is very good to use

Color plan

The overall color of Yuepap Room is light blue. When developing your own projects, you can design the colors adopted by the project according to the color standard collocation. The appropriate color collocation can give users a good visual experience

Detailed description of function modules

Next, I will describe some functional modules in detail in the form of combination of pictures and texts, and share the technology and knowledge involved with you

About pat invited

Users can view the demand for auction on the home page and click to view the demand details. After knowing the demand, if they meet the requirements, they can submit the information for auction and wait for the reply from the publisher. They can save the demand for easy viewing

Technology sharing: customize the top navigation bar

The official default navigation bar can only change the background color, for the navigation bar to add some cool effects need to be customized

NavigationStyle (navigation bar style) in app.json is set to Custom

"window":{
    "navigationStyle":"custom"
}
Copy the code

The custom navigation bar of some pages of this project uses the navigation bar component of ColorUI. You can introduce the navigation bar component after completing the property setting in the previous step

"UsingComponents ":{"cu-custom":"/colorui/components/cu-custom"}Copy the code

Home custom navigation bar by setting the background image with GIF wave effect

<view class='page__bd'> <view class="bg-img padding-tb-xl" style="background-image:url('http://wx4.sinaimg.cn/mw690/006UdlVNgy1g2v2t1ih8jj31hc0p0qej.jpg'); background-size:cover;" > <view class="cu-bar"> <view class="content text-bold text-white"> </view> </view> </view> </view> <view class="shadow-blur"> <image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="gif-black response" style="height:100rpx; margin-top:-100rpx;" ></image> </view> </view>Copy the code

rendering

<cu-custom bgImage="https://s2.ax1x.com/2019/05/02/Etiyng.jpg" isBack="{{true}}">
  <view slot="backText"> returns </view> <view slot="content"> Authentication information Description </view> </cu-custom>Copy the code

rendering

Note 1: After using the custom navigation, the page return must be set in the custom navigation bar

Special reminder 2: the navigation bar component needs to introduce the ColorUI component library before it can be used, the specific introduction tutorial address is given in the appendix

Published about pat

Select the function of Posting auction and fill in the requirements of Posting auction. After the submission is approved, the release results can be viewed in real time on the home page

Technical sharing: Entrance animation

The forehead.. Recording may be a little bit slow, the actual effect is quite smooth, you big guys have any good recording tool recommended can reply in the comments

How to do this: Add the animation class name dynamically by setting toggleDelay to true, and control the animation process by setting toggleDelay in onReady (similar to Vue’s dynamic class name)

Data: {toggleDelay;false
},
onReady:function(){
    let that = this
    // If toggleDelay is true, the animation begins
    that.setData({
      toggleDelay: true
    })
    // Controls the duration of the entire animation
    setTimeout(function() {
      that.setData({
        toggleDelay: false})},2000)}Copy the code
<view class="padding-xs {{toggleDelay? 'animation-slide-bottom':''}}" style="animation-delay: {{item.time}}s;" wx:for="{{list}}" wx:key="{{index}}"> <image class="img" id='img{{index}}' src="{{item.src}}" mode="widthFix" /> </view>Copy the code
[class*=animation-] {animation-duration:.5s; animation-timing-function: ease-out; Animation-fill-mode: both} //animatioon-slide-bottom defines the animation. animation-slide-bottom {animation-name: animation-fill-mode: both} //animatioon-slide-bottom defines the animation. Animation-timing-function: 0; animation-timing-function: 0; animation-timing-function: 0; transform: translateY(100%) } 100% { opacity: 1; transform: translateY(0) } }Copy the code

Animation-slide-bottom is the name of the animation class. Animation-delay is the delay time of each card animation. The execution time of each animation is 0.5s, so the delay time increases by 0.5s. The total animation time for the three cards is 2s, after which the setTimeout event in onReady is executed to end the animation

Special reminder: animation delay time, execution time can be designed by oneself, animation effect transition can be natural

Special note: since the hook function that triggers the animation is defined in the life cycle function of the first rendering of the page, it is executed only at the first rendering of the page to avoid the visual fatigue caused by loading the animation every time the page is displayed

Intelligent recommendation for auction

The system will automatically recommend candidates for auction according to their requirements (personal development energy is limited, recommendation algorithm will be introduced later…)

Technology sharing: CSS3 to achieve cool search animation

Place two View labels inside the modal box. Here is the label definition

<view id='preloader'> // Inner line definition </view>Copy the code
#preloader { width: 150px; height: 150px; border-radius: 50%; border: 1px solid #97b2ff; } #loader {// Middle line defines display: block; position: relative; left: 50%; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; border: 3px solid transparent; border-top-color: #97b2ff; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } #loader:before {// Define the outer line with the pseudo-class element content: ""; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; border-radius: 50%; border: 3px solid transparent; border-top-color: #97b2ff; -webkit-animation: spin 3s linear infinite; animation: spin 3s linear infinite; } #loader:after {// define the innermost line by the false class element. position: absolute; top: 15px; left: 15px; right: 15px; bottom: 15px; border-radius: 50%; border: 3px solid transparent; border-top-color: #97b2ff; -webkit-animation: spin 1.5s Linear infinite; Animation: Spin 1.5s Linear Infinite; }Copy the code

Real-name authentication

Technology sharing: Ai visual ability

Many friends have had the idea of using AI technology in their own projects, but they gave up because it is difficult to get started with AI and it takes a long time. Now we give you an AI service that you can use directly, so that AI will no longer have a sense of mystery (AI masters can ignore this part).

  • Plan a

    Search id card identification in Tencent Cloud, there will be detailed API documentation and testing tools to help you quickly use

    Click to viewTencent Cloud – ID card recognition

  • Scheme 2

    Plan a are given in the form of providing API interface id identification service, and then to introduce the solution is simple, really in the intelligent search tencent the cloud image, the value-added service AI intelligent image ability, you can use the function of cloud and cloud storage to realize the corresponding function, based on the process of the development of cloud AI development good part of the DEMO function, All you need to do is introduce cloud functions and components into your project through the tutorial

    Click to viewTencent Cloud – Intelligent image

    Click to viewAI DEMO based on small program cloud development

Special reminder: of course, the use of these services is not a complete solution, for the ID information encryption, storage scheme, security protocol or you need to design solutions oh.

Development of cloud

Cloud development for developers to provide complete primary support and the clouds WeChat service support, and weaken the back-end and operational concepts, do not need to set up the server, use the API provided by the platform in terms of core business development, can be realized fast on-line and iteration, this ability at the same time, with the developers are already using cloud services compatible with each other, are not mutually exclusive.

API in the official document is divided into small program side and server side. At the beginning, after reading the API of both sides, IT seems that there is no difference. After consulting relevant materials and summarizing some experience in the processing of some business in the actual development, I understand the difference between the two sides. Should help you in the use of cloud development practice step on a little less pit

Different initialization

The small program end

Global declaration once

if (! Wx.cloud) {console.error(' Please use base library 2.2.3 or above to use cloud capabilities ')} else {wx.cloud.init({env:' XXX ', traceUser: true,})}Copy the code

The service side

Declare once per cloud function

const cloud = require('wx-server-sdk')
cloud.init()
Copy the code

Different permissions

The small program end

On small program can choose to directly manipulate the database, but due to some security problems is the front-end database operation, more access restrictions, in cloud control for each set of permissions set, which is why a junior partner in a small program end to update some data show that the update is successful but did not update the data, Because the applet side can only update data written by the current user by default

Special reminder: when the small program side uses the creator’s permission to modify the data, it must ensure that there is the _openID field in the collection, otherwise the system cannot identify the current operation as the creator when judging the permission, and the data modification cannot be carried out

The service side

The server has the administrator permission to read and write all data

Different syntax support

The small program end

In wechat developer tools and Android phones (the browser kernel is X5 of QQ browser), async/await is naturally supported, but iOS phones are not supported in earlier versions, so additional polyfill needs to be introduced. You can introduce polyfill files in files that use async/await.

Const runtime = require(' lib/runtime')Copy the code

The service side

In cloud functions, since Node is at least 8.9, this is an example that naturally supports async/await syntax: get a list of beat requirements

// Cloud function entry file
const cloud = require('wx-server-sdk')
/ / initialization
cloud.init()
// Connect to the database
const db = cloud.database()
async function getAll(){
    const result = await db.collection('ypList')
    .orderBy('cameraInfo.launchTime'.'desc').where({}).get()
    return result
}
// Cloud function entry function
exports.main = async (event, context) => {
    // Action is used to determine which method to call
    if(event.action === 'getAll') {return getAll()
    }
}
Copy the code

conclusion

A full stack project is indeed very hard, but the harvest is also a lot. At least for the small program of actual combat development more skilled, the idea of MVVM understanding is also more profound. Technology develops rapidly, and it is impossible to learn a technology without getting into its essence. Deep learning is the process of solving problems, either by helping others solve problems, or by helping others solve problems. Currently, I am learning Vue, React, TypeScript and other technologies. I will publish project analysis articles on related technologies in the future. I hope it will be helpful to you who are also learning.

Special note: This project has participated in the 2019 China University Computer – wechat application development competition, open source to Github, interested partners can have a look

The appendix

Here are some links to the techniques and tools involved in this project for you to learn and use

  • Product prototype design tool: ink knife
  • Color matching design: color matching web
  • Online mapping: ProcessOn
  • UI Style library: WeUI
  • UI Style library: ColorUI
  • Iconfont: Alibaba Vector icon library
  • Development tools: wechat developer tools
  • Developer tools: Vscode
  • Tencent cloud service: ID card recognition
  • Tencent cloud service: intelligent image
  • API documentation: wechat official documentation. Small program
  • Technical documentation: ES6