Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Cloud development links and pictures

May 22, 2021 Mini Program Cloud Development Study Guide

The contents of the previous sections let our small program have text, but the content form of the small program is not rich enough, such as no links, no pictures and other elements, and these elements in the small program are also implemented through components.

Navigator components

In the small program, we add links to the page through the navigator component. Some pages can be seen when we open the small program, while others require us to click on the link to switch pages to see, these we can call the secondary page.

Technical documentation: the "navigator component technical documentation" (https://www.w3cschool.cn/weixinapp/weixinapp-navigator.html )

Level 2 page

To give the secondary page a clearer structure to tabBar's page, we can create a new page to jump under the tabBar's corresponding page folder. For example, our first tabBar is home, where home will jump the secondary page, we are built in the home folder.

We also create a new page imgshow in the pages configuration item, the name can be customized so that the contents of the pages configuration item are as follows: 

  1. "pages/home/home",
  4.     "pages/home/imgshow/imgshow",
  7.     "pages/list/list",
  10.     "pages/partner/partner",
  13.     "pages/more/more"

Then let's add the following code to home.wxml on the home page 

  1. <view class="index-link">
  4.   <navigator url="./../home/imgshow/imgshow" class="item-link">让小程序显示图片</navigator>
  7. </view>

In the code above, we nested the navigator component in the view component, and of course it's icing out. This nesting is often used to write a very complex page.

Since the navigator component doesn't add a style, it's not visually visible that it's a clickable link, and we add a style to it in home.wxss: 

  1. .item-link{
  4.   margin: 20px;
  7.   padding:10px 15px;
  10.   background-color: #4ea6ec;
  13.   color: #fff;
  16.   border-radius: 4px;
  19. }

url is a page jump link, you pay attention to the way this path is written, we can also write the above link form as the following code: 

  1. /pages/home/imgshow/imgshow

Both paths point to the imgshow page.

Small task: Why does the path to the page have two imgshowshow? F or example, what page /pages/home/imglist corresponds to? Add a look at the pages configuration item to see the effect.

Relative path and absolute path

Relative path

Note that the paths we used earlier are basically relative paths, and the relative paths use the "/" character as a separate character for the directory.

  • "./" stands for the current directory , img src , "./img/icon.jpg" / /> equivalent to "lt;img src" "img/icon.jpg" />
  • “.. /" represents the next level of directory
  • "/" The current root.jpg directory is relative to the directory;

Small task: Do you know what the current root is? / pages / home / imgshow / imgshow and: / . /home / imgshow / imgshow These two writings do you understand why they point to the same path?

To manage picture resources, link (page) resources, audio resources, video resources, wxss style resources, and other internal and external resources, we must master the path knowledge. We will often use this knowledge later.

Absolute path

So what is an absolute path? Web links such as: 

  1. 7n.w3cschool.cn/attachments/knowledge/202006/77455.png

This is the absolute path, and there's C:?Windows?System32, which starts with the disk character and is also the absolute path. Usually more than paths are used.

Image component

How can a good-looking web page get fewer pictures? The little program adds pictures in the form of an image component.

Technical documentation: Image component technical documentation

Let's first put the picture we want to display in the program's image folder, and then add the following code to the imgshow.wxml under the imgshow page: 

  1. <view id="imgsection">
  4.   <view class="title">小程序显示图片</view>
  7.   <view class="imglist">
  10.     <image class="imgicon" src="/image/icon-tab1.png"></image>
  13.   </view>
  16. </view>

Note that the link to the picture is our previous tab icon link, which is that the link comes from the local folder of the small program. Maybe your picture will be named differently, mainly depending on the situation.

So our pictures are displayed in the small program

If we don't process the style of the picture, such as height and width, the picture display will be distorted. This is because the small program adds a default width and height to the picture, with a width of 300px and a height of 225px.

Image light display is not enough, many times we will show the size of the picture has requirements, or the margin requirements, using the previous knowledge, we can also add some css style to the image component. For example, we added it in imgshow.wxss 

  1. .imglist{
  4.   text-align: center;
  7. }
  10. .imglist .imgicon{
  13.   width: 200px;
  16.   height: 200px;
  19.   margin: 20px;
  22. }

Cloud storage

We can put the pictures in the local folder of the small program, or we can put the pictures on the Internet. S o how do you link a picture to others? This time you need a dedicated server for storing pictures (picture bed).

Free picture bed: Tencent cloud object storage COS

Since we have previously registered a small program, you can choose other login methods in the WeChat public number login, login click on the upper right corner console, you can enter the background, drop down the cloud product in the toolbar, find the storage of the following object storage, in the left menu bucket list to create a bucket, just pay attention to change access to public reading private writing, the other according to the instructions to do their own.

Create a bucket bucket bucket, and you can upload the image to the object storage server and share the link and test it at imgshow.wmxl: 

  1. <view class="imglist">
  4.     <image class="imgitem" src="7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
  7. </view>

Dimension unit rpx

The above network picture is deformed, in order to make the picture do not deform, then we need to add a wxs style to the picture, there is a problem here, the width of this picture is 1684px, height of 998px, and the width of the phone is not so high pixels. W hat should we do if we want the picture to be fully displayed on our phone without deformation? One way is that we can use the dimension unit rpx.

Technical documentation: Size unit rpx

In the small program, all the phone screen width is 750rpx, we can reduce the picture ratio. For example, style a picture: 

  1.  .imglist .imgitem{
  4.   width: 700rpx;
  7.   height: 415rpx;
  10.   margin: 20rpx;
  13. }

With rpx this size unit, we can determine the precise position and precise size of an element in a small program, but this size unit processing pictures often need to be difficult to change, let's look at the following treatment.

Cropping of the picture

Since our pictures may vary in size, or because the sizes of iPhones and Android phones vary and our requirements for image display vary, the applet needs to crop the images in order for our images to look good.

The small program is a mode way to crop the picture, you can read the image component about 13 modes of mode description.

Technical documentation: Image component technical documentation

If we want to deal with the picture above, what should we do? A ccording to the technical documentation, we can add a widthFix mode to the image component: the width remains the same, the height changes automatically, and the aspect ratio of the original image remains unchanged. 

  1. <view class="imglist">
  4.     <image class="imgitem" mode="widthFix" src="7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
  7. </view>

Then add the wxss style to the picture: 

  1. .imglist .imgitem{
  4.   width: 100%;
  7. }

This means that the width of the picture is set to a percentage style, and the height changes automatically, keeping the original aspect ratio unchanged.

Percentage is a very important unit for layout and definition of size, such as web pages, mobile, etc

Of course there will be such a requirement, we want the picture to be displayed in full screen, but the designer only reserved a very small height for the picture, so that we have to make certain cuts to the picture, we can write in imgshow.wxml. 

  1. <view class="imglist">
  4.      <image class="imgfull" mode="center" src="7n.w3cschool.cn/attachments/knowledge/202006/77455.png"></image>
  7.   </view>

Add some styles to imgshow.wxss 

  1. .imglist .imgfull{
  4.   width: 100%;
  7.   height: 100px;
  10. }

You can experience it on your phone with the developer tool and the QR code generated by scanning the developer tool preview, and replace the mode "center" here with 12 other modes to understand the effect of different modes on image cropping.

Image processing is a very important knowledge point, we need more practice, but the principle and core knowledge point are in the style processing and small program image components of wxss, we can apply according to the actual needs.

The background property

Background properties are also CSS knowledge, the so-called background properties are to add some color background or picture background to the component. Since the background properties of css, especially when we want to use a picture as the background of the component, will also involve the location of the background picture and cropping, this and the small program image component of the crop how much there are some similarities, so we put the background properties of CSS here to say

The following are the css background properties that we often use and the corresponding technical documentation, as we emphasized before, the technical documentation is to go through and study in depth, you can first use the background attributes to make some effects

The background property Note
background Set all background properties in one declaration.
background-color Sets the background color of the element.
background-image Set the background image of the element.
background-size Specify the size of the background picture.
background-repeat Set whether and how to repeat the background image.

For example, we can add a background color to the view component of wxmlinfo and a background picture to the view component of the storeweapp: 

  1. #wxmlinfo{
  4.   background-color: #dae7d9;
  7. }
  10. #studyweapp{
  13.   background-image: url(https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/bg.png);
  16.   background-size: cover;
  19.   background-repeat: no-repeat;
  22. }

