The first application created by uni app


My WeChat public address:Front end cultivation Road, welcome to

Background introduction

After the last article, the official uni app tutorial, learning handwriting, I started to do this project.

At present, the overall framework has been initially set up. Adhering to the principle of taking it from the society and giving back to the society, I open-source this project to GitHub uni shop to develop and expand the uni app community. There must be some shortcomings and thoughtlessness in the project. You are welcome to correct and propose issues.

Because this is a real project, for the professional ethics of a qualified programmer, the real data part of the project will not be open source. In order to improve the overall fluency and help their own development, the data part adopts the fake data simulated by easy mock. Friends in need can modify the interface by themselves.

This project is similar to a wechat, or to imitate a wechat application. Including chat, group chat, circle of friends and so on. Due to my limited level, the preliminary plan is only to complete one-to-one chat function, excluding other functions. At present, the chat function has not been realized, because I have not done this application.

What’s more, I don’t know the purpose of imitating a wechat completely. Or is it legal to apply for app store? Or is it infringing Tencent wechat? Hope to have friends who know, can leave a message for me.

In addition to these puzzles, for this project alone, through this process, what you would not have, through a period of learning and practice, is finally realized. I think this is a programmer’s passion for the program. Make impossible possible, and make impossible to learn.

directory structure

┌ - Components uni app component directory
The reusable a component of comp-a.vue
├├ - hybrid directory for storing local web pages
├├ - purpose of platforms to store special pages for each platform
├├├├├├├├ - directory for storing business page files
│  ├─index
Page │└ - index.vue index
│  └─list
└ - list.vue list page
├ - where static stores static resources (such as pictures, videos, etc.) referenced by applications. Note: static resources can only be stored here
├ - main.js Vue initializes the entry file
├ - app.vue application configuration, used to configure app global style and monitor application life cycle
├├ - configure the package information of application name, appid, logo, version, etc. in manifest.json
└ - configure page routing, navigation bar, tab and other page class information of pages.json

The above is the directory and files contained in a uni app project. You can view the details through the directory structure.

Knowledge points

Simply list the components and related technologies used in the project, and consult the official manual for details.

  • Pages.json: used for global configuration of uni app, determining the path of page file, window performance, setting multiple tabs, etc. The project includes modifying the title text, modifying the transparent title bar of the startup page, starting the specified page of the development environment, setting the bottom tab and icon text, etc., which are all realized by modifying this file.
  • Vuex: a state management pattern developed specifically for vue.js applications. Because the project simulates the process of user login, it uses vuex to manage user login status, and stores user information, including avatar, nickname, account number and other information.
  • Uni.setstoragesync: stores data in the key specified in the local cache. Because vuex is not a persistent state, a little bit of the user shuts down the program, and then starts the program again, the user information will be lost. The solution I come up with here is to use storage to store user information in the local cache.
  • Uni.relaunch (object): close all pages and open to a page in the application. The main difference of this interface is to turn off all the current pages and open a new one. Anduni.navigateTo(OBJECT)Different.navigateToInterface is to open a new page on the current page.
  • Use code blocks to create component templates directly: in hbuilder x, there are many code blocks built in. Flexible use of code blocks can improve many development efficiency.
  • Debugging with chrome: the latest version of hbaliderx is ready to develop H5 programs. And you can debug the program in Chrome, feeling more comfortable than debugging in WeChat developer tools.
  • Onpulldownrefresh: listens to the page user drop-down refresh event. Because I didn’t want to understand how to realize the real-time synchronization process of wechat chat function, so I temporarily let users manually refresh and get the latest messages. The experience is not good ~:-(
  • Index list: in Hello uniapp, for this example, you can make a page similar to wechat address book with reference.
  • QR Code: refer to this page to generate QR code.
  • Scan scan QR Code: refer to this example to realize scan QR code.

There are so many knowledge points, and the rest are specific details. Just read the code or official manual.

Bug fixed

  • Registration page text alignment bug. I thought it could be solved by using escape characters, just like in browser. It was used in project. , but it is found that in some androids, it will fail. So it’s changed to CSS to align the two ends. Using CSS3 justify content implementation.
  • Start page skip button is invalid. The startup page plan does not display the navigation bar. In order to skip the startup page, a skip button is added. But I didn’t think about the height of the navigation bar. Because I thought this navigation bar had been hidden, but in fact, this navigation bar has always existed, just become transparent. If the skip button position is on the navigation bar, it will cause the button to fail. By looking up the forum documents, we found the navigation bar height [example] the native title bar titlenview instructions, which is a fixed height of 44px.

Recommended Today

The way of nonlinear optimization

Mathematical knowledge 1、 Nonlinear functionLinear function is another name of a function of first degree, then nonlinear function means that the function image is not a function of a straight line.Nonlinear functions include exponential function, power function, logarithmic function, polynomial function and so on. 2、 Taylor expansion1. Taylor formula:Taylor’s formula is to add a_ The […]