Recently in the study of small program development, sorted out some things learned today:

  1. inapp.jsonIn the file, rankedpagesThe first path to the property (which is an array) is the first page shown when the applet is opened

  1. inpagesUnder each page of the folder, there will be a configuration file i.ejsonFile, we can add properties to the objects in it to do some configuration for the current page, such asnavigationBarTitleTextThis property controls the header text content displayed above the applet

  1. App.wxss is a global style configuration, we generally write the style of the corresponding page in the WXSS file in the corresponding folder of each page, these styles will only take effect in the corresponding page, do not worry about contamination to other pages. Generally, we will put some common style extract in app.wxss, so that when we want to use it, we can directly add the class name to the corresponding tag

  2. For static assets, like pictures, we usually create an assets folder in the outer layer, right

  3. When setting the background image, be careful not to use the local address (absolute or relative path) as the URL path. Correct setting method:

  • With the image on the line, we can upload the image to the line ahead of time, and then assign the path with the HTTP address prefixed tobackgroundProperties of theurl
  • Turn the picture intobase64Code, and then assign the code tobackgroundAttribute (this code is very long, so it is not recommended to use this method to display images in large numbers)
  • Of course, display pictures can also use small proceduresimageComponent, this component is similar to the one we used beforeimgTags are very similar, just insrcProperty to display the image correctly, enter path, local path, online path,base64Code and so on can be displayed normally
  1. imageComponent can pass onemodeProperty, this property is to control the picture cropping, zoom mode, we mainly use two property values, one isaspectFitAnd the other one isaspectFill. The reason for this is simple: both values keep the aspect ratio of the image scaled so that the image appears relatively natural, but there are differences between them:
  • AspectFit: The simple idea is to enlarge or shrink the image in equal proportions, and then stop enlarging or shrinking the image immediately when one of the sides meets the requirements
  • AspectFill: It simply means to enlarge or shrink an image to equal proportions, and then stop enlarging or shrinking the image until both sides are satisfied
  • We end up seeing images in the middle, so sometimes the larger the device, the more content the user will see

  1. If we want the user to perform some action or jump to a page after clicking on a TAB, we can add it to the componentbind:tapProperty, the property value can be filled in the name of the function to be executed, the function is written inPageMethod passed into the object. Make sure it’s a string because it automatically looks for a method in the object based on the property name
<view class="login-btn" bind:tap="toLogin">Copy the code

By the way, in applets we can take the wX global object anywhere and call the interface on it, such as the navigateTo method in the following code, which accepts an object:

NavigateTo saves the current page and jumps to a page in the app. But you cannot jump to the Tabbar page. Use wx.navigateBack to return to the original page. The page stack in the applets is up to ten layers.

Page({ toLogin() { wx.navigateTo({ url: '.. /login/login', success() { console.log('success'); }}}})Copy the code