Recently in the study of small program development, sorted out some things learned today:
- in
app.json
In the file, rankedpages
The first path to the property (which is an array) is the first page shown when the applet is opened
- in
pages
Under each page of the folder, there will be a configuration file i.ejson
File, we can add properties to the objects in it to do some configuration for the current page, such asnavigationBarTitleText
This property controls the header text content displayed above the applet
-
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
-
For static assets, like pictures, we usually create an assets folder in the outer layer, right
-
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 to
background
Properties of theurl
- Turn the picture into
base64
Code, and then assign the code tobackground
Attribute (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 procedures
image
Component, this component is similar to the one we used beforeimg
Tags are very similar, just insrc
Property to display the image correctly, enter path, local path, online path,base64
Code and so on can be displayed normally
image
Component can pass onemode
Property, this property is to control the picture cropping, zoom mode, we mainly use two property values, one isaspectFit
And 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
- 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 component
bind:tap
Property, the property value can be filled in the name of the function to be executed, the function is written inPage
Method 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