Small program adhering to the “experience extremely simplified”, “run out of” concept emerged at the historic moment. For a long time, I have been looking forward to the personal version of Vue. I wanted to make some gadgets to experience the mini program, but then I was too busy with my work to take action. Now, during the period of job hunting, I spent 4 days to develop the mini program version of the forum based on the development interface provided by Vue.

1. Main Functions:

  • View and collect forum posts
  • Log in to publish new posts
  • Comment and message management

2. Directory structure

| - README. Md < = project introduction | -- app. Js < = main logical file | -- app. Json < = global configuration file | -- app. WXSS public style file | - component < < = = | component library | - timeTeanslate < = time format transformation components | | - wxParse < = rich text analysis components | | - weui < = weui style library | - pages < = page file | | - detail | | - index | | - user | | - API. Js < = interface file | | -- const. Js < = constant definition file | - static < = static resources | | - imageCopy the code

3. Effect demonstration

3.1 the home page

3.2 Article Details

3.3 log in

3.4 Personal Center

3.5 Publishing Articles

3.6 My collection

3.7 My message

4. To summarize

4.1 Basic functions of applets

  • Applets file type:
Js -- -- -- -- -- -- -- -- -- -- the main logic json -- -- -- -- -- -- -- -- the project configuration file that is responsible for the color window and so on WXML -- -- -- -- -- -- -- similar to the HTML file WXSS -- -- -- -- -- -- -- similar to the CSS fileCopy the code
  • Create a page:

Create a page folder under the page folder, create 4 necessary basic files in the folder, and configure the route in app.json:

{
  "pages": ["pages/index/index"."pages/detail/detail"."pages/user/user/user"."pages/user/login/login"."pages/user/message/message"."pages/user/collect/collect"."pages/user/newtopic/newtopic"]}Copy the code
  • Make an API request:
Wx. request({url: api.api.post_mark_all, // request url method:'POST'// Data: {'accesstoken': token // argument}, success:function (res) {
        if (res.data.success) {
          wx.showToast({
            title: 'Mark success',
            icon: 'success',
            duration: 1000
          })
          that.getMessage()
        }else {
          wx.showToast({
            title: res.data.error_msg,
            icon: 'success',
            duration: 1000
          })
Copy the code
  • Local cache As there is no Vuex status management tool, some common data is stored in the local cache, such as login status, accesstoken, and user information. You can manipulate the local cache by:
Wx.setstorage () // Async wx.setStoragesync () // async wx.getStorage() // async wx.getStoragesync () // async // clear Wx.clearstorage () // Asynchronous wx.clearStoragesync () // SynchronousCopy the code
  • Page lifecycle methods:
OnLoad // page load onReady // page render complete onShow // page display onHide // page hide onUnload // page unloadCopy the code

4.2 Unimplemented functions

Due to time constraints, the following two features are not yet complete:

  • The ability to respond to a specific user

  • Thumb up function

4.3 Places to be optimized

  • Rich text parsing of articles

  • State management of applets

4.4 Recommended components and libraries

  • WxParse rich text parsing component
  • Weui wechat official UI library

The last

Github address of the project: github.com/Ghostdar/we…

Welcome to star!