Note that pictures wxss can only come from servers or drawing beds and cannot be placed in the file structure of small programs, which is a rule of small programs.

The frame of the picture is beautified

We often see a lot of pictures in some apps with fillets or shadows, so how does this work? These effects are achieved through the border properties of css.

You can add a picture of a dark background in the image folder of the small program (if the background of the small program is dark, it is also available if the background of the small program is white). Let's add a fillet and shadow style to the previously added image component, and add the following code at imgshow.wxss: 

  3.  .imglist .img{
  6.   border-radius: 8px;
  9.   box-shadow: 5px 8px 30px rgba(53,178,225,0.26);
  12. }

The picture has fillets, and with shadows there is some modernity.

One color used here is the rgba color value. RGB before we asked you to check, RGBA (R, G, B, A) R is red value, G is green value, B is blue value, R, G, B value range is 0 to 255, A is Alpha transparency, value 0 to 1, the closer 0 more transparent.

Let's revisit the borders border-radius and box-shadow, and you can click on the link to see the details of the technical documentation.

In addition to fillets, we often have the need to make pictures round, let's look at specific examples. First enter the following code in the wxml file, add a logo picture, 

  1. <view class="imglist">
  4.     <image class="circle" mode="widthFix" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/logo.jpg" rel="external nofollow" ></image>
  7. </view>

