I spent more than a month making the small program project on MOOCs. Today, IT is finally finished. Here I would like to record and sort out the key points and difficulties in the small program

A few episodes before the start,git usage

I didn’t know much about Git before, so I used VScode to directly submit it, but the wechat development tool I used this time didn’t have the function of source code management, so I had to worry about Git

(1) Create a local version of the repository (folder), use git init to make it a Git repository (2) copy the project to this folder, and then use git add. Add the project to the repository (3) with git commit -m"Comment content"Since the transfer between the local Git repository and Github repository is encrypted by SSH, you need to set the following Settings when connecting: $ssh-keygen -t rsa -c $ssh-keygen -t rsa -c $ssh-keygen -t rsa -c $ssh-keygen -t rsa -c $ssh-keygen -t rsa -c $ssh-keygen -t rsa -c"[email protected]"And then all the way back to the car. Pub and id_rsa.pub in the.ssh directory of the user (5). Then open the code cloud Settings and the SSH public key in the cloud will copy the contents of id_rsa.pub to the local repository Git remote Add Origin Git remote Add Origin Git remote Add Origin Git push -u origin master git push -u origin master git push -u origin master Git push origin master (9) git push origin master The README file in the new repository is not in the local repository directory. If the README file in the new repository is not in the local repository directory, you can use the following command to merge the README file: Git pull --rebase origin master (10) Git pull --rebase origin master (10 Git reset --hard Obfafd push to the remote branch: git push-f
Copy the code

Git branch management

Git branch <name> Git pull <name> add a branch to the current branch: Git merge <name> Git merge <name> Git merge <name-dGit push --delete origin <name>Copy the code

I was not familiar with Git before, but after this practice, I found that I really liked it, especially the version rollback, which was not too convenient

Project officially started

In my opinion, before starting a new project, we should have an overall project architecture for this project. The small program borrowed the development idea of MVVM of VUE, separated the rendering and logic, JS only needs to manage the state, and then described the relationship between the state and the interface structure through a template grammar. I understand this a little bit better because I’ve worked on vUE projects before. The basic principle is data-driven view, where the page starts with data first and then uses the template syntax of WXML to render data into the page.

With that said, let's take some screenshots of the project

GitHub address here

Sorting out the key points and difficulties of the project

The applets unsigned the VUE idea, so the template syntax is also provided in WXML (template), where snippet code can be defined and then called in different places.

Template syntax (using templates)

 var postsData = require('.. /.. /data/posts-data.js')
 onLoad: function (options) {
    this.setData({
      postList: postsData.postList
    })
  }
Copy the code
Import templates <import SRC ="post-item/post-item-template.wxml"/>
Copy the code
<block wx:for="{{postList}}" wx:for-item="item" wx:for-index="idx" wx:key="unique"> <view catchtap="onPostTap" Data - post - id = "{{item. PostId}}" > the < here the template is = "postItem" data = "{{... </view> </block> </view> </block>Copy the code

Define the template

Use the name attribute as the template name. Then define code snippets within the template, such as:

<template name="postItem">
  <view class='post-container'>
    <view class='post-author-date'>
      <image class='post-author' src='{{avatar}}'></image>
      <text class='post-date'>{{date}}</text>
    </view>
  </view>
</template>
Copy the code

Because the small program template does not want to vue template directly can be imported, must be imported template WXSS inside the CSS template, that is, in post. WXSS inside the important import

@import "post-item/post-item-template.wxss";
Copy the code

The template is used to reduce code and make it easier to call multiple times. The template’s data is to pass the POST data in the post-detail, which is equivalent to the vue props

To read the page, click to jump between different details pages

List page favorites

wx.setStorage 

Overall train of thought is that we set a cache object collection, give each page caching a state, when we enter the page First to determine whether there is a cache, had a according to the status of the cache rendering the page, without a cache for page setup, click on the following to the status of the cache to the first, and then according to the status page renderingCopy the code

The effect of this cache, the idea of small program data driven view is fully reflected, all UI page changes, behind the data changes

Var postsCollected={"0":true."1":false."2":true. . } WXML (post-detail.wxml) <view class='circle-img'<image wx:if="{{collected}}" catchtap='onColletionTap' src="Image" />
     <image wx:else catchtap='onColletionTap'  src="Image"Data: {currentPostId: Number, // Set the initial state tofalse
    collected:false}, /** * life cycle function -- listen to the page load, when the page is first rendered, check whether the cache exists */ onLoad:function (options) {
    var postsCollected = wx.getStorageSync('post_Collected'); // Check whether the cache existsif(postsCollected) {// postCollected1 = postsCollected[postId]; This.setdata ({collected: postCollected1})}else{// If no cache is set. Var postsCollected = {} postsCollected[postId] =false; // Set the current cache state wx.setStoragesync ('post_Collected', postsCollected)
    }
  }
Copy the code

The details page triggers a click event

onColletionTap: function (event) {
    this.getPostsCollectedAsy()
},
getPostsCollectedAsy: function () {
    var that = this;
    wx.getStorage({
      key: 'post_Collected',
      success: function(res) { var postsCollected = res.data; var postCollected = postsCollected[that.data.currentPostId]; postCollected = ! postCollected; postsCollected[that.data.currentPostId] = postCollected; that.showToast(postsCollected, postCollected); }, }) }, showToast:function (postsCollected, postCollected) {
    wx.setStorageSync('post_Collected', postsCollected);
    this.setData({
      collected: postCollected
    })
    wx.showToast({
      title: postCollected ? "Successful collection" : "Cancelled successfully",
      icon: 'success',
      duration: 2000
    })
}
Copy the code

To be continued…