“This is the second day of my participation in the Gwen Challenge in November. See details: The Last Gwen Challenge in 2021”

What are the benefits of uniApp

  • Uniapp is a framework based on vUE technology stack. If your original technology stack uses VUE, then using Uniapp to develop small program code will reduce learning cost and facilitate rapid development
  • Uniapp can be compiled from a single set of code to run on multiple platforms, reducing the workload of development and facilitating multi-platform deployment.

Create projects using uniApp

We chose to use Vue-Cil to create the project. In fact, there are two ways to create the project. One is to download the official editor of UniApp and then choose to create the own template project. The other is through the command linevue create -p dcloudio/uni-preset-vue my-projectTo create the project. During the creation process you will be asked to select the project template, so we chose the default template. The directory after creation is as follows. During development, wechat developer tools need to be installed. You can use other editors to write codes, or use the editor provided by UNIApp, which will be more convenient for code running and code publishing.

After importing the project using the built-in editor, you can see the overall directory structure of the project as follows

Run it, see the effect, choose wechat development tool to run, run the project is to see your current code page in which project, you can quickly switch to run the project

NavigationBarTitleText is used to set the top title of the page in page.json, which is the same as the router. The page vue files are stored in the/SRC /page folder.

"pages": [ // The first item in the Pages array represents the application startup page
		{
			"path": "pages/index/index"."style": {
				"navigationBarTitleText": "Applet Home page"}}].Copy the code

Once we understand the relationship between our page and Page. json, we can create three Tabbar pages by modifying page.json to create a basic shelf

"pages": [ // The first item in the pages array represents the application startup page,
    {
            "path": "pages/home/home"."style": {
                    "navigationBarTitleText": "Home page"}}, {"path": "pages/classify/classify"."style": {
    		"navigationBarTitleText": "Classification"}}, {"path": "pages/my/my"."style": {
    		"navigationBarTitleText": "I"}}]."tabBar": {
  	"backgroundColor": "#ffffff"."color":"#A1A1A1"."selectedColor":"# 333333"."list": [{"pagePath": "pages/home/home"."text": "Home page"
  		},
  		{
  			"pagePath": "pages/classify/classify"."text": "Classification"
  		},
  		{
  			"pagePath": "pages/my/my"."text": "I"}},Copy the code