Then add the appropriate css style in the corresponding wxss file, 

  1. .imglist .circle{
  4.   width: 200px;
  7.   height: 200px;
  10.   border-radius: 100%;
  13. }

That is, we only need to define the length and width of the picture, and then define the border-radius for 100% to make the picture into a circle.

View, navigator, image component nesting

Earlier we learned to add a text to the Navigator component to enable a jump by clicking on the text, and the Navigator component can also nest the view component, for example, if we click on a piece of content will make a jump. Like view components, Navigator components can be nested.

For example, let's enter the following code in home.wxml: 

  1. <view class="event-list">
  4.     <navigator url="/pages/home/imgshow/imgshow" class="event-link">        
  7.         <view class="event-img">
  10.             <image mode="widthFix" src="https://hackwork.oss-cn-shanghai.aliyuncs.com/lesson/weapp/4/weapp.jpg" rel="external nofollow" ></image>
  13.         </view>
  16.         <view class="event-content">
  19.             <view class="event-title">零基础学会小程序开发</view>
  22.             <view class="event-desc">通过两天集中的学习，你会循序渐进的开发出一些具有实际应用场景的小程序。 </view>
  25.             <view class="event-box">
  28.                 <view class="event-address">深圳南山</view>
  31.                 <view class="event-time">2018年9月22日-23日</view>
  34.             </view>
  37.         </view>
  40.     </navigator>
  43. </view>

Enter the following styles in home.wxss: 

  1. .event-list{
  4.   background-color: #fafbfc;
  7.   padding: 20px 0;
  10.   }
  13. .event-link{
  16.   margin: 10px;
  19.   border-radius: 5px;
  22.   background-color: #fff;
  25.   box-shadow:5rpx 8rpx 10rpx rgba(53,178,225,0.26);
  28.   overflow: hidden;
  31. }
  34. .event-img image{
  37.   width: 100%;
  40.   }
  43. .event-content{
  46.   padding: 25rpx;
  49.   }
  52. .event-title{
  55.   line-height: 1.7em;
  58.   }
  61. .event-desc{
  64.   font-size: 14px;
  67.   color: #666;
  70.   line-height: 1.5em;
  73.   font-weight: 200;
  76.   }
  79. .event-box{
  82.   margin-top: 15px;
  85.   overflow: hidden;
  88.   }
  91. .event-address,.event-time{
  94.   float: left;
  97.   color: #cecece;
  100.   font-size: 12px;
  103.   padding-right: 15px;
  106.   }

Related

How to create a firestore in google cloud?

Cloud development Pictures, caches, and files

How is firestore used in google cloud platform?

Cloud development data binding

How to set up oauth on google cloud platform?

What is google cloud functions?

What are the benefits of using google cloud firestore?

Cloud Development List Rendering and Conditional Rendering

What is the use of cloud or cloud services?

How much does it cost to get google cloud functions?